优化

MrShi

5 天以前 3a154bdb0a5aaa2c0ac3eac95a6ba747068bd454

 admin/src/components/business/OperaDeviceDataListWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,192 @@
<template>
  <GlobalWindow
      :title="title"
      width="100%"
      :visible.sync="visible"
  >
    <TableLayout >
      <!-- æœç´¢è¡¨å• -->
      <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline>
        <div  style="display: block;margin-bottom: 60px;padding: 20px; border: 1px solid #f2f2f2;">
          <div style="display: block;font-size: 16px;font-weight: 600;margin-bottom: 20px;">设备信息</div>
          <div style="display: flex;">
            <div style="flex: 1"><span class="label">名称：</span>{{model.name ||''}}</div>
            <div style="flex: 1"><span  class="label">标志符：</span>{{model.no ||''}}</div>
            <div style="flex: 1"><span  class="label">设备号：</span>{{model.doorNo ||'-'}}</div>
            <div style="flex: 1"><span  class="label">开关序号：</span>{{model.channelNo ||'-'}}</div>
            <div style="flex: 1"><span  class="label">控制开关：</span>{{model.channelInfo ||'-'}}</div>
          </div>
          <div style="display: flex;margin-top: 20px;">
            <div style="flex: 1"><span  class="label">MQTT IP：</span>{{model.doorNameObj.mqttIp ||''}}</div>
            <div style="flex: 1"><span  class="label">MQTT端口：</span>{{model.doorNameObj.mqttPort||''}}</div>
            <div style="flex: 3">
              <span class="label">最近控制操作：</span>
              <span class="orange" >{{model.remark||''}}</span>
            </div>
          </div>
        </div>
        <div class="platgroup_tabs">
          <div class="tab" :class="{ active: activeGroup === item.id }" @click="groupClick(item)"
               v-for="(item, i) in groupList" :key="i">
            {{ item.name }}
          </div>
        </div>
        <el-form-item label="开关序号" v-if="activeGroup==0" prop="val1">
          <el-input v-model="searchForm.val1" placeholder="请输入开关序号" @keypress.enter.native="search"></el-input>
        </el-form-item>
        <section v-if="activeGroup==0">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </section>
      </el-form>
      <!-- è¡¨æ ¼å’Œåˆ†é¡µ -->
      <template  v-slot:table-wrap>
        <el-table
            v-if="activeGroup===0"
            :height="tableHeightNew"
            v-loading="isWorking.search"
            :data="tableData.list"
            stripe>
          <el-table-column prop="happenTime" label="上报时间" min-width="150px"></el-table-column>
          <el-table-column prop="val1" label="开关序号" min-width="120px"></el-table-column>
          <el-table-column prop="val7" label="闸状态" min-width="120px">
            <template slot-scope="{row}">
              <span v-if=" row.val7 === '1'" class="green">合闸</span>
              <span  v-else-if=" row.val7 === '0'" class="red">分闸</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="val2" label="电流(A)" min-width="120px"></el-table-column>
          <el-table-column prop="val3" label="电圧(V)" min-width="120px"></el-table-column>
          <el-table-column prop="val4" label="温度(℃)" min-width="180px" ></el-table-column>
          <el-table-column prop="val5" label="有功功率值（kW）" min-width="120px"></el-table-column>
        </el-table>
        <el-table
            v-if="activeGroup===1"
            :height="tableHeightNew"
            v-loading="isWorking.search"
            :data="tableData.list"
            stripe>
          <el-table-column prop="createDate" label="操作时间" min-width="150px"></el-table-column>
          <el-table-column prop="val4" label="操作人" min-width="100px" ></el-table-column>
          <el-table-column prop="val3" label="操作内容" min-width="100px">
            <template slot-scope="{row}">
                <span v-if=" row.val3 === '【合闸】'" class="green">{{row.val3||''}}</span>
                <span  v-else-if=" row.val3 === '【分闸】'" class="red">{{row.val3||''}}</span>
                <span v-else>{{row.val3||''}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="val5" label="开关序号" min-width="120px"></el-table-column>
          <el-table-column prop="val2" label="内容" min-width="300px" show-overflow-tooltip></el-table-column>
        </el-table>
        <pagination
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :pagination="tableData.pagination"
        >
        </pagination>
      </template>
    </TableLayout>
    <template   v-slot:footer>
      <el-button @click="visible=false">返回</el-button>
    </template>
  </GlobalWindow>
</template>

<script>
import BaseTable from '@/components/base/BaseTable'
import TableLayout from '@/layouts/TableLayout'
import Pagination from '@/components/common/Pagination'
import GlobalWindow from '@/components/common/GlobalWindow'
export default {
  name: 'OperaJkSketchCustomerWindow',
  extends: BaseTable,
  components: { GlobalWindow, TableLayout, Pagination },
  data () {
    return {
      // è¡¨å•æ•°æ®
      visible: false,
      title: '',
      activeGroup:0,
      model:{},
      groupList: [{ id: 0, name: '数据上报记录', type: 0 }, { id: 1, name: '远程控制记录', type: 1 }],
      searchForm: {
        deviceId:  null,
        val1: '',
        dataType:0
      }
    }
  },
  created () {
    this.config({
      module: '设备数据信息表',
      api: '/business/deviceData',
      'field.id': 'id',
      'field.main': 'id'
    })
    this.search()
  },
  methods: {
    groupClick (item) {
      this.activeGroup = item.id
      this.searchForm.val1 = ''
      this.searchForm.dataType = item.type
      this.search()
    },
    open (title, row) {
      this.title = title +' ã€'+ (row.name)+'】'
      this.searchForm.deviceId = row.id
      if(!row.doorNameObj) {
        row.doorNameObj = {}
      }
      this.model=row
      this.visible = true
      this.tableData = {
        // å·²é€‰ä¸­çš„数据
        selectedRows: [],
        // æŽ’序的字段
        sorts: [],
        // å½“前页数据
        list: [],
        // åˆ†é¡µ
        pagination: {
          pageIndex: 1,
          pageSize: 10,
          total: 0
        }
      }
      this.groupClick(this.groupList[0])
    }
  }
}
</script>
<style>
.platgroup_tabs {
  flex: 1;
  display: flex;
  border-bottom: 1px solid #dfe2e8;
  margin-bottom:30px;

  .tab {
    color: #666666;
    margin-right: 40px;
    cursor: pointer;
    padding-bottom: 18px;
    border-bottom: 2px solid #fff;
  }

  .active {
    font-weight: 500;
    font-size: 15px;
    color: #2080f7;
    border-bottom: 2px solid $primary-color;
  }
}
.label{
/*  width: 80px;
  text-align: right;*/
  color: rgb(102, 102, 102);
  display: inline-block;

}
</style>