manage-client 3.1.9-aode → 3.1.9-ls

package/src/components/ManageHomeCS/liaoyuan/User/GasDistri.vue

@@ -0,0 +1,369 @@
+<template lang="html">
+  <div>
+    <div class="label">用气性质分布图</div>
+    <div id="gasdistri">
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as DataSql from '../../../../stores/DataSql'
+  import co from 'co'
+
+  export default {
+    name: 'gasdistri',
+    props: {
+      listenheight: String,
+      f_filiale: String,
+    },
+    data() {
+      return {
+        xc: '',
+        parentgasname: [],
+        childrengasname: [
+          { name : 'a',value :22},
+          { name : 'b',value :33},
+        ],
+        resdata1: [],
+        resdata2: [],
+        timer:''
+      }
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.timer);
+    },
+    methods: {
+      setBar() {
+          this.$parent.loadnum++
+        this.xc = this.$echarts.init(document.getElementById('gasdistri'))
+        let legendname = ['a','b','c']
+        // var parenttotal = 0
+        var childrentotal = 0
+        // this.parentgasname.forEach(function (s) {
+        //   parenttotal = parenttotal + s.value
+        //   legendname.push(s.name)
+        // })
+        this.childrengasname.forEach(function (s) {
+          childrentotal = childrentotal + s.value
+          // legendname.push(s.name)
+        })
+
+        let echartsdata = this.childrengasname
+        // var userdata = this.parentgasname
+        var scale=this.$parent.$parent.scale
+          console.log(this.$parent.$parent.scale,'as54815234984')
+        this.xc.setOption(
+          {
+            title: {
+              text: '',
+              subtext: '',
+              x: 'center'
+            },
+            tooltip: {
+              trigger: 'item',
+                show: true,
+                alwaysShowContent:true,
+                backgroundColor:'#01396d',
+              // borderColor :'rgba(13, 109, 180)',
+              borderWidth:0,
+              hideDelay:100,
+                padding:10*scale,
+                textStyle:{
+                    fontSize:14*scale
+                },
+              formatter: function (params) {
+                  // var flag=false
+                  // legendname.forEach(function (s) {
+                      // if(params.name==s){
+                          // flag=true
+                          return params.marker + " " + params.name + "  <span style=\"color:#64d8d4;font-weight: normal\">&nbsp;&nbsp;&nbsp;" + params.value + "</span>" +
+                              " <span style=\"color:#e1e52a;font-weight: normal\">&nbsp;&nbsp;&nbsp;" + parseFloat((params.value/childrentotal) * 100).toFixed(2) + "%</span>"
+                      // }
+                  // })
+                // if(!flag) {
+                //   return "<div style='text-align: center;height: 1px'>"+params.data.parentname + "</div><br/>" + "" + params.marker + " " + params.name + "  <span style=\"color:#64d8d4;font-weight: normal\">&nbsp;&nbsp;&nbsp;"
+                //     + params.value + "</span>" + " <span style=\"color:#e1e52a;font-weight: normal\">&nbsp;&nbsp;&nbsp;" + parseFloat((params.value / childrentotal) * 100).toFixed(3) + "%</span>"
+                // }
+              },
+                position: function(point, params, dom, rect, size) {
+                    //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
+                    var x = point[0]; //
+                    var y = point[1];
+                    var viewWidth = size.viewSize[0];
+                    var viewHeight = size.viewSize[1];
+                    var boxWidth = size.contentSize[0];
+                    var boxHeight = size.contentSize[1];
+                    var posX = 0; //x坐标位置
+                    var posY = 0; //y坐标位置
+                    if (x < boxWidth) { //左边放不开
+                        posX = 5;
+                    } else { //左边放的下
+                        posX = x - boxWidth;
+                    }
+
+                    if (y < boxHeight) { //上边放不开
+                        posY = 5;
+                    } else { //上边放得下
+                        posY = y - boxHeight;
+                    }
+                    return [posX, posY];
+                },
+                extraCssText: 'width: auto;height: auto;'
+            },
+            // legend: {
+            //   orient: 'horizontal',
+            //   icon: 'circle',
+            //   x: 'center',
+            //   y: '70%',
+            //   itemWidth: 20 * scale,
+            //   itemHeight: 10 * scale,
+            //   padding:[0,20],
+            //   textStyle: {
+            //     fontSize: 12 * scale,
+            //     padding: [0, 0, 0, 4],
+            //     color: '#ffffff'
+            //   },
+            //   data: legendname
+            // },
+            series: [
+              // {
+              //   // name:'数量',
+              //   type: 'pie',
+              //   selectedMode: 'single',
+              //   color: ['#f7cb32', '#ef7c3d', '#3d7ce5'],
+              //   radius: [0, '26%'],
+              //   center: ['50%', '50%'],
+              //   label: {
+              //     normal: {
+              //       position: 'inner'
+              //     }
+              //   },
+              //   labelLine: {
+              //     normal: {
+              //       show: false
+              //     }
+              //   },
+              //   data: userdata
+              // },
+              // {
+              //   name: 'Line 1',
+              //   type: 'pie',
+              //   animation: false,
+              //   clockWise: false,
+              //   radius: ['34%', '35%'],
+              //   center: ['50%', '45%'],
+              //   tooltip: {
+              //     show: false
+              //   },
+              //   itemStyle: {
+              //     normal: {
+              //       label: {
+              //         show: false
+              //       },
+              //       labelLine: {
+              //         show: false
+              //       },
+              //     }
+              //   },
+              //   hoverAnimation: false,
+              //   data: [{
+              //     value: 100,
+              //     name: '02',
+              //     itemStyle: {
+              //       normal: {
+              //         color: '#29b7ff',//未完成的圆环的颜色
+              //         label: {
+              //           show: false
+              //         },
+              //         labelLine: {
+              //           show: false
+              //         }
+              //       }
+              //     }
+              //   }]
+              // },
+              {
+                // name:'数量',
+                type: 'pie',
+                color: ['#e5e280', '#6e93e0',  '#6fd9d0', '#c7e06e', '#e68d8d'],
+                label: {
+                  show: false
+                },
+                radius: ['40%', '55%'],
+                center: ['50%', '50%'],
+                data: echartsdata
+              },
+              // {
+              //   name: 'Line 2',
+              //   type: 'pie',
+              //   tooltip: {
+              //     show: false
+              //   },
+              //   animation: false,
+              //   clockWise: false,
+              //   radius: ['60%', '61%'],
+              //   center: ['50%', '35%'],
+              //   itemStyle: {
+              //     normal: {label: {show: false}, labelLine: {show: false},}
+              //   },
+              //   hoverAnimation: false,
+              //   data: [{
+              //     value: 100,
+              //     name: '02',
+              //     itemStyle: {
+              //       normal: {color: '#29b7ff', label: {show: false}, labelLine: {show: false}}
+              //     }
+              //   }]
+              // }
+            ]
+          }, true)
+
+        let idx = 0;
+        // let idx1 = 0;
+        var dataLen=echartsdata.length
+        var oroptionmapjsonr_charts=this.xc
+        // var sidx=0
+        var series=oroptionmapjsonr_charts.getOption().series
+        console.log(series)
+          // var len=series[1].data.length
+        var flag=false
+        this.timer=  setInterval(()=>{
+
+          // 取消之前选中的图形
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'pieUnSelect',
+            seriesIndex:0 ,
+            dataIndex: idx,
+          });
+
+          idx = (idx+ 1) % dataLen;
+
+          // 选中当前图形
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'pieSelect',
+            seriesIndex: 0,
+            dataIndex: idx
+          });
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: idx
+          });
+
+        }, 3000)
+      },
+      searchdata(flag) {
+        let getGen = getData(this, flag)
+        co(getGen)
+      },
+      linesql(param) {
+        // 拼接sql，请求后台
+           if(param=='f_gasproperties'){
+               let getGen = DataSql.getData(this,'getprice',{item:param}, 'resdata1')
+               co(getGen)
+           }else {
+               let getGen = DataSql.getData(this,'getprice',{item:param}, 'resdata2')
+               co(getGen)
+           }
+
+
+      },
+      resize() {
+          console.log('刷新用气性质')
+          if(this.timer!=''){
+              this.resdata2.splice(0,this.resdata2.length)
+              this.childrengasname.splice(0,this.childrengasname.length)
+              clearInterval(this.timer);
+          }
+          this.linesql('f_gasproperties,f_price')
+      }
+    },
+    watch: {
+      // 监听用户数据并进行绘图
+      'parentgasname': {
+        deep: true,
+        handler(val) {
+          if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
+            this.setBar()
+          }
+          this.$parent.loaddata++
+        }
+      },
+      // 监听用户数据并进行绘图
+      'childrengasname': {
+        deep: true,
+        handler(val) {
+          if (this.childrengasname.length > 0 ) {
+            this.setBar()
+          }
+          this.$parent.loaddata++
+        }
+      },
+      //监听浏览器大小变化
+      'listenheight': {
+        deep: true,
+        handler(val) {
+          if (this.listenheight !== '' && this.listenheight !== 0) {
+            // this.$parent.$parent.changeresize(this.xc)
+            this.listenheight = 0
+          }
+        },
+        immediate: true
+      },
+      'resdata1': {
+        deep: true,
+        handler(val) {
+            if(this.resdata1.length<1){
+                return
+            }
+          var self = this
+          this.resdata1.forEach(function (s) {
+            let item = {}
+            item.name = s.f_gasproperties
+            item.value = s.value
+            self.parentgasname.push(item)
+          })
+
+        },
+      },
+      'resdata2': {
+        deep: true,
+        handler(val) {
+            if(this.resdata2.length<1){
+                return
+            }
+          var self = this
+          this.resdata2.forEach(function (s) {
+            let item = {}
+            item.name = s.f_price
+            // item.parentname = s.f_gasproperties
+            item.value = s.value
+            self.childrengasname.push(item)
+          })
+
+        },
+      }
+    },
+    ready() {
+      // this.searchdata()
+      this.setBar()
+      // this.linesql('f_gasproperties')
+      // this.linesql('f_gasproperties,f_price')
+    },
+  }
+</script>
+<style scoped>
+  .label {
+    margin-left: 6%;
+    font-size: 1.85rem;
+    color: #fff;
+    width: 100%;
+    height: 9%;
+  }
+
+  #gasdistri {
+    height: 90%;
+    width: 100%;
+  }
+</style>

