deviceManager/src/views/business/fireInternet/deviceMonitoring/waterMonitoring/device/index.vue

<template>
  <div class="app-container home" >
    <div id="main" >
      <el-row :gutter="4">
          <el-col :span="12">
            <div class="card_left">
              <el-col :span="24">
              <el-card class="box-card card1 " v-loading="loading1 & loading2">
                <span class="title">
                  <el-image
                    class="imgTitle"
                    :src="img"
                    ></el-image>
                  <p>{{title}}</p>
                </span>
                <div class="contain">
                    <div>
                      <span>电量</span>
                      <div>
                        <p>{{index1Data.dianliang}}</p>
                      </div>
                    </div>
                    <div>
                      <span>信号</span>
                      <div>
                        <p>{{index1Data.xinhao}}</p>
                      </div>
                    </div>
                    <div>
                      <span>时间</span>
                      <div>
                        <p style="font-size:1.1em;line-height:2em">{{index1Data.createTime}}</p>
                      </div>
                    </div>
                </div>
                <div class="contain2">
                  <div class="wrap">
                    <!-- <index3 :resData="index1Data"
                      :dataMap="index1Data"
                      color="#80FFA5"
                      :size="21"
                      :with="16"
                      :tick="false" style="width:100%" alt="饼图" /> -->
                    <p>设备工况</p>
                  </div>
                </div>
              </el-card>
              </el-col>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="card_right">
              <el-card class="box-card card2"  v-loading="loading3">
                <div class="contain">
                  <index2
                  :resData="index2Data"
                  style="width:100%;height:26em;" alt="折线图" />
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="card_bottom">
              <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
                <el-form-item label="单位名称：" prop="companyCode">
                  <el-select
                    v-model="queryParams.companyCode"
                    placeholder="请选择单位名称"
                    clearable
                    size="small"
                    style="width: 160px"
                  >
                    <el-option
                      v-for="dict in companyList"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="处理状态：" prop="status">
                  <el-select v-model="queryParams.status" style="width: 160px" placeholder="请选择处理状态" clearable size="small">
                    <el-option label="未处理" :value="0"/>
                    <el-option label="已处理" :value="1"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="时间:" label-width="50px">
                  <el-date-picker style="vertical-align: middle;width:340px"
                    v-model="dateRange"
                    size="small"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-top:4px">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button
                  type="warning"
                  plain
                  icon="el-icon-download"
                  size="mini"
                  :loading="exportLoading"
                  @click="handleExport"
                  v-hasPermi="['system:admin:export']"
                >导出</el-button>
              </el-form>
            </div>
            <el-table v-loading="loading4" :data="adminList" height="calc(100vh - 42em)" :default-sort = "{prop: 'createTime', order: 'descending'}" highlight-current-row>
              <el-table-column label="序号" align="center" prop="id" />
              <el-table-column label="单位名称" align="center" prop="companyName"/>
              <el-table-column label="剩余电量" align="center" prop="pointData" />
              <el-table-column label="报告时间" align="center" prop="createTime" sortable />
            </el-table>
          </el-col>
      </el-row>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />
    <!-- 导出-->
    <a href="" download="" id="xz" style="position: absolute;z-index: -1;opacity: 0;"></a>
  </div>
</template>

<script>

