manage-client 3.2.91-1 → 3.2.91-aodeToV4

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

@@ -1,258 +1,331 @@
 <template>
     <div>
-        <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>
+      <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>
 
-<!--     </div>-->
+      </div>
+        <img class="img-bottom" src="../../../../static/NewManageHome/2.gif" />
+    </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: ['orgid'],
+      props: {
+        listenheight: String,
+      },
       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(){
-          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
+        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'
               },
-              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]
+              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>"
                   }
-                }
+                },
+                extraCssText: 'width: auto;height: auto;'
               },
-              label: {
-                show: false,
-              },
-              labelLine: {
-                show: false
-
-              },
-              data: this.echartsdata1
-            }],
+              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,
+              });
+            }
 
-          })
-          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
+            // 取消之前选中的图形
+            oroptionmapjsonr_charts.dispatchAction({
+              type: 'pieUnSelect',
+              seriesIndex:1 ,
+              dataIndex: idx,
             });
-            option.dispatchAction({
-              type: 'highlight',
-              seriesIndex: 0,
-              dataIndex: index
-            });
-            index++;
-            if (index > 2) {
-              index = 0;
-            }
-          }, 2000);
 
-          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
-            }],
 
-          })
-          const  option1=this.xc1
-          this.timer1=setInterval( ()=> {
-            option1.dispatchAction({
-              type: 'hideTip',
+            idx = (idx+ 1) % dataLen;
+
+
+           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',
               seriesIndex: 0,
-              dataIndex: index1
+              dataIndex: sidx
             });
-            // 显示提示框
-            option1.dispatchAction({
-              type: 'showTip',
-              seriesIndex: 0,
-              dataIndex: index1
+            //console.log(app.currentIndex);
+            // 选中当前图形
+            oroptionmapjsonr_charts.dispatchAction({
+              type: 'pieSelect',
+              seriesIndex: 1,
+              dataIndex: idx
             });
-            // 取消高亮指定的数据图形
-            option1.dispatchAction({
-              type: 'downplay',
-              seriesIndex: 0,
-              dataIndex: index1 == 0? 5 : index1 -1
-            });
-            option1.dispatchAction({
-              type: 'highlight',
-              seriesIndex: 0,
-              dataIndex: index1
+            oroptionmapjsonr_charts.dispatchAction({
+              type: 'showTip',
+              seriesIndex: 1,
+              dataIndex: idx
             });
-            index1++;
-            if (index1 > 2) {
-              index1 = 0;
-            }
-          }, 2000);
+
+          }, 3000)
         },
-        searchdata() {
-          let year = Util.toStandardDateString().toString().substring(0, 4)
-          let getGen = DataSql.getData(this, 'getCheckData',{orgid:this.orgid,year:year,f_plan_type:'非民用'}, 'resdata')
+        searchdata(flag) {
+          let getGen = getData(this, flag)
           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: {
-        'resdata': {
+        // 监听用户数据并进行绘图
+        'parentgasname': {
           deep: true,
           handler(val) {
-            clearInterval(this.timer);
-            console.log('resdata-----------------------非民用========================')
-            console.log(val)
-            const data1={
-              name:'到访不遇数量',
-              value:val[0].df
+            if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
+              this.setBar()
+              this.$parent.loaddata++
             }
-            const data2={
-              name:'入户数量',
-              value:val[0].rh
+          }
+        },
+        // 监听用户数据并进行绘图
+        'childrengasname': {
+          deep: true,
+          handler(val) {
+            if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
+              this.setBar()
+              this.$parent.loaddata++
             }
-            const data3={
-              name:'拒减数量',
-              value:val[0].jj
+          }
+        },
+        //监听浏览器大小变化
+        'listenheight': {
+          deep: true,
+          handler(val) {
+            if (this.listenheight !== '' && this.listenheight !== 0) {
+              // this.$parent.$parent.changeresize(this.xc)
+              this.listenheight = 0
             }
-            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) {
-            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()
+            var self = this
+            this.resdata1.forEach(function (s) {
+              let item = {}
+              item.name = s.f_gasproperties
+              item.value = s.num
+              self.parentgasname.push(item)
+            })
           },
         },
-        'orgid'(){
-          clearInterval(this.timer);
-          clearInterval(this.timer1);
-          this.searchdata()
+        '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
         }
       },
       ready() {
+        this.resize()
+        this.setBar()
+        // this.searchdata()
+        // this.set()
+        // this.linesql('')
+        // this.linesql('c.f_price_name,')
       },
     }
 </script>