manage-client 3.1.15-aode → 3.1.18

package/src/components/ManageHomeCS/NewHome/TextBusiness.vue

@@ -1,331 +1,258 @@
 <template>
     <div>
-      <span class="title-1">固定资产投资完成情况</span>
-      <div class="text-1">
-       <div class="business-1" id="business" style="text-align: left"></div>
-       <div class="business-2">
-         <table id="tableId" ref="tableId">
-           <thead  class="thead"  style=" border: solid 1px #0093ff;">
-           <th>分公司</th>
-           <th>系统名称</th>
-           <th>投资费用(万/元)</th>
-           <th>在建/已建</th>
-           </thead>
-           <tbody class="scroll-content" :style="{top}" >
-           <tr v-for="item in dane"><td>{{item.fen}}</td><td>{{item.name}}</td><td style="color: #ffff2c">{{item.money}}</td><td>{{item.state}}</td></tr>
-           </tbody>
-         </table>
+        <span class="title-1">年度安检计划</span>
+        <!--      <div class="text-1">-->
+        <!--       <div class="business-1" id="business" style="text-align: left"></div>-->
+        <!--        <img class="img-bottom" src="/static/NewManageHome/2.gif" />-->
+        <div>
+          <div id="chart1" style="float: left;width: 50%;height: 92%"></div>
+          <div id="chart2" style="float: right;width: 50%;height: 92%"></div>
+        </div>
 
-      </div>
-        <img class="img-bottom" src="../../../../static/NewManageHome/2.gif" />
-    </div>
+<!--     </div>-->
     </div>
 </template>
 
 <script>
    import * as DataSql from '../../../stores/DataSql'
     import co from 'co'
