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

2025-04-21 15:51:13 +08:00 · 2025-04-21 15:51:13 +08:00 · e39e0ba1d0
commit e39e0ba1d0
parent 61f04ce90e e914ee45de
8 changed files with 218 additions and 107 deletions
--- a/src/views/dataV/layOutLand.vue
+++ b/src/views/dataV/layOutLand.vue
@ -14,7 +14,12 @@
        <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 v-for="item in options" :label="item.id" :key="item.id">
+            {{ item.name }}
+            <div class="select-color-block">
+              <el-color-picker v-model="item.color" size="small" show-alpha :disabled="false" />
+            </div>
+          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
@ -72,12 +77,12 @@ export default {
  data() {
    return {
      options: [
-        { name: '旱地', id: '01' },
-        { name: '果园', id: '02' },
-        { name: '水浇地', id: '03' },
-        { name: '灌溉水田', id: '04' },
-        { name: '茶园', id: '05' },
-        { name: '菜地', id: '06' },
+        { name: '旱地', id: '01', color: '#d96298' },
+        { name: '果园', id: '02', color: '#d9e961' },
+        { name: '水浇地', id: '03', color: '#ba8ae3' },
+        { name: '灌溉水田', id: '04', color: '#88b0d3' },
+        { name: '茶园', id: '05', color: '#efc0ac' },
+        { name: '菜地', id: '06', color: '#80f1b0' },
      ],
      checkAll: false,
      checkedlist: ['01', '02', '03', '04', '05', '06'],
@ -100,13 +105,19 @@ export default {
      });
      this.checkedlist = val ? list : [];
      this.isIndeterminate = false;
-      this.upLayersIds(this.checkedlist);
+      this.upLayersIds(this.checkedlist, this.options);
+    },
+    getColors() {
+      let list = this.options.map((m) => {
+        return m.color;
+      });
+      return list;
    },
    doSingleChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.options.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
-      this.upLayersIds(this.checkedlist);
+      this.upLayersIds(this.checkedlist, this.options);
    },
  },
 };
@ -131,6 +142,27 @@ export default {
      min-height: 50px;
      z-index: 9999;
      background: rgba(255, 255, 255, 0.1);
+      .select-color-block {
+        display: inline-block;
+        vertical-align: middle;
+        width: 20px;
+        height: 20px;
+        border-radius: 2px;
+        ::v-deep {
+          .el-checkbox{
+            margin:8px 0;
+          }
+          .el-color-picker {
+            width: 100% !important;
+            height: 100% !important;
+          }
+          .el-color-picker__trigger{
+            width: 100% !important;
+            height: 100% !important;
+            border:0 !important;
+          }
+        }
+      }
    }
  }
  #landMap::v-deep {
