更新

shuishen

2022-07-18 aa5616320569c996e9b050a4f5fb16ad59f84711

更新

 src/views/land/LandDetail.vue

@@ -1,241 +1,230 @@
<template>
    <div class="wraaper-box farming-detail-box">
      <div class="dd">
        <div class="da">
          <div class="land-img" @click="mod()">
            <img :src=url class="landimg"/>
          </div>
          <div class="cent">
            <div class="l">{{ landName }}</div>
            <div class="ln">{{ dic }}</div>
          </div>
          <div class="dc">占地面积:{{ landArea }}{{ dica }}</div>
          <div class="dck">所属农场:{{ deptname }}</div>
        <div class="dd">
            <div class="da">
                <div class="land-img" @click="mod()">
                    <img :src="url" class="landimg" />
                </div>
                <div class="cent">
                    <div class="l">{{ landName }}</div>
                    <div class="ln">{{ dic }}</div>
                </div>
                <div class="dc">占地面积:{{ landArea }}{{ dica }}</div>
                <div class="dck">所属农场:{{ deptname }}</div>
            </div>
            <div class="dv">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <!-- 种植记录 -->
                    <el-tab-pane label="种养品种" name="tab1">
                        <farmplant></farmplant>
                    </el-tab-pane>
                    <!-- 农事记录 -->
                    <el-tab-pane label="农事记录" name="tab2">
                        <farming></farming>
                    </el-tab-pane>
                    <!-- 采收记录 -->
                    <el-tab-pane label="采收记录" name="tab3">
                        <recovery></recovery>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div class="dv">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- 种植记录 -->
            <el-tab-pane label="种养品种" name="tab1">
              <farmplant
              ></farmplant>
            </el-tab-pane>
            <!-- 农事记录 -->
            <el-tab-pane label="农事记录" name="tab2">
              <farming
              ></farming>
            </el-tab-pane>
            <!-- 采收记录 -->
            <el-tab-pane label="采收记录" name="tab3">
              <recovery
              ></recovery>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <el-dialog
        title="地块位置"
        :visible.sync="gradeBoxVisible1"
        width="width"
        :modal="true"
        :modal-append-to-body="true"
        :append-to-body="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :before-close="dialogBeforeClose"
      >
        <getMapDataInThere
          ref="getMapData"
          id="getMapData"
          @setMapData="setMapData"
        ></getMapDataInThere>
        <el-button>54654</el-button>
      </el-dialog>


        <el-dialog
            title="地块位置"
            :visible.sync="gradeBoxVisible1"
            width="width"
            :modal="true"
            :modal-append-to-body="true"
            :append-to-body="true"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="dialogBeforeClose"
        >
            <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere>
            <el-button>54654</el-button>
        </el-dialog>
    </div>

</template>

<script>
import {mapGetters} from "vuex";
import farmplant from "@/views/farmplant/farmplant.vue";
import farming from "@/views/farm/farmingrecord.vue";
import recovery from "@/views/recovery/recovery.vue";
import getMapDataInThere from "./getMapDataInThere.vue";
import { mapGetters } from "vuex"
import farmplant from "@/views/farmplant/farmplant.vue"
import farming from "@/views/farm/farmingrecord.vue"
import recovery from "@/views/recovery/recovery.vue"
import getMapDataInThere from "./getMapDataInThere.vue"

