<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 in equipments" >
                   <div class="title-tool" >
                     <span class="text" >设备数</span>
                     <div class="num" >{{ item.num }}</div>
                     <span class="unit">套</span>
                   </div>
                   <div class="item-body" >
                      <div class="left-body" >
                        <img src="./assets/shexiangtou.png"  />
                        <span>{{ item.text }}</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" >

                </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="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";

  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(){
        download(
        "/fault/list/exportFaultReport",
        { faultId: row.id },
        "file.xlsx");
        // 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

        // })
      },
      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;
                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;
          }
        })
      }
    },
    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;

          > span {
             display: inline-flex;
             margin-top:10px;
             font-size: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #FFFFFFcc;
          }

        }

        .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: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            justify-content: center;
            align-items: center;

            .show-text1 {
               color:#00EBC1ee;
               font-size: 16px;
              font-family: PangMenZhengDao, PangMenZhengDao;
              font-weight: 800;
            }

            .show-text2 {
               color:#FFFFFFee;
               font-size: 16px;
              font-family: PangMenZhengDao, PangMenZhengDao;
              font-weight: 800;               
            }

            .show-text3 {
               color:#FFD15Cee;
               font-size: 16px;
              font-family: PangMenZhengDao, 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, PangMenZhengDao;
          font-weight: 400;
          color: #FFFFFF;
        }

        .num {
          font-size: 19px;
          font-family: PangMenZhengDao, PangMenZhengDao;
          font-weight: 400;
          color: #00D1FF;
          margin:0 10px;
        }

        .unit {
          font-size: 11px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #FFFFFF50;
        }


      }

      .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>