frontend/src/views/stritl/index.vue

<template>
  <div class="stritlBox">
    <div class="stritl_left">
      <div class="strLeftTop">
        <h3>{{ numberUnits.name }}</h3>
        <bar
          v-if="flag.baizhang"
          :legendData="unitXData"
          :seriesData="unitYData"
          :boxStyle="numberUnits.boxStyle"
        ></bar>
      </div>
      <div class="strLeftMid">
        <h3>{{ hazardClass.name }}</h3>
        <pie
          v-if="flag.baizhang"
          :pieData="hazardPieData"
          :boxStyle="hazardClass.boxStyle"
        ></pie>
      </div>
      <div class="strLeftBottom">
        <h3>{{ monitLine.name }}</h3>
        <bar
          v-if="flag.baizhang"
          :legendData="lineXData"
          :seriesData="lineYData"
          :boxStyle="monitLine.boxStyle"
        ></bar>
      </div>
    </div>
    <div class="stritl_center">
      <div class="strCenterTop">
        <mapChart></mapChart>
      </div>
      <div class="strCenterbottom">
        <div class="bottomL">
          <h3>{{ hazardType.name }}</h3>
          <horizontalBar
            :legendData="hazardTypeXData"
            :seriesData="hazardTypeYData"
            :boxStyle="hazardType.boxStyle"
          ></horizontalBar>
        </div>
        <div class="bottomM">
          <h3>{{ deviceInfo.name }}</h3>
          <div class="infoBox">
            <p>
              <span>在运数</span>
              <span>{{ infoData.deviceCount }}</span>
            </p>
            <p>
              <span>在线数</span>
              <span>{{ infoData.hasPhotoCount }}</span>
            </p>
            <p>
              <span>杆塔覆盖率</span>
              <span>{{ infoData.deviceCoverage }}%</span>
            </p>
            <p>
              <span>在线率</span>
              <span>{{ infoData.hasPhotoRate }}%</span>
            </p>
          </div>
        </div>
        <div class="bottomR">
          <h3>{{ deviceOnline.name }}</h3>
          <pie
            :pieData="deviceOnline.onlineData"
            :boxStyle="deviceOnline.boxStyle"
          ></pie>
        </div>
      </div>
    </div>
    <div class="stritl_right">
      <div class="strRightTop">
        <h3>线路分布(总计：5)</h3>
        <div class="tableBox">
          <el-table :data="lineAllData" style="width: 100%">
            <el-table-column
              prop="voltageLevelStr"
              label="电压等级"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="lineCount" label="线路数" align="center">
            </el-table-column>
            <el-table-column prop="towerCount" label="安装数" align="center">
            </el-table-column>
            <el-table-column
              prop="deviceCoverage"
              label="安装覆盖率"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- <div class="strRightMid">5</div> -->
      <div class="strRightBottom">
        <h3>{{ patrolOpinions.name }}</h3>
        <div class="suggest">
          <p class="attention"><span>注意：</span>{{ patrolOpinions.month }}</p>
          <p class="info">
            <span>{{ patrolOpinions.info1 }}</span>
            <span>{{ patrolOpinions.info2 }}</span>
          </p>
        </div>
        <h4>往年同期隐患比例分布图</h4>
        <radar
          :radarName="radarName"
          :radarValue="radarValue"
          :boxStyle="patrolOpinions.boxStyle"
          :radarTitle="radarTitle"
        ></radar>
      </div>
    </div>
  </div>
</template>

