manage-client 3.2.83-aode → 3.2.83-jb

package/src/components/ManageHomeCS/Poor/SeasonData1.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="network">
+    <div class="label">往期季报</div>
+    <div style="height: 100%;width: 100%;">
+      <div id="seasondataa" class="d0"></div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import * as DataSql from '../../../stores/DataSql'
+  import co from 'co'
+
+  export default {
+    name: "season-data1",
+    props: {
+      listenheight: String,
+      f_filiale:String,
+    },
+    data() {
+      return {
+        xc: '',
+        seasondata1:[],
+        seasondatas:[],
+        f_startdate: 0,
+        gas1:[],
+        gas2:[],
+        gas3:[],
+        xdata:[],
+        f_enddate : 0,
+
+      }
+    },
+
+    methods: {
+      //绘图
+      setBar() {
+        console.log('往期周报----seasondata'+this.seasondatas)
+        this.xc = this.$echarts.init(document.getElementById('seasondataa'))
+        var max1 = Math.max.apply(null, this.gas1);
+        var max2 = Math.max.apply(null, this.gas2);
+        let maxArr=[max1,max2]
+        var max = Math.max.apply(null, maxArr);
+        console.log('解析后拿到做到的一个值==========季报')
+        console.log(max)
+        let interval = Math.round(max/5)
+
+        var scale=this.$parent.$parent.$parent.scale
+        this.xc.setOption({
+          tooltip: {
+            trigger: 'axis',
+            extraCssText:'width:200px;height:100px;'
+          },
+
+          legend: {
+            data: ['上游购气量', '用气量', '供销率'],
+            textStyle:{
+              color:"white",
+              fontSize:'14'
+            }
+          },
+          grid: {
+            left:90,//y轴与左侧的距离
+            right:60,//y轴与右侧的距离
+            bottom:70,
+            tooltip: {
+              show: true,
+              alwaysShowContent:true,
+              backgroundColor:'rgba(2, 59, 63, 0.45)',
+              // borderColor :'rgba(13, 109, 180)',
+              borderWidth:0,
+              hideDelay:100,
+              triggerOn:'mousemove',
+              padding:10*scale,
+              textStyle:{
+                fontSize:16*scale
+              },
+
+              trigger: 'axis',
+              axisPointer: {type: 'line', lineStyle: {width: 0}},
+              extraCssText: 'width: auto;height: auto;'
+            },
+          },
+          xAxis: [
+            {
+              show:true,
+              type: 'category',
+              data: this.xdata,
+              axisPointer: {
+                type: 'none'
+              },
+              textStyle: { //改变刻度字体样式
+                color: 'white',
+                fontSize:15
+              },
+              splitLine:{
+                show:false
+              },
+              axisTick:{
+                show:false // 关闭刻度线
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  fontSize: 14, //设置x轴字体大小
+                  color: '#ffffff'
+                }
+              }
+
+            }
+          ],
+          yAxis: [
+            {
+              show:true,
+              nameTextStyle: {
+                fontSize: 15 ,
+                padding: [0 , 25 , 12, 5], //上右下左
+                color: '#15dce2',
+              },
+              type: 'value',
+              name: '万m3',
+              min: 0,
+              interval: interval,
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: false,
+              },
+              axisLabel: {
+                textStyle: {
+                  color: 'white',
+                  fontSize:15,
+                  formatter: '{value} m3'
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: 'dashed',
+                  color: '#004371',
+                }
+              },
+              axisPointer: {
+                type: 'none'
+              }
+            },
+            {
+              nameTextStyle: {
+                fontSize: 15 ,
+                padding: [0 , 25 , 12, 5], //上右下左
+                color: '#15dce2',
+              },
+              type: 'value',
+              name: '供销率',
+              min: 0,
+              max: 100,
+              interval: 20,
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: false,
+              },
+              axisLabel: {
+                textStyle: {
+                  color: 'white',
+                  fontSize:15,
+                  formatter: '{value} m3'
+                }
+              },
+              axisPointer: {
+                type: 'none' //关闭
+              },
+              splitLine: {
+                show: false,
+              },
+            }
+          ],
+          series: [
+            {
+              name: '上游购气量',
+              type: 'bar',
+              barWidth: '20%',
+              itemStyle: {
+                normal: {color: '#6fd9d0',},
+              },
+              data: this.gas1
+            },
+            {
+              name: '用气量',
+              type: 'bar',
+              barWidth: '20%',
+              itemStyle: {normal: {color: '#f7cb32'}},
+              data: this.gas2
+            },
+            {
+              name: '供销率',
+              type: 'line',
+              yAxisIndex: 1,
+              data:  this.gas3
+            }
+          ]
+
+        })
+
+      },
+      //请求后台数据
+      searchdata() {
+
+        let seasondata1 = DataSql.getData(this, 'seasondata1', {},'seasondata1')
+        co(seasondata1)
+      },
+    },
+    watch: {
+
+      //监听浏览器大小变化
+      'listenheight': {
+        deep: true,
+        handler(val) {
+          if (this.listenheight !== '') {
+            // this.$parent.$parent.changeresize(this.xc)
+          }
+        },
+      },
+      'seasondata1': {
+        deep: true,
+        handler(val) {
+          console.log('往期季报报数据是------------------')
+          console.log(this.seasondata1)
+          console.log('往期季报数据长度是=================')
+          console.log(this.seasondata1.length)
+          for (let i = 0; i <this.seasondata1.length ; i++) {
+            //判断是否有数据
+            console.log('循环的数据是============================')
+            this.xdata.push(this.seasondata1[i].f_startdate.substring(2,7))
+            console.log(this.seasondata1[i].f_sum_gas)
+            if(this.seasondata1[i].f_sum_gas==="undefined"){
+              this.gas1.push(0)
+            }else{
+              this.gas1.push(this.seasondata1[i].f_sum_gas/1000)
+            }
+
+            if(this.seasondata1[i].f_yqgas==="undefined"){
+              this.gas2.push(0)
+            }else{
+              this.gas2.push(this.seasondata1[i].f_yqgas/1000)
+            }
+
+            if(this.seasondata1[i].f_gxcbl==="undefined"){
+              this.gas3.push(0)
+            }else{
+              this.gas3.push(this.seasondata1[i].f_gxcbl)
+            }
+          }
+          // this.weeklydatas.push(this.weeklydata[0].f_sum_gas)
+          // this.weeklydatas.push(this.weeklydata[0].f_yqgas)
+          // this.f_gxcbl=this.weeklydata[0].f_gxcbl
+          // this.f_startdate=this.weeklydata[0].f_startdate.substr(0,10)
+          // this.f_enddate=this.weeklydata[0].f_enddate.substr(0,10)
+          this.setBar()
+        }
+      },
+    },
+
+    ready() {
+      // 拼接sql，请求后台
+      this.searchdata()
+    }
+  }
+</script>
+
+<style scoped>
+  .label {
+    margin-left: 6%;
+    font-size: 1.85rem;
+    float: left;
+    color: #fff;
+    height: 8%;
+  }
+
+  .d0 {
+    padding-left: 2%;
+    width: 100%;
+    height: 100%;
+    float: left;
+  }
+</style>

