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

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: '01', color: '#d96298' },
-        { name: '果园', id: '02' },
+        { name: '果园', id: '02', color: '#d9e961' },
-        { name: '水浇地', id: '03' },
+        { name: '水浇地', id: '03', color: '#ba8ae3' },
-        { name: '灌溉水田', id: '04' },
+        { name: '灌溉水田', id: '04', color: '#88b0d3' },
-        { name: '茶园', id: '05' },
+        { name: '茶园', id: '05', color: '#efc0ac' },
-        { name: '菜地', id: '06' },
+        { 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;

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 = [];
+      let overlayGroupNew = [];
-      this.area.forEach((item) => {
+      // 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"
+          if( item.landPath &&  item.landPath.length &&  item.landPath.length>0){
-          // item.landPath.split('|').forEach((point) => {
+            item.landPath.forEach((k)=>{
-          //   path.push(new this.AMap.LngLat(point.split(',')[0], point.split(',')[1]));
+              k.split('|').forEach((point) => {
-          //   pointList.push([Number(point.split(',')[0]), Number(point.split(',')[1])]);
+                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])]);
+            
-          });
+          }
+          
+          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,
+            strokeColor:colorVal || '',
-            strokeWeight: item.strokeWeight,
+            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));
+      if (type) {
-      this.map.setFitView(overlayGroup);
+        if(this.overlayGroup.length>0){
-      this.loading = false;
+        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) {
+    upLayersIds(ids,options) {
-     console.info('upLayersIds**********',ids)
+      console.info('upLayersIds**********', ids)
+      this.createAreaPolygon(false, ids,options)
     },
     /** 获取地块中心点 */
     getAreaCenter(location) {

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: 12417, imgs: require('../img/5.png'), homer: '（家）' },
-        { name: '农企/合作社', nums: 28, imgs: require('../img/6.png'), homer: '（家）' },
+        { name: '农企/合作社', nums: 893, imgs: require('../img/6.png'), homer: '（家）' },
-        { name: '生产加工企业', nums: 56, imgs: require('../img/7.png'), homer: '（家）' },
+        { name: '生产加工企业', nums: 73, imgs: require('../img/7.png'), homer: '（家）' },
-        { name: '农资企业', nums: 811, imgs: require('../img/8.png'), homer: '（家）' },
+        { name: '农资企业', nums: 6, imgs: require('../img/8.png'), homer: '（家）' },
-        { name: '种源企业', nums: 69, imgs: require('../img/5.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;

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: 171, percent: '吨', img: require('../img/10.png') },
-        { name: '农药使用', num: 5100.15, percent: '吨', img: require('../img/11.png') },
+        { name: '农药使用', num: 224.26, percent: '吨', img: require('../img/11.png') },
-        { name: '化肥使用', num: 9100.59, percent: '吨', img: require('../img/12.png') },
+        { name: '化肥使用', num: 41650, percent: '吨', img: require('../img/12.png') },
-        { name: '饲料', num: 89043.09, percent: '吨', img: require('../img/13.png') },
+        { name: '饲料', num: 615148, percent: '吨', img: require('../img/13.png') },
-        { name: '兽药', num: 110.34, percent: '吨', img: require('../img/14.png') },
+        { name: '兽药', num: 805.092, percent: '吨', img: require('../img/14.png') },
-        { name: '农机使用', num: 8100.86, percent: '台', img: require('../img/15.png') },
+        { name: '农机使用', num: 18170, percent: '台', img: require('../img/15.png') },
       ],
     };
   },

src/views/dataV/pageOne/index.vue

@@ -48,7 +48,7 @@ export default {
   data() {
     return {
       bg: require('../img/bg.png'),
-      title: ['经营主体数据统计', '溯源赋码与扫码数据统计', '使用投入品数据统计', '土地分布数据', '种殖数据统计'],
+      title: ['经营主体数据统计', '溯源赋码与扫码数据统计', '使用投入品数据统计', '土地分布数据', '种植数据统计'],
     };
   },
   watch: {

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],
           },
         ],
       };

src/views/dataV/pageOne/moneyIndustry.vue

@@ -8,31 +8,19 @@ export default {
   data() {
     return {
       chartData: [
-        {
+        { name: '凤山镇', value: 31.72 },
-          name: '三岔河镇',
+        { name: '勐佑镇', value: 57.27 },
-          value: 50,
+        { name: '三岔河镇', value: 42.12 },
-          test: '备注1',
+        { name: '小湾镇', value: 29.75 },
-        },
+        { name: '洛党镇', value: 38.73 },
-        {
+        { name: '雪山镇', value: 38.73 },
-          name: '大寺乡',
+        { name: '营盘镇', value: 55.03 },
-          value: 60,
+        { name: '郭大寨乡', value: 26.35 },
-          test: '备注2',
+        { name: '大寺乡', value: 33.53 },
-        },
+        { name: '鲁史镇', value: 47.7 },
-        {
+        { name: '诗礼乡', value: 32.56 },
-          name: '凤山镇',
+        { name: '新华乡', value: 42.12 },
-          value: 66,
+        { name: '腰街乡', value: 13.73 },
-          test: '备注3',
-        },
-        {
-          name: '小湾镇',
-          value: 72,
-          test: '备注4',
-        },
-        {
-          name: '勐佑镇',
-          value: 80,
-          test: '备注5',
-        },
       ],
     };
   },
@@ -138,23 +126,23 @@ export default {
           })(this.chartData), // 载入y轴数据
         },
         series: [
-          {
+          // {
-            type: 'bar',
+          //   type: 'bar',
-            barGap: '-130%',
+          //   barGap: '-130%',
-            label: {
+          //   label: {
-              normal: {
+          //     normal: {
-                show: false,
+          //       show: false,
-              },
+          //     },
-            },
+          //   },
-            barWidth: 12,
+          //   barWidth: 12,
-            itemStyle: {
+          //   itemStyle: {
-              normal: {
+          //     // normal: {
-                color: '#1a2859', // 图表颜色
+          //     //   color: '#1a2859', // 图表颜色
-              },
+          //     // },
-            },
+          //   },
-            data: bgData, // 载入背景数据
+          //   data: bgData, // 载入背景数据
-            z: 0,
+          //   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) {
+                // color: function (params) {
-                  // 颜色定制显示（按顺序）
+                //   // 颜色定制显示（按顺序）
-                  var colorList = $colorList;
+                //   var colorList = $colorList;
-                  return colorList[params.dataIndex];
+                //   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], //圆角
               },

src/views/dataV/pageThree/plantArea.vue

@@ -30,7 +30,7 @@ export default {
               },
             },
             grid: {
-              left: 30,
+              left: 60,
               top: 20,
               right: 20,
               bottom: 20,