+   import * as Util from "../../../stores/Util";
 
     export default {
       name: "TextBusiness",
-      props: {
-        listenheight: String,
-      },
+      props: ['orgid'],
       data() {
         return {
           xc: '',
-          parentgasname: [{name:'汉投',value:1000},{name:'城燃',value:1000},{name:'安康',value:1000},{name:'商洛',value:1000}],
-          childrengasname: [
-            {name:'佛坪',parentname:'汉投',value:100},{name:'洋县',parentname:'汉投',value:800},
-            {name:'扶风',parentname:'城燃',value:600}, {name:'太白',parentname:'城燃',value:300},
-            {name:'紫阳',parentname:'安康',value:200},{name:'汉明',parentname:'安康',value:700},
-            {name:'商南',parentname:'商洛',value:600},{name:'洛南',parentname:'商洛',value:77}
-            ],
-          resdata1: [],
-          resdata2: [],
-          moveDistance:'25',
-          viewHeight:'400px',
-          datass:[
-            {fen:'汉投',name:'SCADA系统',money:101,state:'在建'},
-            {fen:'汉投1',name:'SCADA系统',money:101,state:'在建'},
-            {fen:'汉投2',name:'SCADA系统',money:101,state:'在建'},
-            {fen:'汉投3',name:'SCADA系统',money:101,state:'在建'},
-            {fen:'汉投4',name:'SCADA系统',money:101,state:'在建'},
-            {fen:'汉投5',name:'SCADA系统',money:101,state:'在建'},
-            {fen:'汉投6',name:'SCADA系统',money:101,state:'在建'},
-            {fen:'汉投7',name:'SCADA系统',money:101,state:'在建'},
-            {fen:'汉投8',name:'SCADA系统',money:101,state:'在建'},
-            {fen:'汉投9',name:'SCADA系统',money:101,state:'在建'},
-            {fen:'汉投1',name:'SCADA系统',money:101,state:'在建'},
-            {fen:'汉投2',name:'SCADA系统',money:101,state:'在建'},
-            {fen:'汉投',name:'SCADA系统',money:101,state:'在建'},
-            {fen:'汉投',name:'SCADA系统',money:101,state:'在建'},
-            {fen:'汉投',name:'SCADA系统',money:101,state:'在建'},
-
-          ],
-          dane:[],
           timer:'',
+          timer1:'',
+          resdata:'',
+          resdata1:'',
+          echartsdata:[],
+          echartsdata1:[],
         }
       },
-      computed: {
-        top() {
-          console.log('ssss')
-          return -this.activeIndex * this.moveDistance + "px"; //定义移动的单元高度
-        },
-      },
-      mounted() {
 
-        },
       methods: {
-        setBar() {
-          this.xc = this.$echarts.init(document.getElementById('business'))
-          var scale=this.$parent.$parent.scale*0.8
-          let legendname = []
-          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
-          this.xc.setOption(
-            {
-              title: {
-                text: '',
-                subtext: '',
-                x: 'center'
+        setBar(){
+          clearInterval(this.timer);
+          clearInterval(this.timer1);
+          let index = 0;
+          let index1 = 1;
+          var colorList = ['#73ACFF', '#FDD56A', '#FD866A', '#9E87FF', '#58D5FF']
+          this.xc = this.$echarts.init(document.getElementById('chart1'))
+          this.xc.setOption({
+            title: {
+              text: '民用户年度安检计划',
+              left: 'center',
+              textStyle: {
+                color: '#73DDFF',
+                fontSize: 15
               },
-              tooltip: {
-                trigger: 'item',
-                show: true,
-                alwaysShowContent:true,
-                backgroundColor:'#01396d',
-                // borderColor :'rgba(13, 109, 180)',
-                borderWidth:0,
-                hideDelay:100,
-                padding:10*scale,
-                  textStyle:{
-                      fontSize:18*scale
-                  },
-                formatter: function (params) {
-                  if (params.name == legendname[0] || params.name == legendname[1] || params.name == legendname[2] || params.name == legendname[3]) {
-                    var percentage = (params.value / parenttotal) * 100
-                    return params.marker + "  <span style=\"font-weight: normal\"> " + params.name + "</span>  <span style=\"color:#64d8d4;font-weight: bolder\"> &nbsp;&nbsp;" + params.value + "</span>" +
-                      " <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;" + percentage.toString().substring(0, 5) + "%</span>"
-                  } else {
-                    var percentage = (params.value / childrentotal) * 100
-                    return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params.data.parentname + "</div><br/>" + "" + params.marker + " " + params.name + "  <span style=\"color:#64d8d4;font-weight: bolder\">&nbsp;&nbsp;"
-                      + params.value + "</span>" + " <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;" + percentage.toString().substring(0, 5) + "%</span>"
+              padding: [40 , 0,0,0],
+            },
+            tooltip: {
+              trigger: 'item',
+              extraCssText:'width: auto;height:auto;',
+            },
+            series: [{
+              type: 'pie',
+              center: ['50%', '50%'],
+              radius: ['24%', '45%'],
+              clockwise: false,
+              avoidLabelOverlap: false,
+              // hoverOffset: 15,
+              itemStyle: {
+                normal: {
+                  color: function(params) {
+                    return colorList[params.dataIndex]
                   }
-                },
-                extraCssText: 'width: auto;height: auto;'
-              },
-              series: [
-                {
-                  // name:'数量',
-                  type: 'pie',
-                  selectedMode: 'single',
-                  color: ['#f7cb32', '#ef7c3d', '#3d7ce5','#f27c79'],
-                  radius: [0, '35%'],
-                  center: ['50%', '45%'],
-                  label: {
-                    normal: {
-                      position: 'inner'
-                    }
-                  },
-                  labelLine: {
-                    normal: {
-                      show: false
-                    }
-                  },
-                  data: userdata
-                }, {
-                  // name:'数量',
-                  type: 'pie',
-                  color: ['#e5e280', '#6e93e0', '#3bdda9', '#6fd9d0', '#c7e06e', '#e68d8d'],
-                  label: {
-                    show: false
-                  },
-                  radius: ['45%', '65%'],
-                  center: ['50%', '45%'],
-                  data: echartsdata
                 }
-              ]
-            }, true)
-          let idx = 0;
-          var dataLen=echartsdata.length
-          var oroptionmapjsonr_charts=this.xc
-          var sidx=0
-          var series=oroptionmapjsonr_charts.getOption().series
-          var flag=false
-        this.timer=  setInterval(()=>{
-            if(!flag){
-              oroptionmapjsonr_charts.dispatchAction({
-                type: 'pieUnSelect',
-                seriesIndex:0 ,
-                dataIndex: sidx,
-              });
-            }
-
-            // 取消之前选中的图形
-            oroptionmapjsonr_charts.dispatchAction({
-              type: 'pieUnSelect',
-              seriesIndex:1 ,
-              dataIndex: idx,
-            });
+              },
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false
 
+              },
+              data: this.echartsdata1
+            }],
 
+          })
+          const  option=this.xc
+          this.timer=setInterval(function () {
+            option.dispatchAction({
+              type: 'hideTip',
+              seriesIndex: 0,
+              dataIndex: index
+            });
+            // 显示提示框
+            option.dispatchAction({
+              type: 'showTip',
+              seriesIndex: 0,
+              dataIndex: index
+            });
+            // 取消高亮指定的数据图形
+            option.dispatchAction({
+              type: 'downplay',
+              seriesIndex: 0,
+              dataIndex: index == 0? 5 : index -1
+            });
+            option.dispatchAction({
+              type: 'highlight',
+              seriesIndex: 0,
+              dataIndex: index
+            });
+            index++;
+            if (index > 2) {
+              index = 0;
+            }
+          }, 2000);
 
-            idx = (idx+ 1) % dataLen;
+          this.xc1 = this.$echarts.init(document.getElementById('chart2'))
+          this.xc1.setOption({
+            title: {
+              text: '非民用民用户年度安检计划',
+              left: 'center',
+              textStyle: {
+                color: '#73DDFF',
+                fontSize: 15
+              },
+              padding: [40 , 0,0,0],
+            },
+            tooltip: {
+              trigger: 'item',
+              extraCssText:'width: auto;height:auto;',
+            },
+            series: [{
+              type: 'pie',
+              center: ['50%', '50%'],
+              radius: ['24%', '45%'],
+              clockwise: false,
+              avoidLabelOverlap: false,
+              // hoverOffset: 15,
+              itemStyle: {
+                normal: {
+                  color: function(params) {
+                    return colorList[params.dataIndex]
+                  }
+                }
+              },
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false
 
+              },
+              data: this.echartsdata
+            }],
 
-           for(var i=0;i<4;i++){
-              if(series[1].data[idx].parentname==series[0].data[i].name){
-                sidx=i
-                flag=true
-                break
-              }
-              flag=false
-           }
-            oroptionmapjsonr_charts.dispatchAction({
-              type: 'pieSelect',
+          })
+          const  option1=this.xc1
+          this.timer1=setInterval( ()=> {
+            option1.dispatchAction({
+              type: 'hideTip',
               seriesIndex: 0,
-              dataIndex: sidx
-            });
-            //console.log(app.currentIndex);
-            // 选中当前图形
-            oroptionmapjsonr_charts.dispatchAction({
-              type: 'pieSelect',
-              seriesIndex: 1,
-              dataIndex: idx
+              dataIndex: index1
             });
-            oroptionmapjsonr_charts.dispatchAction({
+            // 显示提示框
+            option1.dispatchAction({
               type: 'showTip',
-              seriesIndex: 1,
-              dataIndex: idx
+              seriesIndex: 0,
+              dataIndex: index1
             });
-
-          }, 3000)
+            // 取消高亮指定的数据图形
+            option1.dispatchAction({
+              type: 'downplay',
+              seriesIndex: 0,
+              dataIndex: index1 == 0? 5 : index1 -1
+            });
+            option1.dispatchAction({
+              type: 'highlight',
+              seriesIndex: 0,
+              dataIndex: index1
+            });
+            index1++;
+            if (index1 > 2) {
+              index1 = 0;
+            }
+          }, 2000);
         },
-        searchdata(flag) {
-          let getGen = getData(this, flag)
+        searchdata() {
+          let year = Util.toStandardDateString().toString().substring(0, 4)
+          let getGen = DataSql.getData(this, 'getCheckData',{orgid:this.orgid,year:year,f_plan_type:'非民用'}, 'resdata')
           co(getGen)
+          let getGen1 = DataSql.getData(this, 'getCheckData',{orgid:this.orgid,year:year,f_plan_type:'民用'}, 'resdata1')
+          co(getGen1)
         },
-        linesql(param) {
-          // 拼接sql，请求后台
-          if (param == '') {
-            let getGen = DataSql.getData(this, 'gasdistri',{item:param}, 'resdata1')
-            co(getGen)
-          } else {
-            let getGen = DataSql.getData(this,'gasdistri',{item:param}, 'resdata2')
-            co(getGen)
-          }
-        },
-        resize() {
-          var self=this
-          var index=-1
-          setInterval(()=>{
-            self.dane.splice(0,self.dane.length)
-            index=(index+1)%self.datass.length
-            var maxid=0
-            if(index>self.datass.length-9){
-              maxid=self.datass.length-1
-            }else {
-              maxid=index+8
-            }
-            var i=0
-            self.datass.forEach(function (s) {
-              if(i>=index&&i<=maxid){
-                self.dane.push(s)
-              }
-              i++
-            })
-            var s=this.dane.length
-            if(this.dane.length<9){
-              for(var i =0;i<9-s;i++){
-                this.dane.push(  {fen:'',name:'',money:'',state:''},)
-              }
-            }
-          }, 3000)
 
-        }
       },
       beforeDestroy() {
         //清除定时器
         clearInterval(this.timer);
       },
       watch: {
-        // 监听用户数据并进行绘图
-        'parentgasname': {
+        'resdata': {
           deep: true,
           handler(val) {
-            if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
-              this.setBar()
-              this.$parent.loaddata++
+            clearInterval(this.timer);
+            console.log('resdata-----------------------非民用========================')
+            console.log(val)
+            const data1={
+              name:'到访不遇数量',
+              value:val[0].df
             }
-          }
-        },
-        // 监听用户数据并进行绘图
-        'childrengasname': {
-          deep: true,
-          handler(val) {
-            if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
-              this.setBar()
-              this.$parent.loaddata++
+            const data2={
+              name:'入户数量',
+              value:val[0].rh
             }
-          }
-        },
-        //监听浏览器大小变化
-        'listenheight': {
-          deep: true,
-          handler(val) {
-            if (this.listenheight !== '' && this.listenheight !== 0) {
-              // this.$parent.$parent.changeresize(this.xc)
-              this.listenheight = 0
+            const data3={
+              name:'拒减数量',
+              value:val[0].jj
             }
+            this.echartsdata[0]=data1
+            this.echartsdata[1]=data2
+            this.echartsdata[2]=data3
+            console.log('组织后的数据是--------dkasgdhjvhmsvdhjasvdghc')
+            console.log(this.echartsdata)
+            this.setBar()
           },
-          immediate: true
         },
         'resdata1': {
           deep: true,
           handler(val) {
-            var self = this
-            this.resdata1.forEach(function (s) {
-              let item = {}
-              item.name = s.f_gasproperties
-              item.value = s.num
-              self.parentgasname.push(item)
-            })
+            clearInterval(this.timer);
+            console.log('resdata-----------------------非民用========================')
+            console.log(val)
+            const data1={
+              name:'到访不遇数量',
+              value:val[0].df
+            }
+            const data2={
+              name:'入户数量',
+              value:val[0].rh
+            }
+            const data3={
+              name:'拒减数量',
+              value:val[0].jj
+            }
+            this.echartsdata1[0]=data1
+            this.echartsdata1[1]=data2
+            this.echartsdata1[2]=data3
+            console.log('组织后的数据是--------dkasgdhjvhmsvdhjasvdghc')
+            console.log(this.echartsdata1)
+            this.setBar()
           },
         },
-        'resdata2': {
-          deep: true,
-          handler(val) {
-            var self = this
-            this.resdata2.forEach(function (s) {
-              let item = {}
-              item.name = s.f_price_name
-              item.parentname = s.f_gasproperties
-              item.value = s.num
-              self.childrengasname.push(item)
-            })
-          },
-          immediate: true
+        'orgid'(){
+          clearInterval(this.timer);
+          clearInterval(this.timer1);
+          this.searchdata()
         }
       },
       ready() {
-        this.resize()
-        this.setBar()
-        // this.searchdata()
-        // this.set()
-        // this.linesql('')
-        // this.linesql('c.f_price_name,')
       },
     }
 </script>