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">
                <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:0.8vw;line-height:4vh">{{index1Data.createTime}}</p>
                      </div>
                    </div>
                </div>
                <div class="contain2" v-if="contain2">
                  <div class="wrap">
                    <index3 :resData="index1Data" 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="loading2">
                <div class="contain" v-if="contain2">
                  <index4
                  :resData="index2Data"
                  style="width:100%;height:40vh;" 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="时间:" 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-form>
            </div>
            <el-table @row-click="clickData" v-loading="loading3" :data="adminList" height="calc(100vh - 67vh)" :default-sort = "{prop: 'createTime', order: 'descending'}" highlight-current-row>
              <el-table-column label="序号" align="center" prop="id"  show-overflow-tooltip />
              <el-table-column label="单位名称" align="center" prop="companyName"  show-overflow-tooltip />
              <el-table-column label="剩余电量" align="center" prop="pointData"  show-overflow-tooltip />
              <el-table-column label="报告时间" align="center" prop="createTime" sortable  show-overflow-tooltip />
              <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-s-promotion"
                    @click="jump(scope.row)"
                    v-hasPermi="['system:admin:edit']"
                  >跳转至工单</el-button>
                </template>
              </el-table-column> -->
            </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,tbInfoCollectIco } from "@/api/business/OM/eventCenter";
import { listChannel } from "@/api/system/product";
import index3 from "@/views/components/fireInternetInfo/index3";
import index4 from "@/views/components/fireInternetInfo/index4";
import { BASEPATH } from "@/assets/js/common.js";
import { getThisDateBeforMonth, YearMonthDate } from "@/assets/js/dataFormate.js";
export default {
  name: "index",
  components: {
		index3,index4
  },
  data() {
    return {
      contain2:false,
      img:require('@/assets/images/2.png'),
      title:"水系统设备工况",
      index1Data:{
        // dianliang:0.00,
        // xinhao:0.00,
        // createTime:undefined
      },//饼图
      index2Data:[],//折线图
      index3Data:[],//table
      // 遮罩层
      loading1: true,
      loading2: true,
      loading3: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      open: false,
      t:null,
      timeList:[],
      queryParams:{
        current:1,
        size:10,
        companyCode:undefined,
        pointCodes: [201],
        isNew:1,
        deviceId:"",
        startTime:getThisDateBeforMonth(),
        endTime:YearMonthDate(),
      },
      queryParams2:{
        current:1,
        size:10,
        companyCode:undefined,
        pointCodes: [201,202],
        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,
              }
            })
          }
        });
    },
    clickData(row){
      this.tubiao(row.deviceId)
    },
    tubiao(id){
      if(id){
        this.queryParams2.deviceId = id
      }
      /* 饼图、折线图 */
        tbInfoList(this.queryParams2).then(response =>{//pointCode=201 信息  pointCode=202 电量
          let data = response.data.records.reverse()
          let arr = [[],[],[],[]]
          let array = {}
          for(let i = 0; i<data.length;i++){
            if(i%2>0){
              arr[0].push([data[i].createTime,Number(data[i].pointData)])
              arr[3].push((data[i].createTime))
            }else{
              arr[1].push([data[i].createTime,Number(data[i].pointData)])
            }
          }
          this.index1Data = array
          this.contain2 = true
          this.index2Data = arr
          this.index1Data = {
            dianliang:this.index2Data[0][this.index2Data[0].length-1][1],
            xinhao:this.index2Data[1][this.index2Data[1].length-1][1],
            createTime:this.index2Data[0][this.index2Data[0].length-1][0]
          }
          this.index2Data[2] = {name:"水系统设备工况情况跟踪",color:"#00FFFF"}
          this.loading1 = false
          this.loading2 = false
        })
    },
    getList(){
      this.loading3 = true
      tbInfoList(this.queryParams).then(response =>{
        //table
        this.adminList = response.data.records
        this.total = response.data.total;
        this.loading3 = false;
        this.queryParams2.deviceId = response.data.records[0].deviceId
        this.tubiao()
      })
    },
    /** 跳转至工单 */
    jump(row){
      this.$router.push({
        path: '/OM/business/OM/workMange',
        query: {
          id: row.workId,
          type:4
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.current = 1;
      this.queryParams.startTime = undefined;
      this.queryParams.endTime = undefined;
      this.queryParams.companyCode = undefined;
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
}
</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:43vh;
        .title{
          width:100%;
          display: block;
          text-align: left !important;
          .imgTitle{
            width:5%;
            display: inline-block;
            vertical-align: middle;
          }
          p{
            display: inline-block;
            vertical-align: middle;
            margin-left:2%;
            font-size:1.4vw;
          }
        }
        .contain{
          margin-top:3vh;
          width:58%;
          display: inline-block;
          vertical-align: top;
          div{
            height:7vh;
            span{
              font-size: 1vw;
              vertical-align: middle;
              width:4vw;
              text-align: left;
              display: inline-block;
            }
            div{
              width:212px;
              height:6vh;
              vertical-align: middle;
              background:url("../../../../../../assets/images/operation_item.png") no-repeat right center;
              display: inline-block;
              p{
                font-size: 1.4vw;
                vertical-align: top;
                margin:1vh 0 0 3vh;
              }
            }
          }
        }
        .contain2{
          margin-top:-3rem;
          vertical-align: top;
          width:42%;
          display: inline-block;
          p{
            text-align: center;
            font-size: 1.4rem;
            margin:-2vh 0 0 0%;
          }
        }
      }
    }
    .card_right{
      .card2{
        height:43vh;
      }
    }
    .card_bottom{
      padding-top:10px;
      margin-bottom:-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;//滚动条背景色
    }
  }

</style>
<style>


</style>