jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue

<template>
  <div class='TrafficFlow'>
    <section class="foot">
      <el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
        <el-tab-pane label="设备分析" name="first">
          <div class="topTabs">
            <div class="item" v-for=" (item, index) in equipments" :key="index">
              <div class="title-tool">
                <span class="text">{{ item.text }}</span>
              </div>
              <div class="item-body">
                <div class="left-body">
                  <img src="./assets/shexiangtou.png" />
                  <span class="num">{{ item.num }} <span class="unit">套</span></span>
                </div>
                <div class="line"></div>
                <div class="right-list">
                  <div class="list-text">
                    <span>在线：</span>
                    <div class="show-text1">
                      {{ item.sucessRate }}
                    </div>
                  </div>
                  <div class="list-text"><span>离线：</span>
                    <div class="show-text2">
                      {{ item.failRate }}
                    </div>
                  </div>
                  <div class="list-text">
                    <span>丢包：</span>
                    <div class="show-text3">
                      {{ item.lostRate }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bottomTabs">
            <DeviceUptime :dataList="equipments" class="tabs-lo" />
            <MonthlyEquipment class="tabs-mo" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="设备查询" name="second">
          <div class="topdiv">
            <div class="left-div">
              <el-button size="mini" icon="el-icon-refresh-left" class="btnSearch">刷新</el-button>
              <el-button size="mini" icon="el-icon-download" class="btnSearch"
                @click="SystemStatusExport">导出Excel</el-button>
            </div>
            <div class="right-div">
              <InputSearch style="width: 402px;" :formList="searchFormList" @handleSearch="handleSearch" />
            </div>
          </div>
          <div class="middleDiv">
            <div id="chart1" class="keep-ratio">

            </div>
          </div>
          <div>
            <el-table :border="false" :data="tableData" height="480" style="width: 100%">
              <el-table-column prop="nem" label="序号" width="80">
              </el-table-column>
              <el-table-column prop="deviceName" label="设备名称"></el-table-column>
              <el-table-column prop="deviceNo" label="设备桩号" width="">
              </el-table-column>
              <el-table-column prop="direction" label="方向" class-name="showClass" width="">
              </el-table-column>
              <el-table-column prop="deviceIp" label="设备IP" width="">
              </el-table-column>
              <el-table-column prop="production" label="厂家" width="">
              </el-table-column>
              <el-table-column prop="type" label="型号" width="">
                <template slot-scope="scope">
                  <div v-if="scope.row.type == 1">高清网络枪型固定摄像机</div>
                  <div v-if="scope.row.type == 2">高清网络球形摄像机</div>
                  <div v-if="scope.row.type == 3">桥下高清网络球形摄像机</div>
                  <div v-if="scope.row.type == 4">360°全景摄像机</div>
                  <div v-if="scope.row.type == 5">180°全景摄像机</div>
                  <div v-if="scope.row.type == 6">门架式可变信息标志</div>
                  <div v-if="scope.row.type == 7">雨棚可变信息标志</div>
                  <div v-if="scope.row.type == 8">站前悬臂式可变信息标志</div>
                  <div v-if="scope.row.type == 9">气象检测器</div>
                  <div v-if="scope.row.type == 10">路段语音广播系统</div>
                  <div v-if="scope.row.type == 11">护栏碰撞预警系统</div>
                  <div v-if="scope.row.type == 12">毫米波雷达</div>
                  <div v-if="scope.row.type == 13">合流区预警系统</div>
                  <div v-if="scope.row.type == 14">激光疲劳唤醒</div>
                  <div v-if="scope.row.type == 15">一类交通量调查站</div>
                  <div v-if="scope.row.type == 16">智能行车诱导系统</div>
                  <div v-if="scope.row.type == 17">智能设备箱</div>
                </template>
              </el-table-column>
              <el-table-column prop="network" label="网段" width="">
              </el-table-column>
              <el-table-column prop="time" label="监测时间" width="">
              </el-table-column>
              <el-table-column prop="deviceStatus" label="操作" width="">
                <template slot-scope="scope">
                  <div v-if="scope.row.deviceStatus == 1">在线</div>
                  <div v-if="scope.row.deviceStatus == 0">离线</div>
                </template>
              </el-table-column>
            </el-table>
            <div class="foot">
              <Pagination @current-change="changePage" width="'100%'" :page-size="pageSize" :current-page.sync="pageIndex"
                layout="total, sizes, prev, pager, next" :total="pageTotal">
              </Pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </section>
  </div>
</template>
  
<script>

import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
import DeviceUptime from './components/deviceUptime';
import MonthlyEquipment from './components/monthlyEquipment';
import { getSystemStatusList, getSystemStatusTabList, getSystemStatusType, getSystemStatusExport } from "../../../../../api/MonthlyEquipment";
import { download } from '../../../../../utils/request.js';
import Pagination from '@screen/components/Pagination.vue';
import InputSearch from '@screen/components/InputSearch/index.vue';
import { searchFormList } from "./data";
import { Loading } from 'element-ui';

export default {
  name: 'publicService',
  components: {
    DeviceUptime,
    MonthlyEquipment,
    Pagination,
    InputSearch
  },
  data() {
    return {
      startTime: "2024-01-01 00:00:00",
      time: "2024-01-31 00:00:00",
      typeQuery: 1, //高清网络枪型固定摄像机
      pageTotal: 0,
      pageIndex: 1,
      pageSize: 10,
      searchFormList,
      equipments: [
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
        {
          num: 315,
          online: 30,
          outline: 30,
          lost: 40
        },
      ],
      activeName: "first",
      tableData: [{
        date: '2023-12-31 13:00:00',
        name: '高清网络球形摄像机',
        address: 'K234+235',
        root: "中央分隔带",
        ip: "10.0.61.43",
        cj: "海康威视",
        xh: "XXX",
        wd: "梁山收费站监控网段",
        jcsj: "2024-01-17",
        cz: "在线",
      }, {
        date: '2023-12-31 13:00:00',
        name: '高清网络球形摄像机',
        address: 'K234+235',
        root: "中央分隔带",
        ip: "10.0.61.43",
        cj: "海康威视",
        xh: "XXX",
        wd: "梁山收费站监控网段",
        jcsj: "2024-01-17",
        cz: "在线",
      },
      {
        date: '2023-12-31 13:00:00',
        name: '高清网络球形摄像机',
        address: 'K234+235',
        root: "中央分隔带",
        ip: "10.0.61.43",
        cj: "海康威视",
        xh: "XXX",
        wd: "梁山收费站监控网段",
        jcsj: "2024-01-17",
        cz: "在线",
      },
      {
        date: '2023-12-31 13:00:00',
        name: '高清网络球形摄像机',
        address: 'K234+235',
        root: "中央分隔带",
        ip: "10.0.61.43",
        cj: "海康威视",
        xh: "XXX",
        wd: "梁山收费站监控网段",
        jcsj: "2024-01-17",
        cz: "在线",
      },
      {
        date: '2023-12-31 13:00:00',
        name: '高清网络球形摄像机',
        address: 'K234+235',
        root: "中央分隔带",
        ip: "10.0.61.43",
        cj: "海康威视",
        xh: "XXX",
        wd: "梁山收费站监控网段",
        jcsj: "2024-01-17",
        cz: "在线",
      },
      {
        date: '2023-12-31 13:00:00',
        name: '高清网络球形摄像机',
        address: 'K234+235',
        root: "中央分隔带",
        ip: "10.0.61.43",
        cj: "海康威视",
        xh: "XXX",
        wd: "梁山收费站监控网段",
        jcsj: "2024-01-17",
        cz: "在线",
      },
      {
        date: '2023-12-31 13:00:00',
        name: '高清网络球形摄像机',
        address: 'K234+235',
        root: "中央分隔带",
        ip: "10.0.61.43",
        cj: "海康威视",
        xh: "XXX",
        wd: "梁山收费站监控网段",
        jcsj: "2024-01-17",
        cz: "在线",
      },
      {
        date: '2023-12-31 13:00:00',
        name: '高清网络球形摄像机',
        address: 'K234+235',
        root: "中央分隔带",
        ip: "10.0.61.43",
        cj: "海康威视",
        xh: "XXX",
        wd: "梁山收费站监控网段",
        jcsj: "2024-01-17",
        cz: "在线",
      },
      {
        date: '2023-12-31 13:00:00',
        name: '高清网络球形摄像机',
        address: 'K234+235',
        root: "中央分隔带",
        ip: "10.0.61.43",
        cj: "海康威视",
        xh: "XXX",
        wd: "梁山收费站监控网段",
        jcsj: "2024-01-17",
        cz: "在线",
      },
      {
        date: '2023-12-31 13:00:00',
        name: '高清网络球形摄像机',
        address: 'K234+235',
        root: "中央分隔带",
        ip: "10.0.61.43",
        cj: "海康威视",
        xh: "XXX",
        wd: "梁山收费站监控网段",
        jcsj: "2024-01-17",
        cz: "在线",
      },
      {
        date: '2023-12-31 13:00:00',
        name: '高清网络球形摄像机',
        address: 'K234+235',
        root: "中央分隔带",
        ip: "10.0.61.43",
        cj: "海康威视",
        xh: "XXX",
        wd: "梁山收费站监控网段",
        jcsj: "2024-01-17",
        cz: "在线",
      }
      ]
    }
  },
  methods: {
    changePage(page) {

      this.queryTabList(page);
    },
    formatDate(val) {
      let year = val.getFullYear();
      var m = val.getMonth() + 1;
      var day = val.getDate();

      m = m < 10 ? "0" + m : "" + m;
      day = day < 10 ? "0" + day : "" + day;

      return year + "-" + m + "-" + day + " 00:00:00";
    },
    handleSearch(data) {
      console.log(data);
      this.typeQuery = data.type;
      this.startTime = this.formatDate(data.time[0]);
      this.time = this.formatDate(data.time[1]);
      this.queryChartList();
      this.queryTabList(1);
    },
    changeTabs() {
      console.log("======================", this.myChart);
      this.$nextTick(() => {
        this.myChart.resize();
      });
    },
    //导出
    SystemStatusExport() {
      let loadingInstance = Loading.service({ fullscreen: true, background: "#00000052", text: "文件正在下载..." });
      getSystemStatusExport({
        startTime: this.startTime,
        time: this.time,
        type: this.typeQuery,
      }).then((res) => {
        console.log(res);
        const url = window.URL.createObjectURL(new Blob([res]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '设备统计信息.xlsx')
        document.body.appendChild(link)
        link.click()
        URL.revokeObjectURL(link.href) // 释放URL 对象
        document.body.removeChild(link)
        link = null
        loadingInstance.close();
      }).catch(err => {
        Message.error(err);
        loadingInstance.close();
      })
    },
    queryChartList() {


      getSystemStatusList({
        startTime: this.startTime,
        time: this.time,
        type: this.typeQuery,
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let startTime = new Date(this.startTime);
          let month = startTime.getMonth() + 1;
          let dayS = startTime.getDate();
          let backCooDatas = [];
          let dayArr = [];
          for (var i = 1; i < 31; i++) {
            let daystr = startTime.getFullYear() + "-" + month + "-" + i;
            let dataObj = data[daystr] ? parseFloat(data[daystr]) : 0;
            dayArr.push(daystr);
            backCooDatas.push(dataObj);
          }
          console.log("===================", backCooDatas);
          chartsStatistics.series[0].data = backCooDatas;
          this.$nextTick(() => {
            this.myChart.setOption(chartsStatistics);
          });
        }

      })
    },
    queryTypes() {
      getSystemStatusType().then((res) => {
        console.log("===========================", res);
        this.equipments = [];
        let allList = [];
        let data = res.data;
        let i = 0;
        for (var it in data) {
          let item = {
            text: it,
            num: data[it].sum,
            sucessRate: data[it].sucessRate,
            lostRate: data[it].lostRate,
            failRate: data[it].failRate
          }
          console.log(it, i);
          i += 1;
          if (it == "全部设备") {
            allList.splice(0, 0, item);
          } else
            allList.push(item);
        }
        console.log(allList);
        this.equipments = allList;
      })

    },
    //查询列表
    queryTabList(pageIndex, pageSize = 30) {
      getSystemStatusTabList({
        startTime: this.startTime,
        time: this.time,
        type: this.typeQuery,
        pageNum: pageIndex,
        pageSize: pageSize,
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.pageIndex = pageIndex;
          this.pageSize = pageSize;
          this.pageTotal = res.total;
          this.tableData = res.rows;

          this.tableData.forEach((it, index) => {
            it.nem = (pageIndex - 1) * (pageSize) + index + 1;
          })
        }
      })
    }
  },
  mounted() {
    setTimeout(() => {
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById('chart1'));
        myChart.setOption(chartsStatistics);
        this.myChart = myChart;
      });
      this.queryTypes();
      this.queryTabList(1);
      this.queryChartList();


    });
  },
}
</script>
  
