首页传参修改

whycwx

2021-03-24 139ef6463d877eac4faf8feafd7a804be6aee0d6

首页传参修改

 src/assets/js/charts/persons/wangxuan.js

@@ -11,10 +11,13 @@
        x: 0.35,
        y: 0.35,
        type: 'histogramAlternating',
        setData:{
            dataList:[32, 43, 17, 27],
            dataName:['过压数量', '欠压数量', '缺项数量', '过流数量']
        }
        setData:null
        // {
        //     dataList:[32, 43, 17, 27],
        //     dataName:['过压数量', '欠压数量', '缺项数量', '过流数量'],
        //     gjjfzs:"10",
        //     gjjfsbl:"10%"
        // },
    }
},{
    img: require("@/assets/images/monomerVoltage.png"),

 src/components/charts/histogramAlternating.vue

@@ -4,8 +4,8 @@

    </div>
    <div class="titleShow">
        <span><i></i><span class="textTitle">告警机房总数:</span><span class="textValue">150</span></span><br>
        <span><i></i><span class="textTitle">告警机房数比例:</span><span class="textValue">50</span></span>
        <span><i></i><span class="textTitle">告警机房总数:</span><span class="textValue">{{ gjjfzs }}</span></span><br>
        <span><i></i><span class="textTitle">告警机房数比例:</span><span class="textValue">{{ gjjfsbl }}</span></span>
    </div>
  </div>
</template>
@@ -16,6 +16,7 @@
export default {
  name: "histogramAlternating",
  chart: "",
  chartData:{},
  props: {
    id: {
      require: true,
@@ -41,18 +42,46 @@
  },
  data() {
    return {
        opt:null
        gjjfzs:0,
        gjjfsbl:0
    }
  },
  methods: {
    setOption(opt) {
        console.log(opt)
      this.$options.chart.setOption(opt);
    },
    setData(data) {
        let self = this;
        if(data){
            self.opt = data;
           self.$options.chartData = data;
           self.gjjfzs = data.gjjfzs;
           self.gjjfsbl = data.gjjfsbl;
           self.optionSet(self.$options.chartData);
        }else{
            self.$axios({
                method:"get",
                url:"/powerAlarm/acABC",
                params:{
                    userId:"1001"
                }
            }).then(res=>{
                if(res.data.code == 1){
                    let result = res.data.data[0];
                    let zsObj = res.data.data[1];
                    let dataList = [];
                    let dataName = [];
                        for (const key in result) {
                            dataName.push(key);
                            dataList.push(result[key]);
                        }
                        self.$options.chartData.dataList = dataList;
                        self.$options.chartData.dataName = dataName;
                        self.gjjfzs = zsObj.告警机房总数;
                        self.gjjfsbl = zsObj.告警机房数比例 + "%";
                        self.optionSet(self.$options.chartData);
                    console.log(res)
                }
            })
        }
        /*
        // 统计数据
@@ -63,185 +92,189 @@
        */
    // const sideData = data.dataList.map(item => item + 1);//右边的面稍高一点
    console.log(this.$refs.echartsAlternating.offsetHeight);
    let domHeight = this.$refs.echartsAlternating.offsetHeight;
    // 调试右侧柱子高度
    let floatNumber = 2.5;
        if(domHeight<176){
            floatNumber = 4.5
        }
        if(domHeight>175 && domHeight<326){
            floatNumber = 2.5
        }
        if(domHeight>326 && domHeight<426){
            floatNumber = 1.8
        }
        if(domHeight>425){
            floatNumber = 1.2;
        }
    let option = {
            // backgroundColor: "#ffffff",
            tooltip: {
                trigger: 'axis',
                formatter: "{b} : {c}",
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '10%',
                right: '5%',
                bottom: '10%',
                top: '17%',
                z: 22
            },
            xAxis: {
                data: self.opt.dataName,
                //坐标轴
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                //坐标值标注
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                    }
                }
            },
            yAxis: {
                //坐标轴
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                //坐标值标注
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                    }
                },
                //分格线
                splitLine: {
                    show:false,
                    lineStyle: {
                        color: '#000'
                    }
                }
            },
            series: [{
                name: '交流ABC',
    
    },
    optionSet(data){
        // let domHeight = this.$refs.echartsAlternating.offsetHeight;
        // 调试右侧柱子高度
        // let floatNumber = domHeight * 0.001;
            // if(domHeight<176){
            //     floatNumber = 4.5
            // }
            // if(domHeight>175 && domHeight<326){
            //     floatNumber = 2.5
            // }
            // if(domHeight>326 && domHeight<426){
            //     floatNumber = 1.8
            // }
            // if(domHeight>425){
            //     floatNumber = 1.2;
            // }
        let option = {
                // backgroundColor: "#ffffff",
                tooltip: {
                    show: true,
                    position: 'top'
                    trigger: 'axis',
                    formatter: "{b} : {c}",
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                type: 'bar',
                barWidth: 24.5,
                markPoint: {
                        itemStyle:{
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#0077EA" // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: "#451DD3" // 100% 处的颜色
                            }], false),
                            borderColor:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "rgba(190,215,253,0.4)", // 0% 处的颜色 BED7FD
                            }, {
                                offset: 1,
                                color: "rgba(90,100,248,0.4)", // 100% 处的颜色 5A64F8
                            }], false),
                        },
                        // data: [
                        //     { value: 32, xAxis: 0, yAxis: 34},
                        //     { value: 43, xAxis: 1, yAxis: 45},
                        //     { value: 17, xAxis: 2, yAxis: 19},
                        //     { value: 27, xAxis: 3, yAxis: 29},
                        // ]
                        data:function(){
                            let thisArr = self.opt.dataList.map((item,index)=>{
                                                let opt = {
                                                    value:item,
                                                    xAxis:index,
                                                    yAxis:item + 2 //椭圆的坐标
                                                }
                                                return opt;
                                            })
                                return thisArr;
                        }()
                grid: {
                    left: '10%',
                    right: '5%',
                    bottom: '10%',
                    top: '17%',
                    z: 22
                },
                xAxis: {
                    data: data.dataName,
                    //坐标轴
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#451DD3" // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: "#0077EA" // 100% 处的颜色
                        }], false)
                    //坐标值标注
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                        }
                    }
                },
                data: self.opt.dataList,
                barGap: 0
            }, {//侧右边配置
                type: 'bar',
                barWidth: 6.5,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#2663DA" // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: "#69CCF6" // 100% 处的颜色
                        }], false)
                yAxis: {
                    //坐标轴
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    //坐标值标注
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    //分格线
                    splitLine: {
                        show:false,
                        lineStyle: {
                            color: '#000'
                        }
                    }
                },
                barGap: 0,
                data: function(){
                    const sideData = self.opt.dataList.map(item =>{
                         item = item + floatNumber;
                         return item;
                    });//右边的面稍高一点
                    return sideData;
                }()
            }, 
            {//盖子的配置
                name: 'b',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#00B6EE',
                    color: '#00B6EE'
                },
                // symbol: 'rect',
                // symbolOffset: [0, '-45%'],
                // symbolSize: [barWidth, barWidth],
                symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
                symbolSize: ['30', '12'],
                symbolOffset: ['0', '-12'],
                // symbolRotate: -45,
                symbolPosition: 'end',
                data: self.opt.dataList,
                z: 3
            }
            ]
        };
        this.setOption(option);
                series: [{
                    name: '交流ABC',
                    tooltip: {
                        show: true,
                        position: 'top'
                    },
                    type: 'bar',
                    barWidth: 24.5,
                    markPoint: {
                            itemStyle:{
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: "#0077EA" // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "#451DD3" // 100% 处的颜色
                                }], false),
                                borderColor:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: "rgba(190,215,253,0.4)", // 0% 处的颜色 BED7FD
                                }, {
                                    offset: 1,
                                    color: "rgba(90,100,248,0.4)", // 100% 处的颜色 5A64F8
                                }], false),
                            },
                            // data: [
                            //     { value: 32, xAxis: 0, yAxis: 34},
                            //     { value: 43, xAxis: 1, yAxis: 45},
                            //     { value: 17, xAxis: 2, yAxis: 19},
                            //     { value: 27, xAxis: 3, yAxis: 29},
                            // ]
                            data:function(){
                                let thisArr = data.dataList.map((item,index)=>{
                                                    let opt = {
                                                        value:item,
                                                        xAxis:index,
                                                        yAxis:item// !=0?item + 2 : item//椭圆的坐标
                                                    }
                                                    return opt;
                                                })
                                    return thisArr;
                            }()
                        },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#451DD3" // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: "#0077EA" // 100% 处的颜色
                            }], false)
                        }
                    },
                    data: data.dataList,
                    barGap: 0
                }, {//侧右边配置
                    type: 'bar',
                    barWidth: 6.5,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#2663DA" // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: "#69CCF6" // 100% 处的颜色
                            }], false)
                        }
                    },
                    barGap: 0,
                    data: function(){
                        const sideData = data.dataList.map(item =>{
                                let list = item// !=0?item + floatNumber:item;
                            return list;
                        });//右边的面稍高一点
                        return sideData;
                    }()
                }, 
                {//盖子的配置
                    name: 'b',
                    tooltip: {
                        show: false
                    },
                    type: 'pictorialBar',
                    itemStyle: {
                        // borderWidth: 1,
                        // borderColor: '#00B6EE',
                        color: '#00B6EE'
                    },
                    // symbol: 'rect',
                    // symbolOffset: [0, '-45%'],
                    // symbolSize: [barWidth, barWidth],
                    symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
                    symbolSize: ['30', '12'],
                    symbolOffset: ['0', '0'],
                    // symbolRotate: -45,
                    symbolPosition: 'end',
                    data: data.dataList,
                    z: 3
                }
                ]
            };
            this.setOption(option);
    },
    resize() {
        let self = this;
      setTimeout(() => {
          this.$options.chart.resize();
          this.setData(null);
          this.setData(self.$options.chartData);
        }, 300)
    }
  },
