更改头部

doum

2 天以前 46e8af542c02d801bea9fa8cf8f55974dcfa8554

 admin/src/components/business/OperaDeviceDataListWindow.vue

@@ -1,7 +1,7 @@
<template>
  <GlobalWindow
      :title="title"
      width="85%"
      width="100%"
      :visible.sync="visible"
  >
    <TableLayout >
@@ -19,20 +19,30 @@
          <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>{{model.remark||''}}</div>
            <div style="flex: 3">
              <span class="label">最近控制操作：</span>
              <span class="orange" >{{model.remark||''}}</span>
            </div>
          </div>
        </div>
        <el-form-item label="开关序号" prop="val1">
        <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>
        <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>
      <template  v-slot:table-wrap>
        <el-table
            v-if="activeGroup===0"
            :height="tableHeightNew"
            v-loading="isWorking.search"
            :data="tableData.list"
@@ -50,6 +60,24 @@
          <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"
@@ -79,10 +107,13 @@
      // 表单数据
      visible: false,
      title: '',
      activeGroup:0,
      model:{},
      groupList: [{ id: 0, name: '数据上报记录', type: 0 }, { id: 1, name: '远程控制记录', type: 1 }],
      searchForm: {
        deviceId:  null,
        val1:''
        val1: '',
        dataType:0
      }
    }
  },
@@ -96,6 +127,12 @@
    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
@@ -118,12 +155,33 @@
          total: 0
        }
      }
      this.search()
      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;*/