safecheck-client 3.0.35-gongyi-10 → 3.0.35-gongyi-11

package/src/components/pc/HiddenChart.vue

@@ -1,494 +1,494 @@
-<template>
-  <div class="all">
-    <div class="top">
-      <img src="../../assets/隐患分析.png">
-    </div>
-    <div class="main">
-      <!--查询-->
-      <div class="row" style="height: 80px;padding-left: 25px;">
-        <div class="col-sm-2 form-group">
-          <label class="font_normal_body" style="margin-right: 2px">公&emsp;&emsp;司</label>
-          <right-tree @re-res="getRes" :initresid="filialeid">
-          </right-tree>
-        </div>
-        <div class="col-sm-2 form-group">
-          <label for="startDate" class="font_normal_body">开始日期:</label>
-          <datepicker id="startDate" placeholder="开始日期"
-                      v-model="startDate"
-                      :value.sync="startDate"
-                      style="width: 60%;"
-                      :disabled-days-of-Week="[]"
-                      :format="'yyyy-MM-dd'"
-                      :show-reset-button="reset">
-          </datepicker>
-        </div>
-        <div class="col-sm-2 form-group">
-          <label for="endDate" class="font_normal_body">结束日期:</label>
-          <datepicker id="endDate" placeholder="结束日期"
-                      v-model="endDate"
-                      :value.sync="endDate"
-                      :disabled-days-of-Week="[]"
-                      style="width: 60%;"
-                      :format="'yyyy-MM-dd'"
-                      :show-reset-button="reset">
-          </datepicker>
-        </div>
-        <div class="col-sm-3 form-group" style="margin-top: 8px">
-          <button class="button_search button_spacing" @click="search()">查询</button>
-        </div>
-      </div>
-      <!--左边 -->
-      <!--<div>-->
-        <!--饼图-->
-        <div class="auto" id="myChart2" style="width:40%;height:70%"></div>
-        <!--折线图-->
-        <!--<div class="auto" id="myChart1" style="width:40%;height:45%"></div>-->
-      <!--</div>-->
-      <div class="right">
-        <!--折线图-->
-        <div id="myChart3"></div>
-      </div>
-    </div>
-
-  </div>
-
-</template>
-
-<script>
-  import {PagedList} from 'vue-client'
-  import { HttpResetClass } from 'vue-client'
-
-  export default {
-    title: '隐患分析图表',
-    data () {
-      return {
-        // model: new PagedList('rs/sql/getCheckPlanList', 20),
-        // filialeid: '${this.$login.f.orgid}',
-        // startDate: '2020-01-01',
-        startDate: '',
-        endDate: '',
-        // userid: '103632',
-        userid: this.$login.f.id,
-        filialeid: '(453)',
-        source: 'tool.getFullTree(this.getRights().where(row.getType() == $organization$))',
-        // 饼图隐患等级
-        leveldata: [
-          {value: 1548, name: '三级隐患',selected: 'true'},
-          {value: 775, name: '二级隐患',selected: 'true'},
-          {value: 679, name: '一级隐患', selected: true},
-          {value: 679, name: '其他隐患', selected: true}
-        ],
-        // 饼状隐患数量
-        pienamedata: [
-          {value: 848, name: '百度'},
-          {value: 335, name: '直达'},
-          {value: 310, name: '邮件营销'},
-          {value: 251, name: '谷歌'},
-          {value: 234, name: '联盟广告'},
-          // {value: 147, name: '必应'},
-          {value: 235, name: '视频广告'},
-          {value: 602, name: '其他'}
-        ],
-        // 柱状图隐患名称
-        barname: ['燃气表漏气', '燃气表损坏', '气量异常差值', '其他隐患', '灶具超期', '灶具打不着火', '热水器超期', '软管漏气', '开放式厨房', '燃气设施安装不规范'],
-        // 柱状图隐患数量
-        baryinhuan: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8],
-        // 柱状图处理数
-        barchuli: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0],
-        // 柱状图剩余数
-        barshengyu: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5]
-
-      }
-    },
-    methods: {
-      getRes (obj) {
-        console.log(obj,'选择到公司')
-        this.filialeid = this.$login.convertToIn(obj.resids);
-        console.log(this.filialeid)
-      },
-      search () {
-        console.log('查询222')
-        let http = new HttpResetClass()
-        let condition = ' 1 = 1 '
-        condition += this.filialeid ? ` and cp.f_filialeid in ${this.filialeid}` : ' and 1=1 '
-        condition += this.startDate ? ` and cp.f_onsite_time >= '${this.startDate}'` : ' and 1=1 '
-        condition += this.endDate ? ` and cp.f_onsite_time <= '${this.endDate}'` : ' and 1=1 '
-        console.log('条件8888888', condition)
-        http.load('POST', '/rs/logic/hiddenchart', {condition: condition},
-          {resolveMsg: '获取数据成功！！！', rejectMsg: '获取数据失败！！！'}).then((res) => {
-            console.log('获取数据88888888', res.data)
-            this.leveldata = res.data.piedengji
-            this.pienamedata = res.data.pieshuliang
-            this.getPieChartData()
-            console.log(res.data.bardata)
-            this.setbardata(res.data.bardata)
-          })
-      },
-      // 饼状图绘图
-      getPieChartData () {
-        const chart2 = document.getElementById('myChart2')
-        if (chart2) {
-          const myChart2 = this.$echarts.init(chart2)
-          let option = {
-            title: {
-              text: '隐患类型比例图',
-              textStyle: {
-                fontStyle: 'normal',
-                fontWeight: 'bold',
-                color: '#cdb56d'  //标题颜色
-              },
-              // subtext: '模拟数据',
-              x: 'center'
-            },
-            tooltip: {
-              trigger: 'item',
-              formatter: '{a} <br/>{b}: {c} ({d}%)',
-              extraCssText:'width:200px;height:80px;'
-            },
-            color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
-              '#ff69b4','#ffa500','#40e0d0','#1e90ff','#ff6347','#00fa9a','#ffd700',
-              '#ff6666','#3cb371','#30e0e0'],
-            // legend: {
-            //   data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
-            // },
-            series: [
-              {
-                name: '隐患等级',
-                type: 'pie',
-                selectedMode: 'single',
-                radius: [0, '26%'],
-                label: {
-                  position: 'inner',
-                  fontSize: 14,
-                },
-                labelLine: {
-                  show: false
-                },
-                data: this.leveldata
-              },
-              {
-                name: '隐患名称',
-                type: 'pie',
-                radius: ['36%', '48%'],
-                labeliLne: {
-                  length: 30,
-                },
-                label: {
-                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
-                  // backgroundColor: '#8DB6CD',
-                  backgroundColor: 'rgba(0,0,0,0)',
-                  borderColor: '#8C8D8E',
-                  borderWidth: 1,
-                  borderRadius: 4,
-
-                  rich: {
-                    a: {
-                      color: '#FFFF00',
-                      lineHeight: 22,
-                      align: 'center'
-                    },
-                    hr: {
-                      borderColor: '#8C8D8E',
-                      width: '100%',
-                      borderWidth: 1,
-                      height: 0
-                    },
-                    b: {
-                      color: '#FFFDFE',
-                      fontSize: 14,
-                      fontWeight: 'bold',
-                      lineHeight: 33
-                    },
-                    per: {
-                      color: '#fff',
-                      backgroundColor: '#4C5058',
-                      padding: [3, 4],
-                      borderRadius: 4
-                    }
-                  }
-                },
-                data: this.pienamedata
-              }
-            ]
-          };
-          myChart2.setOption(option)
-        }
-      },
-      // 折线图绘图
-      getLineChartData () {
-        const chart1 = document.getElementById('myChart1')
-        if (chart1) {
-          const myChart1 = this.$echarts.init(chart1)
-          let option = {
-            title: {
-              text: '隐患数量折线图',
-              textStyle: {
-                fontWeight: 'normal',
-                color: '#A3FFFC'  //标题颜色
-              },
-              x: 'center'
-            },
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                type: 'cross',
-                label: {
-                  backgroundColor: '#6a7985'
-                }
-              },
-              extraCssText:'width:120px;height:80px;'
-            },
-            color: ['#ffa500'],
-            xAxis: {
-              type: 'category',
-              name: '隐患名称',
-              boundaryGap: true,
-              data: ['隐患1', '隐患2', '隐患3', '隐患4', '隐患5', '隐患6', '隐患7'],
-              axisLine: {
-                lineStyle: {
-                  type:  'solid',
-                  color:  '#fff' , //左边线的颜色
-                  width: '1' //坐标线的宽度
-                }
-              }
-            },
-            textStyle: {
-              fontSize: 15,
-              color: '#fff'
-            },
-            yAxis: {
-              type: 'value',
-              name: '数量',
-              axisLine: {
-                lineStyle: {
-                  type: 'solid',
-                  color: '#fff',
-                  width: '1'
-                }
-              },
-              splitLine: {
-                show: true,
-                lineStyle: {
-                  color: '#468b81',
-                  width: '1',
-                  type: 'dashed'
-                }
-              }
-            },
-            series: [{
-              data: [820, 932, 901, 934, 1290, 1330, 1320],
-              type: 'line',
-              areaStyle: {
-                color: 'rgba(255,230,20,0.2)'
-              },
-              // 显示数值
-              itemStyle: {normal: {label: {show: true}}}
-            }]
-          }
-          option && myChart1.setOption(option);
-        }
-      },
-      // 柱状图绘图
-      getHistogramDate () {
-        const chart3 = document.getElementById('myChart3')
-        if (chart3) {
-          const myChart3 = this.$echarts.init(chart3)
-          let option = {
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                type: 'cross',
-                crossStyle: {
-                  color: '#999'
-                }
-              },
-              extraCssText: 'width:130px;height:90px;'
-            },
-            toolbox: {
-              feature: {
-                dataView: {show: true, readOnly: false},
-                magicType: {show: true, type: ['line', 'bar']},
-                restore: {show: true},
-                saveAsImage: {show: true}
-              }
-            },
-            legend: {
-              data: ['隐患数','处理数','剩余数'],
-              textStyle: {
-                color: '#fff' // 图例文字颜色
-              }
-            },
-            textStyle: {
-              fontSize: 15,
-              color: '#fff'
-            },
-            // color: ['#43fff8','#43ff42','#adff6b'],
-            color: ['#32cd32','#40e0d0','#ffcf17'],
-            xAxis: [
-              {
-                type: 'category',
-                data: this.barname,
-                axisPointer: {
-                  type: 'shadow'
-                },
-                // 字体倾斜
-                axisLabel: {
-                  interval: 0,
-                  rotate: 40
-                },
-                // 轴线颜色
-                axisLine: {
-                  lineStyle: {
-                    type:  'solid',
-                    color:  '#fff' , //左边线的颜色
-                    width: '1' //坐标线的宽度
-                  }
-                }
-              }
-            ],
-            yAxis: [
-              {
-                type: 'value',
-                name: '隐患数量',
-                min: 0,
-                max: 250,
-                interval: 50,
-                axisLabel: {
-                  formatter: '{value}'
-                },
-                // 轴线颜色
-                axisLine: {
-                  lineStyle: {
-                    type: 'solid',
-                    color: '#fff', // 左边线的颜色
-                    width: '1' // 坐标线的宽度
-                  }
-                },
-                // 背景虚线
-                splitLine: {
-                  show: true,
-                  lineStyle: {
-                    color: '#468b81',
-                    width: '1',
-                    type: 'dashed'
-                  }
-                }
-              },
-              {
-                type: 'value',
-                name: '消除数',
-                min: 0,
-                max: 25,
-                interval: 5,
-                axisLabel: {
-                  formatter: '{value}'
-                },
-                // 轴线颜色
-                axisLine: {
-                  lineStyle: {
-                    type: 'solid',
-                    color: '#fff',
-                    width: '1'
-                  }
-                },
-                // 背景虚线
-                splitLine: {
-                  show: true,
-                  lineStyle: {
-                    color: '#468b81',
-                    width: '1',
-                    type: 'dashed'
-                  }
-                }
-              }
-            ],
-            series: [
-              {
-                name: '隐患数',
-                type: 'bar',
-                data: this.baryinhuan,
-                // 显示数值
-                itemStyle: {normal: {label: {show: true}}}
-              },
-              {
-                name: '处理数',
-                type: 'bar',
-                data: this.barchuli
-              },
-              {
-                name: '剩余数',
-                type: 'line',
-                yAxisIndex: 1,
-                data: this.barshengyu,
-                // 显示数值
-                itemStyle: {normal: {label: {show: true}}}
-              }
-            ]
-          };
-          option && myChart3.setOption(option);
-        }
-      },
-      // 设置柱状图参数
-      setbardata (data) {
-        for (let i = 0; i < data.length; i++) {
-          console.log('=============' + i)
-          console.log(data[i])
-          this.barname.splice(i, 1, data[i].name)
-          this.baryinhuan.splice(i, 1, data[i].count)
-          this.barchuli.splice(i, 1, data[i].xiaochu)
-          this.barshengyu.splice(i, 1, data[i].shengyu)
-        }
-        this.getHistogramDate()
-      }
-    },
-    ready () {
-      console.log(11111111111112222222)
-      // 绘制饼图
-      this.getPieChartData()
-      // 绘制折线图
-      // this.getLineChartData()
-      // 绘制柱状图
-      this.getHistogramDate()
-    }
-  }
-</script>
-
-<style scoped>
-  .all {
-    background-image: url(../../assets/星球背景.jpg);
-    background-size: 100% auto;
-    background-repeat:no-repeat;
-    background-attachment: fixed;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
-  .top {
-    width: 100%;
-    height: 12%;
-    text-align: center;
-    padding-top: .24rem;
-    background-color: rgba(1,57,71,.5);
-  }
-  .main {
-    /*float: left;*/
-    width: 100%;
-    /*margin: 0 1% 1%;*/
-    padding-top: 10px;
-    height: 88%;
-    background-color: rgba(1,57,71,.5);
-  }
-  .right {
-    /*float: right;*/
-    width: 60%;
-    height: 69%;
-    /*border: 1px solid #ff252f;*/
-    position: absolute;
-    right: 18px;
-    top: 21%;
-  }
-  .font_normal_body {
-    color: #fff;
-  }
-
-</style>
+<template>
+  <div class="all">
+    <div class="top">
+      <img src="../../assets/隐患分析.png">
+    </div>
+    <div class="main">
+      <!--查询-->
+      <div class="row" style="height: 80px;padding-left: 25px;">
+        <div class="col-sm-2 form-group">
+          <label class="font_normal_body" style="margin-right: 2px">公&emsp;&emsp;司</label>
+          <right-tree @re-res="getRes" :initresid="filialeid">
+          </right-tree>
+        </div>
+        <div class="col-sm-2 form-group">
+          <label for="startDate" class="font_normal_body">开始日期:</label>
+          <datepicker id="startDate" placeholder="开始日期"
+                      v-model="startDate"
+                      :value.sync="startDate"
+                      style="width: 60%;"
+                      :disabled-days-of-Week="[]"
+                      :format="'yyyy-MM-dd'"
+                      :show-reset-button="reset">
+          </datepicker>
+        </div>
+        <div class="col-sm-2 form-group">
+          <label for="endDate" class="font_normal_body">结束日期:</label>
+          <datepicker id="endDate" placeholder="结束日期"
+                      v-model="endDate"
+                      :value.sync="endDate"
+                      :disabled-days-of-Week="[]"
+                      style="width: 60%;"
+                      :format="'yyyy-MM-dd'"
+                      :show-reset-button="reset">
+          </datepicker>
+        </div>
+        <div class="col-sm-3 form-group" style="margin-top: 8px">
+          <button class="button_search button_spacing" @click="search()">查询</button>
+        </div>
+      </div>
+      <!--左边 -->
+      <!--<div>-->
+        <!--饼图-->
+        <div class="auto" id="myChart2" style="width:40%;height:70%"></div>
+        <!--折线图-->
+        <!--<div class="auto" id="myChart1" style="width:40%;height:45%"></div>-->
+      <!--</div>-->
+      <div class="right">
+        <!--折线图-->
+        <div id="myChart3"></div>
+      </div>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+  import {PagedList} from 'vue-client'
+  import { HttpResetClass } from 'vue-client'
+
+  export default {
+    title: '隐患分析图表',
+    data () {
+      return {
+        // model: new PagedList('rs/sql/getCheckPlanList', 20),
+        // filialeid: '${this.$login.f.orgid}',
+        // startDate: '2020-01-01',
+        startDate: '',
+        endDate: '',
+        // userid: '103632',
+        userid: this.$login.f.id,
+        filialeid: '(453)',
+        source: 'tool.getFullTree(this.getRights().where(row.getType() == $organization$))',
+        // 饼图隐患等级
+        leveldata: [
+          {value: 1548, name: '三级隐患',selected: 'true'},
+          {value: 775, name: '二级隐患',selected: 'true'},
+          {value: 679, name: '一级隐患', selected: true},
+          {value: 679, name: '其他隐患', selected: true}
+        ],
+        // 饼状隐患数量
+        pienamedata: [
+          {value: 848, name: '百度'},
+          {value: 335, name: '直达'},
+          {value: 310, name: '邮件营销'},
+          {value: 251, name: '谷歌'},
+          {value: 234, name: '联盟广告'},
+          // {value: 147, name: '必应'},
+          {value: 235, name: '视频广告'},
+          {value: 602, name: '其他'}
+        ],
+        // 柱状图隐患名称
+        barname: ['燃气表漏气', '燃气表损坏', '气量异常差值', '其他隐患', '灶具超期', '灶具打不着火', '热水器超期', '软管漏气', '开放式厨房', '燃气设施安装不规范'],
+        // 柱状图隐患数量
+        baryinhuan: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8],
+        // 柱状图处理数
+        barchuli: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0],
+        // 柱状图剩余数
+        barshengyu: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5]
+
+      }
+    },
+    methods: {
+      getRes (obj) {
+        console.log(obj,'选择到公司')
+        this.filialeid = this.$login.convertToIn(obj.resids);
+        console.log(this.filialeid)
+      },
+      search () {
+        console.log('查询222')
+        let http = new HttpResetClass()
+        let condition = ' 1 = 1 '
+        condition += this.filialeid ? ` and cp.f_filialeid in ${this.filialeid}` : ' and 1=1 '
+        condition += this.startDate ? ` and cp.f_onsite_time >= '${this.startDate}'` : ' and 1=1 '
+        condition += this.endDate ? ` and cp.f_onsite_time <= '${this.endDate}'` : ' and 1=1 '
+        console.log('条件8888888', condition)
+        http.load('POST', '/rs/logic/hiddenchart', {condition: condition},
+          {resolveMsg: '获取数据成功！！！', rejectMsg: '获取数据失败！！！'}).then((res) => {
+            console.log('获取数据88888888', res.data)
+            this.leveldata = res.data.piedengji
+            this.pienamedata = res.data.pieshuliang
+            this.getPieChartData()
+            console.log(res.data.bardata)
+            this.setbardata(res.data.bardata)
+          })
+      },
+      // 饼状图绘图
+      getPieChartData () {
+        const chart2 = document.getElementById('myChart2')
+        if (chart2) {
+          const myChart2 = this.$echarts.init(chart2)
+          let option = {
+            title: {
+              text: '隐患类型比例图',
+              textStyle: {
+                fontStyle: 'normal',
+                fontWeight: 'bold',
+                color: '#cdb56d'  //标题颜色
+              },
+              // subtext: '模拟数据',
+              x: 'center'
+            },
+            tooltip: {
+              trigger: 'item',
+              formatter: '{a} <br/>{b}: {c} ({d}%)',
+              extraCssText:'width:200px;height:80px;'
+            },
+            color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
+              '#ff69b4','#ffa500','#40e0d0','#1e90ff','#ff6347','#00fa9a','#ffd700',
+              '#ff6666','#3cb371','#30e0e0'],
+            // legend: {
+            //   data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
+            // },
+            series: [
+              {
+                name: '隐患等级',
+                type: 'pie',
+                selectedMode: 'single',
+                radius: [0, '26%'],
+                label: {
+                  position: 'inner',
+                  fontSize: 14,
+                },
+                labelLine: {
+                  show: false
+                },
+                data: this.leveldata
+              },
+              {
+                name: '隐患名称',
+                type: 'pie',
+                radius: ['36%', '48%'],
+                labeliLne: {
+                  length: 30,
+                },
+                label: {
+                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
+                  // backgroundColor: '#8DB6CD',
+                  backgroundColor: 'rgba(0,0,0,0)',
+                  borderColor: '#8C8D8E',
+                  borderWidth: 1,
+                  borderRadius: 4,
+
+                  rich: {
+                    a: {
+                      color: '#FFFF00',
+                      lineHeight: 22,
+                      align: 'center'
+                    },
+                    hr: {
+                      borderColor: '#8C8D8E',
+                      width: '100%',
+                      borderWidth: 1,
+                      height: 0
+                    },
+                    b: {
+                      color: '#FFFDFE',
+                      fontSize: 14,
+                      fontWeight: 'bold',
+                      lineHeight: 33
+                    },
+                    per: {
+                      color: '#fff',
+                      backgroundColor: '#4C5058',
+                      padding: [3, 4],
+                      borderRadius: 4
+                    }
+                  }
+                },
+                data: this.pienamedata
+              }
+            ]
+          };
+          myChart2.setOption(option)
+        }
+      },
+      // 折线图绘图
+      getLineChartData () {
+        const chart1 = document.getElementById('myChart1')
+        if (chart1) {
+          const myChart1 = this.$echarts.init(chart1)
+          let option = {
+            title: {
+              text: '隐患数量折线图',
+              textStyle: {
+                fontWeight: 'normal',
+                color: '#A3FFFC'  //标题颜色
+              },
+              x: 'center'
+            },
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'cross',
+                label: {
+                  backgroundColor: '#6a7985'
+                }
+              },
+              extraCssText:'width:120px;height:80px;'
+            },
+            color: ['#ffa500'],
+            xAxis: {
+              type: 'category',
+              name: '隐患名称',
+              boundaryGap: true,
+              data: ['隐患1', '隐患2', '隐患3', '隐患4', '隐患5', '隐患6', '隐患7'],
+              axisLine: {
+                lineStyle: {
+                  type:  'solid',
+                  color:  '#fff' , //左边线的颜色
+                  width: '1' //坐标线的宽度
+                }
+              }
+            },
+            textStyle: {
+              fontSize: 15,
+              color: '#fff'
+            },
+            yAxis: {
+              type: 'value',
+              name: '数量',
+              axisLine: {
+                lineStyle: {
+                  type: 'solid',
+                  color: '#fff',
+                  width: '1'
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: '#468b81',
+                  width: '1',
+                  type: 'dashed'
+                }
+              }
+            },
+            series: [{
+              data: [820, 932, 901, 934, 1290, 1330, 1320],
+              type: 'line',
+              areaStyle: {
+                color: 'rgba(255,230,20,0.2)'
+              },
+              // 显示数值
+              itemStyle: {normal: {label: {show: true}}}
+            }]
+          }
+          option && myChart1.setOption(option);
+        }
+      },
+      // 柱状图绘图
+      getHistogramDate () {
+        const chart3 = document.getElementById('myChart3')
+        if (chart3) {
+          const myChart3 = this.$echarts.init(chart3)
+          let option = {
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                  color: '#999'
+                }
+              },
+              extraCssText: 'width:130px;height:90px;'
+            },
+            toolbox: {
+              feature: {
+                dataView: {show: true, readOnly: false},
+                magicType: {show: true, type: ['line', 'bar']},
+                restore: {show: true},
+                saveAsImage: {show: true}
+              }
+            },
+            legend: {
+              data: ['隐患数','处理数','剩余数'],
+              textStyle: {
+                color: '#fff' // 图例文字颜色
+              }
+            },
+            textStyle: {
+              fontSize: 15,
+              color: '#fff'
+            },
+            // color: ['#43fff8','#43ff42','#adff6b'],
+            color: ['#32cd32','#40e0d0','#ffcf17'],
+            xAxis: [
+              {
+                type: 'category',
+                data: this.barname,
+                axisPointer: {
+                  type: 'shadow'
+                },
+                // 字体倾斜
+                axisLabel: {
+                  interval: 0,
+                  rotate: 40
+                },
+                // 轴线颜色
+                axisLine: {
+                  lineStyle: {
+                    type:  'solid',
+                    color:  '#fff' , //左边线的颜色
+                    width: '1' //坐标线的宽度
+                  }
+                }
+              }
+            ],
+            yAxis: [
+              {
+                type: 'value',
+                name: '隐患数量',
+                min: 0,
+                max: 250,
+                interval: 50,
+                axisLabel: {
+                  formatter: '{value}'
+                },
+                // 轴线颜色
+                axisLine: {
+                  lineStyle: {
+                    type: 'solid',
+                    color: '#fff', // 左边线的颜色
+                    width: '1' // 坐标线的宽度
+                  }
+                },
+                // 背景虚线
+                splitLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#468b81',
+                    width: '1',
+                    type: 'dashed'
+                  }
+                }
+              },
+              {
+                type: 'value',
+                name: '消除数',
+                min: 0,
+                max: 25,
+                interval: 5,
+                axisLabel: {
+                  formatter: '{value}'
+                },
+                // 轴线颜色
+                axisLine: {
+                  lineStyle: {
+                    type: 'solid',
+                    color: '#fff',
+                    width: '1'
+                  }
+                },
+                // 背景虚线
+                splitLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#468b81',
+                    width: '1',
+                    type: 'dashed'
+                  }
+                }
+              }
+            ],
+            series: [
+              {
+                name: '隐患数',
+                type: 'bar',
+                data: this.baryinhuan,
+                // 显示数值
+                itemStyle: {normal: {label: {show: true}}}
+              },
+              {
+                name: '处理数',
+                type: 'bar',
+                data: this.barchuli
+              },
+              {
+                name: '剩余数',
+                type: 'line',
+                yAxisIndex: 1,
+                data: this.barshengyu,
+                // 显示数值
+                itemStyle: {normal: {label: {show: true}}}
+              }
+            ]
+          };
+          option && myChart3.setOption(option);
+        }
+      },
+      // 设置柱状图参数
+      setbardata (data) {
+        for (let i = 0; i < data.length; i++) {
+          console.log('=============' + i)
+          console.log(data[i])
+          this.barname.splice(i, 1, data[i].name)
+          this.baryinhuan.splice(i, 1, data[i].count)
+          this.barchuli.splice(i, 1, data[i].xiaochu)
+          this.barshengyu.splice(i, 1, data[i].shengyu)
+        }
+        this.getHistogramDate()
+      }
+    },
+    ready () {
+      console.log(11111111111112222222)
+      // 绘制饼图
+      this.getPieChartData()
+      // 绘制折线图
+      // this.getLineChartData()
+      // 绘制柱状图
+      this.getHistogramDate()
+    }
+  }
+</script>
+
+<style scoped>
+  .all {
+    background-image: url(../../assets/星球背景.jpg);
+    background-size: 100% auto;
+    background-repeat:no-repeat;
+    background-attachment: fixed;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+  .top {
+    width: 100%;
+    height: 12%;
+    text-align: center;
+    padding-top: .24rem;
+    background-color: rgba(1,57,71,.5);
+  }
+  .main {
+    /*float: left;*/
+    width: 100%;
+    /*margin: 0 1% 1%;*/
+    padding-top: 10px;
+    height: 88%;
+    background-color: rgba(1,57,71,.5);
+  }
+  .right {
+    /*float: right;*/
+    width: 60%;
+    height: 69%;
+    /*border: 1px solid #ff252f;*/
+    position: absolute;
+    right: 18px;
+    top: 21%;
+  }
+  .font_normal_body {
+    color: #fff;
+  }
+
+</style>