newcpms/ui/src/views/sems/specanalysis/index.vue

<template>
  <div id="specSashboard">
    <div class="specAnalysis" style="width:100%;height:100%">
      <div class="top-box">
        <div>
          <div class="topElevator">
            <div class="bg-color-spec">
              <div style="text-align: center; padding-top: 0.3rem">
                <el-select v-model="plantIds"  @change="handleCommand" multiple collapse-tags :placeholder="$t('请选择') + $t('装置')">
                  <el-checkbox v-model="checked" @change="selectAll"> ALL</el-checkbox>
                  <el-option
                    v-for="item in plantList"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </div>
              <div style="text-align: center; margin-top: 0.2rem">
                <el-select v-model="unitIds" @change="handleCommandUnit" multiple collapse-tags :placeholder="$t('请选择') + $t('单元')">
                  <el-option
                    v-for="item in unitList"
                    :key="item.plantId"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="topElevator">
            <div class="bg-color-spec other-text">
              <div>
                <svg-icon icon-class="boiler"
                          style="width: 0.6rem; height: 0.6rem; margin-top: 0.1rem; margin-left: 0.1rem"></svg-icon>
              </div>
              <div style="margin-left: 0.2rem; margin-top: 0.2rem">
                <div class="en-spec-text" style="color: #5470c6;">{{ $t('锅炉') }}</div>
                <div class="specFont">{{ devDatas.glData.glAll_num }}<span
                  style="font-size: 12px; color: #4a7d87; margin-left: 0.1rem">{{ $t('台') }}</span></div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="topElevator">
            <div class="bg-color-spec other-text">
              <div>
                <svg-icon icon-class="vessel"
                          style="width: 0.6rem; height: 0.6rem; margin-top: 0.1rem; margin-left: 0.1rem"></svg-icon>
              </div>
              <div style=" margin-left: 0.2rem; margin-top: 0.2rem">
                <div class="en-spec-text" style="color: #92D050;">{{ $t('压力容器') }}</div>
                <div class="specFont">{{ devDatas.ylrqData.ylrqAll_num }}<span
                  style="font-size: 12px; color: #4a7d87; margin-left: 0.1rem">{{ $t('台') }}</span></div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="topElevator">
            <div class="bg-color-spec other-text">
              <div>
                <svg-icon icon-class="pipe"
                          style="width: 0.6rem; height: 0.6rem; margin-top: 0.1rem; margin-left: 0.1rem"></svg-icon>
              </div>
              <div style="margin-left: 0.2rem; margin-top: 0.2rem">
                <div class="en-spec-text" style="color: #e4da3a;">{{ $t('压力管道') }}</div>
                <div class="specFontSmall"><span style="font-size: 10px; color: #4a7d87;margin-right: 0.1rem">{{ $t('设备数') }}</span>{{
                    devDatas.ylgdData.ylgdAll_num
                  }}<span style="font-size: 10px; color: #4a7d87; margin-left: 0.1rem">{{ $t('条') }}</span></div>
                <div class="specFontSmall"><span style="font-size: 10px; color: #4a7d87;margin-right: 0.1rem">{{ $t('总长度') }}</span>{{ devDatas.ylgdData.ylgd_length }}<span
                  style="font-size: 10px; color: #4a7d87; margin-left: 0.1rem">{{ $t('米') }}</span></div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="topElevator">
            <div class="bg-color-spec other-text">
              <div>
                <svg-icon icon-class="forklift"
                          style="width: 0.6rem; height: 0.6rem; margin-top: 0.1rem; margin-left: 0.1rem"></svg-icon>
              </div>
              <div style="margin-left: 0.2rem; margin-top: 0.2rem">
                <div class="en-spec-text" style="color: #5470c6;">{{ $t('叉车') }}</div>
                <div class="specFont">{{ devDatas.ccData.ccAll_num }}<span
                  style="font-size: 10px; color: #4a7d87; margin-left: 0.05rem">{{ $t('辆') }}</span></div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="topElevator">
            <div class="bg-color-spec other-text">
              <div>
                <svg-icon icon-class="machinery"
                          style="width: 0.6rem; height: 0.6rem; margin-top: 0.1rem; margin-left: 0.1rem"></svg-icon>
              </div>
              <div style="margin-left: 0.2rem;margin-top: 0.2rem">
                <div class="en-spec-text" style="color: #92D050;">{{ $t('起重机械') }}</div>

                  <div class="specFontSmall"><span
                    style="font-size: 10px; color: #4a7d87;">{{ $t('特种设备2') }}</span>{{
                      devDatas.dzsbData.dzsbAll_num
                    }}<span style="font-size: 10px; color: #4a7d87; margin-left: 0.1rem">{{ $t('台') }}</span></div>
                  <div class="specFontSmall"><span
                    style="font-size: 10px; color: #4a7d87;">{{ $t('非特种设备') }}</span>{{
                      devDatas.dzsbData.dzsbUn_num
                    }}<span style="font-size: 10px; color: #4a7d87; margin-left: 0.1rem">{{ $t('台') }}</span></div>

              </div>

            </div>
          </div>
        </div>
        <div>
          <div class="topElevator">
            <div class="bg-color-spec other-text">
              <div>
                <svg-icon icon-class="elevator"
                          style="width: 0.6rem; height: 0.6rem; margin-top: 0.1rem; margin-left: 0.1rem"></svg-icon>
              </div>
              <div style="margin-left: 0.2rem; margin-top: 0.2rem">
                <div class="en-spec-text" style="color: #e4da3a;">{{ $t('电梯') }}</div>
                <div class="specFont">{{ devDatas.dtData.dtAll_num }}<span
                  style="font-size: 12px; color: #4a7d87; margin-left: 0.1rem">{{ $t('台') }}</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="buttom-box">
        <div id="buttonSpec">
          <div class="centerSpec-box">
            <div>
              <dv-border-box-13>
                <div id="topFirst">
                  <div class="bg-color-spec">
                    <div class="d-flex pt-2 pl-2">
                      <span style="color:#96d1d5">
                        <icon name="chart-bar"></icon>
                      </span>
                      <div class="d-flex">
                        <span class="fs-xl text mx-2">{{ $t('压力容器定期检验计划') }}</span>
                      </div>
                    </div>
                    <div>
                      <pv-chart ref="pvChart"/>
                    </div>
                  </div>
                </div>
              </dv-border-box-13>
            </div>
            <div>
              <dv-border-box-13>
                <div id="topSecond">
                  <div class="bg-color-spec">
                    <div class="d-flex pt-2 pl-2">
                      <span style="color:#96d1d5">
                        <icon name="chart-bar"></icon>
                      </span>
                      <div class="d-flex">
                        <span class="fs-xl text mx-2">{{ $t('锅炉定期检验计划') }}</span>
                      </div>
                    </div>
                    <div>
                      <boiler-chart ref="boilerChart"/>
                    </div>
                  </div>
                </div>
              </dv-border-box-13>
            </div>
            <div>
              <dv-border-box-13>
                <div id="topThird">
                  <div class="bg-color-spec">
                    <div class="d-flex pt-2 pl-2">
                      <span style="color:#96d1d5">
                        <icon name="chart-bar"></icon>
                      </span>
                      <div class="d-flex">
                        <span class="fs-xl text mx-2">{{ $t('压力管道定期检验计划') }}</span>
                      </div>
                    </div>
                    <div>
                      <pp-chart ref="ppChart"/>
                    </div>
                  </div>
                </div>
              </dv-border-box-13>
            </div>
          </div>
          <div class="buttomSpec-box">
            <div>
              <dv-border-box-12>
                <div id="buttomModule">
                  <div class="bg-color-spec">
                    <div class="d-flex pt-2 pl-2">
                      <span style="color:#96d1d5">
                        <icon name="chart-bar"></icon>
                      </span>
                      <div class="d-flex">
                        <span
                          class="fs-xl text mx-2">{{ $t('叉车、起重机械、电梯定期检验计划') }}</span>
                      </div>
                    </div>
                    <div>
                      <lift-chart ref="liftChart"/>
                    </div>
                  </div>
                </div>
              </dv-border-box-12>
            </div>
            <div>
              <div id="pieModule">
                <div class="up-pie-left">
                  <ylrq-chart ref="ylrqChart"/>
                </div>
                <div class="up-pie-right">
                  <ylgd-chart ref="ylgdChart"/>
                </div>
                <div>
                  <b><p style="width: 100%; text-align: center">{{ $t('锅炉允许运行') }}</p></b>
                </div>
                <div class="down">
                  <dv-water-level-pond v-if="waterVisible" :config="water" style="width:100%;height:1.7rem"/>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="buttonRightSpec">
          <div class="up">
            <dv-border-box-12>
              <div id="approveModule">
                <div class="bg-color-spec">
                  <div class="d-flex pt-2 pl-2">
                    <span style="color:#96d1d5">
                      <icon name="chart-bar"></icon>
                    </span>
                    <div class="d-flex">
                      <span class="fs-xl text mx-2">{{ $t('未读消息') }}</span>
                    </div>
                  </div>
                  <div>
                    <center-chart ref="centerChart"/>
                  </div>
                </div>
              </div>
            </dv-border-box-12>
          </div>
          <div class="center">
            <dv-border-box-12>
              <div id="centerModule">
                <div class="bg-color-spec">
                  <div class="d-flex pt-2 pl-2">
                    <span style="color:#96d1d5">
                      <icon name="chart-bar"></icon>
                    </span>
                    <div class="d-flex">
                      <span class="fs-xl text mx-2">{{ $t('当前正在审批') }}</span>
                    </div>
                  </div>
                  <div>
                    <approve-chart ref="approveChart"/>
                  </div>
                </div>
              </div>
            </dv-border-box-12>
          </div>
          <div class="down">
            <dv-border-box-12>
              <div id="finishModule">
                <div class="d-flex pt-2 pl-2">
                  <span style="color:#96d1d5">
                    <icon name="chart-bar"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">{{ $t('已完成的审批') }}</span>
                  </div>
                </div>
                <div>
                  <finish-chart ref="finishChart"/>
                </div>
              </div>
            </dv-border-box-12>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import pvChart from "./PvChart"
