manage-client 3.2.11 → 3.2.15

package/src/components/ManageHomeCS/Monitor/BuySub.vue

@@ -1,339 +1,339 @@
-<template>
-  <div>
-    <div class="label">售差分析</div>
-    <div id="BuySub"></div>
-  </div>
-</template>
-
-<script>
-  import * as DataSql from '../../../stores/DataSql'
-  import co from 'co'
-  import * as Util from '../../../Util'
-
-  export default {
-    name: "BuySub",
-    data() {
-      return {
-        xc: '',
-        year: '',
-        resdata: [],
-        gassupply: [],
-        gasbuy: [],
-        gasbuysub: [],
-        timer:''
-      }
-    },
-    beforeDestroy() {
-      //清除定时器
-      clearInterval(this.timer);
-    },
-    methods: {
-      setBar() {
-        this.xc = this.$echarts.init(document.getElementById('BuySub'))
-        var scale=this.$parent.$parent.$parent.scale
-        var xAxisData = []
-        var metaDate = []
-        var metaDate1 = []
-
-        this.gassupply.forEach(function (s) {
-          xAxisData.push(s.name)
-          metaDate1.push(s.value)
-        })
-        this.gasbuy.forEach(function (l) {
-          metaDate.push(l.value)
-        })
-        xAxisData.push("")
-        var legendData = ['售气量', '供气量']
-
-
-        var metaDate2 = []
-        for (var i = 0; i < metaDate.length; i++) {
-          var s = metaDate1[i] - metaDate[i]
-          metaDate2.push(s)
-        }
-        var Auxiliarydata = []
-        this.gasbuysub.forEach(function (m) {
-          var index = m.value.toString().indexOf(".")
-          Auxiliarydata.push(m.value.toString().substring(0, index + 3))
-        })
-        var yname = '年'
-        var serieData = [
-          {
-            name: legendData[0],
-            type: "bar",
-            stack: "1",
-            barWidth: '40%',
-            barGap: "20%",
-            xAxisIndex: 0,
-            z: 2,
-            itemStyle: {
-              normal: {
-                color: "#2f9ed1",
-                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 Auxiliarydata[p.dataIndex] != '' ? Auxiliarydata[p.dataIndex] + '%' : '0%';
-                  }
-                }
-              }
-            },
-            data: metaDate2
-          }
-        ];
-        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]
-        this.xc.setOption({
-          title: {text: '', textAlign: 'left', textStyle: {color: "#fff", fontSize: "16*scale", fontWeight: "normal"}},
-          color: colors,
-          grid: {left: '4%', top: "18%", bottom: "3%", right: "5%", 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].axisValue == '') {
-                return ''
-              }
-              var result = ''
-              for (var i = 0; i < params.length; i++) {
-                let item = params[i].value
-
-                if (params[i].seriesName == '供气量') {
-                  item = metaDate1[params[i].dataIndex]
-                }
-                result = result + params[i].seriesName + '&nbsp;&nbsp;&nbsp;<span style="font-weight: bolder;color:#e1e52a;">' + DataSql.dataunit(item) + '</span><br/>'
-              }
-              // result = "供气量 ： " + metaDate1[params[0].dataIndex] + "<br/>" + params[0].seriesName + " ：" + params[0].value + "<br/>"
-              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '年 </div><br/> ' + result + "售差比 &nbsp;&nbsp;&nbsp;<span style='font-weight: bolder;color:#e1e52a;'>" + Auxiliarydata[params[0].dataIndex] + '%</span>'
-            },
-            axisPointer: {type: 'line', lineStyle: {width: 0}},
-            trigger: 'axis',
-            extraCssText: 'width: auto;height: auto;'
-          },
-          xAxis: [
-            {
-              name: yname,
-              type: 'category',
-              nameTextStyle: {
-                fontSize: 14 * scale,
-                color: '#15dce2',
-                padding: [40 * scale, 0, 0, -50 * 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) + '万'
-                  }
-                }
-              },
-              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
-            },
-          ],
-          series: serieData
-        }, true)
-
-        let idx = -1;
-        var dataLen=metaDate.length
-        var oroptionmapjsonr_charts1=this.xc
-        this.timer= setInterval(()=>{
-          idx = (idx+ 1) % dataLen;
-          oroptionmapjsonr_charts1.dispatchAction({
-            type: 'showTip',
-            seriesIndex: 1,
-            dataIndex: idx
-          });
-
-        }, 3000)
-      },
-    },
-    watch: {
-      //监听浏览器大小变化
-      'listenheight':
-        {
-          deep: true,
-          handler(val) {
-            if (this.listenheight !== '') {
-              // this.$parent.$parent.changeresize(this.xc)
-            }
-          }
-          ,
-          immediate: true
-        }
-      ,
-      'resdata':
-        {
-          deep: true,
-          handler(val) {
-            console.log(this.resdata, '测试安检数据')
-            var self = this
-            let ss = [{
-              "mingyong": 1320073949.9925918,
-              "year": 2015,
-              "menzhan": 2712865655,
-              "bigua": 646517409.5704748,
-              "sum": 2590786701.72130392,
-              "buysub": 4.444444,
-              "gongye": 624195342.15823732
-            }, {
-              "mingyong": 1480585102.07480832,
-              "year": 2016,
-              "menzhan": 3144163445,
-              "bigua": 720106956.6559638,
-              "sum": 3002676090.88791644,
-              "buysub": 4.444444,
-              "gongye": 801984032.15714432
-            }, {
-              "mingyong": 1566106468.36711528,
-              "year": 2017,
-              "menzhan": 3371415280,
-              "bigua": 757701474.80762272,
-              "sum": 3219701592.38536412,
-              "buysub": 4.444444,
-              "gongye": 895893649.21062612
-            }, {
-              "mingyong": 6455508724.215388292000000000000000000001,
-              "year": 2018,
-              "menzhan": 15793238393,
-              "bigua": 3037696848.465216433052631578947368421053,
-              "sum": 12718452812.4932287004210526315789473684,
-              "buysub": 19.46965745263157894736842105263157894737,
-              "gongye": 3225247239.812623975368421052631578947369
-            }]
-
-            // this.resdata.forEach(function (s) {
-            ss.forEach(function (s) {
-              let item = {}
-              item.name = s.year
-              item.value = s.sum
-              self.gasbuy.push(item)
-              let item1 = {}
-              item1.name = s.year
-              item1.value = s.menzhan
-              self.gassupply.push(item1)
-              let item2 = {}
-              item2.name = s.year
-              item2.value = s.buysub
-              self.gasbuysub.push(item2)
-            })
-            self.setBar()
-            this.$parent.loaddata++
-          },
-        },
-    },
-    ready() {
-      this.year = Util.toStandardDateString()
-      this.year = this.year.toString().substring(0, 4)
-      // let getData = DataSql.getData(this, 'buysub',{startDate:eval(this.year + '-4') + '-01-01 00:00:00',endDate:Util.toStandardDateString()}, 'resdata')
-      // co(getData)
-      this.resdata = 1
-
-      // this.linesql(eval(this.year + '-4'), eval(this.year + '+1'))
-    }
-  }
-</script>
-
-<style scoped>
-  .label {
-    margin-left: 6%;
-    font-size: 0.85em;
-    color: #fff;
-    height: 8%;
-  }
-
-  #NoBuyGas {
-    height: 91%;
-    width: 99%;
-    padding: 1% 2% 3% 2%;
-
-  }
-</style>
+<template>
+  <div>
+    <div class="label">售差分析</div>
+    <div id="BuySub"></div>
+  </div>
+</template>
+
+<script>
+  import * as DataSql from '../../../stores/DataSql'
+  import co from 'co'
+  import * as Util from '../../../Util'
+
+  export default {
+    name: "BuySub",
+    data() {
+      return {
+        xc: '',
+        year: '',
+        resdata: [],
+        gassupply: [],
+        gasbuy: [],
+        gasbuysub: [],
+        timer:''
+      }
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.timer);
+    },
+    methods: {
+      setBar() {
+        this.xc = this.$echarts.init(document.getElementById('BuySub'))
+        var scale=this.$parent.$parent.$parent.scale
+        var xAxisData = []
+        var metaDate = []
+        var metaDate1 = []
+
+        this.gassupply.forEach(function (s) {
+          xAxisData.push(s.name)
+          metaDate1.push(s.value)
+        })
+        this.gasbuy.forEach(function (l) {
+          metaDate.push(l.value)
+        })
+        xAxisData.push("")
+        var legendData = ['售气量', '供气量']
+
+
+        var metaDate2 = []
+        for (var i = 0; i < metaDate.length; i++) {
+          var s = metaDate1[i] - metaDate[i]
+          metaDate2.push(s)
+        }
+        var Auxiliarydata = []
+        this.gasbuysub.forEach(function (m) {
+          var index = m.value.toString().indexOf(".")
+          Auxiliarydata.push(m.value.toString().substring(0, index + 3))
+        })
+        var yname = '年'
+        var serieData = [
+          {
+            name: legendData[0],
+            type: "bar",
+            stack: "1",
+            barWidth: '40%',
+            barGap: "20%",
+            xAxisIndex: 0,
+            z: 2,
+            itemStyle: {
+              normal: {
+                color: "#2f9ed1",
+                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 Auxiliarydata[p.dataIndex] != '' ? Auxiliarydata[p.dataIndex] + '%' : '0%';
+                  }
+                }
+              }
+            },
+            data: metaDate2
+          }
+        ];
+        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]
+        this.xc.setOption({
+          title: {text: '', textAlign: 'left', textStyle: {color: "#fff", fontSize: "16*scale", fontWeight: "normal"}},
+          color: colors,
+          grid: {left: '4%', top: "18%", bottom: "3%", right: "5%", 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].axisValue == '') {
+                return ''
+              }
+              var result = ''
+              for (var i = 0; i < params.length; i++) {
+                let item = params[i].value
+
+                if (params[i].seriesName == '供气量') {
+                  item = metaDate1[params[i].dataIndex]
+                }
+                result = result + params[i].seriesName + '&nbsp;&nbsp;&nbsp;<span style="font-weight: bolder;color:#e1e52a;">' + DataSql.dataunit(item) + '</span><br/>'
+              }
+              // result = "供气量 ： " + metaDate1[params[0].dataIndex] + "<br/>" + params[0].seriesName + " ：" + params[0].value + "<br/>"
+              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '年 </div><br/> ' + result + "售差比 &nbsp;&nbsp;&nbsp;<span style='font-weight: bolder;color:#e1e52a;'>" + Auxiliarydata[params[0].dataIndex] + '%</span>'
+            },
+            axisPointer: {type: 'line', lineStyle: {width: 0}},
+            trigger: 'axis',
+            extraCssText: 'width: auto;height: auto;'
+          },
+          xAxis: [
+            {
+              name: yname,
+              type: 'category',
+              nameTextStyle: {
+                fontSize: 14 * scale,
+                color: '#15dce2',
+                padding: [40 * scale, 0, 0, -50 * 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) + '万'
+                  }
+                }
+              },
+              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
+            },
+          ],
+          series: serieData
+        }, true)
+
+        let idx = -1;
+        var dataLen=metaDate.length
+        var oroptionmapjsonr_charts1=this.xc
+        this.timer= setInterval(()=>{
+          idx = (idx+ 1) % dataLen;
+          oroptionmapjsonr_charts1.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 1,
+            dataIndex: idx
+          });
+
+        }, 3000)
+      },
+    },
+    watch: {
+      //监听浏览器大小变化
+      'listenheight':
+        {
+          deep: true,
+          handler(val) {
+            if (this.listenheight !== '') {
+              // this.$parent.$parent.changeresize(this.xc)
+            }
+          }
+          ,
+          immediate: true
+        }
+      ,
+      'resdata':
+        {
+          deep: true,
+          handler(val) {
+            console.log(this.resdata, '测试安检数据')
+            var self = this
+            let ss = [{
+              "mingyong": 1320073949.9925918,
+              "year": 2015,
+              "menzhan": 2712865655,
+              "bigua": 646517409.5704748,
+              "sum": 2590786701.72130392,
+              "buysub": 4.444444,
+              "gongye": 624195342.15823732
+            }, {
+              "mingyong": 1480585102.07480832,
+              "year": 2016,
+              "menzhan": 3144163445,
+              "bigua": 720106956.6559638,
+              "sum": 3002676090.88791644,
+              "buysub": 4.444444,
+              "gongye": 801984032.15714432
+            }, {
+              "mingyong": 1566106468.36711528,
+              "year": 2017,
+              "menzhan": 3371415280,
+              "bigua": 757701474.80762272,
+              "sum": 3219701592.38536412,
+              "buysub": 4.444444,
+              "gongye": 895893649.21062612
+            }, {
+              "mingyong": 6455508724.215388292000000000000000000001,
+              "year": 2018,
+              "menzhan": 15793238393,
+              "bigua": 3037696848.465216433052631578947368421053,
+              "sum": 12718452812.4932287004210526315789473684,
+              "buysub": 19.46965745263157894736842105263157894737,
+              "gongye": 3225247239.812623975368421052631578947369
+            }]
+
+            // this.resdata.forEach(function (s) {
+            ss.forEach(function (s) {
+              let item = {}
+              item.name = s.year
+              item.value = s.sum
+              self.gasbuy.push(item)
+              let item1 = {}
+              item1.name = s.year
+              item1.value = s.menzhan
+              self.gassupply.push(item1)
+              let item2 = {}
+              item2.name = s.year
+              item2.value = s.buysub
+              self.gasbuysub.push(item2)
+            })
+            self.setBar()
+            this.$parent.loaddata++
+          },
+        },
+    },
+    ready() {
+      this.year = Util.toStandardDateString()
+      this.year = this.year.toString().substring(0, 4)
+      // let getData = DataSql.getData(this, 'buysub',{startDate:eval(this.year + '-4') + '-01-01 00:00:00',endDate:Util.toStandardDateString()}, 'resdata')
+      // co(getData)
+      this.resdata = 1
+
+      // this.linesql(eval(this.year + '-4'), eval(this.year + '+1'))
+    }
+  }
+</script>
+
+<style scoped>
+  .label {
+    margin-left: 6%;
+    font-size: 0.85em;
+    color: #fff;
+    height: 8%;
+  }
+
+  #NoBuyGas {
+    height: 91%;
+    width: 99%;
+    padding: 1% 2% 3% 2%;
+
+  }
+</style>