首页传参修改

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,21 +92,24 @@
        */
    // const sideData = data.dataList.map(item => item + 1);//右边的面稍高一点
    console.log(this.$refs.echartsAlternating.offsetHeight);
    let domHeight = this.$refs.echartsAlternating.offsetHeight;
    
    },
    optionSet(data){
        // 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 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: {
@@ -95,7 +127,7 @@
                z: 22
            },
            xAxis: {
                data: self.opt.dataName,
                    data: data.dataName,
                //坐标轴
                axisLine: {
                    lineStyle: {
@@ -165,11 +197,11 @@
                        //     { value: 27, xAxis: 3, yAxis: 29},
                        // ]
                        data:function(){
                            let thisArr = self.opt.dataList.map((item,index)=>{
                                let thisArr = data.dataList.map((item,index)=>{
                                                let opt = {
                                                    value:item,
                                                    xAxis:index,
                                                    yAxis:item + 2 //椭圆的坐标
                                                        yAxis:item// !=0?item + 2 : item//椭圆的坐标
                                                }
                                                return opt;
                                            })
@@ -187,7 +219,7 @@
                        }], false)
                    }
                },
                data: self.opt.dataList,
                    data: data.dataList,
                barGap: 0
            }, {//侧右边配置
                type: 'bar',
@@ -205,9 +237,9 @@
                },
                barGap: 0,
                data: function(){
                    const sideData = self.opt.dataList.map(item =>{
                         item = item + floatNumber;
                         return item;
                        const sideData = data.dataList.map(item =>{
                                let list = item// !=0?item + floatNumber:item;
                            return list;
                    });//右边的面稍高一点
                    return sideData;
                }()
@@ -219,8 +251,8 @@
                },
                type: 'pictorialBar',
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#00B6EE',
                        // borderWidth: 1,
                        // borderColor: '#00B6EE',
                    color: '#00B6EE'
                },
                // symbol: 'rect',
@@ -228,10 +260,10 @@
                // symbolSize: [barWidth, barWidth],
                symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
                symbolSize: ['30', '12'],
                symbolOffset: ['0', '-12'],
                    symbolOffset: ['0', '0'],
                // symbolRotate: -45,
                symbolPosition: 'end',
                data: self.opt.dataList,
                    data: data.dataList,
                z: 3
            }
            ]
@@ -239,9 +271,10 @@
        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,13 +86,15 @@
        listData: [],
        panelForm: {
          name: ''
        }
        },
        opt:""
      }
    },
    mounted() {
      let self = this;
      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) {