<style lang='scss' scoped>
.bottomTabs {
  position: relative;
  display: inline-flex;
  width: 100%;
  flex-direction: row;
  height: 100%;

  .tabs-lo {
    display: inline-flex;
    width: 30%;
    margin-right: 15px;
  }

  .tabs-mo {
    display: inline-flex;
    width: 70%;
  }
}



.topTabs {
  display: inline-flex;
  width: 100%;
  height: 100%;
  min-height: 300px;
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;


  >.item {
    display: inline-flex;
    position: relative;
    flex-direction: column;
    width: calc(100% /9 - 15px);
    height: 175px;
    margin-right: 15px;
    margin-bottom: 15px;
    background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425868 93%);
    border-radius: 3px 3px 3px 3px;

    .item-body {
      position: relative;
      display: inline-flex;
      flex-direction: row;
      width: 100%;
      height: 100%;

      img {
        display: inline-flex;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid #00D1FF;
      }

      .left-body {
        display: inline-flex;
        position: relative;
        width: 30%;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 10px;

        .num {
          display: inline-flex;
          font-size: 19px;
          font-family: PangMenZhengDao;
          font-weight: 400;
          color: #00D1FF;
          margin: 0 10px;
          margin-top: 20px;
        }


        .unit {
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #FFFFFFF0;
          position: relative;
          top: 5px;
          left: 5px;
        }

      }

      .line {
        display: inline-flex;
        width: 2px;
        height: 100px;
        background: linear-gradient(180deg, rgba(3, 60, 81, 0), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0));
        position: relative;
        top: 30px;
      }

      .right-list {
        display: inline-flex;
        position: relative;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;

        .list-text {
          display: inline-flex;
          position: relative;
          width: 100%;
          height: 40px;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          justify-content: center;
          align-items: center;

          >span:first-child {
            display: inline-flex;
            width: 40px;
          }

          .show-text1 {
            width: 100px;
            color: #00EBC1ee;
            font-size: 14px;
            font-family: PangMenZhengDao;
            font-weight: 800;
          }

          .show-text2 {
            width: 100px;
            color: #FFFFFFee;
            font-size: 14px;
            font-family: PangMenZhengDao;
            font-weight: 800;
          }

          .show-text3 {
            width: 100px;
            color: #FFD15Cee;
            font-size: 14px;
            font-family: PangMenZhengDao;
            font-weight: 800;
          }
        }

      }


    }

    .title-tool {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 36px;
      background: linear-gradient(180deg, rgba(1, 139, 182, 0) 0%, #1FCAF160 100%);
      border-radius: 3px 3px 0px 0px;

      .text {
        font-size: 17px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        color: #FFFFFF;
      }






    }

    .title-tool::after {
      content: "";
      position: absolute;
      bottom: 1px;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, rgba(81, 181, 255, 0) 3%, #51B5FF 49%, rgba(81, 181, 255, 0) 100%);
    }
  }
}

