manage-client 3.1.9-aode → 3.1.9-ls

package/src/components/qinhua/BarChart.vue

@@ -0,0 +1,208 @@
+<template>
+  <div id="barchart" style="height: 100%;width:100%">
+  </div>
+</template>
+
+<script>
+  export default {
+    title: '收费',
+    data() {
+    },
+    methods: {
+      init() {
+        var xData = ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
+          yData1 = [12944, 7218, 5574, 3694, 2849, 2735, 2846, 2854, 1500],
+          yData2 = [25968, 13128, 4783, 2314, 2349, 2653, 3443, 3242, 1468],
+          borderData = [],
+          legend = ['民用', '非民用'],
+          colorArr = [{
+            start: 'rgba(242,153,97)',
+            mid: 'rgba(242,153,97,0.7)',
+            end: 'rgba(0, 0, 0,0.5)'
+          },
+            {
+              end: 'rgba(0, 0, 0,0.5)',
+              mid: 'rgba(111,217,208,0.7)',
+              start: 'rgba(111,217,208)'
+            },
+            {
+              color: '#00EAFF'
+            }
+          ]
+        let normalColor = 'rgba(8,115,142)'
+        let seriesData = []
+        var borderHeight = 4
+        xData.forEach(element => {
+          borderData.push(borderHeight)
+        });
+        [yData1, yData2].forEach((item, index) => {
+          var obj1 = {}
+          obj1 = {
+            name: legend[index],
+            type: 'bar',
+            stack: legend[index],
+            data: item,
+            barWidth: '15%',
+            itemStyle: {
+              normal: {
+                barBorderRadius: [30, 30, 30, 30],
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [{
+                    offset: 0,
+                    color: colorArr[index].start
+                  },
+                  {
+                    offset: 0.7,
+                    color: colorArr[index].mid
+                  },
+                  {
+                    offset: 1,
+                    color: colorArr[index].end
+                  }
+                  ],
+                  globalCoord: false
+                }
+              }
+            }
+          }
+          seriesData.push(obj1)
+        })
+        console.log(seriesData)
+        // 更改柱状图位置
+        let option = {
+          backgroundColor: '#ffffff00',
+          grid: {
+            left: '2%',
+            top: '20%',
+            right: '10%',
+            bottom: '2%',
+            containLabel: true
+          },
+          legend: {
+            show: true,
+            icon: 'rect',
+            itemWidth: 30,
+            itemHeight: 20,
+            top: '5%',
+            textStyle: {
+              color: '#fff'
+            },
+            data: legend
+          },
+          tooltip: {
+            position: function (pos, params, dom, rect, size) {
+              let yPos = '20%'
+              let xPos = 0
+              if (pos[0] < size.viewSize[0] / 2) {
+                xPos = pos[0] + 10
+              } else {
+                xPos = pos[0] - dom.offsetWidth - 10
+              }
+              return [xPos, yPos]
+            },
+            trigger: 'axis',
+            extraCssText: 'width:15%;height:30%;',
+            formatter: function (params) {
+              var str = ''
+              for (var i = 0; i < params.length; i++) {
+                if (params[i].seriesName !== '') {
+                  str += `<span>${params[i].name}月${params[i].seriesName}</span><span style="color:gold">${params[i].value}万方</span> <br />`
+                }
+              }
+              return str
+            }
+          },
+          xAxis: [{
+            name: '月份',
+            type: 'category',
+            data: xData,
+            interval: 0,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLabel: {
+              textStyle: {
+                color: normalColor,
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: normalColor
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            }
+          }],
+          yAxis: [{
+            type: 'value',
+            nameTextStyle: {
+              color: normalColor,
+              fontSize: 12
+            },
+            // 'min': 0,
+            // 'max': 50,
+            axisLabel: {
+              formatter: '{value}',
+              textStyle: {
+                color: normalColor,
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: normalColor
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: normalColor
+              }
+            }
+          }],
+          series: seriesData
+        }
+        console.log(option)
+        let barchart = this.$echarts.init(document.getElementById('barchart'))
+        console.log(option)
+        barchart.setOption(option)
+        var index = 0
+        // var mTime = setInterval(function () {
+        //   barchart.dispatchAction({
+        //     type: 'showTip',
+        //     seriesIndex: 0,
+        //     dataIndex: index
+        //   })
+        //   index++
+        //   if (index > xData.length) {
+        //     index = 0
+        //   }
+        // }, 1000)
+      }
+    },
+    ready() {
+      this.init()
+    },
+    props: {}
+  }
+</script>
+<style scoped>
+  /*div{*/
+  /*height: auto;*/
+  /*}*/
+</style>
+

