manage-client 3.2.83-aode → 3.2.83-jb

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

@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <div v-show="!drillshow">
+
+<!--      &lt;!&ndash;周报分析&ndash;&gt;-->
+      <week-data1 class="border weeklydata1"></week-data1>
+<!--      &lt;!&ndash;月报分析&ndash;&gt;-->
+      <month-data1 class="border monthdata1"></month-data1>
+<!--      &lt;!&ndash;季报分析&ndash;&gt;-->
+      <season-data1 class="border seasondata1"></season-data1>
+
+      <!--周报-->
+      <week-data class="border weeklydata"></week-data>
+      <!--月报-->
+      <month-data class="border monthdata"></month-data>
+      <!--季报-->
+      <season-data class="border seasondata"></season-data>
+      <!--年报-->
+      <year-data class="border yeardata"></year-data>
+    </div>
+    <drill-data v-show="drillshow" :parenttitle="title" :idname="idname" :childname="childname"
+                :drillshow="drillshow" :echartsdata="childdata" :initdatatr="initdatatr" class="drill"></drill-data>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "PoorHome",
+    data() {
+      return {
+        // increaseuser: 0,
+        // title: {pagename: '客服', pagetitle: 'user', pagechildrenname: ''},
+        // idname: '',
+        // childname: '',
+        // childdata: '',
+        // listenheight: '',
+        // loaddata: 0,
+        // initdatatr: {},
+      }
+    },
+    methods: {
+      // listenToUserNumber(idname, childname, pagename, initdatatr) {
+      //   this.drillshow = true
+      //   this.idname = idname
+      //   this.childname = childname
+      //   this.title.pagechildrenname = pagename
+      //   this.initdatatr = initdatatr
+      // },
+      // listenToData(param) {
+      //   this.childdata = param
+      // },
+      initdata() {
+        var self = this
+        var s = setInterval(function () {
+          var flag = (self.$refs.usernumbers.usertag0 && self.$refs.usernumbers.usertag5 && self.$refs.usergas.usertag1 &&
+            self.$refs.userincrease.usertag2 && self.$refs.saleproportion.usertag3 && self.$refs.gasdistri.usertag4)
+          self.$showMessage('正在加载数据,请等待...')
+          if (flag == true) {
+            console.log('加载数据完毕')
+            self.$closeMessage()
+            clearInterval(s)
+            return
+          }
+        }, 100)
+      }
+    },
+    watch: {
+      'loaddata': {
+        deep: true,
+        handler() {
+          if (this.loaddata > -1) {
+            this.$parent.initdatashow = false
+          }
+        },
+        immediate: true
+      }
+    },
+  }
+</script>
+
+<style scoped>
+  .border {
+    padding-top: 0.4%;
+    background: linear-gradient(#6fd9d0, #6fd9d0) left top,
+    linear-gradient(#6fd9d0, #6fd9d0) left top,
+    linear-gradient(#6fd9d0, #6fd9d0) right top,
+    linear-gradient(#6fd9d0, #6fd9d0) right top,
+    linear-gradient(#6fd9d0, #6fd9d0) left bottom,
+    linear-gradient(#6fd9d0, #6fd9d0) left bottom,
+    linear-gradient(#6fd9d0, #6fd9d0) right bottom,
+    linear-gradient(#6fd9d0, #6fd9d0) right bottom;
+    background-repeat: no-repeat;
+    background-size: 1.5px 11px, 11px 1.5px;
+    background-color: rgba(1, 207, 242, 0.05);
+  }
+
+  /*.poorratio {*/
+  /*  position: absolute;*/
+  /*  top: 1%;*/
+  /*  left: 1%;*/
+  /*  width: 49%;*/
+  /*  height: 48%;*/
+  /*}*/
+
+  /*.gassupply {*/
+  /*  position: absolute;*/
+  /*  left: 1%;*/
+  /*  top:50%;*/
+  /*  width: 49%;*/
+  /*  height: 47%;*/
+  /*}*/
+
+  /*.gasstatistics {*/
+  /*  position: absolute;*/
+  /*  top: 1%;*/
+  /*  left: 51%;*/
+  /*  width: 48%;*/
+  /*  height: 96%;*/
+  /*}*/
+
+  .weeklydata {
+    position: absolute;
+    top: 46%;
+    left: 1%;
+    width: 24%;
+    height: 50%;
+  }
+  .weeklydata1 {
+    position: absolute;
+    top: 1%;
+    left: 1%;
+    width: 32%;
+    height: 44%;
+  }
+  .monthdata1{
+    position: absolute;
+    top: 1%;
+    left: 34%;
+    width: 32%;
+    height: 44%;
+  }
+  .seasondata1{
+    position: absolute;
+    top: 1%;
+    left: 67%;
+    width: 32%;
+    height: 44%;
+  }
+  .monthdata {
+    position: absolute;
+    top: 46%;
+    left: 26%;
+    width: 24%;
+    height: 50%;
+  }
+  .seasondata {
+    position: absolute;
+    top: 46%;
+    left: 51%;
+    width: 24%;
+    height: 50%;
+  }
+  .yeardata {
+    position: absolute;
+    top: 46%;
+    left: 76%;
+    width: 24%;
+    height: 50%;
+
+  }
+  .drill {
+    padding-top: 1%;
+    width: 100%;
+    height: 100%;
+  }
+</style>

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

@@ -0,0 +1,312 @@
+<template>
+  <div class="network">
+    <div class="label">季报</div>
+    <div style="height: 40%;width: 100%;">
+      <div id="seasondata" class="d0"></div>
+    </div>
+    <div style="height: 51%; width: 100%;">
+      <div id="f_gxcbl"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as DataSql from '../../../stores/DataSql'
+  import co from 'co'
+
+  export default {
+    name: "season-data",
+    props: {
+      listenheight: String,
+      f_filiale:String,
+    },
+    data() {
+      return {
+        xc: '',
+        seasondata:[],
+        seasondatas:[],
+        f_gxcbl:0,
+        f_startdate: 0,
+        f_enddate : 0,
+        bgData : [],
+        yLabel:['上游供气总量','用气量']
+
+      }
+    },
+
+    methods: {
+      //绘图
+      setBar() {
+        console.log('setBar----=----=-=-=seasondatas'+this.seasondatas)
+        this.xc = this.$echarts.init(document.getElementById('seasondata'))
+        this.xc1 = this.$echarts.init(document.getElementById('f_gxcbl'))
+        var max = Math.max.apply(null, this.seasondatas);
+        console.log(max/10+max)
+        for(let i in this.seasondatas){
+          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.seasondatas
+          }],
+          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.seasondatas
+          },
+            {
+              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 seasondata = DataSql.getData(this, 'seasondata', {},'seasondata')
+        co(seasondata)
+      },
+      // 截取当前数据到小数点后两位
+      numFilter(value) {
+        const realVal = parseFloat(value).toFixed(2);
+        return realVal;
+      },
+    },
+    watch: {
+
+      //监听浏览器大小变化
+      'listenheight': {
+        deep: true,
+        handler(val) {
+          if (this.listenheight !== '') {
+            // this.$parent.$parent.changeresize(this.xc)
+          }
+        },
+      },
+      'seasondata': {
+        deep: true,
+        handler(val) {
+          console.log('季报数据是下面的------------------')
+          console.log(this.seasondata)
+          this.seasondatas =[]
+          if(this.seasondata.length===0){
+            this.seasondatas.push(0)
+            this.seasondatas.push(0)
+            this.f_gxcbl=0
+          }else{
+            this.seasondatas.push(this.numFilter(this.seasondata[0].f_sum_gas/1000))
+            this.seasondatas.push(this.numFilter(this.seasondata[0].f_yqgas/1000))
+            this.f_gxcbl=this.seasondata[0].f_gxcbl
+            this.f_startdate=this.seasondata[0].f_startdate.substr(0,10)
+            this.f_enddate=this.seasondata[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>