fj-dc-ui/.svn/pristine/9f/9f841b376834574a59a1d3e2476c529f7afb13cd.svn-base

<!--  -->
<template>
  <div style="display: flex;">
    <div style="width:65%;" :style="{'height': colHeight - 40 + 'px'}" ref="bar_chart"></div>
    <div style="width:35%;" :style="{'height': colHeight - 40 + 'px'}" ref="pie_chart"></div>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import echarts from 'echarts'
  import request from "@util/gw_ajax_request"

  export default {
    //import引入的组件需要注入到对象中才能使用
    props: ['addForm', 'addForms', 'addFormt', 'isClear', 'testBool','singleOrMach'],
    components: {},
    data() {
      //这里存放数据
      return {
        colHeight: window.innerHeight - 90,
        //责任主体柱状体
        zrtz_mainBodyNum_list: [],//主体个数
        zrtz_normal_list: [],//一般
        zrtz_heavier_list: [],//较重
        zrtz_serious_list: [],//严重
        zrtz_nh_list: [],
        zrtz_ns_list: [],
        zrtz_hs_list: [],
        xName: [],//横轴
        barData_zrzt: {},//
        barData: [],
        scale: 1,
        selectNum: 1,
        chart: {},
        mySeries: [],
        rich: {
          yellow: {
            color: "#ffc72b",
            fontSize: 30 * this.scale,
            padding: [5, 4],
            align: 'center'
          },
          black: {
            // color: "#3a3a3a",
            fontSize: 30 * this.scale,
            padding: [5, 4],
            align: 'center'
          },
          blackSmall: {
            // color: "#3a3a3a",
            fontSize: 16 * this.scale,
            padding: [5, 4],
            align: 'center'
          },
          total: {
            // color: "#ffc72b",
            fontSize: 40 * this.scale,
            align: 'center'
          },
          white: {
            // color: "#fff",
            align: 'center',
            fontSize: 14 * this.scale,
            padding: [21, 0]
          },
          blue: {
            color: '#49dff0',
            fontSize: 16 * this.scale,
            align: 'center'
          },
          hr: {
            borderColor: '#3a3a3a',
            width: '100%',
            borderWidth: 1,
            height: 0,
          }
        },
        selectLegend: null,
        mainBody: null,
        zrzt_n: null,
        zrzt_h: null,
        zrzt_s: null,
        zrzt_nh: null,
        zrzt_ns: null,
        zrzt_hs: null,
        pieData_zy: [],
        standSize: document.body.clientWidth,
        isMuch:null
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
      isClear(n, o) {//从多批次切换到单批次时数据回归
        this.testBool = !this.testBool;
        this.chart.clear();
        this.clearData();
        this.barData = [];
        this.mySeries = [];
        this.selectLegend = null;
        this.getResponsibilityData(this.addForm, 1)
      },
      "singleOrMach": {
          handler(newVal, oldVal) {
              //debugger
              var _self = this;
              _self.isMuch = false;
              if(newVal=="much"){
                  _self.isMuch = true
              }
              if (this.testBool) {
                  _self.getResponsibilityData(_self.addForm, _self.selectNum)
              }
          },
          deep: true
      },
      "addForm.year": {
        handler(newVal, oldVal) {
          // if(newVal) {
          var _self = this;
          console.log("newVal:" + newVal + ", oldVal:" + oldVal)
          this.selectNum = 1;
          this.clearData();
          this.barData = [];
          this.mySeries = [];
          this.selectLegend = null;
          // this.getResponsibilityData(this.addForm,this.selectNum)
          if (this.testBool) {
            _self.getResponsibilityData(_self.addForm, _self.selectNum)
          }
          // }

        },
        deep: true
      },
      "addForm.years": {
          handler(newVal, oldVal) {
              // if(newVal) {
              var _self = this;
              console.log("newVal:" + newVal + ", oldVal:" + oldVal)
              this.selectNum = 1;
              this.clearData();
              this.barData = [];
              this.mySeries = [];
              this.selectLegend = null;
              // this.getResponsibilityData(this.addForm,this.selectNum)
              if (this.testBool) {
                  _self.getResponsibilityData(_self.addForm, _self.selectNum)
              }
          },
          deep: true
      },
      "addForm.batch": {
        handler(newVal, oldVal) {
          // if(newVal) {
          var _self = this;
          console.log("newVal:" + newVal + ", oldVal:" + oldVal)
          this.selectNum = 1;
          this.clearData();
          this.barData = [];
          this.mySeries = [];
          this.selectLegend = null;
          // this.getResponsibilityData(this.addForm,this.selectNum)
          if (this.testBool) {
            _self.getResponsibilityData(_self.addForm, _self.selectNum)
          }
          // }
        },
        deep: true
      },
      "addForm.rgstrId": {
        handler(newVal, oldVal) {
          if (newVal) {
            var _self = this;
            console.log("newVal:" + newVal + ", oldVal:" + oldVal)
            this.selectNum = 1;
            this.clearData();
            this.barData = [];
            this.mySeries = [];
            this.selectLegend = null;
            // this.getResponsibilityData(this.addForm,this.selectNum)
            if (this.testBool) {
              _self.getResponsibilityData(_self.addForm, _self.selectNum)
            }
          }
        },
        deep: true
      },
      // "addForms.year": {
      //   handler(newVal, oldVal) {
      //     if (newVal) {
      //       var _self = this;
      //       console.log("newVal:" + newVal + ", oldVal:" + oldVal)
      //       this.selectNum = 2;
      //       this.clearData();
      //       this.mySeries = [];
      //       this.selectLegend = null;
      //       if (this.testBool) {
      //         _self.getResponsibilityData(_self.addForms, _self.selectNum)
      //       }
      //     }
      //   },
      //   deep: true
      // },
      // "addForms.batch": {
      //   handler(newVal, oldVal) {
      //     if (newVal) {
      //       var _self = this;
      //       console.log("newVal:" + newVal + ", oldVal:" + oldVal)
      //       this.selectNum = 2;
      //       this.clearData();
      //       this.mySeries = [];
      //       this.selectLegend = null;
      //       if (this.testBool) {
      //         _self.getResponsibilityData(_self.addForms, _self.selectNum)
      //       }
      //     }
      //   },
      //   deep: true
      // },
      // "addForms.rgstrId": {
      //   handler(newVal, oldVal) {
      //     if (newVal) {
      //       var _self = this;
      //       console.log("newVal:" + newVal + ", oldVal:" + oldVal)
      //       this.selectNum = 2;
      //       this.clearData();
      //       this.barData = [];
      //       this.mySeries = [];
      //       this.selectLegend = null;
      //       // this.getResponsibilityData(this.addForm,this.selectNum)
      //       if (this.testBool) {
      //         _self.getResponsibilityData(_self.addForms, _self.selectNum)
      //       }
      //     }
      //   },
      //   deep: true
      // },
      // "addFormt.year": {
      //   handler(newVal, oldVal) {
      //     if (newVal) {
      //       var _self = this;
      //       console.log("newVal:" + newVal + ", oldVal:" + oldVal)
      //       this.selectNum = 3;
      //       this.clearData();
      //       this.mySeries = [];
      //       this.selectLegend = null;
      //       if (this.testBool) {
      //         _self.getResponsibilityData(_self.addFormt, _self.selectNum)
      //       }
      //     }
      //   },
      //   deep: true
      // },
      // "addFormt.batch": {
      //   handler(newVal, oldVal) {
      //     if (newVal) {
      //       var _self = this;
      //       console.log("newVal:" + newVal + ", oldVal:" + oldVal)
      //       this.selectNum = 3;
      //       this.clearData();
      //       this.mySeries = [];
      //       this.selectLegend = null;
      //       if (this.testBool) {
      //         _self.getResponsibilityData(_self.addFormt, _self.selectNum)
      //       }
      //     }
      //   },
      //   deep: true
      // },
      // "addFormt.rgstrId": {
      //   handler(newVal, oldVal) {
      //     if (newVal) {
      //       var _self = this;
      //       console.log("newVal:" + newVal + ", oldVal:" + oldVal)
      //       this.selectNum = 3;
      //       this.clearData();
      //       this.barData = [];
      //       this.mySeries = [];
      //       this.selectLegend = null;
      //       // this.getResponsibilityData(this.addForm,this.selectNum)
      //       if (this.testBool) {
      //         _self.getResponsibilityData(_self.addFormt, _self.selectNum)
      //       }
      //     }
      //   },
      //   deep: true
      // },
      selectLegend(val) {
        if (val) {

          this.mySeries = [];
          this.init_Serious_BarLineChart()
        }
      }
    },
    //方法集合
    methods: {
      //责任主体
      getResponsibilityData(params, item) {
          //debugger
        var _self = this;
        _self.loading = true;
          var obj = {};
          if(this.isMuch==true){
              obj.rgstrId =  params.rgstrId;
              if(params.years instanceof Array){
                  obj.years =  params.years.length>0?params.years.join(","):"";
                  obj.year = params.year;
              }else{
                  obj.years =  params.years;
              }
          }else{
              obj.year = params.year;
              obj.years = params.year;
              obj.batch = params.batch
              obj.rgstrId =  params.rgstrId;
          }
        request.post(`/tac/pblm/info/countPblmInfoBySubNew`, obj).then(res => {
          if (res.success) {
            let count = 0;
            _self.clearData();
            res.data.forEach(ele => {
              //主体个数
              _self.zrtz_mainBodyNum_list.push(Number(ele.count));
              _self.zrtz_normal_list.push(Number(ele.normal));
              _self.zrtz_heavier_list.push(Number(ele.heavier));
              _self.zrtz_serious_list.push(Number(ele.serious));
              _self.zrtz_nh_list.push(Number(ele.normal) + Number(ele.heavier));
              _self.zrtz_ns_list.push(Number(ele.normal) + Number(ele.serious));
              _self.zrtz_hs_list.push(Number(ele.serious) + Number(ele.heavier));
              _self.xName.push(ele.name);
              count += Number(ele.count);
              _self.pieData_zy.push(
                {
                  name: ele.name,
                  value: Number(ele.normal) + Number(ele.heavier) + Number(ele.serious)
                }
              );
            });
            let countN = 0, countH = 0, countS = 0, countNh = 0, countNs = 0, countHs = 0
            _self.zrtz_normal_list.forEach(ele => {
              countN += Number(ele)
            })
            _self.zrtz_heavier_list.forEach(ele => {
              countH += Number(ele)
            })
            _self.zrtz_serious_list.forEach(ele => {
              countS += Number(ele)
            })
            _self.zrtz_nh_list.forEach(ele => {
              countNh += Number(ele)
            })
            _self.zrtz_ns_list.forEach(ele => {
              countNs += Number(ele)
            })
            _self.zrtz_hs_list.forEach(ele => {
              countHs += Number(ele)
            })

            _self.mainBody = _self.zrtz_mainBodyNum_list.map(item => {
              return ((item / count) * 100).toFixed(2);
            })
            _self.zrzt_n = _self.zrtz_normal_list.map(item => {
              return ((item / countN) * 100).toFixed(2);
            })
            _self.zrzt_h = _self.zrtz_heavier_list.map(item => {
              return ((item / countH) * 100).toFixed(2);
            })
            _self.zrzt_s = _self.zrtz_serious_list.map(item => {
              return ((item / countS) * 100).toFixed(2);
            })
            _self.zrzt_nh = _self.zrtz_nh_list.map(item => {
              return ((item / countNh) * 100).toFixed(2);
            })
            _self.zrzt_ns = _self.zrtz_ns_list.map(item => {
              return ((item / countNs) * 100).toFixed(2);
            })
            _self.zrzt_hs = _self.zrtz_hs_list.map(item => {
              return ((item / countHs) * 100).toFixed(2);
            })
            _self.barData_zrzt = {
              "mainBody": _self.mainBody,
              "normal": _self.zrtz_normal_list,
              "heavier": _self.zrtz_heavier_list,
              "serious": _self.zrtz_serious_list,
              "xName": _self.xName,
              "pcNum": item,
              "countNum": _self.zrtz_mainBodyNum_list
            };
            if (_self.barData.length != 0) {
              var index = _self.functiontofindIndexByKeyValue(_self.barData, "pcNum", _self.barData_zrzt.pcNum);
              if (index == null) {
                _self.barData.push(_self.barData_zrzt)
              } else {
                _self.mySeries = [];
                _self.barData[index] = _self.barData_zrzt;
              }
            } else {
              _self.barData.push(_self.barData_zrzt)
            }
            console.log(_self.barData_zrzt);
            this.init_Serious_BarLineChart();
          }
        });
      },
      functiontofindIndexByKeyValue(arraytosearch, key, valuetosearch) {
        for (var i = 0; i < arraytosearch.length; i++) {
          if (arraytosearch[i][key] == valuetosearch) {
            return i;
          }
        }
        return null;
      },
      init_Serious_BarLineChart: function () {
        var _self = this;
        this.chart = echarts.init(this.$refs['bar_chart']);
        this.selectLegend = this.selectLegend || _self.mainBody
        this.chart.on("legendselectchanged", function (obj) {
          // let series = _self.mySeries;
          // var b = obj.selected, d = [];
          // for (var key in b) {
          //     if (b[key]) {
          //         for (var i = 0, l = series.length; i < l; i++) {
          //             var changename = series[i]["name"];
          //             if (changename == key) {
          //                 d.push(i);
          //             }
          //         }
          //     }
          // }
          // for (var i = 0; i < series.length; i++) {
          //     series[i]["label"]["show"] = false;
          // }
          // for (var i = series.length - 1; i >= 0; i--) {
          //     var name = series[i]["name"];
          //     if (obj["selected"][name]) {
          //         series[i]["label"]["formatter"] = fun1
          //         series[i]["label"]["show"] = true
          //         break;
          //     }
          // }

          console.log(obj)
          if (obj.selected['一般问题'] && obj.selected['较重问题'] && obj.selected['严重问题']) {
            _self.selectLegend = _self.mainBody
          } else if (obj.selected['一般问题'] && obj.selected['较重问题']) {
            _self.selectLegend = _self.zrzt_nh
          } else if (obj.selected['一般问题'] && obj.selected['严重问题']) {
            _self.selectLegend = _self.zrzt_ns
          } else if (obj.selected['较重问题'] && obj.selected['严重问题']) {
            _self.selectLegend = _self.zrzt_hs
          } else if (obj.selected['一般问题']) {
            _self.selectLegend = _self.zrzt_n
          } else if (obj.selected['较重问题']) {
            _self.selectLegend = _self.zrzt_h
          } else if (obj.selected['严重问题']) {
            _self.selectLegend = _self.zrzt_s
          }
          console.log(_self.selectLegend)
        })

        this.barData.forEach(ele => {
          ele.mainBody = _self.selectLegend
          let line = {
            // name: "主体个数",
            name: "主体个数占比",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 5, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: "#49dff0"
            },
            lineStyle: {
              color: "#49dff0"
            },
            areaStyle: {
              color: "rgba(5,140,255, 0.2)"
            },
            data: ele.mainBody
          };
          let barNormal = {
            name: "一般问题",
            // stack: "总量",
            stack: "pc" + ele.pcNum,
            type: "bar",
            barWidth: 25,
            itemStyle: {
              normal: {
                color: "#5ce9c7"
              }
            },
            data: ele.normal,
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            }
          };
          let barHeavier = {
            name: "较重问题",
            // stack: "总量",
            stack: "pc" + ele.pcNum,
            type: "bar",
            barWidth: 25,
            itemStyle: {
              normal: {
                color: "#fed172"
              }
            },
            data: ele.heavier,
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            }
          };
          let barSerious = {
            name: "严重问题",
            // stack: "总量",
            stack: "pc" + ele.pcNum,
            type: "bar",
            barWidth: 25,
            itemStyle: {
              normal: {
                color: "#fb6086"
              }
            },
            data: ele.serious,
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            }
          };
          let count = {
            name: '问题总数',
            type: 'bar',
            barWidth: 25,
            barGap: '-100%',
            data: ele.countNum,
            itemStyle: {
              normal: {
                color: "#0195f2"
              }
            },
            label: {
              show: true,
              normal: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold',
                color: '#333',
                position: 'top',
              },
              formatter: function (params) {
                return params.value
              }
            }
          };
          this.mySeries.push(line, count, barNormal, barHeavier, barSerious);
        })
        let option = {
          toolbox: {
              show: true,
              orient: "vertical",
              left: "right",
              top: "top",
              feature: {
                  saveAsImage: { show: true },  // 保存图表
              },
          },
          title: {
            text: '相关责任主体问题分布情况',
            textStyle: {
              align: 'center',
              // color: '#fff',
              fontSize: 20,
            },
            top: '3%',
            left: '5%',
          },
          grid: {
            top: "15%",
            bottom: "15%",
            left: "5%",
            right: "5%",
            containLabel: true
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true
              }
            },
            formatter: function (params) {
              var relVal = params[0].name;
              for (var i = 0, l = params.length; i < l; i++) {
                i === 0 ? relVal += '<br/>' + params[i].marker + params[i].seriesName + ': ' + params[i].value + "%" : relVal += '<br/>' + params[i].marker + params[i].seriesName + ': ' + params[i].value + "个";
              }
              return relVal;
            }
          },
          legend: {
            data: ["主体个数占比", "一般问题", "较重问题", "严重问题", "问题总数"],
            top: "5%",
            textStyle: {
              // color: "#ffffff"
            },
            selected: {
              "问题总数": false  //图例为‘全部’的一项默认置灰
            }
          },
          xAxis: {
            data: _self.barData[0].xName,
            axisLine: {
              show: true //隐藏X轴轴线
            },

            axisTick: {
              show: true //隐藏X轴刻度
            },
            axisLabel: {
              rotate: 15,
              show: true,
              textStyle: {
                // color: "#ebf8ac" //X轴文字颜色
              }
            },
          },
          yAxis: [
            {
              type: "value",
              name: "个",
              nameTextStyle: {
                // color: "#ebf8ac"
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: true
              },
              axisLine: {
                show: true
              },
              axisLabel: {
                show: true,
                textStyle: {
                  // color: "#ebf8ac"
                }
              },
            },
            {
              type: "value",
              name: "主体个数占比",
              nameTextStyle: {
                // color: "#ebf8ac"
              },
              position: "right",
              splitLine: {
                show: false
              },
              axisTick: {
                show: true
              },
              axisLine: {
                show: true
              },
              axisLabel: {
                show: true,
                formatter: "{value} %", //右侧Y轴文字显示
                textStyle: {
                  // color: "#ebf8ac"
                }
              }
            },
            {
              type: "value",
              gridIndex: 0,
              min: 50,
              max: 100,
              splitNumber: 8,
              splitLine: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              splitArea: {
                show: true,
                areaStyle: {
                  color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                }
              }
            }
          ],
          series: _self.mySeries,
        };
        var chart1 = echarts.init(this.$refs['pie_chart']);
        let option1 = {
          toolbox: {
              show: true,
              orient: "vertical",
              left: "right",
              top: "top",
              feature: {
                  saveAsImage: { show: true },  // 保存图表
              },
          },
          color: [
            '#fed172', '#fb6086', '#0195f2', '#A5A5A5',
            '#FFC000', '#5B9BD5', '#679ccd', '#41afff', '#40e0d0',
            '#4b3eff', '#0cffd5', '#afeea7', '#05d089', '#ffd700',
            '#6c8e37', '#4ea397', '#3cb371', '#6db8a9', '#7bd9a5',
            '#15a7ff', '#9de0ff', '#9da7ff', '#4cbbfe', '#7dc3fe',
            '#1658bb', '#433e7c', '#11ddf4', '#009db2', '#024b51',
            '#0d61cf', '#127619', '#e7be36', '#26ccd8', '#3685fe',
            '#4065ef', '#5160f5', '#f7b13f', '#f9e264', '#50c48f'
          ],
          tooltip: {
            trigger: "item",
            formatter: "{b}({d}%)"
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            top: '15%',
            bottom: '15%',
            right: '5%',
            itemWidth: 10, // 图例标记的图形宽度。[ default: 25 ]
            itemHeight: 10, // 图例标记的图形高度。[ default: 14 ]
            itemGap: 10, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
            textStyle: {
              fontSize: 14,
              color: '#3b3b3b',
            },
            pageButtonPosition: 'start',
            pageIconColor: '#31586C', //翻页下一页的三角按钮颜色
            pageIconInactiveColor: '#31586C', //翻页（即翻页到头时）
            pageIconSize: 10, //翻页按钮大小
            pageFormatter: '',//隐藏翻页的数字
            pageButtonItemGap: -6,//翻页按钮的两个之间的间距
          },
          series: [{
            type: "pie",
            data: _self.pieData_zy,
            radius: '40%',
            center: ['30%', '50%'],
            labelLine: {
              normal: {
                show: true,
                position: 'outside',
                formatter: '{c}'
              }
            },
            label: {
              normal: {
                show: true,
                formatter: "{d}% ",
                textStyle: {
                  fontSize: this.standSize / 150,
                },
              }
            }
          }]
        };
        this.chart.setOption(option);
        chart1.setOption(option1);
        window.addEventListener("resize", () => {
          this.chart.resize();
          chart1.resize();
        });
      },
      //置空数据
      clearData() {
        this.zrtz_mainBodyNum_list = [];
        this.zrtz_normal_list = [];
        this.zrtz_heavier_list = [];
        this.zrtz_serious_list = [];
        this.zrtz_nh_list = [];
        this.zrtz_ns_list = [];
        this.zrtz_hs_list = [];
        this.xName = [];
        this.mainBody = [];
        this.pieData_zy = [];
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.getResponsibilityData(this.addForm, this.selectNum);
    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁完成
    activated() {
    }, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped>

</style>