import boilerChart from "./BoilerChart"
import ppChart from "./PpChart"
import ylrqChart from "./YlrqChart";
import ylgdChart from "./YlgdChart";
import liftChart from "./LiftChart"
import approveChart from "./ApproveChart"
import centerChart from "./centerChart"
import finishChart from "./FinishChart"
import {listPlant, listUnit, mylistPlant} from "@/api/system/plant";
import {devData, devGlPerData} from "@/api/sems/home";
import '@/common/flexible.js';

export default {
  components: {
    finishChart,
    approveChart,
    liftChart,
    ylrqChart,
    pvChart,
    boilerChart,
    ppChart,
    ylgdChart,
    centerChart
  },
  data() {
    return {
      checked:true,
      waterVisible: true,
      devDatas: {
        ylrqData: {
          ylrqAll_num: 0,
          ylrq_rate: 0
        },
        ylgdData: {
          ylgdAll_num: 0,
          ylgd_rate: 0,
          ylgd_length: 0
        },
        dzsbData: {
          dzsbAll_num: 0,
          dzsb_rate: 0,
          dzsbUn_num: 0
        },
        glData: {
          glAll_num: 0,
          gl_rate: 0
        },
        dtData: {
          dtAll_num: 0,
          dt_rate: 0
        },
        ccData: {
          ccAll_num: 0,
          cc_rate: 0
        }
      },
      water: {
        data: [50],
        shape: "roundRect",
        formatter: "{value}%",
        waveNum: 3,
        colors: ['#32ecec', '#6591d7']
      },
      options: [],
      oldOptions:[],
      form: {},
      plantList: [],
      plantIds: [],
      unitList: [],
      unitIds: [],
    }
  },
  mounted() {
  },
  created() {
    this.getPlantList()
  },
  methods: {
    getPlantList() {
      let plantParams = {
        pType: 1
      }
      mylistPlant(plantParams).then(response => {
        this.plantList = response.data;
        let arrnew = response.data.map((obj, index) => {
          return obj.name;
        }).join(",").split(',')
        this.plantIds = arrnew
        // this.plantIds.push("ALL")
        // this.oldOptions = this.plantIds
        this.getUnitList()
      });
    },
    devGlPerData() {
      this.waterVisible = false
      let params = {
        'plantIds': this.plantIds,
        'unitIds': this.unitIds
      }
      devGlPerData(params).then(response => {
        this.$set(this.water.data, 0, response.data.per)
        this.waterVisible = true
      });
    },
    //获取账号对应单元
    getUnitList() {
      let unitParams = {
        plantIds: this.plantIds
      }
      listUnit(unitParams).then(response => {
        this.unitList = response;
        let arrnew = response.map((obj, index) => {
          return obj.name;
        }).join(",").split(',')
        this.unitIds = arrnew
        if (this.plantIds.length == 0) {
          this.plantIds = ['']
        }
        this.devData()
        this.$refs.pvChart.devYlrqData(this.plantIds, this.unitIds);
        this.$refs.boilerChart.devGlData(this.plantIds, this.unitIds);
        this.$refs.ppChart.devYlgdData(this.plantIds, this.unitIds);
        this.$refs.liftChart.devOtherData(this.plantIds, this.unitIds);
        this.$refs.finishChart.finishApproveData(this.plantIds, this.unitIds);
        this.$refs.ylrqChart.devYlrqSafeData(this.plantIds, this.unitIds);
        this.$refs.ylgdChart.devYlgdSafeData(this.plantIds, this.unitIds);
        this.$refs.approveChart.devApproveData(this.plantIds, this.unitIds);
        this.$refs.centerChart.devCenterData(this.plantIds, this.unitIds);
        this.devGlPerData()
      });
    },
    selectAll() {
      this.plantIds = []
      if (this.checked) {
        this.plantList.map((item) => {
          this.plantIds.push(item.name)
        })
      } else {
        this.plantIds = []
      }
      this.unitIds = []
      this.getUnitList()
      if (this.plantIds.length == 0) {
        this.plantIds = ['']
      }
      this.devData()
    },
    handleCommand(val) {
      this.unitIds = []
      this.getUnitList()
      if (this.plantIds.length == 0) {
        this.plantIds = ['']
      }
      if (val.length === this.plantList.length) {
        this.checked = true
      } else {
        this.checked = false
      }
      this.devData()
    },
    // let allnames = []
    // //保留所有值
    // for (let item of this.plantList) {
    //   allnames.push(item.name)
    // }
    // // 用来储存上一次的值，可以进行对比
    // const oldVal = this.oldOptions
    // // 若是全部选择
    // if (val.includes('ALL') && !oldVal.includes('ALL')) {
    //   console.log(this.plantList + " -----")
    //   this.plantIds = this.plantList.map((obj, index) => {
    //     return obj.name;
    //   }).join(",").split(',')
    //   this.plantIds.push("ALL")
    //   this.oldOptions = this.plantIds
    // }
    // // 取消全部选中  上次有 当前没有 表示取消全选
    // if (oldVal.includes('ALL') && !val.includes('ALL')) {
    //   this.plantIds = []
    //   this.oldOptions = this.plantIds
    // }
    // 点击非全部选中  需要排除全部选中 以及 当前点击的选项
    // 新老数据都有全部选中
    // if (oldVal.includes('ALL') && val.includes('ALL')) {
    //   const index = val.indexOf('ALL')
    //   val.splice(index, 1) // 排除全选选项
    //   this.plantIds = val
    //   //全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
    //   if (!oldVal.includes('ALL') && !val.includes('ALL')) {
    //     console.log(11)
    //     if (val.length === allnames.length - 1) {
    //       this.plantIds = ['ALL'].concat(val)}
    //   }
    //   //储存当前最后的结果 作为下次的老数据
    //   this.oldOptions[0] = this.plantIds
    // }
    handleCommandUnit(unitIds) {
      this.unitIds = unitIds
      if (this.plantIds.length == 0) {
        this.plantIds = ['']
      }
      this.devData()
      this.$refs.pvChart.devYlrqData(this.plantIds, this.unitIds);
      this.$refs.boilerChart.devGlData(this.plantIds, this.unitIds);
      this.$refs.ppChart.devYlgdData(this.plantIds, this.unitIds);
      this.$refs.liftChart.devOtherData(this.plantIds, this.unitIds);
      this.$refs.finishChart.finishApproveData(this.plantIds, this.unitIds);
      this.$refs.ylrqChart.devYlrqSafeData(this.plantIds, this.unitIds);
      this.$refs.ylgdChart.devYlgdSafeData(this.plantIds, this.unitIds);
      this.$refs.approveChart.devApproveData(this.plantIds, this.unitIds);
      this.$refs.centerChart.devCenterData(this.plantIds, this.unitIds);
      this.devGlPerData()
    },
    devData() {
      let params = {
        'plantIds': this.plantIds,
        'unitIds': this.unitIds
      }
      devData(params).then(response => {
        this.devDatas = response.data
      });
    }
  }
};
</script>