.btnSearch {
  background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
  margin-left: 10px;
  border-color: transparent;
  color: #fff;
}

::v-deep .el-table .cell {
  padding-left: 0px !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #064258 !important;
  color: #00D1FF;
  border-color: #064258 !important;
  border: 0px !important;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
}

::v-deep .el-table {
  border: 0px !important;
  background-color: transparent;
  font-size: 12px !important;
}

::v-deep .el-table__body-wrapper {
  background-color: #064258;
  color: #fff;
}

::v-deep .el-table .el-table__cell {
  height: 47px;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}

::v-deep .el-table tr:hover td {
  background: #1b2528 !important;
  color: #00D1FF;
  height: 47px;
}

::v-deep .el-table tr:nth-child(odd) td {
  background-color: #13272F;
  border: 0px !important;
}

::v-deep .el-table tr:nth-child(even) td {
  border: 0px !important;
}

::v-deep .el-table tr {
  background-color: #133242 !important;
  border-collapse: 0;
  border: 0px !important;
  background-color: transparent !important;
}

::v-deep .el-tabs__item {
  display: inline-flex;
  justify-content: center;
  font-size: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  min-width: 128px;
  position: relative;
  left: 10px;
}

::v-deep .el-tabs__active-bar {
  min-width: 128px;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: #133242;
  opacity: 0.1;
}

