Merge branch 'main' of http://47.109.205.240:3000/Web/digital-agriculture-admin

package.json

@@ -96,11 +96,12 @@
     "@vue/cli-service": "4.4.6",
     "babel-eslint": "10.1.0",
     "chalk": "4.1.0",
+    "compression-webpack-plugin": "6.x",
     "connect": "3.6.6",
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",
-    "prettier": "^3.4.2",
     "lint-staged": "10.5.3",
+    "prettier": "^3.4.2",
     "runjs": "4.4.2",
     "sass": "1.32.13",
     "sass-loader": "10.1.1",

src/permission.js

@@ -7,7 +7,7 @@ import { getToken } from '@/utils/auth';
 
 NProgress.configure({ showSpinner: false });
 
-const whiteList = ['/login', '/auth-redirect', '/bind', '/register', '/preview'];
+const whiteList = ['/login', '/auth-redirect', '/bind', '/register', '/preview', '/dataV'];
 
 router.beforeEach((to, from, next) => {
   NProgress.start();

src/views/dataV/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dataScreen-container" :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
     <div class="boxTop">
-      <img src="./img/leftTitle.png" alt="" class="img1">
+      <img src="./img/leftTitle.png" alt="" class="img1" />
       <div class="boxTopRight">
         <div class="index_animation__s5UDk" />
         <ul v-for="(item, index) in titleList" :key="index">
@@ -24,77 +24,80 @@
 
 <script>
 // import './flexible'
-import pageOne from './pageOne'
+import pageOne from './pageOne';
-import pageTwo from './pageTwo'
+import pageTwo from './pageTwo';
-import pageThree from './pageThree'
+import pageThree from './pageThree';
-import pageFour from './pageFour'
+import pageLand from './pageLand';
-import pageFive from './pageFive'
+import pageFour from './pageFour';
+import pageFive from './pageFive';
 export default {
   name: '',
   components: {
     pageOne,
     pageTwo,
+    pageLand,
     pageThree,
     pageFour,
-    pageFive
+    pageFive,
   },
   provide() {
     return {
       getType: () => this.key,
       getX: () => this.scale.x,
-      getY: () => this.scale.y
+      getY: () => this.scale.y,
-    }
+    };
   },
   data() {
     return {
       baseId: null,
       titleList: [
         { name: '首\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0页', type: 'pageOne' },
+        { name: '土地资源', type: 'pageLand' },
         { name: '科技支撑', type: 'pageTwo' },
         { name: '产业基地', type: 'pageThree' },
         { name: '全维监测', type: 'pageFour' },
-        { name: '朔源追朔', type: 'pageFive' }
+        { name: '朔源追朔', type: 'pageFive' },
       ],
       titleImg1: require('./img/1.png'),
       titleImg2: require('./img/2.png'),
       style: {
         width: '1920',
         height: '1080',
-        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
+        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)',
       },
       current: 0,
       key: 'pageOne',
-      scale: {}
+      scale: {},
-    }
+    };
   },
   mounted() {
-    this.setScale()
+    this.setScale();
     /* 窗口改变事件*/
     window.onresize = () => {
-      this.setScale()
+      this.setScale();
-    }
+    };
   },
   methods: {
     handleTabs(item, index) {
       window.addEventListener('resize', () => {
-        this.setScale()
+        this.setScale();
-      })
+      });
       if (index != this.current) {
-        this.current = index
+        this.current = index;
-        this.key = item.type
+        this.key = item.type;
       }
     },
     getScale() {
-      const w = window.innerWidth / this.style.width
+      const w = window.innerWidth / this.style.width;
-      const h = window.innerHeight / this.style.height
+      const h = window.innerHeight / this.style.height;
-      return { x: w, y: h }
+      return { x: w, y: h };
     },
     setScale() {
-      this.scale = this.getScale()
+      this.scale = this.getScale();
-      this.style.transform = 'scaleY(' + this.scale.y + ') scaleX(' + this.scale.x + ') translate(-50%, -50%)'
+      this.style.transform = 'scaleY(' + this.scale.y + ') scaleX(' + this.scale.x + ') translate(-50%, -50%)';
-    }
+    },
-  }
+  },
-}
+};
 </script>
 <style lang="scss" scoped>
 .dataScreen-container {

src/views/dataV/layOut.vue

@@ -8,9 +8,10 @@
       element-loading-text="地图加载中"
       element-loading-spinner="el-icon-loading"
       :style="{ height: 'calc(100vh - 310px)', width: '67%', 'margin-top': '65px', transform: `${scale}` }"
-    />
+    >
+    </div>
     <div class="boxTop" />
-    <div v-if="type != 'pageThree' && type != 'pageFive'" class="boxCentLeft">
+    <div v-if="type != 'pageThree' && type != 'pageFive' &&  type != 'pageLand'" class="boxCentLeft">
       <slot name="one" />
     </div>
     <div class="boxRightTop">

src/views/dataV/layOutLand.vue

@@ -0,0 +1,299 @@
+<template>
+  <div id="landscreen" :style="{ 'background-image': `url(${bg})`, 'background-size': '100% 100%' }">
+    <div
+      v-if="type == 'pageLand'"
+      id="landMap"
+      class="land-center-map-warp"
+      v-loading="loading"
+      element-loading-background="#263840"
+      element-loading-text="地图加载中"
+      element-loading-spinner="el-icon-loading"
+      :style="{ transform: `${scale}` }"
+    >
+      <div class="land-type-map" v-if="type == 'pageLand'">
+        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="doAllChange">全选</el-checkbox>
+        <div style="margin: 15px 0"></div>
+        <el-checkbox-group v-model="checkedlist" @change="doSingleChange">
+          <el-checkbox v-for="item in options" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
+
+    <div v-if="type != 'pageFive' && type != 'pageFour'" class="boxLeftTop">
+      <div class="title">{{ title[0] }}</div>
+      <div class="content">
+        <slot name="five" />
+      </div>
+    </div>
+    <div v-if="type != 'pageFive' && type != 'pageFour'" class="boxLeftCenter">
+      <div class="title">{{ title[1] }}</div>
+      <div class="content">
+        <slot name="five" />
+      </div>
+    </div>
+    <div v-if="type != 'pageFive' && type != 'pageFour'" class="boxLeftBottom">
+      <div class="title">{{ title[2] }}</div>
+      <div class="content">
+        <slot name="four" />
+      </div>
+    </div>
+    <div class="boxTop" />
+    <div v-if="type != 'pageThree' && type != 'pageFive' && type != 'pageLand'" class="boxCentLeft">
+      <slot name="one" />
+    </div>
+    <div class="boxRightTop">
+      <div class="title">{{ title[3] }}</div>
+      <div class="content">
+        <slot name="two" />
+      </div>
+    </div>
+    <div class="boxRightCenter">
+      <div class="title">{{ title[4] }}</div>
+      <div class="content">
+        <slot name="three" />
+      </div>
+    </div>
+    <div class="boxRightBottom">
+      <div class="title">{{ title[5] }}</div>
+      <div class="content">
+        <slot name="six" />
+      </div>
+    </div>
+    <div v-if="type == 'pageFive' || type == 'pageFour'" class="left">
+      <div class="content">
+        <slot name="seven" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mapMixinLand from './mapland';
+export default {
+  name: '',
+  mixins: [mapMixinLand],
+  inject: ['getType', 'getX', 'getY'],
+  props: {
+    bg: String,
+    title: Array,
+    baseId: Number,
+  },
+  data() {
+    return {
+      options: [
+        { name: '旱地', id: '01' },
+        { name: '果园', id: '02' },
+        { name: '水浇地', id: '03' },
+        { name: '沟渠', id: '04' },
+        { name: '田坎', id: '05' },
+        { name: '茶园', id: '06' },
+        { name: '设施农用地', id: '07' },
+      ],
+      checkAll: false,
+      checkedlist: ['01','02','03','04','05','06','07'],
+      isIndeterminate: true,
+    };
+  },
+  // TODO:使用eventBus祖孙传参待优化
+  computed: {
+    type() {
+      return this.getType();
+    },
+    scale() {
+      return `scale(${1 / this.getX()},${1 / this.getY()})`;
+    },
+  },
+  methods: {
+    doAllChange(val) {
+      let list = this.options.map((m) => {
+        return m.id;
+      });
+      this.checkedlist = val ? list : [];
+      this.isIndeterminate = false;
+    },
+    doSingleChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.options.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+#landscreen {
+  width: 100%;
+  height: 100%;
+  .land-center-map-warp {
+    height: 100vh;
+    // width: calc(50% - 40px);
+    // margin-left: calc(25% + 20px);
+    width: 100%;
+    position: relative;
+    .land-type-map {
+      position: absolute;
+      right: calc(25% + 40px);
+      top: 20%;
+      width: 200px;
+      padding: 16px;
+      border-radius: 8px;
+      min-height: 50px;
+      z-index: 9999;
+      background: rgba(255,255,255,0.1);
+    }
+  }
+  #landMap::v-deep {
+    transform-origin: left top;
+    .amap-info-content {
+      background: rgba(13, 29, 39, 0.8);
+      border-radius: 10px;
+      .InfoBox {
+        width: 250px;
+        height: 100px;
+        position: relative;
+        .title {
+          color: #fff;
+          font-size: 18px;
+          border-bottom: 1px solid #fff;
+          height: 40px;
+          line-height: 40px;
+        }
+        .num {
+          height: 60px;
+          color: #ccefff;
+          font-size: 12px;
+          padding-top: 10px;
+          box-sizing: border-box;
+        }
+        .tips {
+          position: absolute;
+          right: -18px;
+          bottom: -9px;
+          width: 50px;
+          height: 26px;
+          line-height: 26px;
+          font-size: 12px;
+          text-align: center;
+          background: #2effb7;
+          border-bottom-right-radius: 10px;
+          border-top-left-radius: 10px;
+        }
+        .type {
+          color: #fff;
+          height: 60px;
+          display: flex;
+          align-items: center;
+          .item {
+            width: 50%;
+          }
+          .tag {
+            background: #203c49;
+            border-radius: 10px;
+            color: #2effb7;
+            font-size: 12px;
+            padding: 4px 12px;
+            display: inline-block;
+            margin: 10px 0;
+          }
+        }
+      }
+    }
+    .amap-info-sharp {
+      border-top-color: rgba(13, 29, 39, 0.8);
+    }
+  }
+  .title {
+    height: 35px;
+    line-height: 35px;
+    padding-left: 43px;
+    background: url('./img/title.png');
+    background-size: 100% 100%;
+    color: #ccefff;
+    font-weight: 900;
+  }
+  .content {
+    height: calc(100% - 35px);
+    padding: 10px;
+    box-sizing: border-box;
+  }
+  .boxTop {
+    height: 75px;
+  }
+  .boxCentLeft {
+    position: absolute;
+    left: 20px;
+    top: 95px;
+    width: 25%;
+    height: 650px;
+    z-index: 200;
+    display: flex;
+  }
+  .boxRightTop {
+    position: absolute;
+    right: 20px;
+    top: 95px;
+    width: 25%;
+    height: 325px;
+    z-index: 200;
+    // background: #0f2b39;
+    background: rgba(16, 43, 57, 0.1);
+  }
+  .boxRightCenter {
+    position: absolute;
+    right: 20px;
+    bottom: calc(100% - 650px - 95px);
+    width: 25%;
+    height: 310px;
+    z-index: 200;
+    // background: #0f2b39;
+    background: rgba(16, 43, 57, 0.1);
+  }
+  .boxLeftBottom {
+    position: absolute;
+    left: 20px;
+    bottom: 20px;
+    width: 25%;
+    height: 300px;
+    z-index: 200;
+    // background: #0f2b39;
+    background: rgba(16, 43, 57, 0.1);
+  }
+  .boxLeftCenter {
+    position: absolute;
+    left: 20px;
+    bottom: calc(100% - 650px - 95px);
+    width: 25%;
+    height: 300px;
+    z-index: 200;
+    // background: #0f2b39;
+    background: rgba(16, 43, 57, 0.1);
+  }
+  .boxLeftTop {
+    position: absolute;
+    left: 20px;
+    top: 95px;
+    width: 25%;
+    height: 325px;
+    z-index: 200;
+    // background: #0f2b39;
+    background: rgba(16, 43, 57, 0.1);
+  }
+  .boxRightBottom {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+    width: 25%;
+    height: 300px;
+    z-index: 200;
+    // background: #0f2b39;
+    background: rgba(16, 43, 57, 0.1);
+  }
+  .left {
+    position: absolute;
+    left: 20px;
+    top: 95px;
+    width: 65%;
+    height: calc(100% - 95px - 20px);
+    z-index: 200;
+  }
+}
+</style>

src/views/dataV/mapland.js

@@ -0,0 +1,218 @@
+import { listDevice } from '@/api/iot/device';
+import { listLand } from '@/api/agriculture/land';
+import { getDicts } from '@/api/system/dict/data';
+const mapMixinLand = {
+  data() {
+    return {
+      area: [],
+      device: [],
+      baseUrl: process.env.VUE_APP_BASE_API,
+      loading: false,
+      landType: [],
+      deviceType: [],
+    };
+  },
+  watch: {
+    baseId: {
+      handler: async function (n) {
+        if (n) {
+          await this.$nextTick();
+          if (this.type == 'pageLand') {
+            this.loading = true;
+            // 获去地块数据
+            const res = await listLand({ baseId: this.baseId });
+            this.area = res.rows;
+
+            // 获取设备数据
+            const res1 = await listDevice({ baseId: this.baseId });
+            this.device = res1.rows.map((item) => ({
+              ...item,
+              imgUrl: item.imgUrl.split(',').length > 1 ? item.imgUrl.split(',')[1] : item.imgUrl,
+            }));
+            this.initMap();
+            getDicts('agriculture_land_type').then((response) => {
+              this.landType = response.data;
+            });
+            getDicts('iot_device_status').then((response) => {
+              this.deviceType = response.data;
+            });
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+  async mounted() { },
+  methods: {
+    /** 初始化map */
+    async initMap() {
+      this.map = new this.AMap.Map('landMap', {
+        // 设置地图容器id
+        mapStyle: 'amap://styles/grey',
+        zoom: 12, // 初始化地图级别
+        doubleClickZoom: false,
+      });
+      await this.createAreaPolygon();
+      // await this.createDevicePoint();
+    },
+    /** 绘制地块 */
+    createAreaPolygon() {
+      const label = [];
+      const overlayGroup = [];
+      this.area.forEach((item) => {
+        if (item.landPath) {
+          const path = [];
+          const pointList = [];
+          let landPath = "99.890621,24.455971|99.890766,24.455854|99.890959,24.456001"
+          // item.landPath.split('|').forEach((point) => {
+          //   path.push(new this.AMap.LngLat(point.split(',')[0], point.split(',')[1]));
+          //   pointList.push([Number(point.split(',')[0]), Number(point.split(',')[1])]);
+          // });
+          landPath.split('|').forEach((point) => {
+            path.push(new this.AMap.LngLat(point.split(',')[0], point.split(',')[1]));
+            pointList.push([Number(point.split(',')[0]), Number(point.split(',')[1])]);
+          });
+          const polygon = new this.AMap.Polygon({
+            path: path,
+            fillColor: item.fillColor,
+            fillOpacity: item.fillOpacity,
+            strokeColor: item.strokeColor,
+            strokeWeight: item.strokeWeight,
+            strokeOpacity: item.strokeOpacity,
+            extData: {
+              ...item,
+            },
+          });
+          polygon.on('click', (e) => {
+            this.createInfoWindow(e);
+          });
+
+          overlayGroup.push(polygon);
+          // 添加地块名称
+          label.push(
+            new this.AMap.Text({
+              text: item.landName,
+              anchor: 'center',
+              position: this.getAreaCenter(pointList),
+              style: {
+                background: 'transparent',
+                color: '#fff',
+                border: 'none',
+                fontSize: '16px',
+              },
+            })
+          );
+        }
+      });
+      // this.map.add(new this.AMap.OverlayGroup(label));
+      this.map.add(new this.AMap.OverlayGroup(overlayGroup));
+      this.map.setFitView(overlayGroup);
+      this.loading = false;
+    },
+    /**  创建设备marker点 */
+    createDevicePoint() {
+      const devicePointList = [];
+      this.device.forEach((device) => {
+        if ((device.longitude, device.latitude)) {
+          const marker = new this.AMap.Marker({
+            icon: new this.AMap.Icon({
+              image: this.baseUrl + device.imgUrl,
+              imageSize: new this.AMap.Size(32, 32),
+            }),
+            position: [device.longitude, device.latitude],
+            title: device.deviceName,
+            anchor: 'bottom-center',
+            extData: {
+              ...device,
+            },
+          });
+          marker.on('click', (e) => {
+            this.createInfoWindow2(e);
+          });
+          devicePointList.push(marker);
+        }
+      });
+       this.map.add(new this.AMap.OverlayGroup(devicePointList));
+      this.loading = false;
+    },
+    /** 获取地块中心点 */
+    getAreaCenter(location) {
+      var total = location.length;
+      var X = 0;
+      var Y = 0;
+      var Z = 0;
+      location.forEach((lnglat) => {
+        var lng = (lnglat[0] * Math.PI) / 180;
+        var lat = (lnglat[1] * Math.PI) / 180;
+        var x, y, z;
+        x = Math.cos(lat) * Math.cos(lng);
+        y = Math.cos(lat) * Math.sin(lng);
+        z = Math.sin(lat);
+        X += x;
+        Y += y;
+        Z += z;
+      });
+      X = X / total;
+      Y = Y / total;
+      Z = Z / total;
+
+      var Lng = Math.atan2(Y, X);
+      var Hyp = Math.sqrt(X * X + Y * Y);
+      var Lat = Math.atan2(Z, Hyp);
+      return [parseFloat((Lng * 180) / Math.PI), parseFloat((Lat * 180) / Math.PI)];
+    },
+    /** 信息窗体 */
+    createInfoWindow(e) {
+      var info = document.createElement('div');
+      info.className = 'InfoBox';
+      var title = document.createElement('div');
+      title.className = 'title';
+      title.innerHTML = `${e.target._opts.extData.landName}`;
+      var type = document.createElement('div');
+      var typeName = '';
+      this.landType.forEach((item) => {
+        if (item.dictValue == e.target._opts.extData.landType) {
+          typeName = item.dictLabel;
+        }
+      });
+      type.className = 'type';
+      type.innerHTML = `<div class="item">类型：<div class="tag">${typeName}</div></div>
+                            <div class="item">面积：${e.target._opts.extData.landArea}亩</div>`;
+      info.appendChild(title);
+      info.appendChild(type);
+      const infoWindow = new this.AMap.InfoWindow({
+        anchor: 'bottom-center',
+        content: info, // 使用默认信息窗体框样式，显示信息内容
+      });
+      infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()));
+    },
+    createInfoWindow2(e) {
+      var info = document.createElement('div');
+      info.className = 'InfoBox';
+      var title = document.createElement('div');
+      title.className = 'title';
+      title.innerHTML = `${e.target._opts.extData.deviceName}`;
+      var num = document.createElement('div');
+      num.className = 'num';
+      num.innerHTML = `<div>编号：${e.target._opts.extData.serialNumber}</div>`;
+      var tips = document.createElement('div');
+      tips.className = 'tips';
+      var statusName = '';
+      this.deviceType.forEach((item) => {
+        if (item.dictValue == e.target._opts.extData.status) {
+          statusName = item.dictLabel;
+        }
+      });
+      tips.innerHTML = `${statusName}`;
+      info.appendChild(title);
+      info.appendChild(num);
+      info.appendChild(tips);
+      const infoWindow = new this.AMap.InfoWindow({
+        anchor: 'bottom-center',
+        content: info, // 使用默认信息窗体框样式，显示信息内容
+      });
+      infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()));
+    },
+  },
+};
+export default mapMixinLand;

src/views/dataV/pageLand/baseInfo.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="baseInfo">
+    <div class="farm">
+      <div class="img">
+        <img :src="baseInfo.baseImg" alt="" srcset="" />
+      </div>
+      <div class="farmInfo">
+        <div><span>基地名称：</span>{{ baseInfo.baseName }}</div>
+        <div><span>基地负责人：</span>{{ baseInfo.baseLeader }}</div>
+      </div>
+    </div>
+    <div class="info">
+      <div class="item">
+        <img src="../img/icon1.png" alt="" />
+        <div class="num">{{ baseInfo.areaCount }}</div>
+        <div class="label">基地面积（亩）</div>
+      </div>
+      <div class="item">
+        <img src="../img/icon2.png" alt="" />
+        <div class="num">{{ baseInfo.diCount + baseInfo.pengCount }}</div>
+        <div class="label">地块数量（块）</div>
+      </div>
+      <div class="item">
+        <img src="../img/icon3.png" alt="" />
+        <div class="num">{{ baseInfo.germplasmCount }}</div>
+        <div class="label">种养作物（种）</div>
+      </div>
+      <div class="item">
+        <img src="../img/icon4.png" alt="" />
+        <div class="num">{{ baseInfo.batchCount }}</div>
+        <div class="label">种植批次（个）</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { selectBaseInfo } from '@/api/agriculture/dataStatistics';
+export default {
+  data() {
+    return {
+      baseInfo: {},
+      baseUrl: process.env.VUE_APP_BASE_API,
+    };
+  },
+  props: {
+    baseId: Number,
+  },
+  watch: {
+    baseId: {
+      handler: function (n) {
+        selectBaseInfo(this.baseId).then((res) => {
+          this.baseInfo = res.rows[0];
+        });
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.baseInfo {
+  height: 100%;
+  padding-left: 20px;
+  box-sizing: border-box;
+  .farm {
+    height: 40%;
+    display: flex;
+    display: flex;
+    align-items: center;
+    .img {
+      width: 100px;
+      height: 90%;
+      margin-right: 20px;
+      border-radius: 10px;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .farmInfo {
+      height: 100%;
+      padding: 12px 0;
+      color: #ccefff;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      div {
+        font-size: 18px;
+        span {
+          color: #8ea5b5;
+        }
+      }
+    }
+  }
+  .info {
+    height: 60%;
+    display: flex;
+    .item {
+      flex: 1;
+      height: 100%;
+      font-size: 24px;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      img {
+        width: 30px;
+      }
+      .label {
+        color: #fff;
+        font-size: 16px;
+      }
+      &:nth-of-type(1) {
+        color: #2effb7;
+      }
+      &:nth-of-type(2) {
+        color: #099aff;
+      }
+      &:nth-of-type(3) {
+        color: #32ebf2;
+      }
+      &:nth-of-type(4) {
+        color: #fcde1f;
+      }
+    }
+  }
+}
+</style>

src/views/dataV/pageLand/farmTask.vue

@@ -0,0 +1,165 @@
+<template>
+  <div style="height: 100%">
+    <div class="farmTask">
+      <div class="echarts">
+        <div class="pie" id="taskInfo"></div>
+        <div class="detail">
+          <div class="info">农事任务详情：<span @click="showDetail">点击查看明细></span></div>
+          <div class="progress">
+            <div>农事任务进度：</div>
+            <el-progress style="width: 65%" :percentage="percentage"></el-progress>
+          </div>
+        </div>
+      </div>
+      <div class="info">
+        <div class="item" v-for="item in taskTotal" :key="item.id">
+          <div class="num">{{ item.value }}</div>
+          <div class="label">{{ item.name }}任务(项)</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { selectTaskInfo } from '@/api/agriculture/dataStatistics';
+import { pie, autoHover } from '../echartsOption';
+export default {
+  data() {
+    return {
+      percentage: 0,
+      taskTotal: [],
+    };
+  },
+  props: {
+    baseId: Number,
+  },
+  watch: {
+    baseId: {
+      handler: async function (n) {
+        if (n) {
+          const { rows } = await selectTaskInfo(this.baseId);
+          this.taskTotal = rows;
+          //已分配 已完成 未分配 进行中
+          await this.$nextTick();
+          //完成率统计
+          let total = rows.reduce((sum, item) => sum + item.value, 0);
+          this.percentage = total == 0 ? 0 : Number(((rows[1].value / total) * 100).toFixed(1));
+          //饼图赋值
+          let option = {
+            color: this.$colorList,
+            series: [
+              {
+                type: 'pie',
+                radius: ['75%', '90%'],
+                avoidLabelOverlap: false,
+                itemStyle: {
+                  borderRadius: 2,
+                },
+                label: {
+                  show: false,
+                  position: 'center',
+                  color: '#fff',
+                  textBorderColor: 'transparent',
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                    fontSize: 14,
+                    formatter: `{b}\n{d}%`,
+                  },
+                },
+                labelLine: {
+                  show: false,
+                },
+                data: rows,
+              },
+            ],
+          };
+          let myChart = this.$echarts.init(document.getElementById('taskInfo'));
+          myChart.setOption(option);
+          autoHover(myChart, option, 3000);
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    showDetail() {
+      this.$emit('show');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.farmTask {
+  height: 100%;
+  padding-left: 20px;
+  box-sizing: border-box;
+  .echarts {
+    height: 50%;
+    display: flex;
+    .pie {
+      height: 100%;
+      width: 120px;
+      margin-right: 20px;
+    }
+    .detail {
+      flex: 1;
+      color: #fff;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 20px 0;
+      box-sizing: border-box;
+      .progress::v-deep {
+        display: flex;
+        align-items: center;
+        .el-progress__text {
+          color: #fff;
+        }
+        .el-progress-bar__outer {
+          height: 20px !important;
+        }
+      }
+      span {
+        color: #2effb7;
+        cursor: pointer;
+      }
+    }
+  }
+  .info {
+    height: 50%;
+    display: flex;
+    .item {
+      flex: 1;
+      height: 100%;
+      font-size: 20px;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      .num {
+        font-size: 26px;
+      }
+      .label {
+        color: #fff;
+        font-size: 16px;
+      }
+      &:nth-of-type(1) {
+        color: #2effb7;
+      }
+      &:nth-of-type(2) {
+        color: #099aff;
+      }
+      &:nth-of-type(3) {
+        color: #32ebf2;
+      }
+      &:nth-of-type(4) {
+        color: #fcde1f;
+      }
+    }
+  }
+}
+</style>

src/views/dataV/pageLand/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="industrialBase">
+    <layOutLand :baseId="baseId" :title="title">
+      <template v-slot:two>
+        <land-type-compose :baseId="baseId"></land-type-compose>
+      </template>
+      <template v-slot:three>
+        <land-type-distribution :baseId="baseId"></land-type-distribution>
+      </template>
+      <template v-slot:four>
+        <land-area-total :baseId="baseId"></land-area-total>
+      </template>
+      <template v-slot:five>
+        <plant-area :baseId="baseId"></plant-area> 
+      </template>
+      <template v-slot:six>
+        <land-type-area :baseId="baseId"></land-type-area> 
+      </template>
+    </layOutLand>
+    <el-dialog :visible.sync="show" width="60%" custom-class="taskDetail" :modal="false">
+      <div slot="title">农事任务</div>
+      <task :baseId="baseId"></task>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import layOutLand from '../layOutLand.vue';
+import baseInfo from './baseInfo.vue';
+import productPrices from './productPrices.vue';
+import farmTask from './farmTask.vue';
+import plantArea from './plantArea.vue';
+import landTypeCompose from './landTypeCompose.vue';
+import landTypeDistribution from './landTypeDistribution.vue';
+import landTypeArea from './landTypeArea.vue';
+import landAreaTotal from './landAreaTotal.vue';
+import task from './task.vue';
+export default {
+  components: {
+    layOutLand,
+    baseInfo,
+    productPrices,
+    farmTask,
+    plantArea,
+    landTypeCompose,
+    landTypeDistribution,
+    landTypeArea,
+    landAreaTotal,
+    task,
+  },
+  props: {
+    baseId: Number,
+  },
+  data() {
+    return {
+      title: ['耕地面积统计', '农村土地资源项目', '项目效益分析', '耕地类型', '根底类型面积统计','作物情况'],
+      show: false,
+    };
+  },
+  watch: {
+    baseId: {
+      handler: function (n) {},
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.industrialBase::v-deep {
+  height: 100%;
+  width: 100%;
+  .taskDetail {
+    .el-dialog__header {
+      background: #0b2439;
+      color: #fff;
+    }
+    .el-dialog__body {
+      background: #0b2439;
+    }
+  }
+}
+</style>

src/views/dataV/pageLand/landAreaTotal.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="land-area-total-warp" id="landAreaTotal"></div>
+</template>
+
+<script>
+import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
+import { bar, autoHover } from '../echartsOption';
+export default {
+  data() {
+    return {
+      datalist: [],
+    };
+  },
+  props: {
+    baseId: Number,
+  },
+  watch: {
+    baseId: {
+      handler: async function (n) {
+        if (n) {
+          await this.$nextTick();
+          const { rows } = await selectBatchInfo(this.baseId);
+          this.datalist = [
+            { name: '凤山镇', value: 3.5 },
+            { name: '勐佑镇', value: 1.2 },
+            { name: '三岔河镇', value: 3.0 },
+            { name: '小湾镇', value: 0.4 },
+            { name: '洛党镇', value: 0.9 },
+            { name: '雪山镇', value: 1.2 },
+            { name: '营盘镇', value: 3.2 },
+            { name: '郭大寨乡', value: 1.3 },
+            { name: '大寺乡', value: 3.5 },
+            { name: '鲁史镇', value: 0.4 },
+            { name: '诗礼乡', value: 0.9 },
+            { name: '新华乡', value: 1.1 },
+            { name: '腰街乡', value: 1.5 },
+          ];
+          let option = {
+            tooltip: {
+              trigger: 'axis',
+              showContent: false,
+              axisPointer: {
+                type: 'shadow',
+                crossStyle: {
+                  color: '#999',
+                },
+              },
+            },
+            grid: {
+              left: 30,
+              top: 20,
+              right: 20,
+              bottom: 20,
+            },
+            xAxis: {
+              type: 'category',
+              // data: rows.map((item) => item.name),
+              data: this.datalist.map((item) => item.name),
+              axisLabel: {
+                color: '#fff',
+              },
+              splitLine: {
+                show: false, // 显示分割线
+                lineStyle: {
+                  type: 'dashed', // 设置为虚线
+                  width: 0.5, // 分割线宽度
+                },
+              },
+            },
+            yAxis: {
+              type: 'value',
+              axisLabel: {
+                color: '#fff',
+              },
+              splitLine: {
+                show: false, // 显示分割线
+                lineStyle: {
+                  type: 'dashed', // 设置为虚线
+                  width: 0.5, // 分割线宽度
+                },
+              },
+            },
+            series: [
+              {
+                // data: rows.map((item) => item.value),
+                data: this.datalist.map((item) => item.value),
+                type: 'bar',
+                emphasis: {
+                  label: {
+                    show: true,
+                    fontSize: 12,
+                    formatter: '{c}万亩',
+                    position: 'top',
+                    color: '#fff',
+                    textBorderColor: 'transparent',
+                  },
+                },
+                barWidth: 20,
+                itemStyle: {
+                  normal: {
+                    borderRadius: [20, 20, 0, 0],
+                    color: {
+                      type: 'linear', // 线性渐变
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      colorStops: [
+                        { offset: 0, color: '#99dcf3' },
+                        { offset: 1, color: '#01589c' },
+                      ],
+                      global: false, // 默认为 false
+                    },
+                    // color: (params) => {
+                    //   return this.$colorList[params.dataIndex];
+                    // },
+                  },
+                },
+              },
+            ],
+          };
+          let myChart = this.$echarts.init(document.getElementById('landAreaTotal'));
+          myChart.setOption(option);
+          autoHover(myChart, option, 1500);
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="scss" scoped>
+.land-area-total-warp {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/views/dataV/pageLand/landTypeArea.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="land-type-area-warp">
+    <div class="filter-warp">
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          {{ currentType && currentType.id ? currentType.name : '请选择地区' }}
+          <el-icon class="el-icon-arrow-down"><arrow-down /></el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(n, indexn) in typelist" :key="n.id" :command="n"> {{ n.name }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <div id="landTypeArea" class="charts-content"></div>
+  </div>
+</template>
+
+<script>
+import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
+import { bar, autoHover } from '../echartsOption';
+export default {
+  data() {
+    return {
+      typelist: [
+        { name: '勐佑镇', id: '01' },
+        { name: '三岔河镇', id: '02' },
+        { name: '小湾镇', id: '03' },
+        { name: '洛党镇', id: '04' },
+        { name: '雪山镇', id: '05' },
+        { name: '营盘镇', id: '06' },
+        { name: '郭大寨乡', id: '07' },
+        { name: '大寺乡', id: '08' },
+        { name: '鲁史镇', id: '09' },
+        { name: '诗礼乡', id: '010' },
+        { name: '新华乡', id: '011' },
+        { name: '腰街乡', id: '012' },
+      ],
+      currentType: { name: '勐佑镇', id: '01' },
+    };
+  },
+  props: {
+    baseId: Number,
+  },
+  watch: {
+    baseId: {
+      handler: async function (n) {
+        if (n) {
+          await this.$nextTick();
+          const { rows } = await selectBatchInfo(this.baseId);
+          let product = [
+            { name: '旱地', value: 3.5 },
+            { name: '果园', value: 1.2 },
+            { name: '水浇地', value: 3.0 },
+            { name: '沟渠', value: 0.4 },
+            { name: '田坎', value: 0.4},
+            { name: '茶园', value: 3.8 },
+            { name: '设施农用地', value: 0.9 },
+          ];
+          let option = {
+            tooltip: {
+              trigger: 'axis',
+              showContent: false,
+              axisPointer: {
+                type: 'shadow',
+                crossStyle: {
+                  color: '#999',
+                },
+              },
+            },
+            grid: {
+              left: 30,
+              top: 20,
+              right: 20,
+              bottom: 20,
+            },
+            xAxis: {
+              type: 'category',
+              // data: rows.map((item) => item.name),
+              data: product.map((item) => item.name),
+              axisLabel: {
+                color: '#fff',
+              },
+              splitLine: {
+                show: false, // 显示分割线
+                lineStyle: {
+                  type: 'dashed', // 设置为虚线
+                  width: 0.5, // 分割线宽度
+                },
+              },
+            },
+            yAxis: {
+              type: 'value',
+              axisLabel: {
+                color: '#fff',
+              },
+              splitLine: {
+                show: false, // 显示分割线
+                lineStyle: {
+                  type: 'dashed', // 设置为虚线
+                  width: 0.5, // 分割线宽度
+                },
+              },
+            },
+            series: [
+              {
+                // data: rows.map((item) => item.value),
+                data: product.map((item) => item.value),
+                type: 'bar',
+                emphasis: {
+                  label: {
+                    show: true,
+                    fontSize: 12,
+                    formatter: '{c}万亩',
+                    position: 'top',
+                    color: '#fff',
+                    textBorderColor: 'transparent',
+                  },
+                },
+                barWidth: 20,
+                itemStyle: {
+                  normal: {
+                    borderRadius: [20, 20, 0, 0],
+                    // color: (params) => {
+                    //   return this.$colorList[params.dataIndex];
+                    // },
+                    color: {
+                      type: 'linear', // 线性渐变
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      colorStops: [
+                        { offset: 0, color: '#adf5a1' },
+                        { offset: 1, color: '#198905' },
+                      ],
+                      global: false, // 默认为 false
+                    },
+                  },
+                },
+              },
+            ],
+          };
+          let myChart = this.$echarts.init(document.getElementById('landTypeArea'));
+          myChart.setOption(option);
+          autoHover(myChart, option, 1500);
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {},
+  methods:{
+    handleCommand(data) {
+      console.info('handleCommand', data);
+      this.currentType = data;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.land-type-area-warp {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  .filter-warp {
+    width: 100px;
+    height: 100%;
+    .el-dropdown {
+      width: 100px;
+      padding: 0 8px;
+      cursor: pointer;
+      span {
+        color: #fff;
+        font-size: 16px;
+      }
+    }
+  }
+  .charts-content {
+    width: calc(100% - 100px);
+    height: 100%;
+  }
+}
+</style>

src/views/dataV/pageLand/landTypeCompose.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="land-type-compose-warp">
+    <div id="pieChart"></div>
+    <div id="barChart"></div>
+  </div>
+</template>
+
+<script>
+import { autoHover } from '../echartsOption';
+import { selectDeviceInfo } from '@/api/agriculture/dataStatistics';
+export default {
+  data() {
+    return {
+      product: [],
+    };
+  },
+  props: {
+    baseId: Number,
+  },
+  watch: {
+    baseId: {
+      handler: async function (n) {
+        if (n) {
+          await this.$nextTick();
+          let pieChart = this.$echarts.init(document.getElementById('pieChart'));
+          let barChart = this.$echarts.init(document.getElementById('barChart'));
+          const { rows } = await selectDeviceInfo(this.baseId);
+          // this.product = rows;
+          this.product = [
+            { name: '旱地', value: 32 },
+            { name: '果园', value: 12 },
+            { name: '水浇地', value: 35 },
+            { name: '灌溉水田', value: 4 },
+            { name: '茶园', value: 35 },
+            { name: '菜地', value: 12 },
+          ];
+          let option1 = {
+            backgroundColor: 'transparent',
+            color: this.$colorList,
+            series: [
+              {
+                type: 'pie',
+                radius: ['75%', '90%'],
+                avoidLabelOverlap: false,
+                itemStyle: {
+                  borderRadius: 2,
+                },
+                label: {
+                  show: false,
+                  position: 'center',
+                  color: '#fff',
+                  textBorderColor: 'transparent',
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                    fontSize: 14,
+                    formatter: `{b}\n{d}%`,
+                  },
+                },
+                labelLine: {
+                  show: false,
+                },
+                // data: rows,
+                data: this.product,
+              },
+            ],
+          };
+          pieChart.setOption(option1);
+          autoHover(pieChart, option1, 1500);
+
+          let option2 = {
+            backgroundColor: 'transparent',
+            tooltip: {
+              trigger: 'axis',
+              showContent: false,
+              axisPointer: {
+                type: 'shadow',
+              },
+            },
+            grid: {
+              left: 100,
+              top: 20,
+              right: 50,
+              bottom: 20,
+            },
+            yAxis: {
+              type: 'category',
+              // data: rows.map((item) => item.name),
+              data: this.product.map((item) => item.name),
+              axisLabel: {
+                color: '#fff',
+              },
+              splitLine: {
+                show: false, // 显示分割线
+                lineStyle: {
+                  type: 'dashed', // 设置为虚线
+                  width: 0.5, // 分割线宽度
+                },
+              },
+            },
+            xAxis: {
+              type: 'value',
+              axisLabel: {
+                color: '#fff',
+              },
+              splitLine: {
+                show: false, // 显示分割线
+                lineStyle: {
+                  type: 'dashed', // 设置为虚线
+                  width: 0.5, // 分割线宽度
+                },
+              },
+            },
+            series: [
+              {
+                // data: rows.map((item) => item.value),
+                data: this.product.map((item) => item.value),
+                type: 'bar',
+                barWidth: 20,
+                emphasis: {
+                  label: {
+                    show: true,
+                    fontSize: 12,
+                    formatter: '{c}%',
+                    position: 'right',
+                    color: '#fff',
+                    textBorderColor: 'transparent',
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    borderRadius: [0, 20, 20, 0],
+                    color: (params) => {
+                      return this.$colorList[params.dataIndex];
+                    },
+                  },
+                },
+              },
+            ],
+          };
+
+          barChart.setOption(option2);
+          autoHover(barChart, option2, 1500);
+        }
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.land-type-compose-warp {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  #pieChart {
+    width: 30%;
+    height: 100%;
+  }
+  #barChart {
+    width: 70%;
+    height: 100%;
+  }
+}
+</style>

src/views/dataV/pageLand/landTypeDistribution.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="land-type-distribution-warp">
+    <!-- <div id="distributionPieChart"></div> -->
+    <div class="filter-warp">
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          {{ currentType && currentType.id ? currentType.name : '请选择类型' }}
+          <el-icon class="el-icon-arrow-down"><arrow-down /></el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(n, indexn) in typelist" :key="n.id" :command="n"> {{ n.name }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <div id="distributionBarChart"></div>
+  </div>
+</template>
+
+<script>
+import { autoHover } from '../echartsOption';
+import { selectDeviceInfo } from '@/api/agriculture/dataStatistics';
+export default {
+  data() {
+    return {
+      product: [],
+      typelist: [
+        { name: '旱地', id: '01' },
+        { name: '果园', id: '02' },
+        { name: '水浇地', id: '03' },
+        { name: '沟渠', id: '04' },
+        { name: '田坎', id: '05' },
+        { name: '茶园', id: '06' },
+        { name: '设施农用地', id: '07' },
+      ],
+      currentType: { name: '茶园', id: '06' },
+    };
+  },
+  props: {
+    baseId: Number,
+  },
+  watch: {
+    baseId: {
+      handler: async function (n) {
+        if (n) {
+          await this.$nextTick();
+          // let pieChart = this.$echarts.init(document.getElementById('distributionPieChart'));
+          let barChart = this.$echarts.init(document.getElementById('distributionBarChart'));
+          const { rows } = await selectDeviceInfo(this.baseId);
+          // this.product = rows;
+          this.product = [
+            { name: '凤山镇', value: 0.35 },
+            { name: '勐佑镇', value: 0.12 },
+            { name: '三岔河镇', value: 0.35 },
+            { name: '小湾镇', value: 0.4 },
+            { name: '洛党镇', value: 0.9 },
+            { name: '雪山镇', value: 0.12 },
+            { name: '营盘镇', value: 0.32 },
+            { name: '郭大寨乡', value: 0.12 },
+            { name: '大寺乡', value: 0.35 },
+            { name: '鲁史镇', value: 0.4 },
+            { name: '诗礼乡', value: 0.9 },
+            { name: '新华乡', value: 0.12 },
+            { name: '腰街乡', value: 0.15 },
+          ];
+          console.info('landTypeDistribution**************', this.product);
+          let option1 = {
+            color: this.$colorList,
+            series: [
+              {
+                type: 'pie',
+                radius: ['75%', '90%'],
+                avoidLabelOverlap: false,
+                itemStyle: {
+                  borderRadius: 2,
+                },
+                label: {
+                  show: false,
+                  position: 'center',
+                  color: '#fff',
+                  textBorderColor: 'transparent',
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                    fontSize: 14,
+                    formatter: `{b}\n{d}%`,
+                  },
+                },
+                labelLine: {
+                  show: false,
+                },
+                // data: rows,
+                data: this.product,
+              },
+            ],
+          };
+          // pieChart.setOption(option1);
+          // autoHover(pieChart, option1, 1500);
+
+          let option2 = {
+            tooltip: {
+              trigger: 'axis',
+              showContent: false,
+              axisPointer: {
+                type: 'shadow',
+              },
+            },
+            grid: {
+              left: 100,
+              top: 20,
+              right: 50,
+              bottom: 20,
+            },
+            yAxis: {
+              type: 'category',
+              // data: rows.map((item) => item.name),
+              data: this.product.map((item) => item.name),
+              axisLabel: {
+                color: '#fff',
+              },
+              splitLine: {
+                show: false, // 显示分割线
+                lineStyle: {
+                  type: 'dashed', // 设置为虚线
+                  width: 0.5, // 分割线宽度
+                },
+              },
+            },
+            xAxis: {
+              type: 'value',
+              axisLabel: {
+                color: '#fff',
+              },
+              splitLine: {
+                show: false, // 显示分割线
+                lineStyle: {
+                  type: 'dashed', // 设置为虚线
+                  width: 0.5, // 分割线宽度
+                },
+              },
+            },
+            series: [
+              {
+                // data: rows.map((item) => item.value),
+                data: this.product.map((item) => item.value),
+                type: 'bar',
+                barWidth: 10,
+                emphasis: {
+                  label: {
+                    show: true,
+                    fontSize: 12,
+                    formatter: '{c}万亩',
+                    position: 'right',
+                    color: '#fff',
+                    textBorderColor: 'transparent',
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    borderRadius: [0, 10, 10, 0],
+                    color: (params) => {
+                      return this.$colorList[params.dataIndex];
+                    },
+                  },
+                },
+              },
+            ],
+          };
+
+          barChart.setOption(option2);
+          autoHover(barChart, option2, 1500);
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    handleCommand(data) {
+      console.info('handleCommand', data);
+      this.currentType = data;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.land-type-distribution-warp {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  // #distributionPieChart {
+  //   width: 30%;
+  //   height: 100%;
+  // }
+  .filter-warp {
+    width: 100px;
+    height: 100%;
+    .el-dropdown {
+      width: 100px;
+      padding: 0 8px;
+      cursor: pointer;
+      span {
+        color: #fff;
+        font-size: 16px;
+      }
+    }
+  }
+  #distributionBarChart {
+    width: calc(100% - 100px);
+    height: 100%;
+  }
+}
+</style>

src/views/dataV/pageLand/plantArea.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="plantArea" id="plnatArea"></div>
+</template>
+
+<script>
+import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
+import { bar, autoHover } from '../echartsOption';
+export default {
+  data() {
+    return {
+      datalist: [],
+    };
+  },
+  props: {
+    baseId: Number,
+  },
+  watch: {
+    baseId: {
+      handler: async function (n) {
+        if (n) {
+          await this.$nextTick();
+          const { rows } = await selectBatchInfo(this.baseId);
+          this.datalist = [
+            { name: '凤山镇', value: 35 },
+            { name: '勐佑镇', value: 12 },
+            { name: '三岔河镇', value: 30 },
+            { name: '小湾镇', value: 4 },
+            { name: '洛党镇', value: 9 },
+            { name: '雪山镇', value: 12 },
+            { name: '营盘镇', value: 32 },
+            { name: '郭大寨乡', value: 13 },
+            { name: '大寺乡', value: 35 },
+            { name: '鲁史镇', value: 4 },
+            { name: '诗礼乡', value: 9 },
+            { name: '新华乡', value: 11 },
+            { name: '腰街乡', value: 15 },
+          ];
+          let option = {
+            tooltip: {
+              trigger: 'axis',
+              showContent: false,
+              axisPointer: {
+                type: 'shadow',
+                crossStyle: {
+                  color: '#999',
+                },
+              },
+            },
+            grid: {
+              left: 30,
+              top: 20,
+              right: 20,
+              bottom: 20,
+            },
+            xAxis: {
+              type: 'category',
+              // data: rows.map((item) => item.name),
+              data: this.datalist.map((item) => item.name),
+              axisLabel: {
+                color: '#fff',
+              },
+              splitLine: {
+                show: false, // 显示分割线
+                lineStyle: {
+                  type: 'dashed', // 设置为虚线
+                  width: 0.5, // 分割线宽度
+                },
+              },
+            },
+            yAxis: {
+              type: 'value',
+              axisLabel: {
+                color: '#fff',
+              },
+              splitLine: {
+                show: false, // 显示分割线
+                lineStyle: {
+                  type: 'dashed', // 设置为虚线
+                  width: 0.5, // 分割线宽度
+                },
+              },
+            },
+            series: [
+              {
+                // data: rows.map((item) => item.value),
+                data: this.datalist.map((item) => item.value),
+                type: 'bar',
+                emphasis: {
+                  label: {
+                    show: true,
+                    fontSize: 12,
+                    formatter: '{c}个',
+                    position: 'top',
+                    color: '#fff',
+                    textBorderColor: 'transparent',
+                  },
+                },
+                barWidth: 20,
+                itemStyle: {
+                  normal: {
+                    borderRadius: [20, 20, 0, 0],
+                    // color: (params) => {
+                    //   return this.$colorList[params.dataIndex];
+                    // },
+                    color: {
+                      type: 'linear', // 线性渐变
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      colorStops: [
+                        { offset: 0, color: '#b6fdf7' },
+                        { offset: 1, color: '#019c8f' },
+                      ],
+                      global: false, // 默认为 false
+                    },
+                  },
+                },
+              },
+            ],
+          };
+          let myChart = this.$echarts.init(document.getElementById('plnatArea'));
+          myChart.setOption(option);
+          autoHover(myChart, option, 1500);
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="scss" scoped>
+.plantArea {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/views/dataV/pageLand/productPrices.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="productPrices">
+    <div class="box">
+      <div class="label">
+        <div>品种名称</div>
+        <div>单位</div>
+        <div>昨日</div>
+        <div>今日</div>
+        <div>涨跌</div>
+      </div>
+      <vue-seamless-scroll :data="scrollList" class="list" :class-option="defaultOption(scrollList)">
+        <ul class="case-info">
+          <li v-for="(item, index) in scrollList" :key="index">
+            <div>{{ item.type }}</div>
+            <div>{{ item.unit }}</div>
+            <div>{{ item.old }}元</div>
+            <div>{{ item.new }}元</div>
+            <div>{{ ((item.new - item.old) / item.new).toFixed(2) }}% <i class="el-icon-bottom"></i></div>
+          </li>
+        </ul>
+      </vue-seamless-scroll>
+    </div>
+  </div>
+</template>
+
+<script>
+import vueSeamlessScroll from 'vue-seamless-scroll';
+export default {
+  components: {
+    vueSeamlessScroll,
+  },
+  data() {
+    return {
+      scrollList: [
+        {
+          type: '西瓜',
+          unit: 'KG',
+          old: 2,
+          new: 3,
+        },
+        {
+          type: '草莓',
+          unit: 'KG',
+          old: 2,
+          new: 3,
+        },
+        {
+          type: '番茄',
+          unit: 'KG',
+          old: 2,
+          new: 3,
+        },
+        {
+          type: '水蜜桃',
+          unit: 'KG',
+          old: 2,
+          new: 3,
+        },
+        {
+          type: '哈密瓜',
+          unit: 'KG',
+          old: 2,
+          new: 3,
+        },
+        {
+          type: '蓝莓',
+          unit: 'KG',
+          old: 2,
+          new: 3,
+        },
+        {
+          type: '橘子',
+          unit: 'KG',
+          old: 2,
+          new: 3,
+        },
+      ],
+    };
+  },
+  computed: {
+    defaultOption() {
+      return (data) => {
+        return {
+          step: 0.4, // 数值越大速度滚动越快
+          limitMoveNum: this.scrollList.length, // 开始无缝滚动的数据量 this.dataList.length
+          hoverStop: true, // 是否开启鼠标悬停stop
+          direction: 1, // 0向下 1向上 2向左 3向右
+          openWatch: true, // 开启数据实时监控刷新dom
+          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+          waitTime: 0, // 单步运动停止的时间(默认值1000ms)
+        };
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.productPrices {
+  height: 100%;
+  .box {
+    height: 100%;
+    .label {
+      display: flex;
+      background: #203c4999;
+      color: #c5d0d4;
+      height: 30px;
+      line-height: 30px;
+      border-radius: 4px;
+      padding-left: 20px;
+      box-sizing: border-box;
+      div {
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        &:nth-of-type(1) {
+          flex: 1.5;
+        }
+      }
+    }
+    .list {
+      height: calc(100% - 30px);
+      overflow: hidden;
+      .case-info {
+        color: #fff;
+        padding: 0;
+        margin: 0;
+        padding-left: 20px;
+        box-sizing: border-box;
+        li {
+          display: flex;
+          height: 30px;
+          line-height: 30px;
+          div {
+            flex: 1;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            font-size: 13px;
+            &:nth-of-type(1) {
+              flex: 1.5;
+            }
+            &:nth-of-type(3) {
+              color: #099aff;
+            }
+            &:nth-of-type(4) {
+              color: #099aff;
+            }
+            &:nth-of-type(5) {
+              color: #2effb7;
+              .el-icon-bottom {
+                color: #2effb7;
+                font-weight: 900;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dataV/pageLand/task.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="gantt-container">
+    <div class="search">
+      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+        <el-form-item label="任务名称" prop="taskName">
+          <el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable size="small" @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="计划开始日期" prop="psr">
+          <el-date-picker
+            size="small"
+            v-model="queryParams.psr"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="时间范围开始"
+            value-format="yyyy-MM-dd"
+            end-placeholder="时间范围结束"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="info" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" type="info" plain size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="table">
+      <el-table
+        v-loading="loading"
+        element-loading-background="#263840"
+        :data="taskList"
+        :header-cell-style="{ background: '#092944', color: '#fff' }"
+        :row-class-name="tableRowClassName"
+        :cell-style="{ color: '#fff' }"
+      >
+        <el-table-column label="批次名称" align="center" prop="batchName" />
+        <el-table-column label="任务名称" align="center" prop="taskName" />
+        <el-table-column label="计划开始日期" align="center" prop="planStart" width="180" />
+        <el-table-column label="计划结束日期" align="center" prop="planFinish" width="180" />
+        <el-table-column label="实际开始日期" align="center" prop="actualStart" width="180">
+          <template slot-scope="scope">
+            <span>{{ scope.row.actualStart ? scope.row.actualStart : '/' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="实际结束日期" align="center" prop="actualFinish" width="180">
+          <template slot-scope="scope">
+            <span>{{ scope.row.actualFinish ? scope.row.actualFinish : '/' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" prop="status">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.agriculture_batch_task_status" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+        :background="false"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { listBatchTask } from '@/api/agriculture/batchTask';
+export default {
+  name: 'BatchTask',
+  props: {
+    baseId: Number,
+  },
+  dicts: ['agriculture_batch_task_status'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 批次任务表格数据
+      taskList: [],
+      //任务id
+      taskId: null,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        taskName: null,
+        planStart: null,
+        planStartStart: null,
+        planStartEnd: null,
+        planFinish: null,
+        psr: null,
+      },
+    };
+  },
+  watch: {
+    baseId: {
+      handler: function (n) {
+        if (n) {
+          this.getList();
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    /** 查询批次任务列表 */
+    async getList() {
+      this.loading = true;
+      const {
+        queryParams: { psr },
+      } = this;
+      if (psr && Array.isArray(psr) && psr.length == 2) {
+        this.queryParams.params = {
+          planStartStart: psr[0],
+          planStartEnd: psr[1],
+        };
+      }
+      const response = await listBatchTask({
+        baseId: this.baseId,
+        ...this.queryParams,
+      });
+      this.taskList = response.rows;
+      this.total = response.total;
+      this.loading = false;
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm');
+      this.handleQuery();
+    },
+    tableRowClassName({ row, rowIndex }) {
+      return 'even';
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+$colorL1: #0c2438;
+$colorL2: #092944;
+$colorL3: #0d3758;
+$colorL4: #132f41;
+.gantt-container {
+  height: 100%;
+  .table {
+    background: #0b2439;
+    padding: 0 20px;
+    height: calc(100% - 70px - 70px);
+    .gantt {
+      overflow: hidden;
+      position: relative;
+      height: 100%;
+    }
+    ::v-deep .el-table {
+      .even {
+        background: #132f41;
+      }
+    }
+    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+      background-color: rgba(0, 0, 0, 0) !important;
+    }
+  }
+  .search {
+    background: #0b2439;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    position: sticky;
+    top: 0px;
+    z-index: 2;
+    &::v-deep .el-form {
+      color: #fff;
+      .el-form-item__label {
+        color: #b9dbea;
+      }
+      input {
+        border: none;
+        color: #fff;
+      }
+      .el-date-editor {
+        border: none;
+        color: #fff;
+      }
+      .el-input__inner,
+      .el-range-input {
+        background: #132f42;
+      }
+    }
+  }
+}
+
+.pagination-container ::v-deep {
+  height: 50px;
+  background: #0b2439;
+  .el-pagination {
+    .el-pagination__total,
+    .el-pagination__jump {
+      color: #fff;
+    }
+    .el-input__inner,
+    button,
+    .el-pager .number,
+    .el-icon {
+      background: #132f42;
+      color: #fff;
+    }
+    .el-pager li.active {
+      font-weight: 900;
+      font-size: 16px;
+    }
+    input {
+      border: none;
+      color: #fff;
+    }
+  }
+}
+.search ::v-deep .el-form-item {
+  margin-bottom: 0;
+}
+.search ::v-deep .el-form {
+  flex: 1;
+}
+</style>

src/views/system/baseManager/index.vue

@@ -36,8 +36,16 @@
         <el-table-column label="基地负责人" align="center" prop="baseLeader" />
         <el-table-column label="基地负责人电话" align="center" prop="leaderTel" />
         <el-table-column label="基地负责人地址" align="center" prop="baseAddress" />
-        <el-table-column label="基地面积" align="center" prop="baseArea" />
+        <el-table-column label="基地面积" align="center" prop="baseArea">
-        <el-table-column label="基地海拔" align="center" prop="baseAltitude" />
+          <template slot-scope="scope">
+            <span>{{ scope.row.baseArea ? `${scope.row.baseArea}亩` : '' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="基地海拔" align="center" prop="baseAltitude">
+          <template slot-scope="scope">
+            <span>{{ scope.row.baseAltitude ? `${scope.row.baseAltitude}米` : '' }}</span>
+          </template>
+        </el-table-column>
         <!-- <el-table-column label="现场图片" align="center" prop="baseImg" />
         <el-table-column label="基地描述" align="center" prop="baseDes" /> -->
         <!-- <el-table-column label="备注" align="center" prop="remark" />

vue.config.js

@@ -1,13 +1,14 @@
-'use strict'
+'use strict';
-const path = require('path')
+const path = require('path');
+const CompressionWebpackPlugin = require('compression-webpack-plugin');
 
 function resolve(dir) {
-  return path.join(__dirname, dir)
+  return path.join(__dirname, dir);
 }
 
-const name = process.env.VUE_APP_TITLE || '智慧农业智能控制系统' // 网页标题
+const name = process.env.VUE_APP_TITLE || '智慧农业智能控制系统'; // 网页标题
 
-const port = process.env.VUE_PORT || process.env.npm_config_port || 80 // 端口
+const port = process.env.VUE_PORT || process.env.npm_config_port || 80; // 端口
 // vue.config.js 配置说明
 // 官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
 // 这里只列一部分，具体配置参考文档
@@ -35,32 +36,40 @@ module.exports = {
         target: process.env.VUE_APP_SERVER_API_URL,
         changeOrigin: true,
         pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
+          ['^' + process.env.VUE_APP_BASE_API]: '',
-        }
+        },
       },
       '/api/v4': {
         target: process.env.VUE_APP_EMQX_API_URL,
-        changeOrigin: true
+        changeOrigin: true,
         // logLevel: 'debug',
-      }
+      },
     },
     https: false,
-    disableHostCheck: true
+    disableHostCheck: true,
   },
   configureWebpack: {
     name: name,
     resolve: {
       alias: {
-        '@': resolve('src')
+        '@': resolve('src'),
-      }
+      },
-    }
+    },
+    plugins: [
+      // 开启 Gzip 压缩
+      new CompressionWebpackPlugin({
+        test: /\.(js|css|html|svg)$/,
+        threshold: 10240,
+        minRatio: 0.8,
+      }),
+    ],
   },
   chainWebpack(config) {
-    config.plugins.delete('preload') // TODO: need test
+    config.plugins.delete('preload'); // TODO: need test
-    config.plugins.delete('prefetch') // TODO: need test
+    config.plugins.delete('prefetch'); // TODO: need test
 
     // set svg-sprite-loader
-    config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
+    config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end();
     config.module
       .rule('icons')
       .test(/\.svg$/)
@@ -69,9 +78,9 @@ module.exports = {
       .use('svg-sprite-loader')
       .loader('svg-sprite-loader')
       .options({
-        symbolId: 'icon-[name]'
+        symbolId: 'icon-[name]',
       })
-      .end()
+      .end();
 
     config.when(process.env.NODE_ENV !== 'development', (config) => {
       config
@@ -80,10 +89,11 @@ module.exports = {
         .use('script-ext-html-webpack-plugin', [
           {
             // `runtime` must same as runtimeChunk name. default is `runtime`
-            inline: /runtime\..*\.js$/
+            inline: /runtime\..*\.js$/,
-          }
+          },
         ])
-        .end()
+        .end();
+
       config.optimization.splitChunks({
         chunks: 'all',
         cacheGroups: {
@@ -91,28 +101,29 @@ module.exports = {
             name: 'chunk-libs',
             test: /[\\/]node_modules[\\/]/,
             priority: 10,
-            chunks: 'initial' // only package third parties that are initially dependent
+            chunks: 'initial', // only package third parties that are initially dependent
           },
           elementUI: {
             name: 'chunk-elementUI', // split elementUI into a single package
             priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
           },
           commons: {
             name: 'chunk-commons',
             test: resolve('src/components'), // can customize your rules
             minChunks: 3, //  minimum common number
             priority: 5,
-            reuseExistingChunk: true
+            reuseExistingChunk: true,
-          }
+          },
-        }
+        },
-      })
+      });
+
       // eslint-disable-next-line no-sequences
       config.optimization.runtimeChunk('single'),
-      {
+        {
-        from: path.resolve(__dirname, './public/robots.txt'), // 防爬虫文件
+          from: path.resolve(__dirname, './public/robots.txt'), // 防爬虫文件
-        to: './' // 到根目录下
+          to: './', // 到根目录下
-      }
+        };
-    })
+    });
-  }
+  },
-}
+};