manage-client 3.2.49 → 3.2.50-aode

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

@@ -1,298 +1,275 @@
-<template>
-  <div align="center">
-
-    <div class="text-profit2">
-      <span class="title-1">营业收入</span>
-      <div class="text-1">
-        <div id="textprofit" style="text-align: left"></div>
-
-      </div>
-      <img class="img-bottom" src="/static/NewManageHome/3.gif" />
-    </div>
-
-  </div>
-</template>
-
-<script>
-  import * as Util from "../../../stores/Util";
-  import * as DataSql from "../../../stores/DataSql";
-  import co from "co";
-
-  export default {
-    name: "TextProfit",
-    props:['orgid'],
-    data() {
-      return {
-        xc: '',
-        name:[],
-        value:[],
-        timer:'',
-        resdata:'',
-      }
-    },
-    beforeDestroy() {
-      //清除定时器
-      clearInterval(this.timer);
-    },
-    methods: {
-      setBar() {
-        this.xc = this.$echarts.init(document.getElementById('textprofit'))
-        var oroptionmapjsonr_charts=this.xc
-        var option={
-          title: {
-            text: '',
-            subtext: '',
-            x: 'left'
-          },
-          colors: ['#6fd9d0', '#f7cb32', '#7395db'],
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: { // 坐标轴指示器，坐标轴触发有效
-              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
-              shadowStyle:{
-                color:'#2c4257',
-                opacity:0.3
-              }
-            },
-            padding:10,
-            show: true,
-            alwaysShowContent:true,
-            backgroundColor:'#01396d',
-            // borderColor :'rgba(13, 109, 180)',
-            borderWidth:0,
-            hideDelay:100,
-
-            triggerOn:'mousemove',
-            enterable:true,
-              textStyle:{
-                  fontSize:16
-              },
-            formatter: function (params) {
-              if (params[0].axisValue == '') {
-                return ''
-              }
-              var result = ''
-              params.forEach(function (item) {
-                  result +="<span style=\"text-align: left;font-weight: normal\">"+  item.marker + " " + "收入" + "&nbsp;&nbsp;  <span style=\"color:#e1e52a;font-weight: bolder\">" +  item.value.toFixed(2) + "</span></span></br>";
-              });
-              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '</div><br/>' + result
-            },
-            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;
-              }
-              posX=posX-20
-              return [posX, posY];
-            },
-            extraCssText:'width: auto;height:auto;',
-          },
-          legend: {
-            // icon: 'circle',
-            // icon: 'diamond',
-            y: 'top',
-            right:'2%',
-            itemGap: 20,
-            itemWidth: 20 ,
-            itemHeight: 10 ,
-            padding: [0, 25, 0, 0],
-            data: this.name,
-            textStyle: {
-              fontSize: 14 ,
-              color: '#95bad7'          // 图例文字颜色
-            }
-          },
-          grid: {left: '5%', top: "20%",  right: "5%",bottom:'5%', containLabel: true},
-          calculable: true,
-          dataZoom: [//滑动条
-            {
-              xAxisIndex: 0,//这里是从X轴的0刻度开始
-              show: false,//是否显示滑动条，不影响使用
-              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
-              startValue:0,// 从头开始。
-              endValue:2 , // 一次性展示2个。
-            }
-          ],
-          xAxis: [
-            {
-              type: 'category',
-
-              axisLine: {
-                show: true,
-                lineStyle: {
-                  color: '#004371'
-                }
-              },
-              boundaryGap:true,
-              axisTick: {
-                interval: 0,
-                length: '100px',
-              },
-              data: this.name,           //图分段的段名
-              axisLabel: {
-                show: true,
-                textStyle: {
-                  fontSize: 14 ,
-                  color: '#95bad7'
-                }
-              }
-            }
-          ],
-          yAxis: [
-            {
-              name: '(万/元)',
-              nameLocation: "end",
-              type: 'value',
-              nameTextStyle: {
-                fontSize: 14 ,
-                padding: [50, 35 , 0, 0],
-                color: '#15dce2',
-              },
-              axisLine: {
-                show: true,
-                lineStyle: {
-                    type: 'solid',
-                    color: '#08738e',
-                  }
-              },
-              axisLabel: {
-                show: true,
-                textStyle: {
-                  fontSize: 14 ,
-                  color: '#95bad7'
-                }
-              },
-              axisTick: {show: false},
-              splitLine: {
-                show: true,
-                lineStyle: {
-                  type:'dashed',
-                  color: '#004371',
-                }
-              },
-            }
-          ],
-          barCategoryGap: '2%',
-          series: {
-            type: 'bar',
-            // barGap: 0,
-            barCategoryGap: '1%',
-            barWidth: '18%',
-            data: this.value,
-            hoverAnimation: false,
-            // label: {
-            //   show: true,
-            //   position: 'top',
-            //   textStyle: { //数值样式
-            //     color: '#95bad7',
-            //     fontSize: 14
-            //   }
-            // },
-            itemStyle: {
-              normal: {color: '#6fd9d0',},
-            }
-          }
-        }
-
-        let idx = 0;
-        // var oroptionmapjsonr_charts1=this.xc
-        // this.timer=setInterval(()=>{
-        //   idx = (idx+ 1) % 4;
-        //   oroptionmapjsonr_charts1.dispatchAction({
-        //     type: 'showTip',
-        //     seriesIndex: 1,
-        //     dataIndex: idx
-        //   });
-        //
-        // }, 3000)
-
-        const a=this.value.length
-        oroptionmapjsonr_charts.setOption(option)
-        this.timer=setInterval(function () {
-          // 每次向后滚动一个，最后一个从头开始。
-          if (option.dataZoom[0].endValue === a ) {
-            option.dataZoom[0].endValue = 2;
-            option.dataZoom[0].startValue = 0;
-          }
-          else {
-            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
-            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
-          }
-          oroptionmapjsonr_charts.setOption(option);
-          idx = (idx+ 1) % a;
-            oroptionmapjsonr_charts.dispatchAction({
-              type: 'showTip',
-              seriesIndex: 0,
-              dataIndex: idx
-            });
-        }, 3000);
-
-      },
-      searchdata() {
-        console.log('营业厅收入-------------------')
-        let year = Util.toStandardDateString()
-        let startDate = year.toString().substring(0, 4)
-        let endDate = parseInt(startDate)+1
-        // startDate.toString().substring(0,4)
-        let sqldata = DataSql.getData(this,'serviceHall',{startDate:startDate,endDate:endDate,orgid:this.orgid}, 'resdata')
-        co(sqldata)
-      },
-    },
-    watch: {
-      'resdata': {
-        deep: true,
-        handler(val) {
-          console.log('进入营业厅收入=========================监听')
-          console.log(val)
-          clearInterval(this.timer);
-          this.name=[]
-          this.value=[]
-          if(val.length===0){
-            this.name.push('其他')
-            this.value.push(0)
-          }else{
-            for (let i = 0; i < val.length; i++) {
-              if(val[i].f_depname===null){
-                this.name.push('其他')
-              }else{
-                this.name.push(val[i].f_depname)
-              }
-
-              this.value.push(val[i].value/1000)
-
-          }
-
-          }
-          this.setBar()
-        },
-
-      },
-      'orgid'(val){
-        clearInterval(this.timer);
-        this.searchdata()
-      }
-    },
-    ready() {
-
-    }
-  }
-</script>
-
-<style scoped>
-</style>
+<template>
+  <div align="center">
+    <div class="text-profit1">利润总额&nbsp;&nbsp;<span>165255万</span>
+    </div>
+    <div class="text-profit2">
+      <span class="title-1">营业收入</span>
+      <div class="text-1">
+        <div id="textprofit" style="text-align: left"></div>
+
+      </div>
+      <img class="img-bottom" src="../../../../static/NewManageHome/3.gif" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "TextProfit",
+    props: {
+      listenheight: String,
+    },
+    data() {
+      return {
+        xc: '',
+        construction: {//建设数据
+          Built: [200, 100, 60,111],//已建数据
+          rebuilt: [20, 15, 40,60],//在建数据
+          approved: [180, 85, 20,51],//审批数据
+        },
+        timer:'',
+      }
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.timer);
+    },
+    methods: {
+      setBar() {
+        this.xc = this.$echarts.init(document.getElementById('textprofit'))
+        var scale=this.$parent.$parent.scale
+        this.xc.setOption({
+          title: {
+            text: '',
+            subtext: '',
+            x: 'left'
+          },
+          colors: ['#6fd9d0', '#f7cb32', '#7395db'],
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: { // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+              shadowStyle:{
+                color:'#2c4257',
+                opacity:0.3
+              }
+            },
+            padding:10*scale,
+            show: true,
+            alwaysShowContent:true,
+            backgroundColor:'#01396d',
+            // borderColor :'rgba(13, 109, 180)',
+            borderWidth:0,
+            hideDelay:100,
+
+            triggerOn:'mousemove',
+            enterable:true,
+              textStyle:{
+                  fontSize:16*scale
+              },
+            formatter: function (params) {
+              if (params[0].axisValue == '') {
+                return ''
+              }
+              var result = ''
+              params.forEach(function (item) {
+                  result +="<span style=\"text-align: left;font-weight: normal\">"+  item.marker + " " + item.seriesName + "&nbsp;&nbsp;  <span style=\"color:#e1e52a;font-weight: bolder\">" +  item.value + "</span></span></br>";
+              });
+              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '</div><br/>' + result
+            },
+            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;
+              }
+              posX=posX-20
+              return [posX, posY];
+            },
+            extraCssText:'width: auto;height:auto;',
+          },
+
+          legend: {
+            // icon: 'circle',
+            // icon: 'diamond',
+            y: 'top',
+            right:'2%',
+            itemGap: 20,
+            itemWidth: 20 * scale,
+            itemHeight: 10 * scale,
+            padding: [0, 25, 0, 0],
+            data: ['收入', '支出', '利润'],
+            textStyle: {
+              fontSize: 14 * scale,
+              color: '#95bad7'          // 图例文字颜色
+            }
+          },
+          grid: {left: '5%', top: "20%",  right: "5%",bottom:'5%', containLabel: true},
+          calculable: true,
+          xAxis: [
+            {
+              type: 'category',
+
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#004371'
+                }
+              },
+              boundaryGap:true,
+              axisTick: {
+                interval: 0,
+                length: '100px',
+              },
+              data: ['城燃', '汉投', '安康','商洛'],           //图分段的段名
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  fontSize: 14 * scale,
+                  color: '#95bad7'
+                }
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: '(千万/元)',
+              nameLocation: "end",
+              type: 'value',
+              nameTextStyle: {
+                fontSize: 14 * scale,
+                padding: [50, 35 * scale, 0, 0],
+                color: '#15dce2',
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                    type: 'solid',
+                    color: '#08738e',
+                  }
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  fontSize: 14 * scale,
+                  color: '#95bad7'
+                }
+              },
+              axisTick: {show: false},
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type:'dashed',
+                  color: '#004371',
+                }
+              },
+            }
+          ],
+          barCategoryGap: '2%',
+          series: [
+            {
+              name: '收入',
+              type: 'bar',
+              // barGap: 0,
+              barCategoryGap: '1%',
+              barWidth: '18%',
+              data: this.construction.Built,
+              hoverAnimation: false,
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: { //数值样式
+                  color: '#95bad7',
+                  fontSize: 14 * scale
+                }
+              },
+              itemStyle: {
+                normal: {color: '#6fd9d0',},
+              }
+            },
+            {
+              name: '支出',
+              type: 'bar',
+              //  barGap: 0,
+              barCategoryGap: '1%',
+              barWidth: '18%',
+              data: this.construction.rebuilt,
+              hoverAnimation: false,
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: { //数值样式
+                  color: '#95bad7',
+                  fontSize: 14 * scale
+                }
+              },
+              itemStyle: {normal: {color: '#f7cb32'}},
+            },
+            {
+              name: '利润',
+              type: 'bar',
+              //    barGap: 0,
+              barCategoryGap: '1%',
+              barWidth: '18%',
+              data: this.construction.approved,
+              hoverAnimation: false,
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: { //数值样式
+                  color: '#95bad7',
+                  fontSize: 14 * scale
+                }
+              },
+              itemStyle: {normal: {color: '#7393db'}},
+            },
+          ],
+        }, true)
+
+        let idx = -1;
+        var oroptionmapjsonr_charts1=this.xc
+        this.timer=setInterval(()=>{
+          idx = (idx+ 1) % 4;
+          oroptionmapjsonr_charts1.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 1,
+            dataIndex: idx
+          });
+
+        }, 3000)
+      },
+    },
+    watch: {
+      'listenheight': {
+        deep: true,
+        handler(val) {
+          if (this.listenheight !== '') {
+            // this.$parent.$parent.changeresize(this.xc)
+          }
+        },
+      }
+    },
+    ready() {
+      this.setBar()
+    }
+  }
+</script>
+
+<style scoped>
+</style>