@@ -266,6 +299,7 @@
        top: 0;
        right: 0;
        text-align: right;
        padding-right: 5%;
        overflow: hidden;

    }
@@ -280,7 +314,7 @@
    }
    .titleShow .textTitle{
        display: inline-block;
        width: 120px;
        width: 9rem;
        text-align: right;
        font-size: 12px;
        color: rgb(0,178,224);

 src/pages/index.vue

@@ -86,14 +86,16 @@
        listData: [],
        panelForm: {
          name: ''
        }
        },
        opt:""
      }
    },
    mounted() {
      let self = this;
      window.addEventListener('scroll', self.setHeadPosition, true)

      self.getData();
          window.addEventListener('scroll', self.setHeadPosition, true)
          // debugger
          self.opt = self.$route.query;
          self.getData();
    },
    methods: {
      // 适应
@@ -110,14 +112,13 @@
      // 获取列表数据
      getData() {
        let self = this;
        let opt = self.$route.query;
        localStorage.setItem('userId', self.$route.query.userId);
        console.log(opt)
        // let opt = self.$route.query;
        localStorage.setItem('userId', self.opt.userId);
        self.$axios({
          method: "get",
          url: "/application/all",
          params: {
            userId: opt.userId || "1001"
            userId: self.opt.userId || "1001"
          }
        }).then(res => {
          if (res.data.code == 1) {
@@ -140,7 +141,8 @@
          method: "post",
          url: "/application",
          data: {
            name: name
            name: name,
            userId: self.opt.userId || "1001"
          }
        }).then(res => {
          if (res.data.code == 1) {
@@ -206,7 +208,7 @@
        let self = this;
        switch (status) {
          case 1:
            // 编辑
            // 查看
            self.$router.push({
              path: '/exhibition',
              query: {
@@ -235,8 +237,8 @@
              self.$axios({
                method: "delete",
                url: "/application",
                data: {
                  id: item.id
                params: {
                  appId: item.id
                }
              }).then(res => {
                if (res.data.code == 1) {