.footTabs {
  display: inline;
  width: 100%;

}

.topdiv {
  display: inline-flex;
  position: relative;
  width: 100%;
  height: 40px;
  justify-content: space-between;
  align-items: center;

  .right-div {
    display: inline;
    width: 450px;
  }
}

.TrafficFlow {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 6;
  color: white;

  .header-shot {
    width: 98%;
    margin: auto;
    margin-top: 15px;
    height: 160px;

  }

  .middleDiv {
    display: inline-flex;
    width: 100%;
    height: 343px;
    background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425860 100%);
    margin-bottom: 30px;

    >div {
      display: inline-flex;
      width: 100%;
      height: 100%;
    }
  }

  .content {
    width: 100%;
    margin: auto;
    display: flex;
    flex: 1;
    pointer-events: none;
    margin-top: 19px;

    >div {
      pointer-events: auto;
    }

    .content-l {
      width: calc(25%);

      margin-right: 20px;

    }

    .content-mi {
      width: calc(50%);

      margin-right: 20px;
    }


    .content-m {
      display: inline-flex;
      flex-direction: column;
      width: calc(100% / 4);
      margin-right: 20px;

      .content-m-t {
        width: 100%;
        height: 240px;
        margin-bottom: 20px;
      }
    }

    .content-r {
      width: 49.4%;
    }
  }

  .foot {
    width: 98%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    pointer-events: none;
    margin-top: 8px;

    >div {
      pointer-events: auto;
    }

    .foot-w {
      width: 100%;

    }

    .foot-l {
      width: 726px;
    }

    .foot-m {
      width: 613px;
    }

    .foot-r {
      width: 493px;
    }
  }
}
</style>