package/src/components/ManageHomeCS/Poor/WeekData.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="network">
+    <div class="label">周报</div>
+    <div style="height: 40%;width: 100%;">
+      <div id="weekdata" class="d0"></div>
+    </div>
+    <div style="height: 51%; width: 100%;">
+      <div id="weekdata1"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as DataSql from '../../../stores/DataSql'
+  import co from 'co'
+
+  export default {
+    name: "week-data",
+    props: {
+      listenheight: String,
+      f_filiale:String,
+    },
+    data() {
+      return {
+        xc: '',
+        weeklydata:[],
+        weeklydatas:[],
+        f_startdate: 0,
+        f_enddate : 0,
+        bgData : [],
+        yLabel:['上游供气总量','用气量']
+      }
+    },
+
+    methods: {
+      //绘图
+      setBar() {
+        console.log('setBar----weekdata'+this.weeklydatas)
+        this.xc = this.$echarts.init(document.getElementById('weekdata'))
+        this.xc1 = this.$echarts.init(document.getElementById('weekdata1'))
+        var max = Math.max.apply(null, this.weeklydatas);
+        console.log(max/10+max)
+        for(let i in this.weeklydatas){
+          this.bgData.push(max/10+max)
+        }
+        this.xc.setOption({
+          grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '5%',
+            top: '10%',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'none'
+            },
+            formatter: function(params) {
+              return params[0].name + '<br/>' +
+                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
+                params[0].seriesName + ' : ' + params[0].value + ' 万m3<br/>'
+            }
+          },
+          xAxis: {
+            show: false,
+            type: 'value'
+          },
+          yAxis: [{
+            type: 'category',
+            inverse: true,
+            axisLabel: {
+              show: true,
+              margin:15,
+              textStyle: {
+                color: '#fff',
+              },
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            data: this.yLabel
+          }, {
+            type: 'category',
+            inverse: true,
+            axisTick: 'none',
+            axisLine: 'none',
+            show: true,
+            axisLabel: {
+              textStyle: {
+                color: '#9aeced',
+                fontSize: '12'
+              },
+              formatter:'{value}万m3'
+            },
+            data: this.weeklydatas
+          }],
+          series: [{
+            name: '气量',
+            type: 'bar',
+            zlevel: 1,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [0,30,30,0],
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                  offset: 0,
+                  color: '#52d8da'
+                }, {
+                  offset: 1,
+                  color: '#57dcde'
+                }]),
+                shadowBlur:0,
+                shadowColor:'#57dcde'
+              },
+            },
+            barWidth: 10,
+            data: this.weeklydatas
+          },
+            {
+              name: '背景',
+              type: 'bar',
+              barWidth: 10,
+              barGap: '-100%',
+              data: this.bgData,
+              itemStyle: {
+                normal: {
+                  color: '#003D4C',
+                  barBorderRadius: [0,30,30,0],
+                }
+              },
+            },
+          ]
+        })
+        this.xc1.setOption({
+          title: [{
+            text: '供销差比率',
+            x: 'center',
+            top: '55%',
+            textStyle: {
+              color: '#FFFFFF',
+              fontSize: 16,
+              fontWeight: '100',
+            }
+          }, {
+            text: this.f_gxcbl+'%',
+            x: 'center',
+            top: '38%',
+            textStyle: {
+              fontSize: '15',
+              color: '#FFFFFF',
+              fontFamily: 'DINAlternate-Bold, DINAlternate',
+              foontWeight: '600',
+            },
+          }],
+          polar: {
+            radius: ['75%', '60%'],
+            center: ['50%', '50%'],
+          },
+          angleAxis: {
+            max: 100,
+            show: false,
+          },
+          radiusAxis: {
+            type: 'category',
+            show: true,
+            axisLabel: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          series: [{
+            name: '',
+            type: 'bar',
+            roundCap: true,
+            barWidth: 90,
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(66, 66, 66, .3)',
+            },
+            data: [this.f_gxcbl],
+            coordinateSystem: 'polar',
+
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: '#6fd97a',
+                },
+                  {
+                    offset: 1,
+                    color: '#6FD9D0',
+                  },
+                ]),
+              },
+            },
+          },
+            {
+              name: '',
+              type: 'pie',
+              startAngle: 80,
+              radius: ['80%'],
+              hoverAnimation: false,
+              center: ['50%', '50%'],
+              itemStyle: {
+                color: 'rgba(66, 66, 66, .1)',
+                borderWidth: 1,
+                borderColor: '#6FD9D0',
+              },
+              data: [1],
+            },
+            {
+              name: '',
+              type: 'pie',
+              startAngle: 80,
+              radius: ['55%'],
+              hoverAnimation: false,
+              center: ['50%', '50%'],
+              itemStyle: {
+                color: 'rgba(66, 66, 66, .1)',
+                borderWidth: 1,
+                borderColor: '#6FD9D0',
+              },
+              data: [2],
+            }
+          ],
+
+
+
+        })
+      },
+      //请求后台数据
+      searchdata() {
+
+        let weeklydata = DataSql.getData(this, 'weeklydata', {},'weeklydata')
+        co(weeklydata)
+      },
+    },
+    watch: {
+
+      //监听浏览器大小变化
+      'listenheight': {
+        deep: true,
+        handler(val) {
+          if (this.listenheight !== '') {
+            // this.$parent.$parent.changeresize(this.xc)
+          }
+        },
+      },
+      'weeklydata': {
+        deep: true,
+        handler(val) {
+            console.log('周报数据是下面的------------------')
+            console.log(this.weeklydata)
+          this.weeklydatas = []
+          if(this.weeklydata.length===0){
+            this.weeklydatas.push(0)
+            this.weeklydatas.push(0)
+            this.f_gxcbl=0
+          }else {
+            this.weeklydatas.push(Math.round(this.weeklydata[0].f_sum_gas/1000))
+            this.weeklydatas.push(Math.round(this.weeklydata[0].f_yqgas/1000))
+            this.f_gxcbl=this.weeklydata[0].f_gxcbl
+            this.f_startdate=this.weeklydata[0].f_startdate.substr(0,10)
+            this.f_enddate=this.weeklydata[0].f_enddate.substr(0,10)
+          }
+
+          this.setBar()
+        }
+      },
+    },
+
+    ready() {
+      // 拼接sql，请求后台
+      this.searchdata()
+    }
+  }
+</script>
+
+<style scoped>
+  .label {
+    margin-left: 6%;
+    font-size: 1.85rem;
+    float: left;
+    color: #fff;
+    height: 8%;
+  }
+
+  .d0 {
+    padding-left: 2%;
+    width: 100%;
+    height: 100%;
+    float: left;
+  }
+</style>