@ -227,7 +259,7 @@ export default {
    height: 325px;
    z-index: 200;
    // background: #0f2b39;
-    background: rgba(16, 43, 57, 0.1);
+    background: rgba(16, 43, 57, 0.5);
  }
  .boxRightCenter {
    position: absolute;
@ -237,7 +269,7 @@ export default {
    height: 310px;
    z-index: 200;
    // background: #0f2b39;
-    background: rgba(16, 43, 57, 0.1);
+    background: rgba(16, 43, 57, 0.5);
  }
  .boxLeftBottom {
    position: absolute;
@ -247,7 +279,7 @@ export default {
    height: 300px;
    z-index: 200;
    // background: #0f2b39;
-    background: rgba(16, 43, 57, 0.1);
+    background: rgba(16, 43, 57, 0.5);
  }
  .boxLeftCenter {
    position: absolute;
@ -257,7 +289,7 @@ export default {
    height: 300px;
    z-index: 200;
    // background: #0f2b39;
-    background: rgba(16, 43, 57, 0.1);
+    background: rgba(16, 43, 57, 0.5);
  }
  .boxLeftTop {
    position: absolute;
@ -267,7 +299,7 @@ export default {
    height: 325px;
    z-index: 200;
    // background: #0f2b39;
-    background: rgba(16, 43, 57, 0.1);
+    background: rgba(16, 43, 57, 0.5);
  }
  .boxRightBottom {
    position: absolute;
@ -277,7 +309,7 @@ export default {
    height: 300px;
    z-index: 200;
    // background: #0f2b39;
-    background: rgba(16, 43, 57, 0.1);
+    background: rgba(16, 43, 57, 0.5);
  }
  .left {
    position: absolute;
--- a/src/views/dataV/mapland.js
+++ b/src/views/dataV/mapland.js
@ -10,6 +10,43 @@ const mapMixinLand = {
      loading: false,
      landType: [],
      deviceType: [],
+      staticArea: [
+        {
+          id: '01',
+          landPath: ["99.88785,24.426105|99.892485,24.424855|99.894545,24.426418|99.89094,24.428137"],
+          fillColor: '#d96298', fillOpacity: 0.8, strokeColor: "#d96298", strokeWeight: 1, strokeOpacity: 0.8,
+        },
+        {
+          id: '02',
+          landPath: ["99.877778,24.414434|99.880525,24.411073|99.883272,24.412245|99.881727,24.414981"],
+          fillColor: '#d9e961', fillOpacity: 0.8, strokeColor: "#d9e961", strokeWeight: 1, strokeOpacity: 0.8,
+        },
+        {
+          id: '03',
+          landPath: 
+          ["99.853174,24.424073|99.850256,24.426105|99.855749,24.426731|99.880812,24.421885",
+            
+          ],
+          fillColor: '#ba8ae3', fillOpacity: 0.8, strokeColor: "#ba8ae3", strokeWeight: 1, strokeOpacity: 0.8,
+        },
+        {
+          id: '04',
+          landPath: ["99.866907,24.415946|99.861243,24.413601|99.859183,24.417196|99.880812,24.421885"],
+          fillColor: '#88b0d3', fillOpacity: 0.8, strokeColor: "#88b0d3", strokeWeight: 1, strokeOpacity: 0.8,
+        },
+        {
+          id: '05',
+          landPath: ["99.865247,24.416309|99.867736,24.411151|99.869796,24.412323|99.86971,24.415684"],
+          fillColor: '#efc0ac', fillOpacity: 0.8, strokeColor: "#efc0ac", strokeWeight: 1, strokeOpacity: 0.8,
+        },
+        {
+          id: '06',
+          landPath: ["99.858209,24.408963|99.86087,24.40396|99.863445,24.406305|99.862243,24.408806"],
+          fillColor: '#80f1b0', fillOpacity: 0.8, strokeColor: "#80f1b0", strokeWeight: 1, strokeOpacity: 0.8,
+        }
+
+      ],
+      overlayGroup:[],
    };
  },
  watch: {
@ -51,33 +88,55 @@ const mapMixinLand = {
        mapStyle: 'amap://styles/grey',
        zoom: 12, // 初始化地图级别
        doubleClickZoom: false,
+        center: [99.920974, 24.592758]
      });
-      await this.createAreaPolygon();
+      await this.createAreaPolygon(true);
      // await this.createDevicePoint();
    },
    /** 绘制地块 */
-    createAreaPolygon() {
+    createAreaPolygon(type, ids,options) {
      const label = [];
-      const overlayGroup = [];
-      this.area.forEach((item) => {
+      let overlayGroupNew = [];
+      // console.info('this.area', this.area)
+      // this.area.forEach((item) => {
+      let areaList = [];
+      if (ids) {
+        if (ids.length > 0) {
+          areaList = this.staticArea.filter((m) => {
+            return ids.includes(m.id)
+          }) || []
+        } else {areaList = [] }
+
+      } else { areaList = this.staticArea }
+    
+      if(areaList.length>0){
+      areaList.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])]);
-          });
+          if( item.landPath &&  item.landPath.length &&  item.landPath.length>0){
+            item.landPath.forEach((k)=>{
+              k.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])]);
+              });
+            })
+            
+          }
+          
+          let colorVal='';
+          if(options && options.length>0){
+          let indexF=options.findIndex((m)=>{
+               return m.id==item.id
+          })
+         colorVal=indexF>-1 ? options[indexF].color : ''
+         }
          const polygon = new this.AMap.Polygon({
            path: path,
-            fillColor: item.fillColor,
+            fillColor:colorVal||  item.fillColor,
            fillOpacity: item.fillOpacity,
-            strokeColor: item.strokeColor,
-            strokeWeight: item.strokeWeight,
+            strokeColor:colorVal || '',
+            strokeWeight: colorVal||  item.fillColor,
            strokeOpacity: item.strokeOpacity,
            extData: {
              ...item,
@ -87,11 +146,14 @@ const mapMixinLand = {
            this.createInfoWindow(e);
          });

-          overlayGroup.push(polygon);
+          this.overlayGroup.push(polygon);
+          if(type==false){
+            overlayGroupNew.push(polygon)
+          }
          // 添加地块名称
          label.push(
            new this.AMap.Text({
-              text: item.landName,
+              text: item.landName ? item.landName : '名称',
              anchor: 'center',
              position: this.getAreaCenter(pointList),
              style: {
@ -104,10 +166,26 @@ const mapMixinLand = {
          );
        }
      });
+    }
      // this.map.add(new this.AMap.OverlayGroup(label));
-      this.map.add(new this.AMap.OverlayGroup(overlayGroup));
-      this.map.setFitView(overlayGroup);
-      this.loading = false;
+      if (type) {
+        if(this.overlayGroup.length>0){
+        this.map.add(new this.AMap.OverlayGroup(this.overlayGroup));
+        this.map.setFitView(this.overlayGroup);
+        this.map.setZoom(13)
+        // this.map.moveCamera(CameraUpdateFactory.zoomTo(15))
+        this.loading = false;
+       }
+      }else{
+        this.map.remove(this.overlayGroup)
+        this.map.add(new this.AMap.OverlayGroup(overlayGroupNew));
+      }
+
+    },
+    getlandPath(ids) {
+      if (ids && ids.length > 0) {
+        let key = Object.keys(this.ob)
+      }
    },
    /**  创建设备marker点 */
    createDevicePoint() {
@ -135,8 +213,9 @@ const mapMixinLand = {
      this.map.add(new this.AMap.OverlayGroup(devicePointList));
      this.loading = false;
    },
-    upLayersIds(ids) {
-     console.info('upLayersIds**********',ids)
+    upLayersIds(ids,options) {
+      console.info('upLayersIds**********', ids)
+      this.createAreaPolygon(false, ids,options)
    },
    /** 获取地块中心点 */
    getAreaCenter(location) {
--- a/src/views/dataV/pageOne/HomeCount.vue
+++ b/src/views/dataV/pageOne/HomeCount.vue
@ -2,7 +2,7 @@
  <div class="w100 h100">
    <div class="topBox">
      <div class="topLft">
-        <p>3200万元</p>
+        <p>104.17亿元</p>
        <p>企业总产值</p>
      </div>
      <div class="topRit">
@ -30,11 +30,11 @@ export default {
  data() {
    return {
      dataList: [
-        { name: '农户', nums: 125, imgs: require('../img/5.png'), homer: '（家）' },
-        { name: '农企/合作社', nums: 28, imgs: require('../img/6.png'), homer: '（家）' },
-        { name: '生产加工企业', nums: 56, imgs: require('../img/7.png'), homer: '（家）' },
-        { name: '农资企业', nums: 811, imgs: require('../img/8.png'), homer: '（家）' },
-        { name: '种源企业', nums: 69, imgs: require('../img/5.png'), homer: '（家）' },
+        { name: '农户', nums: 12417, imgs: require('../img/5.png'), homer: '（家）' },
+        { name: '农企/合作社', nums: 893, imgs: require('../img/6.png'), homer: '（家）' },
+        { name: '生产加工企业', nums: 73, imgs: require('../img/7.png'), homer: '（家）' },
+        { name: '农资企业', nums: 6, imgs: require('../img/8.png'), homer: '（家）' },
+        { name: '种源企业', nums: 5, imgs: require('../img/5.png'), homer: '（家）' },
      ],
    };
  },
@ -56,17 +56,17 @@ export default {
    p:nth-child(1) {
      background: url('../img/4.png');
      background-size: 100% 100%;
-      width: 144px;
+      width: 180px;
      height: 112px;
      text-align: center;
      line-height: 112px;
      color: #ccefff;
-      font-size: 24px;
+      font-size: 20px;
    }
    p:nth-child(2) {
      background: url('../img/9.png');
      background-size: 100% 100%;
-      width: 125px;
+      width: 165px;
      height: 38px;
      text-align: center;
      line-height: 38px;
--- a/src/views/dataV/pageOne/greenIndustry.vue
+++ b/src/views/dataV/pageOne/greenIndustry.vue
@ -21,12 +21,12 @@ export default {
  data() {
    return {
      list: [
-        { name: '种子使用', num: 4900.67, percent: '吨', img: require('../img/10.png') },
-        { name: '农药使用', num: 5100.15, percent: '吨', img: require('../img/11.png') },
-        { name: '化肥使用', num: 9100.59, percent: '吨', img: require('../img/12.png') },
-        { name: '饲料', num: 89043.09, percent: '吨', img: require('../img/13.png') },
-        { name: '兽药', num: 110.34, percent: '吨', img: require('../img/14.png') },
-        { name: '农机使用', num: 8100.86, percent: '台', img: require('../img/15.png') },
+        { name: '种子使用', num: 171, percent: '吨', img: require('../img/10.png') },
+        { name: '农药使用', num: 224.26, percent: '吨', img: require('../img/11.png') },
+        { name: '化肥使用', num: 41650, percent: '吨', img: require('../img/12.png') },
+        { name: '饲料', num: 615148, percent: '吨', img: require('../img/13.png') },
+        { name: '兽药', num: 805.092, percent: '吨', img: require('../img/14.png') },
+        { name: '农机使用', num: 18170, percent: '台', img: require('../img/15.png') },
      ],
    };
  },
--- a/src/views/dataV/pageOne/index.vue
+++ b/src/views/dataV/pageOne/index.vue
@ -48,7 +48,7 @@ export default {
  data() {
    return {
      bg: require('../img/bg.png'),
-      title: ['经营主体数据统计', '溯源赋码与扫码数据统计', '使用投入品数据统计', '土地分布数据', '种殖数据统计'],
+      title: ['经营主体数据统计', '溯源赋码与扫码数据统计', '使用投入品数据统计', '土地分布数据', '种植数据统计'],
    };
  },
  watch: {
--- a/src/views/dataV/pageOne/industrypercent.vue
+++ b/src/views/dataV/pageOne/industrypercent.vue
@ -183,7 +183,7 @@ export default {
      this.statusChart.resize();
    },
    initChart2() {
-      let data = ['核桃', '茶叶', '小麦', '玉米'];
+      let data = ['核桃', '茶叶', '小麦', '玉米', '水稻', '薯类', '坚果', '中药材', '烤烟'];
      let option = {
        grid: {
          top: '8%',
@ -255,13 +255,13 @@ export default {
                barBorderRadius: 30,
                color: function (params) {
                  // 颜色定制显示（按顺序）
-                  var colorList = ['#4a5eea', '#f29b76', '#ea9ef3', '#80f1b0'];
+                  var colorList = ['#4a5eea', '#f29b76', '#ea9ef3', '#80f1b0','#4a5eea', '#f29b76', '#ea9ef3', '#80f1b0','#4a5eea', ];
                  return colorList[params.dataIndex];
                },
              },
            },
            barWidth: 10,
-            data: [63, 100, 30, 26],
+            data: [17.6, 4.6, 1.7, 10.85, 10.85, 1.96, 17.6, 0.816, 20],
          },
          {
            name: '外框',
@ -276,7 +276,7 @@ export default {
            barGap: '-100%',
            z: 0,
            barWidth: 10,
-            data: [100, 100, 100, 100],
+            data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
          },
        ],
      };
--- a/src/views/dataV/pageOne/moneyIndustry.vue
+++ b/src/views/dataV/pageOne/moneyIndustry.vue
@ -8,31 +8,19 @@ export default {
  data() {
    return {
      chartData: [
-        {
-          name: '三岔河镇',
-          value: 50,
-          test: '备注1',
-        },
-        {
-          name: '大寺乡',
-          value: 60,
-          test: '备注2',
-        },
-        {
-          name: '凤山镇',
-          value: 66,
-          test: '备注3',
-        },
-        {
-          name: '小湾镇',
-          value: 72,
-          test: '备注4',
-        },
-        {
-          name: '勐佑镇',
-          value: 80,
-          test: '备注5',
-        },
+        { name: '凤山镇', value: 31.72 },
+        { name: '勐佑镇', value: 57.27 },
+        { name: '三岔河镇', value: 42.12 },
+        { name: '小湾镇', value: 29.75 },
+        { name: '洛党镇', value: 38.73 },
+        { name: '雪山镇', value: 38.73 },
+        { name: '营盘镇', value: 55.03 },
+        { name: '郭大寨乡', value: 26.35 },
+        { name: '大寺乡', value: 33.53 },
+        { name: '鲁史镇', value: 47.7 },
+        { name: '诗礼乡', value: 32.56 },
+        { name: '新华乡', value: 42.12 },
+        { name: '腰街乡', value: 13.73 },
      ],
    };
  },
@ -138,23 +126,23 @@ export default {
          })(this.chartData), // 载入y轴数据
        },
        series: [
-          {
-            type: 'bar',
-            barGap: '-130%',
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            barWidth: 12,
-            itemStyle: {
-              normal: {
-                color: '#1a2859', // 图表颜色
-              },
-            },
-            data: bgData, // 载入背景数据
-            z: 0,
-          },
+          // {
+          //   type: 'bar',
+          //   barGap: '-130%',
+          //   label: {
+          //     normal: {
+          //       show: false,
+          //     },
+          //   },
+          //   barWidth: 12,
+          //   itemStyle: {
+          //     // normal: {
+          //     //   color: '#1a2859', // 图表颜色
+          //     // },
+          //   },
+          //   data: bgData, // 载入背景数据
+          //   z: 0,
+          // },
          {
            type: 'bar',
            label: {
@ -163,18 +151,30 @@ export default {
                position: 'right', // top, right, inside, insideTop,...
                textStyle: {
                  color: 'white',
-                  fontSize: 16,
+                  fontSize: 10,
                },
                formatter: '{c}' + '万亩',
              },
            },
-            barWidth: 12,
+            barWidth: 10,
            itemStyle: {
              normal: {
-                color: function (params) {
-                  // 颜色定制显示（按顺序）
-                  var colorList = $colorList;
-                  return colorList[params.dataIndex];
+                // color: function (params) {
+                //   // 颜色定制显示（按顺序）
+                //   var colorList = $colorList;
+                //   return colorList[params.dataIndex];
+                // },
+                color: {
+                  type: 'linear', // 线性渐变
+                  x: 1,
+                  y: 0,
+                  x2: 0,
+                  y2: 0,
+                  colorStops: [
+                    { offset: 0, color: '#99dcf3' },
+                    { offset: 1, color: '#01589c' },
+                  ],
+
                },
                barBorderRadius: [0, 17, 17, 0], //圆角
              },
--- a/src/views/dataV/pageThree/plantArea.vue
+++ b/src/views/dataV/pageThree/plantArea.vue
@ -30,7 +30,7 @@ export default {
              },
            },
            grid: {
-              left: 30,
+              left: 60,
              top: 20,
              right: 20,
              bottom: 20,