<style lang="scss">
//顶端七等分
.topElevator {
  padding-top: 0.2rem;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  height: 2rem;
  border-radius: 0.0625rem;

  .bg-color-spec {
    height: 1.5rem;
    border-radius: 0.125rem;
    /*border: 4px solid #8ea3ea;*/
    &.other-text{
      display: flex;
      flex-direction: row;
    }
  }
}


.up-pie-left {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  float: left;
}

.up-pie-right {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  float: right;
}

.specFontSmall {
  margin-top: 0.2rem;
  color: #4a7d87;
  font: 25px/10px 'ds-digitalbold';
  margin-left: -0.8rem;
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
}

.fs-xl {
  font-size: 0.14rem;
}

.mx-2 {
  //margin-top: 0.1rem;
}

#specSashboard {
  color: #000;
  background-color: #ffffff;
  width: 100%;

  .specAnalysis {
    display: flex;
    flex-direction: column;

    .top-box {
      display: grid;
      grid-template-columns: 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
    }

    .buttom-box {
      display: grid;
      grid-template-columns: 11fr 3fr;
    }
  }
}

//右侧区分上下
.up {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.center {
  padding: 0.07rem 0.05rem;
  padding-bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.down {
  padding: 0.07rem 0.05rem;
  padding-bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#buttonSpec {
  .centerSpec-box {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr;
  }

  .buttomSpec-box {
    display: grid;
    grid-template-columns: 10fr 5fr;
  }
}

#topFirst {
  padding: 0.2rem 0.2rem 0;
  height: 3.9rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;

  .text {
    color: #53565d;
  }
}

#topSecond {
  padding: 0.2rem 0.2rem 0;
  height: 3.9rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;

  .text {
    color: #53565d;
  }
}

#topThird {
  padding: 0.2rem 0.2rem 0;
  height: 3.9rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;

  .text {
    color: #53565d;
  }
}

#buttomModule {
  padding: 0.2rem 0.2rem 0;
  height: 2.9rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;

  .text {
    color: #53565d;
  }
}

#approveModule {
  padding: 0.15rem 0.15rem 0.15rem 0.15rem;
  height: 2.35rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;

  .bg-color-spec {
    height: 2.1rem;
  }

  .text {
    color: #a9b3d5;
  }
}

#centerModule {
  padding: 0.15rem 0.15rem 0.15rem 0.15rem;
  height: 2.35rem;
  border-radius: 0.0625rem;

  .bg-color-spec {
    height: 2.1rem;
  }

  .text {
    color: #a9b3d5;
  }
}

#finishModule {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  height: 3.3rem;
  border-radius: 0.0625rem;

  .text {
    color: #a9b3d5;
  }
}
.bg-color-spec {
  border-radius: 0.125rem;
  .en-spec-text{
    font-size: 12px;
    font-weight: bold;
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all;
  }
  .ch-spec-text{
    font-size: 14px;
    font-weight: bold;
  }
}
body {
  font-size: 12px !important;
}
</style>