whyczyk
2021-10-12 672c9c35b818c03090dbdb13425b04308855a963
src/components/charts/histogramAlternating.vue
@@ -3,15 +3,12 @@
      <div class="echarts-content" ref="alternating">
      </div>
      <div class="titleShow">
         <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>
<script>
import * as echarts from 'echarts';
import { WebSocketClass } from '@/assets/js/socket'
// 交流ABC 页面
export default {
   name: "histogramAlternating",
@@ -42,9 +39,8 @@
   },
   data() {
      return {
         gjjfzs: 0,
         gjjfsbl: 0,
         userId: ""
         userId: "",
         websock: null
      }
   },
   methods: {
@@ -64,38 +60,37 @@
      setOption(opt) {
         this.$options.chart.setOption(opt);
      },
      postData() {
         let userId = localStorage.getItem('userId');
         this.websock = new WebSocketClass(`/screen/powerAlarm/acABC/${userId}`, this.wsMessage)
      },
      wsMessage(res) {
         let self = this;
         if (res.code == 1) {
            let result = res.data[0];
            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.optionSet(self.$options.chartData);
         }
      },
      outClear() {
         this.websock.closeMyself()
         this.websock = null
         window.removeEventListener('resize', this.resize);
      },
      setData(data) {
         let self = this;
         if (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: self.userId
               }
            }).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.$options.chartData.gjjfzs = zsObj.告警机房总数;
                  self.$options.chartData.gjjfsbl = zsObj.告警机房数比例 + "%";
                  self.optionSet(self.$options.chartData);
                  console.log(res)
               }
            })
            self.postData()
         }
      },
      optionSet(data) {
@@ -150,6 +145,12 @@
         let option = {
            // backgroundColor: "rgba(72, 84, 96,1.0)",
            grid: {
               top: 40,
               right: 20,
               left: 50,
               bottom: 30
            },
            xAxis: {
               type: 'category',
               data: data.dataName,
@@ -190,7 +191,6 @@
            series: [{
               type: 'custom',
               renderItem: (params, api) => {
                  console.log(14777, api.style().aaa)
                  const location = api.coord([api.value(0), api.value(1)])
                  return {
                     type: 'group',