manage-client 3.2.83-aode → 3.2.83-jb

package/src/components/ManageHomeCS/SecurityCheck/LatentDanger.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="label">安检隐患分布图</div>
-    <div id="latentdanger"></div>
+    <div id="danger"></div>
   </div>
 </template>
 
@@ -9,241 +9,195 @@
   import * as DataSql from '../../../stores/DataSql'
   import co from 'co'
 
-
   export default {
-    name: "LatentDanger",
+    name: "danger",
     data() {
       return {
-        xc: '',
-        resdata: [],
-        totaluser: '',
-        timer:''
+        resdata: []
       }
     },
-    beforeDestroy() {
-      //清除定时器
-      clearInterval(this.timer);
-    },
     methods: {
-      setBar() {
-        this.xc = this.$echarts.init(document.getElementById('latentdanger'))
+      setBar(id, data) {
+        this.xc = this.$echarts.init(document.getElementById(id))
         var scale=this.$parent.$parent.$parent.scale
-        let echartData = this.resdata
-        var rich = {
-          yellow: {
-            color: "#ffc72b",
-            fontSize: 10 * scale,
-            padding: [5, 4],
-            align: 'center'
-          },
-          total: {
-            color: "#ffc72b",
-            fontSize: 10 * scale,
-            align: 'center'
-          },
-          white: {
-            color: "#fff",
-            align: 'center',
-            fontSize: 12 * scale,
-            padding: [4, 0]
-          },
-          blue: {
-            color: '#f7cb32',
-            fontSize: 12 * scale,
-            align: 'center',
-            padding: [8, 0]
-          },
-          hr: {
-            borderColor: '#64d8d4',
-            width: '100%',
-            borderWidth: 0.5,
-            height: 0
-          },
-        }
-        var legendname=[]
-        var total = 0; //用户总和
-        echartData.forEach(function (value) {
-          legendname.push(value.name)
-          total += value.value;
-        });
-        this.xc.setOption({
-          title: [],
-          legend: {
-            orient: 'horizontal',
-            icon: 'circle',
-            y:'60%',
-            padding:[0,20],
-            itemWidth: 20 * scale,
-            itemHeight: 10 * scale,
-            textStyle: {
-              fontSize: 12 * scale,
-              padding: [0, 0, 0, 4 * scale],
-              // color: '#69d8d2',
-              color: '#d7efee',
+        var xAxisData = []  //列名
+        var meterCount = []  //数量
+
+        data.forEach(function (s) {
+          xAxisData.push(s.name)
+          meterCount.push(s.value)
+        })
+        xAxisData.push("")
+        var yname = ''
+        var endPercent = (6 / xAxisData.length) * 100;
+        var serieData = [
+          {
+            name: '',
+            type: "bar",
+            stack: "1",
+            barWidth: '30%',
+            barGap: "20%",
+            xAxisIndex: 0,
+            z: 2,
+            itemStyle: {
+              normal: {
+                color: "#7395db",
+                label: {
+                  show: true,
+                  textStyle: {
+                    color: "#ffffff",
+                    fontSize:16*scale
+                  },
+                  position: "top"
+                },
+              }
             },
-            data:legendname
+            data: meterCount,
+          }
+        ];
+        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]
+        this.xc.setOption({
+          title: {
+            text: '',
+            left: '40%',
+            bottom: '1%',
+            textStyle: {color: "#fff", fontSize: 14 * scale, fontWeight: "normal"}
           },
-          tooltip: {
-            trigger: 'item',
+          color: colors,
+          grid: {left: '4%', top: "18%", bottom: "5%", right: "5%", containLabel: true},
+          dataZoom: [{
+            type: 'inside',
             show: true,
+            xAxisIndex: [0],
+            left: '9%',
+            bottom: -5,
+            start: 2,
+            end: 18 //初始化滚动条
+          }],
+          tooltip: {
             alwaysShowContent:true,
-            backgroundColor:'rgba(2, 59, 63, 0.6)',
+            backgroundColor:'rgba(2, 59, 63, 0.45)',
             // borderColor :'rgba(13, 109, 180)',
             borderWidth:0,
             hideDelay:100,
-              padding:10*scale,
-              textStyle:{
-                  fontSize:18*scale
-              },
+            padding:10*scale,
+            textStyle:{
+              fontSize:18*scale
+            },
             formatter: function (params) {
-              return   params.marker+params.name + '&nbsp;&nbsp;&nbsp; <span style="color:#e1e52a;font-weight: bolder">' + params.value + '</span>'
+              if (params[0].axisValue == '') {
+                return ''
+              }
+              var result = ''
+              params.forEach(function (item) {
+                if (item.seriesName !== 'ser') {
+                  result += item.seriesName + " &nbsp;&nbsp;&nbsp;<span style='font-weight: bolder;color:#e1e52a;'>" + item.value + "</span></br>";
+                }
+              });
+              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '</div><br/>数量 ' + result
             },
+            axisPointer: {type: 'line', lineStyle: {width: 0}},
+            trigger: 'axis',
             extraCssText: 'width: auto;height: auto;'
           },
-          series: [
+          xAxis: [
             {
-              name: 'Line 1',
-              type: 'pie',
-              animation: false,
-              clockWise: false,
-              radius: ['15%', '16%'],
-              center: ['50%', '25%'],
-              itemStyle: {
-                normal: {
-                  label: {
-                    show: false
-                  },
-                  labelLine: {
-                    show: false
-                  },
-                }
+              name: yname,
+              type: 'category',
+              nameTextStyle: {
+                fontSize: 14 * scale,
+                color: '#15dce2',
+                padding: [40 * scale, 0, 0, -60 * scale],
               },
-              hoverAnimation: false,
-              data: [{
-                value: 100,
-                name: '02',
-                itemStyle: {
-                  normal: {
-                    color: '#29b7ff',//未完成的圆环的颜色
-                    label: {
-                      show: false
-                    },
-                    labelLine: {
-                      show: false
-                    }
+              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
+              axisLabel: {
+                interval: 0, textStyle: {color: '#ffffff', fontSize: 13 * scale},
+                formatter: function (value, index) {
+
+                  //进行客户名称截取换行
+                  var s = ''
+                  // 长度超过4个字符进行换行
+                  if (value.toString().length > 3 && value.toString().length < 8) {
+                    var s0 = value.toString().substring(0, 4)
+                    var s1 = value.toString().substring(4, value.toString().length)
+                    s = s0 + '\n' + s1
+                    return s
                   }
-                }
-              }]
-            },
-            {
-              name: '总隐患数',
-              type: 'pie',
-              radius: ['20%', '30%'],
-              center: ['50%', '25%'],
-              minAngle: 20,//最小角度
-              startAngle: 300, //起始角度
-              hoverAnimation: false,
-              color: ['#6fd9d0', '#ede61f','#38dcad','#d9e186','#e9a937','#6869e1'],
-              label: {
-                normal: {
-                  show:false,
-                  borderWidth: 1,
-                  borderRadius: 4,
-                  backgroundColor:'#004b5c',
-                  borderColor:'#64d8d4',
-                }
-              },
-              labelLine: {
-                normal: {
-                  length: 10 ,
-                  length2: 18 ,
-                }
-              },
-              data: echartData
-            }, {
-              name: 'Line 2',
-              type: 'pie',
-              animation: false,
-              clockWise: false,
-              radius: ['34%', '35%'],
-              center: ['50%', '25%'],
-              itemStyle: {
-                normal: {
-                  label: {
-                    show: false
-                  },
-                  labelLine: {
-                    show: false
-                  },
+                  // 长度超过8个字符进行再次换行
+                  if (value.toString().length > 7 && value.toString().length < 12) {
+                    var s0 = value.toString().substring(0, 4)
+                    var s1 = value.toString().substring(4, 8)
+                    var s2 = value.toString().substring(8, value.toString().length)
+                    s = s0 + '\n' + s1 + '\n' + s2
+                    return s
+                  }
+                  // 长度超过12个字符进行再次换行
+                  if (value.toString().length > 11) {
+                    var s0 = value.toString().substring(0, 4)
+                    var s1 = value.toString().substring(4, 8)
+                    var s2 = value.toString().substring(8, 12)
+                    var s3 = value.toString().substring(12, value.toString().length)
+                    s = s0 + '\n' + s1 + '\n' + s2 + '\n' + s3
+                    return s
+                  }
+
+                  s = value.toString()
+
+                  return s;
                 }
               },
-              hoverAnimation: false,
-              tooltip: {
-                show: false
+              axisTick: {show: false},
+              data: xAxisData,
+            }
+          ],
+          yAxis: [
+            {
+              name: '数量',
+              type: 'value',
+
+              nameTextStyle: {
+                fontSize: 14 * scale,
+                padding: [-10 * scale, 35 * scale, 0, 0],
               },
-              data: [{
-                value: 100,
-                name: '02',
-                itemStyle: {
-                  normal: {
-                    color: '#29b7ff',//未完成的圆环的颜色
-                    label: {
-                      show: false
-                    },
-                    labelLine: {
-                      show: false
-                    }
+              axisTick: {show: false},
+              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
+              axisLabel: {
+                interval: 0,
+                show: true,
+                textStyle: {
+                  color: '#15dce2',
+                  fontSize: 14 * scale,
+                },
+                formatter: function (value) {
+                  var index = value.toString().length
+                  if (index > 9) {
+                    return value.toString().substring(0, index - 9) + '亿'
+                  } else if (index > 4) {
+                    return value.toString().substring(0, index - 4) + '万'
+                  } else {
+                    return value
                   }
                 }
-              }
-              ]
-            }
-          ]
+              },
+              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
+            },
+          ],
+          series: serieData
         }, true)
-
-
-        let idx = 0;
-        var dataLen=echartData.length
-        var oroptionmapjsonr_charts=this.xc
-        this.timer=  setInterval(()=>{
-            oroptionmapjsonr_charts.dispatchAction({
-              type: 'pieUnSelect',
-              seriesIndex:1 ,
-              dataIndex: idx,
-            });
-
-          idx = (idx+ 1) % dataLen;
-
-          oroptionmapjsonr_charts.dispatchAction({
-            type: 'pieSelect',
-            seriesIndex: 1,
-            dataIndex: idx
-          });
-          //console.log(app.currentIndex);
-          // 选中当前图形
-          oroptionmapjsonr_charts.dispatchAction({
-            type: 'showTip',
-            seriesIndex: 1,
-            dataIndex: idx
-          });
-
-        }, 3000)
-
-      },
+      }
     },
     watch: {
-
-      'resdata':{
-        deep:true,
-        handler(val){
-          this.setBar()
+      'resdata': {
+        deep: true,
+        handler(val) {
+          this.setBar('danger', this.resdata)
+          this.$parent.loaddata++
         }
       },
     },
     ready() {
-
-      let getdata=DataSql.getData(this,'danger',{startDate:DataSql.toBeforeDate(365*2),endDate:DataSql.toBeforeDate(0)},'resdata')
-      co(getdata)
+      let getData = DataSql.getData(this, 'danger',{condition:'1=1',startDate:DataSql.toBeforeDate(365*2),endDate:DataSql.toBeforeDate(0)}, 'resdata')
+      co(getData)
     }
   }
 </script>
@@ -252,12 +206,15 @@
   .label {
     font-size: 0.85em;
     color: #fff;
-    height: 8%;
+    height: 10%;
     width: 100%;
     margin-left: 6%;
   }
-  #latentdanger{
-    height: 91%;
+
+  #resdata {
+    margin-top: 3%;
+    height: 90%;
     width: 100%;
   }
+
 </style>

package/src/components/ManageHomeCS/SecurityCheck/PlanStatistics.vue

@@ -196,7 +196,7 @@
             if(this.safeerrordata.length>0){
               var self=this
               this.safeerrordata.forEach(function (s) {
-                if(s.name=='隐患数'){
+                if(s.name=='有隐患用户数'){
                   self.hiddenuser=s.value
                 }
               })
@@ -217,7 +217,7 @@
           if(this.resdata.length>0){
               var self=this
               this.resdata1.forEach(function (s) {
-                if(s.name=='隐患数'){
+                if(s.name=='有隐患用户数'){
                   self.hiddenuser=s.value
                 }
               })