<script>
import bar from "./chartFiles/bar";
import horizontalBar from "./chartFiles/horizontalBar";
import pie from "./chartFiles/pie";
import radar from "./chartFiles/radar";
import mapChart from "./chartFiles/mapChart";
import {
  getLineDataByVoltage,
  getCapturePointDataByDanger,
  getHostDeviceDataByVoltage,
  getPhotoAlarmDataByAlarmType,
  getCompanyDeviceInfo,
  getByName,
  getLastYearAlarmReasons,
} from "@/utils/api/index";
export default {
  data() {
    return {
      name: localStorage.getItem("ms_username"),
      flag: {
        baizhang: false, //是否开始渲染子组件
      },
      //装置数量统计
      unitAllData: [],
      unitXData: [],
      unitYData: [],
      numberUnits: {
        name: "装置数量统计",
        boxStyle: {
          width: "100%",
          height: "200px",
        },
      },
      //监控路线统计
      lineAllData: [],
      lineXData: [],
      lineYData: [],
      monitLine: {
        name: "监控路线统计",
        boxStyle: {
          width: "100%",
          height: "200px",
        },
      },
      //隐患分类统计
      hazardData: [],
      hazardPieData: [],
      hazardClass: {
        name: "隐患分类统计",
        boxStyle: {
          width: "100%",
          height: "200px",
        },
      },
      //隐患类型统计
      hazardTypeData: [],
      hazardTypeXData: [],
      hazardTypeYData: [],
      hazardType: {
        name: "隐患类型统计",
        boxStyle: {
          width: "100%",
          height: "160px",
        },
      },
      //装置信息统计
      infoData: [],
      deviceInfo: {
        name: "装置信息统计",
        infoData: [
          { value: 24, name: "在运数" },
          { value: 10, name: "在线数" },
          { value: "92.31%", name: "杆塔覆盖率" },
          { value: "41.67%", name: "在线率" },
        ],
      },
      deviceOnline: {
        name: "装置在线统计",
        onlineData: [
          { value: 55, name: "离线" },
          { value: 45, name: "在线" },
        ],
        boxStyle: {
          width: "100%",
          height: "160px",
        },
      },
      //隐患比例分布图
      patrolData: [],
      radarName: [],
      radarValue: [],
      radarTitle: "隐患比例分布图",
      patrolOpinions: {
        name: "巡查意见",
        month: "三月份",
        info1: "1.鸟类活动开展频繁，需注意鸟类筑巢，大型鸟类驻留。",
        info2:
          "2.大风天气较多的季节，要注意对放风筝行为的监控，同时加强巡视对导线悬挂异物的观察。",
        boxStyle: {
          width: "100%",
          height: "160px",
        },
      },
    };
  },
  components: {
    bar,
    horizontalBar,
    pie,
    radar,
    mapChart,
  },
  computed: {
    role() {
      return this.name === "admin" ? "超级管理员" : "普通用户";
    },
  },
  methods: {},
  created() {
    //装置数量统计
    getHostDeviceDataByVoltage({
      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
    }).then((res) => {
      this.unitAllData = res.data.data;
      for (var i = 0; i < this.unitAllData.length; i++) {
        this.unitXData.push(this.unitAllData[i].name);
        this.unitYData.push(this.unitAllData[i].value);
      }
      this.flag.baizhang = true;
    });

    //装置信息统计
    getCompanyDeviceInfo({
      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
    }).then((res) => {
      this.infoData = res.data;
    });
    //线路分布
    getLineDataByVoltage({
      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
    }).then((res) => {
      this.lineAllData = res.data;
      console.log(this.lineAllData);
      for (var i = 0; i < this.lineAllData.length; i++) {
        this.lineXData.push(this.lineAllData[i].voltageLevelStr);
        this.lineYData.push(this.lineAllData[i].lineCount);
      }
      this.flag.baizhang = true;
    });
    //隐患分类统计
    getCapturePointDataByDanger({
      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
    }).then((res) => {
      this.hazardData = res.data;

      // let name1 = this.hazardData.nameList;
      // let value1 = this.hazardData.valueList;
      this.hazardPieData = res.data.list;
      console.log(this.hazardPieData);

      this.flag.baizhang = true;
    });

    //隐患类型统计
    getPhotoAlarmDataByAlarmType({
      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
    }).then((res) => {
      this.hazardTypeData = res.data.dataList;

      for (var i = 0; i < this.hazardTypeData.length; i++) {
        this.hazardTypeXData.push(this.hazardTypeData[i].name);
        this.hazardTypeYData.push(this.hazardTypeData[i].acount);
      }
      this.flag.baizhang = true;
    });

    //巡视意见
    getByName({
      name: "三月",
    }).then((res) => {
      console.log(res);
    });
    //雷达图数据
    getLastYearAlarmReasons({
      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
      month: "04",
    }).then((res) => {
      console.log(res);
      this.patrolData = res.data;
      console.log(this.patrolData);
      let obj = {};
      this.patrolData.forEach((item) => {
        if (obj.hasOwnProperty(item.alarmInfo)) {
          obj[item.alarmInfo] += item.num;
        } else {
          obj[item.alarmInfo] = item.num;
        }
      });
      console.log(obj);
      this.radarValue = Object.values(obj);
      console.log(this.radarValue);
      let max = Math.max(...this.radarValue);
      //对象转化成数组对象
      console.log(max);
      for (let i in obj) {
        console.log(i);
        this.radarName.push({
          name: i,
          max: max,
        });
      }
      console.log(this.radarName);
    });
  },
};
</script>

