manage-client 3.2.49 → 3.2.50-aode

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

@@ -1,311 +1,311 @@
-<template>
-  <div>
-    <div class="label">安检员任务情况</div>
-      <div id="taskstatistics"></div>
-      <div id="taskundone"></div>
-  </div>
-</template>
-
-<script>
-  import * as DataSql from '../../../stores/DataSql'
-  import co from 'co'
-
-  export default {
-    name: "TaskStatistics",
-    data() {
-      return {
-        checkerdata: [],
-        resdata: [],
-      }
-    },
-    methods: {
-      setBar(id, data, flag) {
-        this.xc = this.$echarts.init(document.getElementById(id))
-        var scale=this.$parent.$parent.$parent.scale
-        var xAxisData = []  //列名
-        var metaDate = []   //完成或未完成数
-        var metaDate1 = []  //总数
-
-        data.forEach(function (s) {
-          xAxisData.push(s.name)
-          metaDate1.push(eval(s.undone + '+' + s.complete))
-          if (flag == '安检完成') {
-            metaDate.push(s.complete)
-          }
-          if (flag == '安检未完成') {
-            metaDate.push(s.undone)
-          }
-        })
-        xAxisData.push("")
-        var legendData = []
-        var color = ''
-        if (flag == '安检完成') {
-          legendData = ['完成数', '总数']
-          color = '#69d8d2'
-        }
-        if (flag == '安检未完成') {
-          legendData = ['未完成数', '总数']
-          color = '#e7c83c'
-        }
-
-        var metaDate2 = []
-        for (var i = 0; i < metaDate.length; i++) {
-          var s = metaDate1[i] - metaDate[i]
-          metaDate2.push(s)
-        }
-
-        var yname = '安检员'
-        var serieData = [
-          {
-            name: legendData[0],
-            type: "bar",
-            stack: "1",
-            barWidth: '40%',
-            barGap: "20%",
-            xAxisIndex: 0,
-            z: 2,
-            itemStyle: {
-              normal: {
-                color: color,
-                label: {
-                  show: false,
-                }
-              }
-            },
-            data: metaDate,
-          },
-          {
-            name: legendData[1],
-            type: "bar",
-            stack: "1",
-            barWidth: '40%',
-            barGap: "-100%",
-            xAxisIndex: 0,
-            z: 2,
-            itemStyle: {
-              normal: {
-                color: '#053850',
-                label: {
-                  show: true,
-                  textStyle: {
-                    color: "#ffffff",
-                    fontSize:14*scale
-                  },
-                  position: "top",
-                  formatter: function (p) {
-                    return metaDate[p.dataIndex] != '' ? metaDate[p.dataIndex] : 0;
-                  }
-                }
-              }
-            },
-            data: metaDate2
-          }
-        ];
-        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]
-        this.xc.setOption({
-          title: {
-            text: flag + 'top5',
-            left: '40%',
-            bottom: '1%',
-            textStyle: {color: "#e7c83c", fontSize: 14 * scale, fontWeight: "normal"}
-          },
-          color: colors,
-          grid: {left: '2%', top: "18%", bottom: "3%", right: "2%", height: '70%', containLabel: true},
-          tooltip: {
-            alwaysShowContent:true,
-            backgroundColor:'rgba(2, 59, 63, 0.45)',
-            // borderColor :'rgba(13, 109, 180)',
-            borderWidth:0,
-            hideDelay:100,
-              padding:10*scale,
-              textStyle:{
-                  fontSize:18*scale
-              },
-            formatter: function (params) {
-              if (params[0].data == '') {
-                return ''
-              }
-              var result = ''
-              params.forEach(function (item) {
-                result += item.marker + " " + item.seriesName + "&nbsp;&nbsp;&nbsp;<sapn style='color:#e1e52a;font-weight: bolder'>" + item.value + "</sapn></br>";
-              });
-              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '</div><br/>' + result
-            },
-            trigger: 'axis',
-            extraCssText: 'width: auto;height: auto;',
-            axisPointer: {type: 'line', lineStyle: {width: 0}},
-          },
-          xAxis: [
-            {
-              name: yname,
-              type: 'category',
-              nameTextStyle: {
-                fontSize: 14 * scale,
-                color: '#15dce2',
-                padding: [40 * scale, 0, 0, -60 * scale],
-              },
-              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
-              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
-              axisTick: {show: false},
-              data: xAxisData,
-            }, {
-              type: 'category',
-              axisLine: {
-                show: false
-              },
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                show: false
-              },
-              splitArea: {
-                show: false
-              },
-              splitLine: {
-                show: false
-              },
-              data: xAxisData
-            }, {
-              type: 'category',
-              axisLine: {
-                show: false
-              },
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                show: false
-              },
-              splitArea: {
-                show: false
-              },
-              splitLine: {
-                show: false
-              },
-              data: xAxisData
-            }
-          ],
-          yAxis: [
-            {
-              name: '数量',
-              type: 'value',
-
-              nameTextStyle: {
-                fontSize: 14 * scale,
-                padding: [-10 * scale, 35 * scale, 0, 0],
-              },
-              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)
-      }
-    },
-    watch: {
-      'checkerdata': {
-        deep: true,
-        handler(val) {
-          var value = 0
-          var checkertop = []
-          var checkerbottom = []
-          for (var i = 0; i < this.checkerdata.length; i++) {
-            //选择完成量最多的5个安检员
-            if (i < 6) {
-              let item = {}
-              item.name = this.checkerdata[i].name
-              item.complete = this.checkerdata[i].value
-              item.undone = 0
-              checkertop.push(item)
-            }
-            if (i > this.checkerdata.length - 6) {
-              //选择完成量最少的5个安检员
-              let item = {}
-              item.name = this.checkerdata[i].name
-              item.complete = this.checkerdata[i].value
-              item.undone = 0
-              checkerbottom.push(item)
-            }
-          }
-          this.setBar('taskstatistics', checkertop, '安检完成')
-          this.setBar('taskundone', checkerbottom, '安检未完成')
-          this.$parent.loaddata++
-        }
-      },
-      'resdata': {
-        deep: true,
-        handler(val) {
-          console.log(this.resdata, '测试安检状态据')
-          console.log(this.checkerdata)
-          this.checkerdata = this.resdata
-          console.log(this.checkerdata)
-        },
-      },
-    },
-    ready() {
-      // var data = [
-      //   {name: '小明', complete: '500', undone: '100'},
-      //   {name: '小李', complete: '400', undone: '100'},
-      //   {name: '小王', complete: '300', undone: '100'},
-      //   {name: '小张', complete: '300', undone: '100'},
-      //   {name: '小红', complete: '100', undone: '100'}
-      // ]
-      // this.setBar('taskstatistics', data, '安检完成')
-      // var data1 = [
-      //   {name: '老王', complete: '10', undone: '500'},
-      //   {name: '老明', complete: '30', undone: '400'},
-      //   {name: '老红', complete: '20', undone: '350'},
-      //   {name: '老李', complete: '20', undone: '300'},
-      //   {name: '老张', complete: '40', undone: '200'}
-      // ]
-      // this.setBar('taskundone', data1, '安检未完成')
-
-      let getData = DataSql.getData(this, 'checkertask',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
-      co(getData)
-    }
-  }
-</script>
-
-<style scoped>
-  .label {
-    font-size: 0.85em;
-    color: #fff;
-    height: 8%;
-    width: 100%;
-    margin-left: 6%;
-  }
-
-
-  #taskstatistics {
-    padding: 0 4%;
-    margin-top: 4%;
-    height: 45%;
-    width: 100%;
-  }
-
-  #taskundone {
-    padding: 0 4%;
-    height: 45%;
-    width: 100%;
-  }
-</style>
+<template>
+  <div>
+    <div class="label">安检员任务情况</div>
+      <div id="taskstatistics"></div>
+      <div id="taskundone"></div>
+  </div>
+</template>
+
+<script>
+  import * as DataSql from '../../../stores/DataSql'
+  import co from 'co'
+
+  export default {
+    name: "TaskStatistics",
+    data() {
+      return {
+        checkerdata: [],
+        resdata: [],
+      }
+    },
+    methods: {
+      setBar(id, data, flag) {
+        this.xc = this.$echarts.init(document.getElementById(id))
+        var scale=this.$parent.$parent.$parent.scale
+        var xAxisData = []  //列名
+        var metaDate = []   //完成或未完成数
+        var metaDate1 = []  //总数
+
+        data.forEach(function (s) {
+          xAxisData.push(s.name)
+          metaDate1.push(eval(s.undone + '+' + s.complete))
+          if (flag == '安检完成') {
+            metaDate.push(s.complete)
+          }
+          if (flag == '安检未完成') {
+            metaDate.push(s.undone)
+          }
+        })
+        xAxisData.push("")
+        var legendData = []
+        var color = ''
+        if (flag == '安检完成') {
+          legendData = ['完成数', '总数']
+          color = '#69d8d2'
+        }
+        if (flag == '安检未完成') {
+          legendData = ['未完成数', '总数']
+          color = '#e7c83c'
+        }
+
+        var metaDate2 = []
+        for (var i = 0; i < metaDate.length; i++) {
+          var s = metaDate1[i] - metaDate[i]
+          metaDate2.push(s)
+        }
+
+        var yname = '安检员'
+        var serieData = [
+          {
+            name: legendData[0],
+            type: "bar",
+            stack: "1",
+            barWidth: '40%',
+            barGap: "20%",
+            xAxisIndex: 0,
+            z: 2,
+            itemStyle: {
+              normal: {
+                color: color,
+                label: {
+                  show: false,
+                }
+              }
+            },
+            data: metaDate,
+          },
+          {
+            name: legendData[1],
+            type: "bar",
+            stack: "1",
+            barWidth: '40%',
+            barGap: "-100%",
+            xAxisIndex: 0,
+            z: 2,
+            itemStyle: {
+              normal: {
+                color: '#053850',
+                label: {
+                  show: true,
+                  textStyle: {
+                    color: "#ffffff",
+                    fontSize:14*scale
+                  },
+                  position: "top",
+                  formatter: function (p) {
+                    return metaDate[p.dataIndex] != '' ? metaDate[p.dataIndex] : 0;
+                  }
+                }
+              }
+            },
+            data: metaDate2
+          }
+        ];
+        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]
+        this.xc.setOption({
+          title: {
+            text: flag + 'top5',
+            left: '40%',
+            bottom: '1%',
+            textStyle: {color: "#e7c83c", fontSize: 14 * scale, fontWeight: "normal"}
+          },
+          color: colors,
+          grid: {left: '2%', top: "18%", bottom: "3%", right: "2%", height: '70%', containLabel: true},
+          tooltip: {
+            alwaysShowContent:true,
+            backgroundColor:'rgba(2, 59, 63, 0.45)',
+            // borderColor :'rgba(13, 109, 180)',
+            borderWidth:0,
+            hideDelay:100,
+              padding:10*scale,
+              textStyle:{
+                  fontSize:18*scale
+              },
+            formatter: function (params) {
+              if (params[0].data == '') {
+                return ''
+              }
+              var result = ''
+              params.forEach(function (item) {
+                result += item.marker + " " + item.seriesName + "&nbsp;&nbsp;&nbsp;<sapn style='color:#e1e52a;font-weight: bolder'>" + item.value + "</sapn></br>";
+              });
+              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '</div><br/>' + result
+            },
+            trigger: 'axis',
+            extraCssText: 'width: auto;height: auto;',
+            axisPointer: {type: 'line', lineStyle: {width: 0}},
+          },
+          xAxis: [
+            {
+              name: yname,
+              type: 'category',
+              nameTextStyle: {
+                fontSize: 14 * scale,
+                color: '#15dce2',
+                padding: [40 * scale, 0, 0, -60 * scale],
+              },
+              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
+              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
+              axisTick: {show: false},
+              data: xAxisData,
+            }, {
+              type: 'category',
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: false
+              },
+              splitArea: {
+                show: false
+              },
+              splitLine: {
+                show: false
+              },
+              data: xAxisData
+            }, {
+              type: 'category',
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: false
+              },
+              splitArea: {
+                show: false
+              },
+              splitLine: {
+                show: false
+              },
+              data: xAxisData
+            }
+          ],
+          yAxis: [
+            {
+              name: '数量',
+              type: 'value',
+
+              nameTextStyle: {
+                fontSize: 14 * scale,
+                padding: [-10 * scale, 35 * scale, 0, 0],
+              },
+              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)
+      }
+    },
+    watch: {
+      'checkerdata': {
+        deep: true,
+        handler(val) {
+          var value = 0
+          var checkertop = []
+          var checkerbottom = []
+          for (var i = 0; i < this.checkerdata.length; i++) {
+            //选择完成量最多的5个安检员
+            if (i < 6) {
+              let item = {}
+              item.name = this.checkerdata[i].name
+              item.complete = this.checkerdata[i].value
+              item.undone = 0
+              checkertop.push(item)
+            }
+            if (i > this.checkerdata.length - 6) {
+              //选择完成量最少的5个安检员
+              let item = {}
+              item.name = this.checkerdata[i].name
+              item.complete = this.checkerdata[i].value
+              item.undone = 0
+              checkerbottom.push(item)
+            }
+          }
+          this.setBar('taskstatistics', checkertop, '安检完成')
+          this.setBar('taskundone', checkerbottom, '安检未完成')
+          this.$parent.loaddata++
+        }
+      },
+      'resdata': {
+        deep: true,
+        handler(val) {
+          console.log(this.resdata, '测试安检状态据')
+          console.log(this.checkerdata)
+          this.checkerdata = this.resdata
+          console.log(this.checkerdata)
+        },
+      },
+    },
+    ready() {
+      // var data = [
+      //   {name: '小明', complete: '500', undone: '100'},
+      //   {name: '小李', complete: '400', undone: '100'},
+      //   {name: '小王', complete: '300', undone: '100'},
+      //   {name: '小张', complete: '300', undone: '100'},
+      //   {name: '小红', complete: '100', undone: '100'}
+      // ]
+      // this.setBar('taskstatistics', data, '安检完成')
+      // var data1 = [
+      //   {name: '老王', complete: '10', undone: '500'},
+      //   {name: '老明', complete: '30', undone: '400'},
+      //   {name: '老红', complete: '20', undone: '350'},
+      //   {name: '老李', complete: '20', undone: '300'},
+      //   {name: '老张', complete: '40', undone: '200'}
+      // ]
+      // this.setBar('taskundone', data1, '安检未完成')
+
+      let getData = DataSql.getData(this, 'checkertask',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
+      co(getData)
+    }
+  }
+</script>
+
+<style scoped>
+  .label {
+    font-size: 0.85em;
+    color: #fff;
+    height: 8%;
+    width: 100%;
+    margin-left: 6%;
+  }
+
+
+  #taskstatistics {
+    padding: 0 4%;
+    margin-top: 4%;
+    height: 45%;
+    width: 100%;
+  }
+
+  #taskundone {
+    padding: 0 4%;
+    height: 45%;
+    width: 100%;
+  }
+</style>