import { tbInfoList } from "@/api/business/OM/eventCenter";
import { listChannel } from "@/api/system/product";
import index3 from "@/views/components/fireInternetInfo/index3";
import index2 from "@/views/components/fireInternetInfo/index2";
import { BASEPATH } from "@/assets/js/common.js";
export default {
  name: "index",
  components: {
		index3,index2
  },
  data() {
    return {
      img:require('@/assets/images/2.png'),
      title:"水系统设备工况",
      index1Data:{},//饼图
      index2Data:[],//折线图
      index3Data:[],//table
      // 遮罩层
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: true,
      loading5: true,
      loading6: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      open: false,
      t:null,
      timeList:[],
      queryParams:{
        // type:2,
        // bigDeviceType:2,
        // status:0,
        current:1,
        size:10,
        companyCode:undefined,
        status:undefined,
        num:0,
        isNew:1,
        deviceId:"",
        // startTime:getThisDateBeforMonth(),
        // endTime:YearMonthDate(),
      },
      dataZ:[],//折线图
      // 公司列表
      companyList: [],
      // 日期范围
      dateRange: [],
      adminList:[]
    };
  },
  created(){
    this.init()
    this.getList()
  },
  /* type=2&bigDeviceType=1&isLine=1
   type 1隐患2告警
   bigDeviceType1火系统 2 水系统 3rtu 4电气火灾 5 视频监控
   isLine 0离线 1在线 */
  methods: {
    init(){
        /* 公司列表 */
        this.queryParams.status = undefined
        listChannel(this.queryParams).then(response => {
          if(response.data.records.length>0){
            this.companyList = response.data.records.map(val =>{
              return {
                dictValue:val.ownerId,
                dictLabel:val.ownerName,
                address:val.ownerAddress,
              }
            })
          }
        });
    },
    tubiao(){
      /* 饼图、折线图 */
        tbInfoList(this.queryParams).then(response =>{//pointCode=201 信息  pointCode=202 电量
          console.log(response)
          this.loading3 = false
          // let data = response.data.records
          // for(let i = 0; i<data.length;i++){
          //   if(data[i].pointCode == "201"){
          //     this.index1Data.dianliang = data[i].pointCode
          //   }
          //   if(data[i].pointCode == "202"){
          //     this.index1Data.xinhao = data[i].pointCode
          //     this.index1Data.createTime = data[i].createTime
          //   }
          // }
          // this.index1Data = data[0]

          // let lineData = []
          // let total = []
          // let checkCount = []
          // total[0] = {data:[],name:undefined}
          // checkCount[0] = {data:[],name:undefined}
          // if(data){
          //   for (let i = 0; i < data.length; i++) {
          //     lineData.push(data[i].time);
          //     total[0].data.push(data[i].list.checkCount + data[i].list.noCheckCount)
          //     checkCount[0].data.push(data[i].list.checkCount)
          //   }
          //   total[0].name = "离线次数"
          //   checkCount[0].name = "处理次数"
          //   this.index2Data.push(total[0],checkCount[0],lineData)
          //this.index2Data.push({name:"水系统设备工况跟踪",color:"#00FFFF"})
          // }
        })
    },
    getList(){
      if(this.queryParams.num == 0){
        this.queryParams.status = undefined
        this.queryParams.num = 1
      }
      if(this.dateRange.length>0){
        this.queryParams.startTime = this.dateRange[0]
        this.queryParams.endTime = this.dateRange[1]
      }
      tbInfoList(this.queryParams).then(response =>{ //table及饼图数据
        //table
        this.adminList = response.data.records
        this.total = response.data.total;
        this.loading4 = false;

        // this.loading1 = false //饼图数据
        // this.loading2 = false
        // let data = response.data.records
        // for(let i = 0; i<data.length;i++){
        //   if(data[i].pointCode == "201"){
        //     this.index1Data.dianliang = data[i].pointCode
        //   }
        //   if(data[i].pointCode == "202"){
        //     this.index1Data.xinhao = data[i].pointCode
        //     this.index1Data.createTime = data[i].createTime
        //   }
        // }
        this.queryParams.deviceId = response.data.records[0].deviceId
        this.queryParams.isNew = undefined
        this.queryParams.pointCodes = [201,202]
        this.tubiao()

      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.current = 1;
      this.queryParams.startTime = undefined;
      this.queryParams.endTime = undefined;
      this.queryParams.num = 0;
      this.queryParams.status = undefined;
      this.queryParams.companyCode = undefined;
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      let queryParams = {...this.queryParams};
      delete queryParams.current
      delete queryParams.size
      this.exportLoading = true;
      exportTbAlarm(queryParams).then(response =>{
        this.exportLoading = false;
        document.getElementById("xz").href = BASEPATH() + response.data
        document.getElementById("xz").download = response.data
        document.getElementById("xz").click()
      })
    },


  }
}
</script>

<style scoped lang="scss">
  ::-webkit-scrollbar-track
  {
    background: #fff;
    border-radius: 0;
  }

  ::-webkit-scrollbar
  {
    -webkit-appearance: none;
    width: 4px;
    height: 4px;
  }

  ::-webkit-scrollbar-thumb
  {
      cursor: pointer;
      border-radius: 5px;
      background: rgba(0,0,0,.25);
      transition: color .2s ease;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    margin-top:20px;
  }
#main{
    margin-top:-20px;
    .box-card{
      .h2{
        text-align: center;
        margin:0 auto;
        display: block;
        font-size: 1.2em;
        background-image: -webkit-linear-gradient(bottom, #00adce, #000);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

      }
    }
    .card_left{
      .card1{
        height:28em;
        .title{
          width:100%;
          display: block;
          .imgTitle{
            width:5%;
            display: inline-block;
            vertical-align: middle;
          }
          p{
            display: inline-block;
            vertical-align: middle;
            margin-left:2%;
            font-size:1.4rem;
          }
        }
        .contain{
          margin-top:0.5rem;
          width:45%;
          display: inline-block;
          vertical-align: top;
          div{
            height:5rem;
            span{
              font-size: 1.2rem;
              vertical-align: middle;
              width:80px;
              text-align: left;
              display: inline-block;
            }
            div{
              width:60%;
              max-width:214px;
              height:4rem;
              vertical-align: middle;
              background:url("../../../../../../assets/images/operation_item.png") no-repeat right center;
              display: inline-block;
              p{
                font-size: 1.6rem;
                vertical-align: top;
                margin:1rem 0 0 3rem;
              }
            }
          }
        }
        .contain2{
          margin-top:-3rem;
          vertical-align: top;
          width:45%;
          display: inline-block;
          p{
            text-align: center;
            font-size: 1.4rem;
            margin-top:-3rem;
          }
        }
      }
    }
    .card_right{
      .card2{
        height:28em;
      }
    }
    .card_bottom{
      padding-top:10px;
    }
  }
 ::v-deep {
    .el-table__body-wrapper::-webkit-scrollbar {
      /*width: 0;宽度为0隐藏*/
      width: 4px;
    }
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      border-radius: 6px;
      height: 50px;
      background: rgba(40, 190, 252, .6);//滚动条颜色
    }
    .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      background: #eee;//滚动条背景色
    }
    .el-table__body tr.current-row>td{
      background-color: #0e70cb!important;
      color: #fff;
    }
}
</style>