manage-client 3.2.78-aode → 3.2.78-jb

package/src/components/yulin/SingleBarLine.vue

@@ -0,0 +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>
+

package/src/components/yulin/Trend.vue

@@ -0,0 +1,336 @@
+<template>
+  <div>
+    <!-- <div class="auto" style="height: 5%;">
+      <button class="btn btn-link" @click="refresh()" style="position: relative;color: #fff;top: 40%;left: 85%;">返回</button>
+    </div> -->
+  <div id="trend">
+
+  </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import co from 'co'
+  import {HttpResetClass} from 'vue-client'
+  let getDataGen = function * (self, data, sign) {
+    // 判断是年份还是月份
+    console.log('sign'+ sign)
+    if (sign === 'year') {
+      let url = 'rs/logic/getNetLenYear'
+      // data = {f_filialeids: '150'}
+      // self.xData = ['2021', '2020', '2019', '2018']
+      yield self.$resetpost(url, data, {rejectMsg: null, resolveMsg: null}).then((res) => {
+        console.log(res.data)
+        // let getData = res.data.data
+        // for (let i = 0; i < getData.length; i++) {
+        // }
+        self.init()
+      })
+    } else {
+      // self.xData = function () {
+      //   var data = []
+      //   for (var i = 1; i < 13; i++) {
+      //     data.push(i + '月')
+      //   }
+      //   return data
+      // }()
+      // let url = '/rs/logic/getGasAmount'
+      // yield self.$resetpost(url, data, {rejectMsg: null, resolveMsg: null}).then((res) => {
+      //   self.init()
+      // })
+    }
+  }
+  export default {
+    title: '收费',
+    data () {
+      return {
+        trendchart: {},
+        xData: ['2021', '2020', '2019', '2018'],
+        year: 2021,
+        data1: [709, 1917, 2455, 2610],
+        data2: [327, 1776, 507, 1200],
+        data3: [1036, 3693, 2962, 3810]
+      }
+    },
+    methods: {
+      // 初始化echarts
+      initEchart () {
+        let option = {
+          backgroundColor: '#ffffff00',
+          title: {
+            text: "建设管材长度",
+            x: "4%",
+
+            textStyle: {
+              color: '#fff',
+              fontSize: '22'
+            },
+            subtextStyle: {
+              color: '#90979c',
+              fontSize: '16'
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            formatter: function (params) {
+              console.log('格式化的参数··················································')
+              console.log(params)
+              console.log(params[0].seriesName)
+              return   params[0].seriesName + " " + params[0].data + "米"
+            },
+            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: {
+            borderWidth: 0,
+            top: 110,
+            bottom: 95,
+            textStyle: {
+              color: "#fff"
+            },
+            left:'15%'
+          },
+          legend: {
+            x: '4%',
+            top: '8%',
+            textStyle: {
+              color: '#fff',
+            },
+            data: ['长度']
+          },
+          calculable: true,
+          xAxis: [{
+            type: "category",
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitArea: {
+              show: false
+            },
+            axisLabel: {
+              interval: 0
+            },
+            data: this.xData
+          }],
+          yAxis: [{
+            type: "value",
+            splitLine: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              interval: 0
+            },
+            splitArea: {
+              show: false
+            }
+          }],
+          series: [{
+            name: "长度",
+            type: "bar",
+            stack: "总量",
+            barMaxWidth: 35,
+            barGap: "10%",
+            itemStyle: {
+              normal: {
+                color: "rgba(255,144,128,1)",
+                label: {
+                  show: true,
+                  textStyle: {
+                    color: "#fff"
+                  },
+                  position: "inside",
+                  formatter: function (p) {
+                    return p.value > 0 ? (p.value) : '';
+                  }
+                }
+              }
+            },
+            data: this.data1,
+          },
+            // {
+            //   name: "PE管",
+            //   type: "bar",
+            //   stack: "总量",
+            //   itemStyle: {
+            //     normal: {
+            //       color: "rgba(0,191,183,1)",
+            //       barBorderRadius: 0,
+            //       label: {
+            //         show: true,
+            //         position: "inside",
+            //         formatter: function (p) {
+            //           return p.value > 0 ? (p.value) : '';
+            //         }
+            //       }
+            //     }
+            //   },
+            //   data: this.data2
+            // },
+            // {
+            //   name: "总数",
+            //   type: "line",
+            //   symbolSize: 10,
+            //   symbol: 'circle',
+            //   itemStyle: {
+            //     normal: {
+            //       color: "rgba(252,230,48,1)",
+            //       barBorderRadius: 0,
+            //       label: {
+            //         show: true,
+            //         position: "top",
+            //         formatter: function (p) {
+            //           return p.value > 0 ? (p.value) : '';
+            //         }
+            //       }
+            //     }
+            //   },
+            //   data: this.data3
+            // }
+          ]
+        }
+        this.trendchart = echarts.init(document.getElementById('trend'))
+        this.trendchart.clear()
+        this.trendchart.setOption(option)
+      },
+      addData(arr1, arr2) {
+
+            if (arr2.length == 0) {
+                return arr1;
+            } else {
+                arr1.map(function(value, index) {
+                    arr2[index] += value;
+                })
+            }
+            return arr2;
+
+      },
+      refresh () {
+        let data = {year: 2021, condition: '1=1'}
+        this.getInitData(data, 'year')
+      },
+      init () {
+        // 初始化echarts
+        this.initEchart()
+        var _this = this
+        // 添加点击事件
+        this.trendchart.on('click', function (param) {
+          _this.year = param.name
+          console.log(param)
+          // 点击月份，数据不刷新
+          if (_this.year.toString().indexOf('月') !== -1) {
+            return
+          } else {
+            // 获取更新数据
+            let data = {year: param.name, condition: '1=1'}
+            _this.getInitData(data, 'month')
+          }
+        })
+
+        // let i = 0
+        // setInterval(function(){
+        //   console.log(i)
+        //   i = i === xData.length ? 0 : i+1
+        //   this.trendchart.dispatchAction({
+        //     type: 'showTip',
+        //     seriesIndex:0,  // 显示第几个series
+        //     dataIndex: i // 显示第几个数据
+        //   });
+        // }, 1000)
+      },
+      getInitData (data, sign) {
+        let dt = new Date()
+        let year = dt.getFullYear()
+        let http = new HttpResetClass()
+        if (sign === 'year') {
+          let url = '/rs/logic/getNetLenYear'
+          this.data1 = []
+          this.data2 = []
+          this.data3 = []
+          this.xData = [year-2, year-1, year]
+          http.load('post', url, data, {rejectMsg: null, resolveMsg: null}).then((res) => {
+            console.log(res.data)
+            for(let i=0;i<res.data.length;i++){
+              this.data1.push(res.data[i].len.toFixed(2))
+            // if(res.data[i].name ==='PE'){
+            //   this.data1.push(res.data[i].len.toFixed(2))
+            // }
+            //    if(res.data[i].name ==='钢'){
+            //   this.data2.push(res.data[i].len.toFixed(2))
+            // }
+
+            }
+            console.log(this.data1)
+            console.log(this.data2)
+          //  this.data3 =  this.addData(this.data1,this.data2)
+          let param
+          for(let j=0;j<this.data2.length;j++){
+             param = parseFloat(this.data2[j])+parseFloat(this.data1[j])
+            this.data3.push(param.toFixed(2))
+          }
+
+            // let getData = res.data.data
+            // for (let i = 0; i < getData.length; i++) {
+            // }
+            this.init()
+          })
+        } else {
+          // this.xData = function () {
+          //   var data = []
+          //   for (var i = 1; i < 13; i++) {
+          //     data.push(i + '月')
+          //   }
+          //   return data
+          // }()
+          // let url = '/rs/logic/getGasAmount'
+          // this.$resetpost(url, data, {rejectMsg: null, resolveMsg: null}).then((res) => {
+          //   this.init()
+          // })
+        }
+      }
+    },
+    ready () {
+      this.getInitData({},'year')
+    },
+    props: {}
+  }
+</script>
+<style scoped>
+  /*div{*/
+  /*height: auto;*/
+  /*}*/
+</style>
+