package/src/components/qinhua/BarChartLine.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="flex" style="width: 100%;height: 100%">
+
+    <div class="col-sm-12 auto" style="height: 30%;padding:1em">
+      <div class="row auto col-sm-12" style="padding-left: 4%">
+        <div class="col-sm-6">
+          <span class="font-title">热线</span>
+        </div>
+
+      </div>
+      <div class="col-sm-12 auto" style="padding: 1em">
+        <div class="col-sm-6 ">
+          <span class="normal-font" >当年呼入量</span><span id="huru">1314434</span>
+        </div>
+        <div class="col-sm-6 ">
+          <span class="normal-font" >人工接听量</span><span id="jieting">1206259</span>
+        </div>
+        <div class="col-sm-6 ">
+          <span class="normal-font" >报修工单量</span><span id="baoxiu">296043</span>
+        </div>
+        <div class="col-sm-6 ">
+          <span class="normal-font" >多媒体工单</span><span id="weixiu">117</span>
+        </div>
+      </div>
+    </div>
+    <div id="barchart-line" style="height: 70%;width:100%">
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    title: '收费',
+    data() {
+    },
+    methods: {
+      init() {
+        var xData = ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
+          yData1 = [157595, 168477, 154318, 135130, 137892, 134554, 149184, 190880, 86404],
+          yData2 = [148245, 157585, 144000, 126401, 128889, 124933, 137133, 165645, 73428],
+          yData3 = [33357, 14893, 32526, 32559, 37335, 36626, 39419, 47411, 21917],
+          borderData = [],
+          legend = ['呼入量', '人工接听量', '报修工单量'],
+          colorArr = [{
+            start: 'rgba(242,153,97)',
+            mid: 'rgba(242,153,97,0.7)',
+            end: 'rgba(0, 0, 0,0.5)'
+          },
+            {
+              end: 'rgba(0, 0, 0,0.5)',
+              mid: 'rgba(111,217,208,0.7)',
+              start: 'rgba(111,217,208)'
+            },
+            {
+              color: '#e5925e'
+            }
+          ]
+        let normalColor = 'rgba(8,115,142)'
+        let seriesData = []
+        var borderHeight = 4
+        xData.forEach(element => {
+          borderData.push(borderHeight)
+        });
+        [yData1, yData2, yData3].forEach((item, index) => {
+          var obj1 = {}
+          if (index < 2) {
+            obj1 = {
+              name: legend[index],
+              type: 'bar',
+              stack: legend[index],
+              data: item,
+              barWidth: '20%',
+              itemStyle: {
+                normal: {
+                  barBorderRadius: [30, 30, 30, 30],
+                  color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                      offset: 0,
+                      color: colorArr[index].start
+                    },
+                      {
+                        offset: 0.5,
+                        color: colorArr[index].mid
+                      },
+                      {
+                        offset: 1,
+                        color: colorArr[index].end
+                      }
+                    ],
+                    globalCoord: false
+                  }
+                }
+              }
+            }
+            seriesData.push(obj1)
+          } else {
+            var obj3 = {
+              data: item,
+              type: 'line',
+              smooth: true,
+              name: legend[index],
+              symbol: 'circle',
+              symbolSize: 10,
+              lineStyle: {
+                color: colorArr[index].color,
+                width: 1,
+                shadowColor: 'rgba(0, 0, 0, 0.3)', //设置折线阴影
+                shadowBlur: 15,
+                shadowOffsetY: 20,
+              }
+            }
+            seriesData.push(obj3)
+          }
+        })
+        console.log(seriesData)
+        // 更改柱状图位置
+        let option = {
+          backgroundColor: '#ffffff00',
+          grid: {
+            left: '2%',
+            right: '10%',
+            bottom: '20%',
+            containLabel: true
+          },
+          legend: {
+            show: true,
+            itemWidth: 30,
+            itemHeight: 20,
+            bottom: '5%',
+            textStyle: {
+              color: '#fff'
+            },
+            data: legend
+          },
+          tooltip: {
+            position: function (pos, params, dom, rect, size) {
+              let yPos = '20%'
+              let xPos = 0
+              if (pos[0] < size.viewSize[0] / 2) {
+                xPos = pos[0] + 10
+              } else {
+                xPos = pos[0] - dom.offsetWidth - 10
+              }
+              return [xPos, yPos]
+            },
+            trigger: 'axis',
+            extraCssText: 'width:15%;height:30%;',
+            formatter: function (params) {
+              var str = ''
+              for (var i = 0; i < params.length; i++) {
+                if (params[i].seriesName !== '') {
+                  str += `<span>${params[i].name}月${params[i].seriesName}</span><span style="color:gold">${params[i].value}</span> <br />`
+                }
+              }
+              return str
+            }
+          },
+          xAxis: [{
+            name: '月份',
+            type: 'category',
+            data: xData,
+            interval: 0,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLabel: {
+              textStyle: {
+                color: normalColor,
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: normalColor
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            }
+          }],
+          yAxis: [{
+            type: 'value',
+            nameTextStyle: {
+              color: normalColor,
+              fontSize: 12
+            },
+            // 'min': 0,
+            // 'max': 50,
+            axisLabel: {
+              formatter: '{value}',
+              textStyle: {
+                color: normalColor,
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: normalColor
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: normalColor
+              }
+            }
+          }],
+          series: seriesData
+        }
+        console.log(option)
+        let barchart = this.$echarts.init(document.getElementById('barchart-line'))
+        console.log(option)
+        barchart.setOption(option)
+        var index = 0
+        // var mTime = setInterval(function () {
+        //   barchart.dispatchAction({
+        //     type: 'showTip',
+        //     seriesIndex: 0,
+        //     dataIndex: index
+        //   })
+        //   index++
+        //   if (index > xData.length) {
+        //     index = 0
+        //   }
+        // }, 1000)
+      }
+    },
+    ready() {
+      this.init()
+    },
+    props: {}
+  }
+</script>
+<style scoped>
+
+  #huru {
+    font-family: PingFang-SC-Bold;
+    font-size: 26px;
+    font-weight: bold;
+    font-stretch: normal;
+    line-height: 35px;
+    letter-spacing: 0px;
+    color: #35ffff;
+  }
+
+  #jieting {
+    font-family: PingFang-SC-Bold;
+    font-size: 26px;
+    font-weight: bold;
+    font-stretch: normal;
+    line-height: 35px;
+    letter-spacing: 0px;
+    color: #e5925e;
+  }
+
+  #baoxiu {
+    font-family: PingFang-SC-Bold;
+    font-size: 26px;
+    font-weight: bold;
+    font-stretch: normal;
+    line-height: 35px;
+    letter-spacing: 0px;
+    color: #f27c79;
+  }
+
+  #weixiu {
+    font-family: PingFang-SC-Bold;
+    font-size: 26px;
+    font-weight: bold;
+    font-stretch: normal;
+    line-height: 35px;
+    letter-spacing: 0px;
+    color: #2490d9;
+  }
+</style>
+