<style lang="less">
.stritlBox {
  width: 100%;
  height: 100%;
  display: flex;
  .stritl_left,
  .stritl_right {
    width: 20%;
    margin: 8px;
  }
  .stritl_left,
  .stritl_right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .strLeftTop,
    .strLeftMid,
    .strLeftBottom {
      height: 30%;
      box-sizing: content-box;
      box-shadow: @box-shadow-basic;
      border: 1px solid @border-color-base;
      background-color: @color-white;
      border-radius: 4px;
      padding: 8px;
      h3 {
        margin-bottom: 8px;
        font-size: 15px;
      }
    }
    .strRightTop,
    .strRightBottom {
      height: 46%;
      box-sizing: content-box;
      box-shadow: @box-shadow-basic;
      border: 1px solid @border-color-base;
      background-color: @color-white;
      border-radius: 4px;
      padding: 8px;
      h3 {
        margin-bottom: 8px;
        font-size: 15px;
      }
    }
    .strRightTop {
      position: relative;
      .tableBox {
        position: absolute;
        width: calc(100% - 16px);
        .el-table .cell {
          white-space: normal;
          word-break: break-all;
        }
        .el-table th.el-table__cell > .cell {
          min-width: 58px;
          padding-left: 0px;
          padding-right: 0px;
        }
      }
    }
    .strRightBottom {
      h3 {
        margin-bottom: 8px;
        font-size: 15px;
      }
      .suggest {
        .attention {
          font-size: 14px;
          margin-bottom: 8px;
          span {
            font-size: 16px;
            color: @color-red;
          }
        }
        .info {
          display: flex;
          flex-direction: column;
          font-size: 14px;
          line-height: 22px;
        }
      }
      h4 {
        margin-top: 8px;
        margin-bottom: 8px;
      }
    }
  }
  .stritl_center {
    flex: 1;
    margin: 10px;
    display: flex;
    flex-direction: column;
    .strCenterTop {
      flex: 1;
      box-sizing: content-box;
      box-shadow: @box-shadow-basic;
      border: 1px solid @border-color-base;
      background-color: @color-white;
      border-radius: 4px;
      //padding: 8px;
    }
    .strCenterbottom {
      margin-top: 24px;
      height: 210px;
      //border: 1px solid #000;
      box-sizing: content-box;
      display: flex;
      justify-content: space-between;
      .bottomL,
      .bottomM,
      .bottomR {
        border: 1px solid #000;
        box-sizing: content-box;
        width: 30%;
        box-shadow: @box-shadow-basic;
        border: 1px solid @border-color-base;
        background-color: @color-white;
        border-radius: 4px;
        padding: 8px;
        h3 {
          margin-bottom: 8px;
          font-size: 15px;
        }
      }
      .bottomM {
        .infoBox {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          p {
            width: 40%;
            height: 68px;
            background: #fcc;
            text-align: center;
            margin: 6px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            span {
              color: #333;
              font-size: 14px;
              &:last-child {
                font-size: 20px;
                margin-top: 5px;
                font-weight: bold;
              }
            }
            &:first-child {
              background: url("../../assets/img/border-blue.png");
            }
            &:nth-child(2) {
              background: url("../../assets/img/border-green.png");
            }
            &:nth-child(3) {
              background: url("../../assets/img/border-yellow.png");
            }
            &:nth-child(4) {
              background: url("../../assets/img/border-gray.png");
            }
          }
        }
      }
    }
  }
}
</style>