推送202210121328

src/assets/scss/common.scss

@@ -282,11 +282,13 @@ body {
             z-index: 1;
             display: inline;
             transform: translateY(-0.225rem);
+            cursor:pointer;
             i {
                 line-height: .45rem;
                 font-size: .3rem;
                 color: #30cfff;
             }
+
         }
         .leftBtn {
             left: 6.85rem;

src/components/gauge/index.vue

@@ -10,12 +10,13 @@ import * as echarts from "echarts";
 export default {
   props: {
     dataMap: { type: Number, default: () => 0 },
-    dataNumber: { type: Number, default: () => 0 },
+    dataNumber: { type: String, default: () => 0 },
     color: { type: String, default: () => "#468EFD" },
     tick: { type: Boolean, default: () => true },
   },
   data() {
     return {
+      chart: null,
       size: 20,
       with: 20,
     };

src/components/mixins/map-gaode-selfManagement.js

@@ -28,8 +28,8 @@ export default {
     },
     mounted() {
         window['tb1'] = () => {
-                this.tb1()
-            },
+            this.tb1()
+        },
             window['tb2'] = () => {
                 this.tb2()
             }
@@ -52,7 +52,7 @@ export default {
         },
         addMarkerInfo(position, value) { //消防水情况
             var icon = this.icon
-                // this.map.getIsOpen();
+            // this.map.getIsOpen();
             this.map.clearInfoWindow();
             // var icon = require('')
             var json = eval('(' + value.property + ')');
@@ -70,13 +70,13 @@ export default {
                             <div class="max">检测对象：${value.deviceType}</div>
                             <div class="max">数据更新时间：${value.createTime}</div>
                             <div class="max">剩余电量：
-                            ${json && json.find(val=>val.property === '电量') ? json.find(val=>val.property === '电量').serial : '--'} 
+                            ${json && json.find(val => val.property === '电量') ? json.find(val => val.property === '电量').serial : '--'} 
                             <img src="${icon}" alt="" class="icon2" v-if="json && json.find(val=>val.property === '电量')" onclick="tb1()" /></div>
                             <div class="max">无线信号：
-                            ${json && json.find(val=>val.property === '信号') ? json.find(val=>val.property === '信号').serial : '--'} 
+                            ${json && json.find(val => val.property === '信号') ? json.find(val => val.property === '信号').serial : '--'} 
                             <img src="${icon}" alt="" class="icon2" v-if="json && json.find(val=>val.property === '信号')" onclick="tb2()" /></div>
                             <div class="max">液位：
-                            ${json && json.find(val=>val.property === '水压') ? json.find(val=>val.property === '水压').serial : '--'} 
+                            ${json && json.find(val => val.property === '水压') ? json.find(val => val.property === '水压').serial : '--'} 
                             <img src="${icon}" alt="" class="icon2" v-if="json && json.find(val=>val.property === '水压')" onclick="tb3()" /></div>
                         </el-row>
                     </div>`,
@@ -89,6 +89,10 @@ export default {
         //     return msg
 
         // },
+
+        /**
+         * @地图初始化
+         */
         async initMap() {
             this.map = await new AMap.Map('mapF', { //地图初始化
                 mapStyle: 'amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da', //设置地图的显示样式
@@ -169,16 +173,22 @@ export default {
             for (var i = 0; i < 6; i++) color += parseInt(Math.random() * 16).toString(16);
             return color;
         },
+
         deleteMarker(lnglats) {
             this.map.remove(lnglats);
         },
+        /**
+         * @地图撒点
+         * @param {数据list} lnglats 
+         * @param {数据类型} type 
+         */
         addMarker(lnglats, type) {
             // 创建标点和点击事件
             let icon = ''
             let markers = lnglats.map((val, ind) => {
                 if (type === 'water') {
                     icon = val.waterAdministrative === '单位' ? 'http://120.55.70.156/image/unitWater.png' : val.waterAdministrative === '市政' ? 'http://120.55.70.156/image/szWater.png' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? 'http://120.55.70.156/image/sqWater.png' : ''
-                        //icon = val.waterAdministrative === '单位' ? '' : val.waterAdministrative === '市政' ? '' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? '' : ''
+                    //icon = val.waterAdministrative === '单位' ? '' : val.waterAdministrative === '市政' ? '' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? '' : ''
                 } else {
                     icon = val.waterAdministrative === '单位' ? 'http://120.55.70.156/image/unitWater.png' : val.waterAdministrative === '市政' ? 'http://120.55.70.156/image/szWater.png' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? 'http://120.55.70.156/image/sqWater.png' : ''
                 }
@@ -196,7 +206,7 @@ export default {
 
                 }
 
-                marker.on('click', async() => {
+                marker.on('click', async () => {
                     let res = await this.$axios.get(this.$api.selfManagement.one + "?" +
                         this.$qs.stringify({
                             id: val.id
@@ -211,5 +221,97 @@ export default {
             this.map.add(new AMap.OverlayGroup(markers));
             //this.map.setFitView(); // 根据所有点自适应
         },
+        /**
+         * @聚合撒点
+         * @param {*} tag 
+         * @param {数据list} data 
+         */
+        addCluster(tag, data) {
+            var cluster, markers = [];
+
+            console.log(data)
+
+            let list = [{ "lnglat": ["113.864691", "22.942327"] }, { "lnglat": ["113.370643", "22.938827"] }, { "lnglat": ["112.985037", "23.15046"] }, { "lnglat": ["110.361899", "20.026695"] }, { "lnglat": ["121.434529", "31.215641"] }, { "lnglat": ["120.682502", "28.011099"] }, { "lnglat": ["126.687123", "45.787618"] }, { "lnglat": ["103.970724", "30.397931"] }, { "lnglat": ["117.212164", "31.831641"] }, { "lnglat": ["121.411101", "31.059407"] }, { "lnglat": ["104.137953", "30.784276"] }, { "lnglat": ["120.499683", "30.042305"] }, { "lnglat": ["108.94686", "34.362975"] }, { "lnglat": ["112.873295", "22.920901"] }, { "lnglat": ["113.373916", "23.086728"] }, { "lnglat": ["113.250159", "23.075847"] }, { "lnglat": ["116.675933", "39.986343"] }, { "lnglat": ["120.75997", "31.734934"] }, { "lnglat": ["118.314741", "32.26999"] }, { "lnglat": ["111.723311", "34.771838"] }, { "lnglat": ["119.537126", "26.200017"] }, { "lnglat": ["113.830123", "23.00734"] }, { "lnglat": ["119.273795", "26.060002"] }, { "lnglat": ["116.466752", "39.951042"] }, { "lnglat": ["114.20716", "22.777829"] }, { "lnglat": ["126.118338", "45.11481"] }, { "lnglat": ["116.366324", "39.781077"] }, { "lnglat": ["120.377998", "31.578216"] }, { "lnglat": ["116.611935", "23.66941"] }, { "lnglat": ["103.787344", "30.940037"] }, { "lnglat": ["112.911223", "23.164952"] }, { "lnglat": ["121.946335", "39.403784"] }, { "lnglat": ["120.172545", "36.009391"] }]
+
+            for (var i = 0; i < list.length; i += 1) {
+                markers.push(new AMap.Marker({
+                    position: list[i]['lnglat'],
+                    content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
+                    offset: new AMap.Pixel(-15, -15)
+                }))
+            }
+
+            var count = markers.length;
+            var _renderClusterMarker = function (context) {
+                var factor = Math.pow(context.count / count, 1 / 18);
+                var div = document.createElement('div');
+                var Hue = 180 - factor * 180;
+                var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
+                var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
+                var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
+                var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
+                div.style.backgroundColor = bgColor;
+                var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
+                div.style.width = div.style.height = size + 'px';
+                div.style.border = 'solid 1px ' + borderColor;
+                div.style.borderRadius = size / 2 + 'px';
+                div.style.boxShadow = '0 0 1px ' + shadowColor;
+                div.innerHTML = context.count;
+                div.style.lineHeight = size + 'px';
+                div.style.color = fontColor;
+                div.style.fontSize = '14px';
+                div.style.textAlign = 'center';
+                context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
+                context.marker.setContent(div)
+            };
+
+            if (cluster) {
+                cluster.setMap(null);
+            }
+
+            if (tag == 2) {//完全自定义
+                this.map.plugin(["AMap.MarkerClusterer"], function () {
+                    cluster = new AMap.MarkerClusterer(this.map, markers, {
+                        gridSize: 80,
+                        renderClusterMarker: _renderClusterMarker
+                    });
+                })
+            } else if (tag == 1) {//自定义图标
+                var sts = [{
+                    url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
+                    size: new AMap.Size(32, 32),
+                    offset: new AMap.Pixel(-16, -16)
+                }, {
+                    url: "https://a.amap.com/jsapi_demos/static/images/green.png",
+                    size: new AMap.Size(32, 32),
+                    offset: new AMap.Pixel(-16, -16)
+                }, {
+                    url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
+                    size: new AMap.Size(36, 36),
+                    offset: new AMap.Pixel(-18, -18)
+                }, {
+                    url: "https://a.amap.com/jsapi_demos/static/images/red.png",
+                    size: new AMap.Size(48, 48),
+                    offset: new AMap.Pixel(-24, -24)
+                }, {
+                    url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
+                    size: new AMap.Size(48, 48),
+                    offset: new AMap.Pixel(-24, -24)
+                }];
+
+                console.log(this.map)
+                console.log(markers)
+                this.map.plugin(["AMap.MarkerClusterer"], function () {
+                    cluster = new AMap.MarkerClusterer(this.map, markers, {
+                        styles: sts,
+                        gridSize: 80
+                    });
+                })
+            } else {//默认样式
+                this.map.plugin(["AMap.MarkerClusterer"], function () {
+                    cluster = new AMap.MarkerClusterer(this.map, markers, { gridSize: 80 });
+                })
+            }
+        },
     }
 }

src/components/water-gauge/index.vue

@@ -196,33 +196,31 @@ export default {
             center: ["50%", "50%"],
             z: 3,
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.RadialGradient(
-                  0.5,
-                  0.5,
-                  0.8,
-                  [
-                    {
-                      offset: 0,
-                      color: "#00b8f8",
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#0068d4",
-                    },
-                    {
-                      offset: 1,
-                      color: "#0068d3",
-                    },
-                  ],
-                  false
-                ),
-                label: {
-                  show: false,
-                },
-                labelLine: {
-                  show: false,
-                },
+              color: new echarts.graphic.RadialGradient(
+                0.5,
+                0.5,
+                0.8,
+                [
+                  {
+                    offset: 0,
+                    color: "#00b8f8",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "#0068d4",
+                  },
+                  {
+                    offset: 1,
+                    color: "#0068d3",
+                  },
+                ],
+                false
+              ),
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
               },
             },
             hoverAnimation: false,
@@ -242,42 +240,37 @@ export default {
             avoidLabelOverlap: false,
             z: 3,
             label: {
-              normal: {
-                show: false,
-                position: "center",
-              },
-              emphasis: {
-                show: false,
-                textStyle: {
-                  fontWeight: "bold",
-                },
-              },
+              show: false,
+              position: "center",
+
+              // emphasis: {
+              //   show: false,
+              //   textStyle: {
+              //     fontWeight: "bold",
+              //   },
+              // },
             },
             itemStyle: {
-              normal: {
-                color: {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "#122c7a",
-                    },
-                    {
-                      offset: 1,
-                      color: "#122c7a",
-                    },
-                  ],
-                },
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#122c7a",
+                  },
+                  {
+                    offset: 1,
+                    color: "#122c7a",
+                  },
+                ],
               },
             },
             labelLine: {
-              normal: {
-                show: false,
-              },
+              show: false,
             },
             data: [
               {
@@ -294,42 +287,37 @@ export default {
             z: 2,
             hoverAnimation: false,
             label: {
-              normal: {
-                show: false,
-                position: "center",
-              },
-              emphasis: {
-                show: false,
-                textStyle: {
-                  fontWeight: "bold",
-                },
-              },
+              show: false,
+              position: "center",
+
+              // emphasis: {
+              //   show: false,
+              //   textStyle: {
+              //     fontWeight: "bold",
+              //   },
+              // },
             },
             itemStyle: {
-              normal: {
-                color: {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "#0b1f61",
-                    },
-                    {
-                      offset: 1,
-                      color: "#0b1f61",
-                    },
-                  ],
-                },
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#0b1f61",
+                  },
+                  {
+                    offset: 1,
+                    color: "#0b1f61",
+                  },
+                ],
               },
             },
             labelLine: {
-              normal: {
-                show: false,
-              },
+              show: false,
             },
             data: [
               {

src/views/time-select.vue

@@ -15,7 +15,6 @@
             v-model="valueTime"
             class="dataComponent"
             type="daterange"
-            align="right"
             range-separator="~"
             size="small"
             prefix-icon

src/views/water-sources.vue

@@ -464,7 +464,7 @@ export default {
       ).then(res =>{
         if (res){ 
           this.fireWaterStatisticsObj = res.data;
-          this.fireWaterStatisticsObj.waterIntact = res.data.waterIntact.toFixed(2)
+          this.fireWaterStatisticsObj.waterIntact = parseFloat(res.data.waterIntact.toFixed(2))
           let total = res.data.municipalWater + res.data.residentWater + res.data.unitWater //市政用水 + 居民水源 + 单位用水
           let funnelList = [
             {name:'市政水源',reaVal:Number(((this.fireWaterStatisticsObj.municipalWater/total)* 100).toFixed(2)),data:this.fireWaterStatisticsObj.municipalWater},