oldcac/src/view/home/breaker/index.vue

<template>
  <div class="login">
    <!-- 1#主变 油色谱 -->
    <!-- 标题和内容 -->
    <div class="pageCardTitle" v-show="hideSwitchShow">
      {{ dropdownData.length !== 0 ? "SF6 -" + dropdownData[0].name : "SF6 " }}
      <div class="iconSvg closeSvg" @click="changeStatus(true)">
        <svg-icon slot="prefix" icon-class="close" className="svg" />
      </div>
    </div>
    <div
      class="pageCard breaker backgroundTitle"
      :style="'background-image:url(' + breaker + ');'"
      v-show="cardShow"
    >
      <div class="tendencyChartText" @click="tendencyChartChange('5')">
        趋势图
      </div>
      <div class="cardTitle">
        <div>
          <span>SF6 - </span>
          <!-- 下拉框有数据 -->
          <el-dropdown
            v-if="dropdownData.length !== 0"
            @command="dropdownClick"
          >
            <span class="el-dropdown-link">
              {{ dropdownData[0].name
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) of dropdownData"
                :key="index"
                :command="index"
                >{{ item.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- 无下拉数据 -->
          <el-dropdown v-else class="cursor" trigger="click">
            <span class="el-dropdown-link">
              SF6<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>暂无数据 </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="iconSvg" @click="changeStatus(false)">
          <svg-icon slot="prefix" icon-class="open" className="svg" />
        </div>
      </div>
      <div class="cardContent">
        <Tablemodule
          :table-loading="loading"
          :option="tableData.column"
          :data="tableData.data"
        ></Tablemodule>
        <div class="cardDate">采样时间 {{ samplingDate }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  SF6ControllerTable,
  SF6ControllerLine,
  getLxId,
  getEqmId,
} from "@/api/home/home";
// 左边
import { echartData } from "@/utils/common";
import breaker from "@/assets/page_right/breaker.png";
// 引入table组件
import Tablemodule from "@/components/Tablemodule/index";
export default {
  name: "Login",
  components: {
    Tablemodule,
  },
  data() {
    return {
      loading: false,
      // 左边
      breaker: breaker,
      //   卡片显示与否
      cardShow: true,
      tabPosition: "bottom",
      //   开关状态
      switchValue: true,
      //   标题内容是否显示
      hideSwitchShow: false,
      oilChromatographyTitle: "",
      dropdownData: [],
      tableData: {
        column: [
          {
            label: "相位",
            prop: "phase",
            width: "50px",
          },
          {
            label: "温度℃",
            prop: "temperature",
          },
          {
            label: "微水(uL/L)",
            prop: "moisture",
          },
          {
            label: "压力(Kpa)",
            prop: "pressure",
          },
        ],
        data: [],
      },
      samplingDate: "2021-10-11 15:15:30",
      legendData: [],
      xAxisData: [],
      seriesData: [],
      selectIdList: [],
    };
  },
  created() {
    // 表格数据
    this.init();
    // // 趋势图数据
    // this.tendencyChartData()
  },
  methods: {
    init() {
      getLxId(2, 8)
        .then((response) => {
          const { code, data, msg } = response;
          if (code === 200 && data.length !== 0) {
            for (let index = 0; index < data.length; index++) {
              const element = data[index];
              this.dropdownData.push({
                name: element.lmc,
                id: element.lxid,
              });
            }
            getEqmId(2, data[0].lxid, 8).then((response) => {
              const { code, data, msg } = response;
              if (code === 200 && data.length !== 0) {
                for (let index = 0; index < data.length; index++) {
                  const element = data[index];
                  this.selectIdList.push(element.id);
                }
                this.tableDataFun(data[0].id);
                this.echartDataFun(data[0].id, "1");
              }
            });
          } else {
            this.msgError(msg);
          }
        })
        .catch((err) => {
          this.msgError(err.msg);
        });
    },
    tableDataFun(data) {
      this.loading = true;
      SF6ControllerTable(data).then((response) => {
        const { code, data, msg } = response;
        if (code === 200 && data.length !== 0) {
          const dataList = data[0];
          this.samplingDate = dataList.dtime;
          this.tableData.data = [
            {
              phase: "A相",
              temperature: dataList.tempA,
              moisture: dataList.pmA,
              pressure: dataList.pressureA,
            },
            {
              phase: "B相",
              temperature: dataList.tempB,
              moisture: dataList.pmB,
              pressure: dataList.pressureB,
            },
            {
              phase: "C相",
              temperature: dataList.tempC,
              moisture: dataList.pmC,
              pressure: dataList.pressureC,
            },
          ];
        }
        this.loading = false;
      });
    },
    echartDataFun(data, type) {
      SF6ControllerLine(data).then((response) => {
        const { code, data, msg } = response;
        const arr = [];
        if (code === 200 && data.length !== 0) {
          for (let index = 0; index < data.length; index++) {
            const element = data[index];
            this.legendData.push(element.equipment);
            arr.push({
              name: element.equipment,
              data: echartData(element.currentVals),
            });
          }
          this.seriesData = arr;
          this.xAxisData = data[0].dtimes;
          if (type === '2') {
            this.tendencyChartChange();
          }
        } else {
          this.msgError(msg);
        }
      });
    },
    // 点击开关
    changeStatus: function ($event) {
      if (!$event) {
        this.cardShow = false;
        this.hideSwitchShow = true;
        this.switchValue = false;
      } else {
        this.cardShow = true;
        this.hideSwitchShow = false;
        this.switchValue = true;
      }
    },
    dropdownClick(command) {
      this.tableDataFun(this.selectIdList[command]);
      this.echartDataFun(this.selectIdList[command], "2");//后面的2，是为了区分首次加载还是选择加载
    },
    tendencyChartChange(type) {
      //   通知home页图标数据处理
      this.$emit(
        "dataDispose",
        this.legendData,
        this.xAxisData,
        this.seriesData,
        this.dropdownData.length !== 0
          ? "SF6 -" + this.dropdownData[0].name
          : "SF6 "
      );
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/stylesheet/card";

// 开光样式
.pageCard {
  // min-height: 295px;
  .cardTitle span {
    // padding: 0 5px;
    box-sizing: border-box;
  }
}
.backgroundTitle {
  margin-bottom: 0 !important;
}
/deep/ .el-table__empty-block {
  padding: 20px 0 !important;
  box-sizing: border-box;
}
</style>