manage-client 3.2.49 → 3.2.53

package/src/components/yulin/SingleBarLine.vue

@@ -1,352 +1,352 @@
-<template>
-  <div>
-    <div class="auto" style="height: 5%">
-      <div class="form-group">
-        <label for="year" class="col-sm-4 col-sm-offset-4" style="color:#fff;line-height: 32px">年份</label>
-        <div class="col-sm-4">
-          <input class="form-control" type="number" id="year" v-model="year" @blur="getYear()"/>
-        </div>
-      </div>
-    </div>
-    <div id="single-bar-chart">
-    </div>
-  </div>
-</template>
-
-<script>
-  import echarts from 'echarts'
-  import {HttpResetClass} from 'vue-client'
-  export default {
-    title: '收费',
-    data () {
-      return {
-        xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-        threeArr: [10, 10, 30, 12, 15, 3, 7, 18, 20, 30, 50, 70],
-        twoArr: [5, 12, 11, 14, 25, 16, 10, 17, 26, 35, 67, 36],
-        oneArr: [12, 13, 31, 44, 55, 136, 120, 27, 25, 12, 35, 56],
-        barchart: {},
-        interval:0,
-        year: 2021,
-        year1: 2021,
-        year2: 2020,
-        year3: 2019
-      }
-    },
-    methods: {
-      initEchart(dataZoom) {
-        const colorList = ["#9E87FF", '#fe9a8b', '#73DD39']
-        let option = {
-          backgroundColor: '#ffffff00',
-          title: {
-            text: '售气量分析图(单位/万m³)',
-            left: 'left',
-            textStyle: {
-              color: '#fff'
-            }
-          },
-          legend: {
-            icon: 'circle',
-            top: '5%',
-            right: '5%',
-            itemWidth: 6,
-            itemGap: 20,
-            textStyle: {
-              color: '#fff'
-            }
-          },
-          tooltip: {
-            trigger: 'axis',
-            extraCssText: 'width: auto;height: auto;box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
-            axisPointer: {
-              label: {
-                show: true,
-                backgroundColor: '#fff',
-                color: '#556677',
-                borderColor: 'rgba(0,0,0,0)',
-                shadowColor: 'rgba(0,0,0,0)',
-                shadowOffsetY: 0
-              },
-              lineStyle: {
-                width: 0
-              }
-            },
-
-            textStyle: {
-              color: '#fff'
-            },
-            padding: [10, 10]
-          },
-          grid: {
-            top: '15%'
-          },
-          xAxis: [{
-            type: 'category',
-            data: this.xData,
-            axisLine: {
-              lineStyle: {
-                color: 'rgba(107,107,107,0.37)', //x轴颜色
-              }
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              interval: this.interval,
-              textStyle: {
-                color: '#fff' //坐标轴字颜色
-              },
-              margin: 15
-            },
-            axisPointer: {
-              label: {
-                padding: [11, 5, 7],
-                backgroundColor: {
-                  type: 'linear',
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [{
-                    offset: 0,
-                    color: '#fff' // 0% 处的颜色
-                  }, {
-                    offset: 0.9,
-                    color: '#fff' // 0% 处的颜色
-                  }, {
-                    offset: 0.9,
-                    color: '#33c0cd' // 0% 处的颜色
-                  }, {
-                    offset: 1,
-                    color: '#33c0cd' // 100% 处的颜色
-                  }],
-                  global: false // 缺省为 false
-                }
-              }
-            },
-            boundaryGap: false
-          }],
-          yAxis: [{
-            type: 'value',
-            axisTick: {
-              show: false
-            },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: 'rgba(107,107,107,0.37)', //y轴颜色
-              }
-            },
-            axisLabel: {
-              textStyle: {
-                color: '#fff'
-              }
-            },
-            splitLine: {
-              show: false
-            }
-          }],
-          series: [{
-            name: this.year1,
-            type: 'line',
-            data: this.threeArr,
-            symbolSize: 5,
-            symbol: 'circle',
-            smooth: true,
-            yAxisIndex: 0,
-            showSymbol: false,
-            dataZoom: [{show: false, disabled: true}],
-            lineStyle: {
-              width: 2,
-              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                offset: 0,
-                color: '#9E87FF'
-              },
-                {
-                  offset: 1,
-                  color: '#9E87FF'
-                }
-              ])
-            },
-            itemStyle: {
-              normal: {
-                color: colorList[0],
-                borderColor: colorList[0]
-              }
-            }
-          }, {
-            name: this.year2,
-            type: 'line',
-            data: this.twoArr,
-            symbolSize: 5,
-            symbol: 'circle',
-            smooth: true,
-            yAxisIndex: 0,
-            showSymbol: false,
-            lineStyle: {
-              width: 2,
-              color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
-                offset: 0,
-                color: '#fe9a8b'
-              },
-                {
-                  offset: 1,
-                  color: '#fe9a8b'
-                }
-              ])
-            },
-            itemStyle: {
-              normal: {
-                color: colorList[1],
-                borderColor: colorList[1]
-              }
-            }
-          },
-            {
-              name: this.year3,
-              type: 'line',
-              data: this.oneArr,
-              symbolSize: 5,
-              symbol: 'circle',
-              smooth: true,
-              yAxisIndex: 0,
-              showSymbol: false,
-              lineStyle: {
-                width: 2,
-                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
-                  offset: 0,
-                  color: '#73DD39'
-                },
-                  {
-                    offset: 1,
-                    color: '#73DD39'
-                  }
-                ])
-              },
-              itemStyle: {
-                normal: {
-                  color: colorList[2],
-                  borderColor: colorList[2]
-                }
-              }
-            }
-          ]
-        }
-
-        if (dataZoom !== 'cancle') {
-          this.interval = 2
-          option.dataZoom = dataZoom
-        } else {
-          this.interval = 0
-          console.log('cancle')
-          option.dataZoom = [{show: false, disabled: true}]
-          console.log(option)
-        }
-        this.barchart = echarts.init(document.getElementById('single-bar-chart'))
-        this.barchart.off('click')
-        this.barchart.setOption(option)
-      },
-      getYear () {
-        if (this.year) {
-          this.year = parseInt(this.year)
-          this.year1 = parseInt(this.year)
-          this.year2 = parseInt(this.year) - 1
-          this.year3 = parseInt(this.year) - 2
-        }
-        let data = {year: this.year, condition: '1=1'}
-        this.xData= ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-        this.getInitData(data, 'cancle')
-      },
-      // getData() {
-      //   this.initEchart()
-      // },
-      init (dataZoom) {
-        this.initEchart(dataZoom)
-        var _this = this
-        // 添加点击事件
-        this.barchart.on('click', function (param) {
-          // 初始化dataZoom
-          _this.xData = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日']
-          let dataZoom = [{
-            show: false,
-            height: 15,
-            xAxisIndex: [0],
-            bottom: 0,
-            start: 0,
-            end: 100,
-            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
-            handleSize: '110%',
-            handleStyle: {
-              color: "#d3dee5",
-            },
-            textStyle: {
-              show: false,
-              color: "rgba(204,187,225,0.5)",
-            },
-            fillerColor: "rgba(115,221,255, 0.3)",
-            borderColor: "#90979c",
-
-          }, {
-            type: "inside",
-            show: false,
-            height: 15,
-            start: 1,
-            end: 35
-          }]
-          let data = {
-            year: _this.year, condition: '1=1',month: parseInt(param.name)
-          }
-          // 判断是否刷新数据
-          if (_this.year1.toString().indexOf('月') === -1){
-            _this.year1 = _this.year1 + '年' + param.name
-            _this.year2 = _this.year2 + '年' + param.name
-            _this.year3 = _this.year3 + '年' + param.name
-            _this.getInitData(data, dataZoom)
-          }
-        })
-      },
-      getInitData (data, dataZoom) {
-        let http = new HttpResetClass()
-        http.load('post', '/rs/logic/getGasAmount', data, {rejectMsg: null, resolveMsg: null}).then((res) => {
-          this.threeArr = []
-          this.twoArr = []
-          this.oneArr = []
-          console.log(res.data.data)
-          let getData = res.data.data
-          for (let i = 0; i < getData.length; i++) {
-            console.log('年份' + parseInt(getData[i].month.substr(0, 4)))
-            if (parseInt(getData[i].month.substr(0, 4)) === this.year) {
-              this.threeArr.push(getData[i].f_pregas / 10000)
-            }
-            if (parseInt(getData[i].month.substr(0, 4)) === this.year - 1) {
-              this.twoArr.push(getData[i].f_pregas / 10000)
-            }
-            if (parseInt(getData[i].month.substr(0, 4)) === this.year - 2) {
-              this.oneArr.push(getData[i].f_pregas / 10000)
-            }
-            this.init(dataZoom)
-          }
-        })
-      }
-    },
-    ready () {
-      let date = new Date()
-      this.year = parseInt(date.getFullYear())
-      this.year1 = parseInt(this.year)
-      this.year2 = parseInt(this.year) - 1
-      this.year3 = parseInt(this.year) - 2
-      let data = {
-        condition: '1=1',
-        year: this.year
-      }
-      // 获取初始化数据  cancle作为dataZoom显示标志
-      this.getInitData(data, 'cancle')
-    },
-    props: {}
-  }
-</script>
-<style scoped>
-  /*div{*/
-  /*height: auto;*/
-  /*}*/
-</style>
-
+<template>
+  <div>
+    <div class="auto" style="height: 5%">
+      <div class="form-group">
+        <label for="year" class="col-sm-4 col-sm-offset-4" style="color:#fff;line-height: 32px">年份</label>
+        <div class="col-sm-4">
+          <input class="form-control" type="number" id="year" v-model="year" @blur="getYear()"/>
+        </div>
+      </div>
+    </div>
+    <div id="single-bar-chart">
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import {HttpResetClass} from 'vue-client'
+  export default {
+    title: '收费',
+    data () {
+      return {
+        xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        threeArr: [10, 10, 30, 12, 15, 3, 7, 18, 20, 30, 50, 70],
+        twoArr: [5, 12, 11, 14, 25, 16, 10, 17, 26, 35, 67, 36],
+        oneArr: [12, 13, 31, 44, 55, 136, 120, 27, 25, 12, 35, 56],
+        barchart: {},
+        interval:0,
+        year: 2021,
+        year1: 2021,
+        year2: 2020,
+        year3: 2019
+      }
+    },
+    methods: {
+      initEchart(dataZoom) {
+        const colorList = ["#9E87FF", '#fe9a8b', '#73DD39']
+        let option = {
+          backgroundColor: '#ffffff00',
+          title: {
+            text: '售气量分析图(单位/万m³)',
+            left: 'left',
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          legend: {
+            icon: 'circle',
+            top: '5%',
+            right: '5%',
+            itemWidth: 6,
+            itemGap: 20,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            extraCssText: 'width: auto;height: auto;box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
+            axisPointer: {
+              label: {
+                show: true,
+                backgroundColor: '#fff',
+                color: '#556677',
+                borderColor: 'rgba(0,0,0,0)',
+                shadowColor: 'rgba(0,0,0,0)',
+                shadowOffsetY: 0
+              },
+              lineStyle: {
+                width: 0
+              }
+            },
+
+            textStyle: {
+              color: '#fff'
+            },
+            padding: [10, 10]
+          },
+          grid: {
+            top: '15%'
+          },
+          xAxis: [{
+            type: 'category',
+            data: this.xData,
+            axisLine: {
+              lineStyle: {
+                color: 'rgba(107,107,107,0.37)', //x轴颜色
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              interval: this.interval,
+              textStyle: {
+                color: '#fff' //坐标轴字颜色
+              },
+              margin: 15
+            },
+            axisPointer: {
+              label: {
+                padding: [11, 5, 7],
+                backgroundColor: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [{
+                    offset: 0,
+                    color: '#fff' // 0% 处的颜色
+                  }, {
+                    offset: 0.9,
+                    color: '#fff' // 0% 处的颜色
+                  }, {
+                    offset: 0.9,
+                    color: '#33c0cd' // 0% 处的颜色
+                  }, {
+                    offset: 1,
+                    color: '#33c0cd' // 100% 处的颜色
+                  }],
+                  global: false // 缺省为 false
+                }
+              }
+            },
+            boundaryGap: false
+          }],
+          yAxis: [{
+            type: 'value',
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(107,107,107,0.37)', //y轴颜色
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#fff'
+              }
+            },
+            splitLine: {
+              show: false
+            }
+          }],
+          series: [{
+            name: this.year1,
+            type: 'line',
+            data: this.threeArr,
+            symbolSize: 5,
+            symbol: 'circle',
+            smooth: true,
+            yAxisIndex: 0,
+            showSymbol: false,
+            dataZoom: [{show: false, disabled: true}],
+            lineStyle: {
+              width: 2,
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                offset: 0,
+                color: '#9E87FF'
+              },
+                {
+                  offset: 1,
+                  color: '#9E87FF'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: colorList[0],
+                borderColor: colorList[0]
+              }
+            }
+          }, {
+            name: this.year2,
+            type: 'line',
+            data: this.twoArr,
+            symbolSize: 5,
+            symbol: 'circle',
+            smooth: true,
+            yAxisIndex: 0,
+            showSymbol: false,
+            lineStyle: {
+              width: 2,
+              color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
+                offset: 0,
+                color: '#fe9a8b'
+              },
+                {
+                  offset: 1,
+                  color: '#fe9a8b'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: colorList[1],
+                borderColor: colorList[1]
+              }
+            }
+          },
+            {
+              name: this.year3,
+              type: 'line',
+              data: this.oneArr,
+              symbolSize: 5,
+              symbol: 'circle',
+              smooth: true,
+              yAxisIndex: 0,
+              showSymbol: false,
+              lineStyle: {
+                width: 2,
+                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
+                  offset: 0,
+                  color: '#73DD39'
+                },
+                  {
+                    offset: 1,
+                    color: '#73DD39'
+                  }
+                ])
+              },
+              itemStyle: {
+                normal: {
+                  color: colorList[2],
+                  borderColor: colorList[2]
+                }
+              }
+            }
+          ]
+        }
+
+        if (dataZoom !== 'cancle') {
+          this.interval = 2
+          option.dataZoom = dataZoom
+        } else {
+          this.interval = 0
+          console.log('cancle')
+          option.dataZoom = [{show: false, disabled: true}]
+          console.log(option)
+        }
+        this.barchart = echarts.init(document.getElementById('single-bar-chart'))
+        this.barchart.off('click')
+        this.barchart.setOption(option)
+      },
+      getYear () {
+        if (this.year) {
+          this.year = parseInt(this.year)
+          this.year1 = parseInt(this.year)
+          this.year2 = parseInt(this.year) - 1
+          this.year3 = parseInt(this.year) - 2
+        }
+        let data = {year: this.year, condition: '1=1'}
+        this.xData= ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        this.getInitData(data, 'cancle')
+      },
+      // getData() {
+      //   this.initEchart()
+      // },
+      init (dataZoom) {
+        this.initEchart(dataZoom)
+        var _this = this
+        // 添加点击事件
+        this.barchart.on('click', function (param) {
+          // 初始化dataZoom
+          _this.xData = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日']
+          let dataZoom = [{
+            show: false,
+            height: 15,
+            xAxisIndex: [0],
+            bottom: 0,
+            start: 0,
+            end: 100,
+            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+            handleSize: '110%',
+            handleStyle: {
+              color: "#d3dee5",
+            },
+            textStyle: {
+              show: false,
+              color: "rgba(204,187,225,0.5)",
+            },
+            fillerColor: "rgba(115,221,255, 0.3)",
+            borderColor: "#90979c",
+
+          }, {
+            type: "inside",
+            show: false,
+            height: 15,
+            start: 1,
+            end: 35
+          }]
+          let data = {
+            year: _this.year, condition: '1=1',month: parseInt(param.name)
+          }
+          // 判断是否刷新数据
+          if (_this.year1.toString().indexOf('月') === -1){
+            _this.year1 = _this.year1 + '年' + param.name
+            _this.year2 = _this.year2 + '年' + param.name
+            _this.year3 = _this.year3 + '年' + param.name
+            _this.getInitData(data, dataZoom)
+          }
+        })
+      },
+      getInitData (data, dataZoom) {
+        let http = new HttpResetClass()
+        http.load('post', '/rs/logic/getGasAmount', data, {rejectMsg: null, resolveMsg: null}).then((res) => {
+          this.threeArr = []
+          this.twoArr = []
+          this.oneArr = []
+          console.log(res.data.data)
+          let getData = res.data.data
+          for (let i = 0; i < getData.length; i++) {
+            console.log('年份' + parseInt(getData[i].month.substr(0, 4)))
+            if (parseInt(getData[i].month.substr(0, 4)) === this.year) {
+              this.threeArr.push(getData[i].f_pregas / 10000)
+            }
+            if (parseInt(getData[i].month.substr(0, 4)) === this.year - 1) {
+              this.twoArr.push(getData[i].f_pregas / 10000)
+            }
+            if (parseInt(getData[i].month.substr(0, 4)) === this.year - 2) {
+              this.oneArr.push(getData[i].f_pregas / 10000)
+            }
+            this.init(dataZoom)
+          }
+        })
+      }
+    },
+    ready () {
+      let date = new Date()
+      this.year = parseInt(date.getFullYear())
+      this.year1 = parseInt(this.year)
+      this.year2 = parseInt(this.year) - 1
+      this.year3 = parseInt(this.year) - 2
+      let data = {
+        condition: '1=1',
+        year: this.year
+      }
+      // 获取初始化数据  cancle作为dataZoom显示标志
+      this.getInitData(data, 'cancle')
+    },
+    props: {}
+  }
+</script>
+<style scoped>
+  /*div{*/
+  /*height: auto;*/
+  /*}*/
+</style>
+