export default {
  components: {
    farmplant,
    farming,
    recovery,
    getMapDataInThere
  },
  data() {
    return {
      farmId: "",
      activeName: "tab1",
      url: "",
      dica: "",
      deptname: "",
      landArea: "",
      dic: "",
      formC: {},
      gradeBoxVisible1: false,
      option2: {
        index: true,
        tip: false,
        searchMenuSpan: 6,
        height: 583,
        menuWidth: 300,
        border: true,
        align: "center",
        selection: true,
        column: [
          {
            label: "路线展示",
            labelWidth: "0",
            prop: "line",
            className: "mapClass",
            hide: true,
            display: true,
            span: 24,
            formslot: true,
            addDisplay: true
          }
        ],
      }
    };
  },
  computed: {
    ...mapGetters(["userInfo", "permission", "polygons"]),
  },
  created() {
    this.url = this.$route.query.url;
    this.landName = this.$route.query.landName;
    this.dic = this.$route.query.dic;
    this.landArea = this.$route.query.landArea;
    this.dica = this.$route.query.dica;
    this.deptname = this.$route.query.deptname;
    this.form = res.data.data;
    let usePolygons = this.$route.query.landRange
      .split("POLYGON((")[1]
      .split("))")[0]
      .split(",");
    for (let k in usePolygons) {
      usePolygons[k] = {
        lng: +usePolygons[k].split(" ")[0],
        lat: +usePolygons[k].split(" ")[1],
      };
    }
    this.$refs.getMapData.draw(usePolygons);
  },
  methods: {
    mod() {
      this.formC = {};
      this.gradeBoxVisible1 = true;
    components: {
        farmplant,
        farming,
        recovery,
        getMapDataInThere
    },
  },
  watch: {},
    data () {
        return {
            farmId: "",
            activeName: "tab1",
            url: "",
            dica: "",
            deptname: "",
            landArea: "",
            dic: "",
            formC: {},
            gradeBoxVisible1: false,
            option2: {
                index: true,
                tip: false,
                searchMenuSpan: 6,
                height: 583,
                menuWidth: 300,
                border: true,
                align: "center",
                selection: true,
                column: [
                    {
                        label: "路线展示",
                        labelWidth: "0",
                        prop: "line",
                        className: "mapClass",
                        hide: true,
                        display: true,
                        span: 24,
                        formslot: true,
                        addDisplay: true
                    }
                ],
            }
        }
    },
    computed: {
        ...mapGetters(["userInfo", "permission", "polygons"]),
    },
    created () {
        this.url = this.$route.query.url
        this.landName = this.$route.query.landName
        this.dic = this.$route.query.dic
        this.landArea = this.$route.query.landArea
        this.dica = this.$route.query.dica
        this.deptname = this.$route.query.deptname
        // this.form = res.data.data;
        let usePolygons = this.$route.query.landRange
            .split("POLYGON((")[1]
            .split("))")[0]
            .split(",")
        for (let k in usePolygons) {
            usePolygons[k] = {
                lng: +usePolygons[k].split(" ")[0],
                lat: +usePolygons[k].split(" ")[1],
            }
        }
        this.$refs.getMapData.draw(usePolygons)
    },
    methods: {
        mod () {
            this.formC = {}
            this.gradeBoxVisible1 = true
        },
    },
    watch: {},
}
</script>

<style scoped lang="scss">
#getMapData {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
}
.wraaper-box {
  padding: 0 !important;
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: calc(100% - 40px);
    padding: 0 !important;
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
}

.land-img {
  width: 200px;
  height: 200px;
  margin-top: 25px;
  margin-left: 60px;
  float: left
    width: 200px;
    height: 200px;
    margin-top: 25px;
    margin-left: 60px;
    float: left;
}

.cent {
  width: 250px;
  height: 40px;
  margin-top: 25px;
  margin-left: 40px;
  float: left;
  text-align: center;
  line-height: 40px;
    width: 250px;
    height: 40px;
    margin-top: 25px;
    margin-left: 40px;
    float: left;
    text-align: center;
    line-height: 40px;
}

.l {
  width: 120px;
  height: 40px;
  float: left;
  text-align: center;
  line-height: 40px;
    width: 120px;
    height: 40px;
    float: left;
    text-align: center;
    line-height: 40px;
}

.ln {
  width: 120px;
  height: 40px;
  margin-left: 2px;
  float: left;
  text-align: center;
  line-height: 40px;
  display: inline-block;
  vertical-align: 1px;
  border-radius: 3px;
    width: 120px;
    height: 40px;
    margin-left: 2px;
    float: left;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    vertical-align: 1px;
    border-radius: 3px;
}

.dc {
  width: 151px;
  margin-top: 20px;
  margin-left: 340px;
  width: 175px;
    width: 151px;
    margin-top: 20px;
    margin-left: 340px;
    width: 175px;
}
.dck {
  width: 151px;
  margin-left: 340px;
  width: 175px;
    width: 151px;
    margin-left: 340px;
    width: 175px;
}

.landimg {
  width: 200px;
  height: 200px;
    width: 200px;
    height: 200px;
}

.dd {
  padding: 10px;
  wdith: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
    padding: 10px;
    wdith: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.da {
  width: 100%;
  line-height: 60px;
  background: #fff;
    width: 100%;
    line-height: 60px;
    background: #fff;
}

.dv {
  flex: 1;
  line-height: 60px;
  background: #fff;
  width: 100%;
  overflow: hidden;
    flex: 1;
    line-height: 60px;
    background: #fff;
    width: 100%;
    overflow: hidden;
}

</style>

 vue.config.js

@@ -11,11 +11,11 @@
            'vuex': 'Vuex',
            'axios': 'axios',
            'element-ui': 'ELEMENT',
        });
        const entry = config.entry('app');
        entry.add('babel-polyfill').end();
        entry.add('classlist-polyfill').end();
        entry.add('@/mock').end();
        })
        const entry = config.entry('app')
        entry.add('babel-polyfill').end()
        entry.add('classlist-polyfill').end()
        entry.add('@/mock').end()
    },
    css: {
        extract: { ignoreOrder: true }
@@ -26,9 +26,9 @@
        proxy: {
            '/api': {
                //本地服务接口地址
                target: 'http://localhost:89',
                // target: 'http://localhost:89',
                //远程演示服务地址,可用于直接启动项目
                //target: 'https://saber.bladex.vip/api',
                target: 'http://182.106.212.58:8013/api',
                ws: true,
                pathRewrite: {
                    '^/api': '/'
@@ -36,4 +36,4 @@
            }
        }
    }
};
}