package/src/components/qinhua/ManageMain.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class=' main background-qinhua' style="overflow: hidden" >
+    <div class="title-main" style="height: 7%">
+      <img src="../../../static/NewManageHome/title_left.png" alt="" style="vertical-align:middle">
+      <span class="title-font" style="text-align:justify;">秦华燃气数据展示</span>
+      <img src="../../../static/NewManageHome/title_right.png" alt="" style="vertical-align:middle">
+    </div>
+    <div class="flex-row" style="height: 46%">
+      <div id="top-left">
+        <scada></scada>
+      </div>
+      <div id="top-mid" >
+        <qinhua-map  class="qinhuamap" mode="1" idname="shanximap"></qinhua-map>
+      </div>
+      <div id="top-right" >
+        <bar-chart-line class="background-left-top">
+        </bar-chart-line>
+      </div>
+    </div>
+    <div class="flex-row " style="height: 42%;margin-top: 1em;">
+      <div class="flex background-left-bottom" style="width: 100%;width: 50%">
+        <div class="flex-row" style="width: 100%;height:60%">
+            <div style="width:35%;height:100%;">
+              <sell-echarts class=""></sell-echarts>
+            </div>
+            <div   style="width:65%;height:100%;">
+              <bar-chart></bar-chart>
+            </div>
+        </div>
+        <div class="flex-row" style="width: 100%;height:40%">
+          <div id="pie-one" >
+            <pie-sell></pie-sell>
+          </div>
+          <div  style="width:65%;height: 100%">
+            <ring-sell></ring-sell>
+          </div>
+          </div>
+        </div>
+      <div class="flex background-left-bottom" style="width: 100%;width: 50%;">
+        <div class="flex" >
+          <div class="flex-row" style="height: 40%">
+
+            <div  class="auto col-sm-12" style="width: 40%;height: 100%;padding: 1em" >
+              <div class=" col-sm-12 auto" style="padding-left: 1em">
+                <span class="font-title">安检</span>
+              </div>
+              <div  class="flex-inline col-sm-6 auto" >
+                <span id="weiruhu">121万</span>
+              </div>
+              <div  class="flex-inline col-sm-6 auto" >
+                <span id="anjian">73万</span>
+              </div>
+              <div class="flex-inline col-sm-6 auto" >
+               <span class="normal-font" >三年未入户总数</span>
+              </div>
+
+              <div class="flex-inline col-sm-6 auto" >
+                <span class="normal-font" >计划安检量</span>
+              </div>
+            </div>
+            <div style="width: 60%">
+            <ring-safecheck></ring-safecheck>
+            </div>
+          </div>
+          <div  style="height: 58%">
+            <safecheck-barchart></safecheck-barchart>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    title: '收费',
+    data() {
+    },
+    methods: {},
+    ready () {
+    },
+    props: {}
+  }
+</script>
+<style scoped>
+  .main {
+    height: 100%;
+    padding: 1em;
+    flex: 1 1 auto;
+    flex-direction: column;
+    display: flex;
+  }
+
+
+  #top-left {
+    /*padding: 1em;*/
+    width: 37%;
+    height: 100%;
+  }
+
+  #top-mid {
+    /*padding: 1em;*/
+    width: 30%;
+    height: 100%;
+  }
+
+  #top-right {
+    width: 33%;
+    height: 100%;
+  }
+
+  .title-font {
+    font-family: HYk2gj;
+    font-size: 40px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 26px;
+    letter-spacing: 2px;
+    color: #ffffff;
+  }
+
+  .title-main {
+    margin: 0 auto;
+    height: 10%;
+    width: 50%
+  }
+  .flex-inline{
+    display: inline-flex;
+    justify-content: space-around;
+  }
+  #pie-one{
+    height: 100%;
+    width: 35%;
+  }
+  #weiruhu {
+    font-family: PingFang-SC-Bold;
+    font-size: 26px;
+    font-weight: bold;
+    font-stretch: normal;
+    line-height: 35px;
+    letter-spacing: 0px;
+    color: #f27c79;
+  }
+  #anjian {
+    font-family: PingFang-SC-Bold;
+    font-size: 26px;
+    font-weight: bold;
+    font-stretch: normal;
+    line-height: 35px;
+    letter-spacing: 0px;
+    color: #2490d9;
+  }
+  .qinhuamap{
+    position: absolute;
+    top: 2%;
+    left: 40%;
+    width: 28%;
+    height: 57%;
+  }
+</style>
+