package/src/components/ManageHomeCS/predict/PredictAir.vue

@@ -0,0 +1,322 @@
+<template>
+  <div>
+    <div style="height: 100%;width: 100%;">
+      <div id="predictgas1" className="d0"></div>
+      <!--      <div id="predictgas"></div>-->
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: "predict-air",
+  props : ['sdata'],
+  data () {
+    return {
+      xc: '',
+      xData: [],
+      seriesData1: [],
+      seriesData2: [],
+
+
+    }
+  },
+
+  methods: {
+    //绘图
+    setBar () {
+      console.log('进入画图====================')
+      this.xc = this.$echarts.init(document.getElementById('predictgas1'))
+      this.xc.setOption( {
+        title: {
+          text: '气温变化',
+          textStyle: {
+            align: 'center',
+            color: '#fff',
+            fontSize: 14,
+          },
+          top: '1%',
+          left: 'center',
+        },
+        legend:{
+          data:['去年平均气温','今年平均气温'],
+          align:'auto',
+          textStyle:{
+            color:'#fff',
+            fontSize:13
+          },
+          padding:[48,0,0,0]
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0,
+                  color: 'rgba(0, 255, 233,0)'
+                }, {
+                  offset: 0.5,
+                  color: 'rgba(255, 255, 255,1)',
+                }, {
+                  offset: 1,
+                  color: 'rgba(0, 255, 233,0)'
+                }],
+                global: false
+              }
+            },
+          },
+        },
+        grid: {
+          top: '15%',
+          left: '11%',
+          right: '8%',
+          bottom: '15%',
+          // containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          axisLine: {
+            show: true
+          },
+          offset:10,
+          splitArea: {
+            // show: true,
+            color: '#f00',
+            lineStyle: {
+              color: '#f00'
+            },
+          },
+          axisLabel: {
+            color: '#fff',
+            fontSize:14,
+          },
+          splitLine: {
+            show: false
+          },
+          boundaryGap: false,
+          data: this.xData,
+          // date:getVirtulData()['data'],
+
+        }],
+
+        yAxis: [
+          {
+            type: 'value',
+            min: 0,
+            name:'平均气温',
+            nameTextStyle:{
+              fontSize:14,
+              color:'#15dce2',
+              padding:[0,0,35,0]
+            },
+            splitNumber: 5,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(255,255,255,0.1)'
+              }
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              margin: 20,
+              textStyle: {
+                fontSize: 14, //设置x轴字体大小
+                color: '#ffffff'
+              },
+              formatter: '{value} °C',
+
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          // {
+          //   type: 'value',
+          //   min: 0,
+          //   name:'平均气温',
+          //   nameTextStyle:{
+          //     fontSize:14,
+          //     color:'#6c8787',
+          //     padding:[0,0,35,0]
+          //   },
+          //   // max: 140,
+          //   splitNumber: 4,
+          //   splitLine: {
+          //     show: true,
+          //     lineStyle: {
+          //       color: 'rgba(255,255,255,0.1)'
+          //     }
+          //   },
+          //   axisLine: {
+          //     show: false,
+          //   },
+          //   axisLabel: {
+          //     show: true,
+          //     margin: 20,
+          //     formatter: '{value} °C',
+          //     textStyle: {
+          //       fontSize: 14, //设置x轴字体大小
+          //       color: '#ffffff'
+          //
+          //     },
+          //   },
+          //   axisTick: {
+          //     show: false,
+          //   },
+          // },
+        ],
+        series: [
+          {
+          name: '去年平均气温',
+          type: 'line',
+          // smooth: true, //是否平滑
+          showAllSymbol: true,
+          // symbol: 'image://./static/images/guang-circle.png',
+          symbol: 'circle',
+          symbolSize: 15,
+          lineStyle: {
+            normal: {
+              color: "#6FD9D0",
+              shadowColor: 'rgba(0, 0, 0, .3)',
+              shadowBlur: 0,
+              shadowOffsetY: 5,
+              shadowOffsetX: 5,
+            },
+          },
+          label: {
+            show: true,
+            position: 'top',
+            textStyle: {
+              color: '#6c50f3',
+            },
+            distance:10, //距离图形的偏移量
+            fontSize:14
+          },
+          itemStyle: {
+            color: "#6FD9D0",
+            borderColor: "#fff",
+            borderWidth: 3,
+            shadowColor: 'rgba(0, 0, 0, .3)',
+            shadowBlur: 0,
+            shadowOffsetY: 2,
+            shadowOffsetX: 2,
+          },
+          tooltip: {
+            show: false
+          },
+
+          data: this.seriesData1
+        },
+          {
+            name: '今年平均气温',
+            type: 'line',
+            // smooth: true, //是否平滑
+            showAllSymbol: true,
+            // symbol: 'image://./static/images/guang-circle.png',
+            symbol: 'circle',
+            symbolSize: 15,
+            lineStyle: {
+              normal: {
+                color: "#00ca95",
+                shadowColor: 'rgba(0, 0, 0, .3)',
+                shadowBlur: 0,
+                shadowOffsetY: 5,
+                shadowOffsetX: 5,
+              },
+            },
+            label: {
+              show: true,
+              position: 'top',
+              distance:10, //距离图形的偏移量
+              fontSize:14,
+              textStyle: {
+                color: '#00ca95',
+              }
+            },
+
+            itemStyle: {
+              color: "#00ca95",
+              borderColor: "#fff",
+              borderWidth: 3,
+              shadowColor: 'rgba(0, 0, 0, .3)',
+              shadowBlur: 0,
+              shadowOffsetY: 2,
+              shadowOffsetX: 2,
+            },
+            tooltip: {
+              show: false
+            },
+            data: this.seriesData2,
+          },
+
+        ]
+      })
+
+    },
+    //请求后台数据
+     searchdata () {
+
+    },
+  },
+
+  watch: {
+
+    //监听浏览器大小变化
+    'listenheight': {
+      deep: true,
+      handler (val) {
+        if (this.listenheight !== '') {
+          // this.$parent.$parent.changeresize(this.xc)
+        }
+      },
+    },
+    'sdata': {
+      deep: true,
+      handler (val) {
+        console.log('处理数据==============')
+        console.log(this.sdata)
+        this.seriesData1 = []
+        this.seriesData2 = []
+        for (let i = 0; i < this.sdata.length; i++) {
+          this.xData.push(this.sdata[i].date)
+          this.seriesData1.push(this.sdata[i].avg_air)
+          this.seriesData2.push(this.sdata[i].avgat)
+
+        }
+         this.setBar()
+      },
+    },
+  },
+
+  ready () {
+    // 拼接sql，请求后台
+    // this.searchdata()
+    for (let i = 0; i < this.sdata.length; i++) {
+      this.xData.push(this.sdata[i].date)
+      this.seriesData1.push(this.sdata[i].avg_air)
+      this.seriesData2.push(this.sdata[i].avgat)
+    }
+    this.setBar()
+  }
+}
+</script>
+
+<style scoped>
+.d0 {
+  width: 100%;
+  height: 100%;
+  float: left;
+}
+</style>