'fix'

src/config/componentsMap.js

@@ -43,6 +43,7 @@ export default {
   hydraulic: () => import('@/views/device/hydraulic'),
   wrench: () => import('@/views/device/wrench'),
   flange: () => import('@/views/device/flange'),
+  maintenance: () => import('@/views/device/maintenance'),
   // vehicleBrands: () => import('@/views/yunying/vehicle/brand'),
   // vehicleColors: () => import('@/views/yunying/vehicle/color'),
   // stolenVehicles: () => import('@/views/yunying/vehicle/stolen'),

src/views/device/flange/detail.vue

@@ -0,0 +1,456 @@
+<template>
+  <el-drawer
+    title="设备信息"
+    :visible.sync="drawerVisible"
+    :direction="direction"
+    size="60%"
+  >
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="法兰信息" name="first">
+        <el-divider content-position="left">基础信息</el-divider>
+        <el-row>
+          <div style="margin-bottom: 30px; margin-left: 50px">
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <span>法兰编号：</span>
+                <span class="item">{{ data.number }}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">型    号：</pre>
+                <span class="item">{{ data.model }}</span>
+              </div>
+              <div class="detail-item">
+                <span>所属部门：</span>
+                <span class="item">{{ data.depart_name }}</span>
+              </div>
+            </el-col>
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <pre style="display: inline">名    称：</pre>
+                <span class="item">{{ data.name }}</span>
+              </div>
+              <div class="detail-item">
+                <span>使用状态：</span>
+                <span class="item">在用</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">品    牌：</pre>
+                <span class="item">{{ data.brand }}</span>
+              </div>
+            </el-col>
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <pre style="display: inline">供 应 商：</pre>
+                <span class="item">{{ data.supplier }}</span>
+              </div>
+              <div class="detail-item">
+                <span>出厂日期：</span>
+                <span class="item">{{ data.out_date }}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">备    注：</pre>
+                <span class="item">{{ data.remark }}</span>
+              </div>
+            </el-col>
+            <el-col :span="6"></el-col>
+          </div>
+        </el-row>
+        <el-divider content-position="left">规格信息</el-divider>
+        <el-row>
+          <div style="margin-bottom: 30px; margin-left: 50px">
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <pre style="display: inline">直    径：</pre>
+                <span class="item">{{ data.diameter }}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">螺栓数量：</pre>
+                <span class="item">{{ data.bolts_num }}</span>
+              </div>
+            </el-col>
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <pre style="display: inline">螺栓尺寸：</pre>
+                <span class="item">{{ data.bolts_size }}</span>
+              </div>
+            </el-col>
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <pre style="display: inline">标准预紧力：</pre>
+                <span class="item">{{ data.preload }}（N*m）</span>
+              </div>
+            </el-col>
+            <el-col :span="6"></el-col>
+          </div>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="装配工具" name="second">
+        <el-table
+          :data="AssemblyData"
+          style="width: 100%; margin-left: 20px"
+          :row-class-name="tableRowClassName"
+        >
+          <el-table-column prop="number" label="编号"> </el-table-column>
+          <el-table-column prop="name" label="名称"> </el-table-column>
+          <el-table-column prop="model" label="型号"> </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="螺栓紧固方案" name="third">
+        <el-divider content-position="left"><span style="color:#1850ef">单同步</span></el-divider>
+        <el-table
+          :data="oneData"
+          style="width: 100%;margin-left: 20px"
+        >
+          <el-table-column prop="step" label="步骤">
+          </el-table-column>
+          <el-table-column prop="number" label="螺栓编号">
+          </el-table-column>
+          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
+        </el-table>
+        <el-divider content-position="left"><span style="color:#1850ef">两同步</span></el-divider>
+        <el-table
+          :data="twoData"
+          style="width: 100%;margin-left: 20px"
+        >
+          <el-table-column prop="step" label="步骤">
+          </el-table-column>
+          <el-table-column prop="number" label="螺栓编号">
+          </el-table-column>
+          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
+        </el-table>
+        <el-divider content-position="left"><span style="color:#1850ef">四同步</span></el-divider>
+        <el-table
+          :data="fourData"
+          style="width: 100%;margin-left: 20px"
+        >
+          <el-table-column prop="step" label="步骤">
+          </el-table-column>
+          <el-table-column prop="number" label="螺栓编号">
+          </el-table-column>
+          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
+        </el-table>
+        <el-divider content-position="left"><span style="color:#1850ef">六同步</span></el-divider>
+        <el-table
+          :data="sixData"
+          style="width: 100%;margin-left: 20px"
+        >
+          <el-table-column prop="step" label="步骤">
+          </el-table-column>
+          <el-table-column prop="number" label="螺栓编号">
+          </el-table-column>
+          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="实时维保信息" name="fourth">
+           <el-table
+          :data="nowData"
+          style="width: 100%;margin-left: 20px"
+        >
+          <el-table-column prop="number" label="螺栓编号">
+          </el-table-column>
+          <el-table-column prop="real_preload" label="实际预紧力（N*m）">
+          </el-table-column>
+          <el-table-column prop="stand_preload" label="标准预紧力（N*m）">
+          </el-table-column>
+          <el-table-column prop="end_time" label="预紧结束时间">
+          </el-table-column>
+          <el-table-column prop="beng_no" label="液压泵编号">
+          </el-table-column>
+          <el-table-column prop="banshou_no" label="液压扳手编号">
+          </el-table-column>
+          <el-table-column prop="ways" label="紧固方式">
+          </el-table-column>
+          <el-table-column prop="operator" label="操作员"> </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="历史维保记录" name="five">
+           <el-table
+          :data="historyData"
+          style="width: 100%;margin-left: 20px"
+        >
+         <el-table-column prop="number" label="螺栓编号">
+          </el-table-column>
+          <el-table-column prop="real_preload" label="实际预紧力（N*m）">
+          </el-table-column>
+          <el-table-column prop="stand_preload" label="标准预紧力（N*m）">
+          </el-table-column>
+          <el-table-column prop="end_time" label="预紧结束时间">
+          </el-table-column>
+          <el-table-column prop="beng_no" label="液压泵编号">
+          </el-table-column>
+          <el-table-column prop="banshou_no" label="液压扳手编号">
+          </el-table-column>
+          <el-table-column prop="ways" label="紧固方式">
+          </el-table-column>
+          <el-table-column prop="operator" label="操作员"> </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+  </el-drawer>
+</template>
+<script>
+export default {
+  props: ["detailVisible", "data"],
+  data() {
+    return {
+      drawer: false,
+      direction: "rtl",
+      activeName: "first",
+      AssemblyData: [
+        {
+          model: "v23300",
+          name: "测试工具1",
+          number: "2022030301",
+        },
+        {
+          model: "v23301",
+          name: "测试工具2",
+          number: "2022030302",
+        },
+        {
+          model: "v23302",
+          name: "测试工具3",
+          number: "2022030303",
+        },
+        {
+          model: "v23303",
+          name: "测试工具4",
+          number: "2022030304",
+        },
+      ],
+       oneData: [
+        {
+          step: 1,
+          preload: "2120",
+          number: "01",
+        },
+        {
+          step: 2,
+          preload: "2126",
+          number: "02",
+        }
+      ],
+      twoData: [
+        {
+          step: 1,
+          preload: "2128",
+          number: "03",
+        },
+        {
+          step: 2,
+          preload: "2100",
+          number: "04",
+        }
+      ],
+       fourData: [
+        {
+          step: 1,
+          preload: "2128",
+          number: "05",
+        },
+        {
+          step: 2,
+          preload: "2100",
+          number: "06",
+        }
+      ],
+       sixData: [
+        {
+          step: 1,
+          preload: "2128",
+          number: "07",
+        },
+        {
+          step: 2,
+          preload: "2100",
+          number: "08",
+        }
+      ],
+       nowData: [
+        {
+          number: '09',
+          real_preload: "2128",
+          stand_preload: "3000",
+          end_time:'2022-03-02 15:31:54',
+          beng_no:'200001',
+          banshou_no:'300001',
+          ways:'单同步',
+          operator:'张速'
+        },
+        {
+          number: 10,
+          real_preload: "2129",
+          stand_preload: "3001",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'两同步',
+          operator:'张速'
+        },
+         {
+          number: 11,
+          real_preload: "2139",
+          stand_preload: "3002",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'四同步',
+          operator:'张速'
+        },
+         {
+          number: 12,
+          real_preload: "2129",
+          stand_preload: "3003",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'六同步',
+          operator:'张速'
+        }
+      ],
+       historyData: [
+        {
+          number: 13,
+          real_preload: "2128",
+          stand_preload: "3005",
+          end_time:'2022-03-02 15:31:54',
+          beng_no:'200001',
+          banshou_no:'300001',
+          ways:'单同步',
+          operator:'张速'
+        },
+        {
+          number: 14,
+          real_preload: "2129",
+          stand_preload: "3006",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'两同步',
+          operator:'张速'
+        },
+         {
+          number: 15,
+          real_preload: "2139",
+          stand_preload: "3007",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'四同步',
+          operator:'张速'
+        },
+         {
+          number: 16,
+          real_preload: "2129",
+          stand_preload: "3008",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'六同步',
+          operator:'张速'
+        },
+         {
+          number: 17,
+          real_preload: "2128",
+          stand_preload: "3009",
+          end_time:'2022-03-02 15:31:54',
+          beng_no:'200001',
+          banshou_no:'300001',
+          ways:'单同步',
+          operator:'张速'
+        },
+        {
+          number: 18,
+          real_preload: "2129",
+          stand_preload: "3010",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'两同步',
+          operator:'张速'
+        },
+         {
+          number: 19,
+          real_preload: "2139",
+          stand_preload: "3012",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'四同步',
+          operator:'张速'
+        },
+         {
+          number: 20,
+          real_preload: "2129",
+          stand_preload: "3013",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'六同步',
+          operator:'张速'
+        }
+      ],
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex === 1) {
+        return "warning-row";
+      } else if (rowIndex === 3) {
+        return "success-row";
+      }
+      return "";
+    },
+  },
+  computed: {
+    drawerVisible: {
+      set(val) {
+        this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
+      },
+      get() {
+        return this.detailVisible; // 表示获取父组件的值
+      },
+    },
+  },
+};
+</script>
+<style scoped>
+.detail-item {
+  width: 100%;
+  padding: 15px 0px;
+  list-style-type: none;
+}
+.item {
+  font-size: 14px;
+  color: black;
+  margin-top: 5px;
+}
+.el-table .warning-row {
+  background: oldlace !important;
+}
+
+.el-table .success-row {
+  background: #f0f9eb !important;
+}
+</style>

src/views/device/flange/formModel.vue

@@ -55,7 +55,8 @@ export default {
           },
            name: {
             type: "input",
-            label: "名称"
+            label: "名称",
+            required:true
           },
           model: {
             type: "input",

src/views/device/flange/index.vue

@@ -1,3 +1,502 @@
 <template>
-  <div>3232323</div>
-</template>
+  <div class="app-container">
+    <div class="filter-container" style="padding-bottom: 0px">
+      <div class="search-box-area" id="searchBox">
+        <div class="search-item">
+          <el-cascader
+            class="filter-item form-search-input fl"
+            v-model="queryParam.department_id"
+            :options="departments"
+            clearable
+            :props="{
+              checkStrictly: true,
+              label: 'department_name',
+              value: 'id',
+            }"
+            @change="handleChange"
+          ></el-cascader>
+        </div>
+        <div class="search-item">
+          <el-input
+            v-model="queryParam.number"
+            placeholder="编号"
+            clearable
+            class="filter-item form-search-input fl"
+            @keyup.enter.native="handleSearch"
+          />
+        </div>
+        <div class="search-item">
+          <el-input
+            v-model="queryParam.name"
+            placeholder="名称"
+            clearable
+            class="filter-item form-search-input fl"
+            @keyup.enter.native="handleSearch"
+          />
+        </div>
+        <div class="search-item">
+          <el-input
+            v-model="queryParam.model"
+            placeholder="型号"
+            clearable
+            class="filter-item form-search-input fl"
+            @keyup.enter.native="handleSearch"
+          />
+        </div>
+        <div class="search-item">
+          <el-select
+            v-model="queryParam.is_used"
+            placeholder="使用状态"
+            class="filter-item form-search-input fl"
+            clearable
+          >
+            <el-option value="0" label="未使用">未使用</el-option>
+            <el-option value="1" label="已使用">已使用</el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="search-operate-area">
+        <!-- <el-input v-model="queryParam.code" placeholder="唯一编码" clearable class="filter-item form-search-input fl" /> -->
+        <el-button
+          class="filter-item search fl"
+          icon="el-icon-search"
+          @click="handleSearch"
+          >搜索</el-button
+        >
+        <el-button
+          class="filter-item fl"
+          icon="el-icon-refresh"
+          @click="handleRefresh"
+          >重置</el-button
+        >
+        <el-button
+          class="filter-item search fl"
+          :icon="this.searchDisplay ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+          @click="searchDis"
+          >{{ word }}</el-button
+        >
+      </div>
+      <div class="list-operate-area">
+        <!-- <el-button size="mini" class="filter-item search fl" icon="el-icon-plus" @click="handleCreate">添加</el-button> -->
+        <el-button
+          class="filter-item search fl"
+          icon="el-icon-setting"
+          @click="showColumnOption"
+          >列设置</el-button
+        >
+        <el-button
+          class="filter-item search fl"
+          icon="el-icon-refresh-right"
+          @click="refresh"
+          >刷新</el-button
+        >
+      </div>
+    </div>
+    <el-table
+      :data="data"
+      v-loading="loading"
+      ref="multipleTable"
+      @selection-change="hydraulicSelectMulti"
+      @sort-change="sortChange"
+      :dynamicColumnSetting="true"
+      tooltip-effect="dark"
+      style="width: 100%"
+      border
+      fit
+    >
+      <el-table-column
+        type="selection"
+        fixed="left"
+        width="55"
+      ></el-table-column>
+      <el-table-column
+        prop="depart_name"
+        label="所属部门"
+        align="center"
+        v-if="showColumn.depart_name"
+        :show-overflow-tooltip="true"
+        width="150"
+      />
+      <el-table-column
+        prop="alarm_state_text"
+        label="告警状态"
+        align="center"
+        v-if="showColumn.alarm_state_text"
+        width="120"
+      >
+        <template slot-scope="record">
+            <el-tag
+              effect="dark"
+              slot="reference"
+              :type="current_type[record.row.alarm_state] || ''"
+              size="small"
+              >{{ record.row.alarm_state_text }}</el-tag
+            >
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        prop="net_state"
+        label="在线状态"
+        align="center"
+        v-if="showColumn.net_state"
+        :show-overflow-tooltip="true"
+        width="120"
+      >
+        <template slot-scope="record">
+          <el-tag type="success" v-if="record.row.net_state == '0'"
+            >在线</el-tag
+          >
+          <el-tag type="gray" v-else-if="record.row.net_state == '1'"
+            >离线</el-tag
+          >
+          <el-tag type="danger" v-else>从未上线</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="number"
+        label="编号"
+        align="center"
+        v-if="showColumn.number"
+        :show-overflow-tooltip="true"
+        width="150"
+      />
+      <el-table-column
+        prop="name"
+        label="名称"
+        align="center"
+        v-if="showColumn.name"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="brand"
+        label="品牌"
+        align="center"
+        v-if="showColumn.brand"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="supplier"
+        label="供应商"
+        align="center"
+        v-if="showColumn.supplier"
+        :show-overflow-tooltip="true"
+        width="120"
+      />
+      <el-table-column
+        prop="model"
+        label="型号"
+        align="center"
+        v-if="showColumn.model"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="out_date"
+        label="出厂日期"
+        align="center"
+        v-if="showColumn.out_date"
+        :show-overflow-tooltip="true"
+        width="150"
+      />
+      <el-table-column
+        prop="is_used"
+        label="使用状态"
+        align="center"
+        v-if="showColumn.is_used"
+        :show-overflow-tooltip="true"
+        width="120"
+      >
+        <template slot-scope="record">
+          <el-tag type="danger" v-if="record.row.is_used == 0"
+            >未使用</el-tag
+          >
+          <el-tag type="success" v-else>已使用</el-tag>
+        </template>
+      </el-table-column>
+       <el-table-column
+        prop="online_time"
+        label="在线时间"
+        align="center"
+        v-if="showColumn.online_time"
+        width="200"
+        sortable
+      />
+      <el-table-column
+        prop="creator_user"
+        label="导入用户"
+        align="center"
+        v-if="showColumn.creator_user"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="created_at"
+        label="添加时间"
+        align="center"
+        v-if="showColumn.created_at"
+        :show-overflow-tooltip="true"
+        width="200"
+        sortable
+      />
+       <el-table-column
+        prop="remark"
+        label="备注"
+        align="center"
+        v-if="showColumn.remark"
+        width="100"
+      />
+      <el-table-column
+        label="操作"
+        min-width="185"
+        align="center"
+        fixed="right"
+      >
+        <template slot-scope="record">
+          <el-tooltip
+            content="修改"
+            placement="top"
+            :enterable="false"
+          >
+            <el-button
+              type="primary"
+              size="mini"
+              icon="el-icon-edit"
+              @click="handleUpdate(record.row)"
+            ></el-button>
+          </el-tooltip>
+          <el-tooltip
+            content="查看"
+            placement="top"
+            :enterable="false"
+          >
+            <el-button
+              type="primary"
+              size="mini"
+              icon="el-icon-view"
+              @click="handleDetail(record.row)"
+            ></el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+    <transition name="fade">
+      <div class="columnOption" v-show="isShowColumn">
+        <div class="content">
+          <div class="head">选择显示字段</div>
+          <div class="body">
+            <el-checkbox v-model="checkList.depart_name" disabled>所属部门</el-checkbox>
+            <el-checkbox v-model="checkList.alarm_state_text" disabled>告警状态</el-checkbox>
+            <el-checkbox v-model="checkList.net_state">在线状态</el-checkbox>
+            <el-checkbox v-model="checkList.number">编号</el-checkbox>
+            <el-checkbox v-model="checkList.name">名称</el-checkbox>
+            <el-checkbox v-model="checkList.brand">品牌</el-checkbox>
+            <el-checkbox v-model="checkList.supplier">供应商</el-checkbox>
+            <el-checkbox v-model="checkList.model">型号</el-checkbox>
+            <el-checkbox v-model="checkList.out_date">出厂日期</el-checkbox>
+            <el-checkbox v-model="checkList.is_used">使用状态</el-checkbox>
+            <el-checkbox v-model="checkList.online_time">在线时间</el-checkbox>
+            <el-checkbox v-model="checkList.creator_user">导入用户</el-checkbox>
+            <el-checkbox v-model="checkList.created_at">添加时间</el-checkbox>
+            <el-checkbox v-model="checkList.remark">备注</el-checkbox>
+          </div>
+          <div class="footer">
+            <el-button size="small" type="primary" plain @click="saveColumn"
+              >保存列配置</el-button
+            >
+          </div>
+        </div>
+      </div>
+    </transition>
+    <el-button
+      type="primary"
+      icon="el-icon-plus"
+      v-action="'Device@save'"
+      :loading="downloadLoading"
+      style="margin-top: 15px"
+      @click="handleCreate"
+      >添加</el-button
+    >
+    <el-button
+      type="danger"
+      icon="el-icon-delete"
+      v-if="selectedIds.length > 0"
+      style="margin-top: 15px"
+      v-action="'Hydraulic@delete'"
+      @click="handleMultiDelete()"
+      >删除</el-button
+    >
+    <el-pagination
+      background
+      class="pagination-container"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="paginate.current"
+      :page-sizes="paginate.sizes"
+      :page-size="paginate.limit"
+      :layout="paginate.layout"
+      :total="paginate.total"
+    />
+     <form-model
+      @sendVal="closeDialog"
+      :formModelVisible="formVisible"
+      :title="title"
+      :ref="formName"
+    />
+    <detail
+      :detailVisible="detailVisible"
+       @sendVal="closeDrawer"
+       :data="detail"
+    />
+  </div>
+</template>
+
+<script>
+import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
+import { action } from "@/directive/permission/index.js";
+import detail from "./detail.vue"
+import formModel from './formModel.vue'
+export default {
+  name: "hydraulic",
+  directives: { action },
+  mixins: [rlListOperate],
+  components: {
+    formModel,
+    detail,
+  },
+  data() {
+    return {
+      url: "hydraulic",
+      queryParam: {
+        number: "",
+        department_id: [],
+        name: "",
+        model: "",
+        is_used: ""
+      },
+      current_type: {
+        0: "success",
+        1: "danger",
+      },
+      formName:'hydraulic',
+      formVisible:false,
+      //搜索
+      searchDisplay: true,
+      departments: [],
+
+      //详情
+      detailVisible:false,
+      detail:{},
+
+      isShowColumn: false,
+      // 列的配置化对象，存储配置信息
+      checkList: {},
+      showColumn: {
+        depart_name: true,
+        alarm_state_text: true,
+        net_state:true,
+        number: true,
+        name: true,
+        brand: true,
+        supplier: true,
+        model: true,
+        online_time: true
+      }
+    };
+  },
+  created() {
+    this.$http.get("departments").then((response) => {
+      this.departments = response.data;
+    });
+  },
+  methods: {
+   
+    handleChange(val) {
+      //  console.log(val)
+      this.queryParam.department_id = val;
+      this.handleSearch();
+    },
+    hydraulicSelectMulti(data) {
+      this.selectedIds = [];
+      data.forEach((item) => {
+        this.selectedIds.push(item.id);
+      });
+    },
+    refresh() {
+      this.queryParam.page = this.paginate.current;
+      this.getList();
+    },
+    searchDis() {
+      this.searchDisplay = !this.searchDisplay;
+      var searchBoxHeght = document.getElementById("searchBox");
+      if (this.searchDisplay == false) {
+        searchBoxHeght.style.height = 40 + "px";
+      } else {
+        searchBoxHeght.style.height = "auto";
+      }
+    },
+    showColumnOption() {
+      this.isShowColumn = true;
+    },
+    saveColumn() {
+      localStorage.setItem("hydColumnSet", JSON.stringify(this.checkList));
+      this.isShowColumn = false;
+    },
+    handleDetail(row){
+      this.detailVisible = true,
+      this.detail = row
+    },
+    closeDrawer(){
+      this.detailVisible = false
+    }
+  },
+  watch: {
+    // 监听复选框配置列所有的变化
+    checkList: {
+      handler: function (newnew, oldold) {
+        // console.log(newnew);
+        this.showColumn = newnew;
+        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
+        this.$nextTick(() => {
+          this.$refs.multipleTable.doLayout();
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  computed: {
+    word: function () {
+      if (this.searchDisplay == false) {
+        //对文字进行处理
+        return "展开";
+      } else {
+        return "收起";
+      }
+    },
+  },
+  mounted() {
+    // this.getIsUseVoice();
+    this.$nextTick(function () {
+      this.searchDis();
+    });
+    // 发请求得到checkListInitData的列的名字
+    if (localStorage.getItem("hydColumnSet")) {
+      this.checkList = JSON.parse(localStorage.getItem("hydColumnSet"));
+    } else {
+      this.checkList = {
+        depart_name: true,
+        alarm_state_text: true,
+        net_state:true,
+        number: true,
+        name: true,
+        brand: true,
+        supplier: true,
+        model: true,
+        online_time: true
+      };
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+ @import "@/views/device/hydraulic/index.scss";
+</style>

src/views/device/hydraulic/detail.vue

@@ -0,0 +1,433 @@
+<template>
+  <el-drawer
+    title="设备信息"
+    :visible.sync="drawerVisible"
+    :direction="direction"
+    size="60%"
+  >
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="液压泵信息" name="first">
+        <el-divider content-position="left">基础信息</el-divider>
+        <el-row>
+          <div style="margin-bottom: 30px; margin-left: 50px">
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <span>法兰编号：</span>
+                <span class="item">{{ data.number }}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">型    号：</pre>
+                <span class="item">{{ data.model }}</span>
+              </div>
+              <div class="detail-item">
+                <span>所属部门：</span>
+                <span class="item">{{ data.depart_name }}</span>
+              </div>
+            </el-col>
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <pre style="display: inline">名    称：</pre>
+                <span class="item">{{ data.name }}</span>
+              </div>
+              <div class="detail-item">
+                <span>使用状态：</span>
+                <span class="item">在用</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">品    牌：</pre>
+                <span class="item">{{ data.brand }}</span>
+              </div>
+            </el-col>
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <pre style="display: inline">供 应 商：</pre>
+                <span class="item">{{ data.supplier }}</span>
+              </div>
+              <div class="detail-item">
+                <span>出厂日期：</span>
+                <span class="item">{{ data.out_date }}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">备    注：</pre>
+                <span class="item">{{ data.remark }}</span>
+              </div>
+            </el-col>
+            <el-col :span="6"></el-col>
+          </div>
+        </el-row>
+        <el-divider content-position="left">规格信息</el-divider>
+        <el-row>
+          <div style="margin-bottom: 30px; margin-left: 50px">
+            <el-col
+              :span="24"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <pre style="display: inline">压力范围（PSI）：</pre>
+                <span class="item">{{ data.pressure_range }}</span>
+              </div>
+            </el-col>
+          </div>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="使用扳手" name="second">
+        <el-table
+          :data="AssemblyData"
+          style="width: 100%; margin-left: 20px"
+          :row-class-name="tableRowClassName"
+        >
+          <el-table-column prop="number" label="编号"> </el-table-column>
+          <el-table-column prop="name" label="名称"> </el-table-column>
+          <el-table-column prop="model" label="型号"> </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="螺栓紧固方案" name="third">
+        <el-divider content-position="left"><span style="color:#1850ef">单同步</span></el-divider>
+        <el-table
+          :data="oneData"
+          style="width: 100%;margin-left: 20px"
+        >
+          <el-table-column prop="step" label="步骤">
+          </el-table-column>
+          <el-table-column prop="number" label="螺栓编号">
+          </el-table-column>
+          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
+        </el-table>
+        <el-divider content-position="left"><span style="color:#1850ef">两同步</span></el-divider>
+        <el-table
+          :data="twoData"
+          style="width: 100%;margin-left: 20px"
+        >
+          <el-table-column prop="step" label="步骤">
+          </el-table-column>
+          <el-table-column prop="number" label="螺栓编号">
+          </el-table-column>
+          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
+        </el-table>
+        <el-divider content-position="left"><span style="color:#1850ef">四同步</span></el-divider>
+        <el-table
+          :data="fourData"
+          style="width: 100%;margin-left: 20px"
+        >
+          <el-table-column prop="step" label="步骤">
+          </el-table-column>
+          <el-table-column prop="number" label="螺栓编号">
+          </el-table-column>
+          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
+        </el-table>
+        <el-divider content-position="left"><span style="color:#1850ef">六同步</span></el-divider>
+        <el-table
+          :data="sixData"
+          style="width: 100%;margin-left: 20px"
+        >
+          <el-table-column prop="step" label="步骤">
+          </el-table-column>
+          <el-table-column prop="number" label="螺栓编号">
+          </el-table-column>
+          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="实时维保信息" name="fourth">
+           <el-table
+          :data="nowData"
+          style="width: 100%;margin-left: 20px"
+        >
+          <el-table-column prop="number" label="螺栓编号">
+          </el-table-column>
+          <el-table-column prop="real_preload" label="实际预紧力（N*m）">
+          </el-table-column>
+          <el-table-column prop="stand_preload" label="标准预紧力（N*m）">
+          </el-table-column>
+          <el-table-column prop="end_time" label="预紧结束时间">
+          </el-table-column>
+          <el-table-column prop="beng_no" label="液压泵编号">
+          </el-table-column>
+          <el-table-column prop="banshou_no" label="液压扳手编号">
+          </el-table-column>
+          <el-table-column prop="ways" label="紧固方式">
+          </el-table-column>
+          <el-table-column prop="operator" label="操作员"> </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="历史维保记录" name="five">
+           <el-table
+          :data="historyData"
+          style="width: 100%;margin-left: 20px"
+        >
+         <el-table-column prop="number" label="螺栓编号">
+          </el-table-column>
+          <el-table-column prop="real_preload" label="实际预紧力（N*m）">
+          </el-table-column>
+          <el-table-column prop="stand_preload" label="标准预紧力（N*m）">
+          </el-table-column>
+          <el-table-column prop="end_time" label="预紧结束时间">
+          </el-table-column>
+          <el-table-column prop="beng_no" label="液压泵编号">
+          </el-table-column>
+          <el-table-column prop="banshou_no" label="液压扳手编号">
+          </el-table-column>
+          <el-table-column prop="ways" label="紧固方式">
+          </el-table-column>
+          <el-table-column prop="operator" label="操作员"> </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+  </el-drawer>
+</template>
+<script>
+export default {
+  props: ["detailVisible", "data"],
+  data() {
+    return {
+      drawer: false,
+      direction: "rtl",
+      activeName: "first",
+      AssemblyData: [
+        {
+          model: "v23300",
+          name: "测试工具1",
+          number: "2022030301",
+        },
+        {
+          model: "v23301",
+          name: "测试工具2",
+          number: "2022030302",
+        },
+        {
+          model: "v23302",
+          name: "测试工具3",
+          number: "2022030303",
+        },
+        {
+          model: "v23303",
+          name: "测试工具4",
+          number: "2022030304",
+        },
+      ],
+       oneData: [
+        {
+          step: 1,
+          preload: "2120",
+          number: "01",
+        },
+        {
+          step: 2,
+          preload: "2126",
+          number: "02",
+        }
+      ],
+      twoData: [
+        {
+          step: 1,
+          preload: "2128",
+          number: "03",
+        },
+        {
+          step: 2,
+          preload: "2100",
+          number: "04",
+        }
+      ],
+       fourData: [
+        {
+          step: 1,
+          preload: "2128",
+          number: "05",
+        },
+        {
+          step: 2,
+          preload: "2100",
+          number: "06",
+        }
+      ],
+       sixData: [
+        {
+          step: 1,
+          preload: "2128",
+          number: "07",
+        },
+        {
+          step: 2,
+          preload: "2100",
+          number: "08",
+        }
+      ],
+       nowData: [
+        {
+          number: '09',
+          real_preload: "2128",
+          stand_preload: "3000",
+          end_time:'2022-03-02 15:31:54',
+          beng_no:'200001',
+          banshou_no:'300001',
+          ways:'单同步',
+          operator:'张速'
+        },
+        {
+          number: 10,
+          real_preload: "2129",
+          stand_preload: "3001",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'两同步',
+          operator:'张速'
+        },
+         {
+          number: 11,
+          real_preload: "2139",
+          stand_preload: "3002",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'四同步',
+          operator:'张速'
+        },
+         {
+          number: 12,
+          real_preload: "2129",
+          stand_preload: "3003",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'六同步',
+          operator:'张速'
+        }
+      ],
+       historyData: [
+        {
+          number: 13,
+          real_preload: "2128",
+          stand_preload: "3005",
+          end_time:'2022-03-02 15:31:54',
+          beng_no:'200001',
+          banshou_no:'300001',
+          ways:'单同步',
+          operator:'张速'
+        },
+        {
+          number: 14,
+          real_preload: "2129",
+          stand_preload: "3006",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'两同步',
+          operator:'张速'
+        },
+         {
+          number: 15,
+          real_preload: "2139",
+          stand_preload: "3007",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'四同步',
+          operator:'张速'
+        },
+         {
+          number: 16,
+          real_preload: "2129",
+          stand_preload: "3008",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'六同步',
+          operator:'张速'
+        },
+         {
+          number: 17,
+          real_preload: "2128",
+          stand_preload: "3009",
+          end_time:'2022-03-02 15:31:54',
+          beng_no:'200001',
+          banshou_no:'300001',
+          ways:'单同步',
+          operator:'张速'
+        },
+        {
+          number: 18,
+          real_preload: "2129",
+          stand_preload: "3010",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'两同步',
+          operator:'张速'
+        },
+         {
+          number: 19,
+          real_preload: "2139",
+          stand_preload: "3012",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'四同步',
+          operator:'张速'
+        },
+         {
+          number: 20,
+          real_preload: "2129",
+          stand_preload: "3013",
+          end_time:'2022-03-02 16:31:44',
+          beng_no:'200002',
+          banshou_no:'300002',
+          ways:'六同步',
+          operator:'张速'
+        }
+      ],
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex === 1) {
+        return "warning-row";
+      } else if (rowIndex === 3) {
+        return "success-row";
+      }
+      return "";
+    },
+  },
+  computed: {
+    drawerVisible: {
+      set(val) {
+        this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
+      },
+      get() {
+        return this.detailVisible; // 表示获取父组件的值
+      },
+    },
+  },
+};
+</script>
+<style scoped>
+.detail-item {
+  width: 100%;
+  padding: 15px 0px;
+  list-style-type: none;
+}
+.item {
+  font-size: 14px;
+  color: black;
+  margin-top: 5px;
+}
+.el-table .warning-row {
+  background: oldlace !important;
+}
+
+.el-table .success-row {
+  background: #f0f9eb !important;
+}
+</style>

src/views/device/hydraulic/formModel.vue

@@ -55,7 +55,8 @@ export default {
           },
            name: {
             type: "input",
-            label: "名称"
+            label: "名称",
+            required:true
           },
           model: {
             type: "input",

src/views/device/hydraulic/index.vue

@@ -255,7 +255,6 @@
             content="修改"
             placement="top"
             :enterable="false"
-            v-action="'Device@update'"
           >
             <el-button
               type="primary"
@@ -264,7 +263,18 @@
               @click="handleUpdate(record.row)"
             ></el-button>
           </el-tooltip>
-         
+          <el-tooltip
+            content="查看"
+            placement="top"
+            :enterable="false"
+          >
+            <el-button
+              type="primary"
+              size="mini"
+              icon="el-icon-view"
+              @click="handleDetail(record.row)"
+            ></el-button>
+          </el-tooltip>
         </template>
       </el-table-column>
     </el-table>
@@ -331,13 +341,18 @@
       :title="title"
       :ref="formName"
     />
+    <detail
+      :detailVisible="detailVisible"
+       @sendVal="closeDrawer"
+       :data="detail"
+    />
   </div>
 </template>
 
 <script>
 import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
 import { action } from "@/directive/permission/index.js";
-import { getToken } from "../../../utils/auth";
+import detail from "./detail.vue"
 import formModel from './formModel.vue'
 export default {
   name: "hydraulic",
@@ -345,6 +360,7 @@ export default {
   mixins: [rlListOperate],
   components: {
     formModel,
+    detail,
   },
   data() {
     return {
@@ -366,6 +382,10 @@ export default {
       searchDisplay: true,
       departments: [],
 
+      //详情
+      detailVisible:false,
+      detail:{},
+
       isShowColumn: false,
       // 列的配置化对象，存储配置信息
       checkList: {},
@@ -420,6 +440,13 @@ export default {
       localStorage.setItem("hydColumnSet", JSON.stringify(this.checkList));
       this.isShowColumn = false;
     },
+    handleDetail(row){
+      this.detailVisible = true,
+      this.detail = row
+    },
+    closeDrawer(){
+      this.detailVisible = false
+    }
   },
   watch: {
     // 监听复选框配置列所有的变化

src/views/device/maintenance/index.vue

@@ -0,0 +1,12 @@
+<template>
+    <el-image :src="src" style="width: 100%; height: 100%"></el-image>
+</template>
+<script>
+export default {
+  data() {
+    return {
+        src:'https://rlfd.oss-cn-hangzhou.aliyuncs.com/kfz.png'
+    };
+  },
+};
+</script>

src/views/device/wrench/bmapModel.vue

@@ -1,106 +0,0 @@
-<template>
-  <ele-form-dialog
-    v-bind="formConfig"
-    v-model="formData"
-    :request-fn="handleRequest"
-    :visible.sync="DialogVisible"
-    @input='getChangeValue'
-    width="30%"
-    v-dialogDrag
-  />
-</template>
-
-<script>
-export default {
-  props: ["bmapModelVisible","bmapModelData"],
-  data() {
-    return {
-      formData: {
-        lat: '',
-        lng: '',
-        location:{'lng':120.21937542,'lat':'30.25924446'}
-      },
-      formConfig: {
-          isShowLabel: false,
-          inline: true,
-          submitBtnText: "确认",
-        formDesc: {
-          location: {
-            type: "bmap",
-            label: "坐标",
-            // valueFormatter(val) {
-            //   console.log(val);
-            // },
-            attrs: {
-              ak: "LDeyoWgKV2mO1b3MRkTlyzGcNjFUycLL",
-              zoom: 15,
-              isScrollWheelZoom:true,
-            },
-            layout: 24
-          },
-          lng: {
-              
-            type: "input",
-            label: "经度",
-            layout: 8
-          },
-          lat: {
-              
-            type: "input",
-            label: "纬度",
-            layout: 8,
-            
-          }
-        }
-      }
-    };
-  },
-  methods: {
-    handleRequest(data) {
-      
-      if(this.formData.location){
-          this.$parent.location=this.formData.location
-      }else{
-          this.$parent.location=''
-      }
-    //    console.log(this.$parent.location);
-      this.$emit("sendVal", false);
-    },
-    getChangeValue(res){
-        this.formData.lat=res.location.lat
-        this.formData.lng=res.location.lng
-        
-    }
-    
-
-  },
-  computed: {
-    DialogVisible: {
-      set(val) {
-        this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
-      },
-      get() {
-          if(this.bmapModelData){
-              let record=this.bmapModelData
-              let formData={'lat':record.point_x,'lng':record.point_y,'location':{'lat':record.point_x,'lng':record.point_y}}
-              this.formData=formData
-          }
-        return this.bmapModelVisible; // 表示获取父组件的值
-      }
-    }
-  }
-};
-</script>
-<style>
-/*去除百度地图版权*/
-.anchorBL{
-    display:none;
-} 
-.ele-form-btns{
-    margin-top:0px !important;
-}
-/*特殊处理 暂时去除地图顶部搜索框*/
-/* .el-autocomplete{
-  display: none;
-} */
-</style>

src/views/device/wrench/detail.vue

@@ -0,0 +1,299 @@
+<template>
+  <el-drawer
+    title="设备信息"
+    :visible.sync="drawerVisible"
+    :direction="direction"
+    size="60%"
+  >
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="液压扳手信息" name="first">
+        <el-divider content-position="left">基础信息</el-divider>
+        <el-row>
+          <div style="margin-bottom: 30px; margin-left: 50px">
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <span>法兰编号：</span>
+                <span class="item">{{ data.number }}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">型    号：</pre>
+                <span class="item">{{ data.model }}</span>
+              </div>
+              <div class="detail-item">
+                <span>所属部门：</span>
+                <span class="item">{{ data.depart_name }}</span>
+              </div>
+            </el-col>
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <pre style="display: inline">名    称：</pre>
+                <span class="item">{{ data.name }}</span>
+              </div>
+              <div class="detail-item">
+                <span>使用状态：</span>
+                <span class="item">在用</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">品    牌：</pre>
+                <span class="item">{{ data.brand }}</span>
+              </div>
+            </el-col>
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <pre style="display: inline">供 应 商：</pre>
+                <span class="item">{{ data.supplier }}</span>
+              </div>
+              <div class="detail-item">
+                <span>出厂日期：</span>
+                <span class="item">{{ data.out_date }}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">备    注：</pre>
+                <span class="item">{{ data.remark }}</span>
+              </div>
+            </el-col>
+            <el-col :span="6"></el-col>
+          </div>
+        </el-row>
+        <el-divider content-position="left">实时维护信息</el-divider>
+        <el-row>
+          <div style="margin-bottom: 30px; margin-left: 50px">
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <span>校准系数a：</span>
+                <span class="item">{{ data.coefficient_a }}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">校准系数b：</pre>
+                <span class="item">{{ data.coefficient_b }}</span>
+              </div>
+            </el-col>
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <pre style="display: inline">校准时间：</pre>
+                <span class="item">2022-02-16 18:30:41</span>
+              </div>
+              <div class="detail-item">
+                <span>校验台编号：</span>
+                <span class="item">{{ data.checked_no }}</span>
+              </div>
+            </el-col>
+            <el-col
+              :span="6"
+              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
+            >
+              <div class="detail-item">
+                <pre style="display: inline">校验结果：</pre>
+                <span class="item">合格</span>
+              </div>
+              <div class="detail-item">
+                <span>操作员：</span>
+                <span class="item">张速</span>
+              </div>
+            </el-col>
+            <el-col :span="6"></el-col>
+          </div>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="实时维保信息" name="fourth">
+        <el-table :data="nowData" style="width: 100%; margin-left: 20px">
+          <el-table-column prop="coefficient_a" label="校验系数a">
+          </el-table-column>
+          <el-table-column prop="coefficient_b" label="校验系数b">
+          </el-table-column>
+          <el-table-column prop="checked_time" label="校验时间">
+          </el-table-column>
+          <el-table-column prop="checked_no" label="校验台编号">
+          </el-table-column>
+          <el-table-column prop="checked_res" label="校验结果">
+          </el-table-column>
+          <el-table-column prop="operator" label="操作员"> </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="历史维保记录" name="five">
+        <el-table :data="historyData" style="width: 100%; margin-left: 20px">
+          <el-table-column prop="coefficient_a" label="校验系数a">
+          </el-table-column>
+          <el-table-column prop="coefficient_b" label="校验系数b">
+          </el-table-column>
+          <el-table-column prop="checked_time" label="校验时间">
+          </el-table-column>
+          <el-table-column prop="checked_no" label="校验台编号">
+          </el-table-column>
+          <el-table-column prop="checked_res" label="校验结果">
+          </el-table-column>
+          <el-table-column prop="operator" label="操作员"> </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+  </el-drawer>
+</template>
+<script>
+export default {
+  props: ["detailVisible", "data"],
+  data() {
+    return {
+      drawer: false,
+      direction: "rtl",
+      activeName: "first",
+      nowData: [
+        {
+          coefficient_a: "1",
+          coefficient_b: "2",
+          checked_time: "2022-03-02 15:31:54",
+          checked_no: "200001",
+          checked_res: "合格",
+          operator: "张速",
+        },
+        {
+          coefficient_a: "1",
+          coefficient_b: "2",
+          checked_time: "2022-03-02 15:31:54",
+          checked_no: "200001",
+          checked_res: "合格",
+          operator: "张速",
+        },
+        {
+          coefficient_a: "1",
+          coefficient_b: "2",
+          checked_time: "2022-03-02 15:31:54",
+          checked_no: "200001",
+          checked_res: "合格",
+          operator: "张速",
+        },
+        {
+          coefficient_a: "1",
+          coefficient_b: "2",
+          checked_time: "2022-03-02 15:31:54",
+          checked_no: "200001",
+          checked_res: "合格",
+          operator: "张速",
+        },
+      ],
+      historyData: [
+        {
+          coefficient_a: "1",
+          coefficient_b: "2",
+          checked_time: "2022-03-02 15:31:54",
+          checked_no: "200001",
+          checked_res: "合格",
+          operator: "张速",
+        },
+        {
+          coefficient_a: "1",
+          coefficient_b: "2",
+          checked_time: "2022-03-02 15:31:54",
+          checked_no: "200001",
+          checked_res: "合格",
+          operator: "张速",
+        },
+        {
+          coefficient_a: "1",
+          coefficient_b: "2",
+          checked_time: "2022-03-02 15:31:54",
+          checked_no: "200001",
+          checked_res: "合格",
+          operator: "张速",
+        },
+        {
+          coefficient_a: "1",
+          coefficient_b: "2",
+          checked_time: "2022-03-02 15:31:54",
+          checked_no: "200001",
+          checked_res: "合格",
+          operator: "张速",
+        },
+        {
+          coefficient_a: "1",
+          coefficient_b: "2",
+          checked_time: "2022-03-02 15:31:54",
+          checked_no: "200001",
+          checked_res: "合格",
+          operator: "张速",
+        },
+        {
+          coefficient_a: "1",
+          coefficient_b: "2",
+          checked_time: "2022-03-02 15:31:54",
+          checked_no: "200001",
+          checked_res: "合格",
+          operator: "张速",
+        },
+        {
+          coefficient_a: "1",
+          coefficient_b: "2",
+          checked_time: "2022-03-02 15:31:54",
+          checked_no: "200001",
+          checked_res: "合格",
+          operator: "张速",
+        },
+        {
+          coefficient_a: "1",
+          coefficient_b: "2",
+          checked_time: "2022-03-02 15:31:54",
+          checked_no: "200001",
+          checked_res: "合格",
+          operator: "张速",
+        },
+      ],
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex === 1) {
+        return "warning-row";
+      } else if (rowIndex === 3) {
+        return "success-row";
+      }
+      return "";
+    },
+  },
+  computed: {
+    drawerVisible: {
+      set(val) {
+        this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
+      },
+      get() {
+        return this.detailVisible; // 表示获取父组件的值
+      },
+    },
+  },
+};
+</script>
+<style scoped>
+.detail-item {
+  width: 100%;
+  padding: 15px 0px;
+  list-style-type: none;
+}
+.item {
+  font-size: 14px;
+  color: black;
+  margin-top: 5px;
+}
+.el-table .warning-row {
+  background: oldlace !important;
+}
+
+.el-table .success-row {
+  background: #f0f9eb !important;
+}
+</style>

src/views/device/wrench/formModel.vue

@@ -2,11 +2,11 @@
   <ele-form-dialog
     v-bind="formConfig"
     v-model="formFieldsData"
-    :title="title"
     v-dialogDrag
+    :title="title"
     :request-fn="handleFormSubmit"
     :visible.sync="DialogVisible"
-    width="600px"
+    width="450px"
     custom-class="abow_dialog"
     label-width="100px"
     label-position="left"
@@ -16,50 +16,27 @@
 
 <script>
 export default {
-  props: ["formModelVisible", "title","location"],
+  props: ["formModelVisible", "title"],
   data() {
-    var _this = this;
     return {
+      formData: {},
       formFieldsData: {
-          department_id:'',
-          mac:'',
-          name:'',
-          model:'',
-          longitude:'',
-          latitude:'',
-          address:'',
-          install_photo:'',
-          type:1,
-          remark:''
+        department_id: "",
+        number: "",
+        name: "",
+        model: "",
+        brand:"",
+        supplier:"",
+        out_date:"",
+        remark: ""
       },
-      url: "station",
+      url: "hydraulic",
       formConfig: {
-        labelPosition: "left",
-        isShowCancelBtn: true,
-        isShowBackBtn: false,
         formDesc: {
-           type: {
-            type: "radio",
-            label: "录入类型",
-            isOptions: true,
-            required: true,
-            options: [
-              {
-                text: "录入系统",
-                value: 1
-              },
-              {
-                text: "基站开局",
-                value: 2
-              }
-            ],
-            default: 1,
-          },
-         department_id: {
+          department_id: {
             type: "cascader",
             label: "所属部门",
             isOptions: true,
-            layout: 12,
             options: [],
             required: true,
             attrs: {
@@ -71,128 +48,56 @@ export default {
               }
             }
           },
-          mac: {
+          number: {
             type: "input",
-            label: "基站mac",
-            layout: 12,
-            required: true,
+            label: "编号",
+            required:true,
           },
-          name: {
+           name: {
             type: "input",
-            label: "基站名称",
-            layout: 12,
-            required: true,
-            vif(data){
-              return data.type == 2
-            }
+            label: "名称",
+            required:true
           },
           model: {
-            type: "select",
-            label: "基站型号",
-            layout: 12,
-            required: true,
-          },
-          longitude: {
             type: "input",
-            label: "经度",
-            required:true,
-            layout: 12,
-            on: {
-              focus: function(event) {
-                _this.handleBmapData();
-              }
-            },
-            vif(data){
-              return data.type == 2
-            }
+            label: "型号",
+            required:true
           },
-          latitude: {
+           brand: {
             type: "input",
-            label: "纬度",
-            required:true,
-            layout: 12,
-            on: {
-              focus: function(event) {
-                _this.handleBmapData();
-              }
-            },
-            vif(data){
-              return data.type == 2
-            }
+            label: "品牌"
           },
-          address: {
+           supplier: {
             type: "input",
-            label: "安装地址",
-            layout: 12,
-            required:true,
-            vif(data){
-              return data.type == 2
-            }
+            label: "供应商"
           },
-          install_photo: {
-            type: "image-upload",
-            label: "安装图片",
-            layout: 12,
-            attrs: {
-              action: process.env.VUE_APP_BASE_API + "/upload/image",
-              headers: { authorization: "" },
-              name: "image",
-              multiple: false,
-              size: 100,
-              responseFn(response, file, fileList) {
-                // console.log(response,file);
-                // 根据响应结果, 设置 URL
-                return response.data;
-              }
-            },
-            vif(data){
-              return data.type == 2
-            }
+            out_date: {
+            type: "date",
+            label: "出厂日期"
           },
           remark: {
             type: "textarea",
-            label: "备注",
-            required:false,
-            layout: 12,
-            attrs: {
-              autosizeType: "switch",
-              autosize: false,
-              rows: 1
-            }
-          },
+            label: "备注"
+          }
         },
-        order: [
-          "type",
-          "department_id",
-          "model",
-          "mac",
-          "name",
-          "longitude",
-          "latitude",
-          "address",
-          "install_photo",
-          "remark"
-        ]
+        order: ["department_id","number", "name", "model","brand","supplier","out_date","remark"]
       }
     };
   },
   created() {
-    this.formConfig.formDesc.install_photo.attrs.headers = {
-      authorization: "Bearer " + this.$store.state.user.token
-    };
-    this.$http.post("sysDictData/getOptions", { type: "StationModel" }).then(resp => {
-                this.formConfig.formDesc.model.options = resp.data
-    });
-     this.$http.get("departments").then((response) => {
+    this.$http.get("departments").then(response => {
       this.formConfig.formDesc.department_id.options = response.data;
     });
   },
   methods: {
-    handleFormSubmit() {
+    handleFormSubmit(data) {
       this.$parent.handleSubmit();
     },
-     handleBmapData() {
-      this.$parent.bmapVisible = true;
+    handleRequest(data) {
+      return Promise.resolve();
+    },
+    handleRequestSuccess() {
+      this.$message.success("发送成功");
     }
   },
   computed: {
@@ -201,18 +106,9 @@ export default {
         this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
       },
       get() {
-        if(this.formModelVisible){
-          this.formFieldsData.type = 1;
-        }
         return this.formModelVisible; // 表示获取父组件的值
       }
     }
-  },
-  watch:{
-     location(newVal, oldVal) {
-      this.formFieldsData.latitude = newVal.lat;
-      this.formFieldsData.longitude = newVal.lng;
-    }
   }
 };
-</script>
+</script>

src/views/device/wrench/heartLogTable.vue

@@ -1,530 +0,0 @@
-<template>
-  <el-dialog
-   :title="title" 
-   :visible.sync="dialog" 
-   v-dialogDrag  
-   direction="rtl" 
-   width="900px"
-   center
-   fullscreen
-  >
-  <div class="app-container">
-    <div class="filter-container" style="padding-bottom:0px">
-      <div class="search-box-area" id="searchBox">
-        
-      </div>
-      <div class="search-operate-area">
-
-        <!-- <el-button class="filter-item fl" icon="el-icon-refresh" @click="setRefresh">刷新</el-button> -->
-      
-      </div>
-      <div class="list-operate-area">
-      
-        <!-- 动态隐藏显示列 -->
-        <!-- <el-tooltip
-          class="item"
-          :enterable="false"
-          effect="light"
-          content="列表配置"
-          placement="top-start"
-        >
-          <el-popover
-            placement="bottom"
-            min-width="80"
-            trigger="click"
-            popper-class="col-setting-popover"
-          >
-            <el-button
-              slot="reference"
-              type="text"
-              icon="el-icon-setting"
-              size="large"
-              style="font-size:20px;margin-left:10px"
-            ></el-button>
-            <div class="col-setting-title">选择表列</div>
-            <el-checkbox-group v-model="visibleIndexs" :min="1" class="col-setting-group">
-              <el-checkbox
-                v-for="colInfo in columnInfos"
-                :label="colInfo.index"
-                :key="colInfo.index"
-                :disabled="colInfo.disabled"
-                v-show="!colInfo.disabled || showAlwaysShowColumnInCheckbox"
-              >{{ colInfo.label }}</el-checkbox>
-            </el-checkbox-group>
-          </el-popover>
-        </el-tooltip> -->
-        <el-tooltip
-          class="item"
-          :enterable="false"
-          effect="light"
-          content="刷新"
-          placement="top-start"
-        >
-          <el-button
-            type="text"
-            icon="el-icon-refresh-right"
-            size="large"
-            style="font-size:20px;margin-left:10px;"
-            @click="refresh"
-          ></el-button>
-        </el-tooltip>
-      </div>
-    </div>
-    <el-table
-      :data="data"
-      v-loading="loading"
-      ref="heartLogTable"
-      :columnVisibles="columnVisibles"
-      @selection-change="handleSelectMulti"
-      :showAlwaysShowColumnInCheckbox="true"
-      :dynamicColumnSetting="true"
-      tooltip-effect="dark"
-      style="width: 100%"
-      border
-      fit
-    >
-      <!-- <el-table-column type="selection" v-if="columnVisibles[0]" fixed="left" width="55"></el-table-column> -->
-      <el-table-column
-        prop="device_id"
-        label="设备ID"
-        align="center"
-        v-if="columnVisibles[1]"
-        width="100"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column
-        prop="device_imei"
-        label="设备Imei"
-         width="160"
-        align="center"
-        v-if="columnVisibles[2]"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column
-        prop="station_sn"
-        label="序列号"
-         width="160"
-        align="center"
-        v-if="columnVisibles[3]"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column
-        prop="core_version"
-        label="底层固件版本号"
-         width="160"
-        align="center"
-        v-if="columnVisibles[4]"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column
-        prop="script_version"
-        label="脚本版本号"
-        align="center"
-        v-if="columnVisibles[5]"
-        :show-overflow-tooltip="true"
-        width="140"
-      />
-      <el-table-column
-        prop="sim_iccid"
-        label="sim卡iccid"
-        align="center"
-        v-if="columnVisibles[6]"
-        :show-overflow-tooltip="true"
-        width="120"
-      />
-      <el-table-column
-        prop="sim_imsi"
-        label="sim卡imsi"
-        align="center"
-        width="120"
-        v-if="columnVisibles[7]"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column
-        prop="add_time"
-        label="请求时间"
-        align="center"
-        width="160"
-        v-if="columnVisibles[8]"
-        :show-overflow-tooltip="true"
-      >
-        
-      </el-table-column>
-      <el-table-column
-        prop="response_time"
-        label="响应时间"
-        align="center"
-         width="160"
-        v-if="columnVisibles[9]"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column
-        prop="net_rssi"
-        label="4G信号强度"
-        align="center"
-        v-if="columnVisibles[10]"
-        :show-overflow-tooltip="true"
-         width="120"
-      />
-      <el-table-column
-        prop="dev_reboot_time"
-        label="设备定时重启时间"
-        align="center"
-        v-if="columnVisibles[11]"
-        :show-overflow-tooltip="true"
-        width="180"
-      />
-      <el-table-column
-        prop="http_devops_interval"
-        label="http运维通道请求间隔"
-        align="center"
-        v-if="columnVisibles[12]"
-        :show-overflow-tooltip="true"
-        width="160"
-      />
-
-      <el-table-column
-        prop="error_log_report_url"
-        label="错误日志上报地址"
-        align="center"
-        v-if="columnVisibles[13]"
-        :show-overflow-tooltip="true"
-        width="140"
-      />
-        
-      <el-table-column
-        prop="boot_num"
-        label="设备开机次数"
-        align="center"
-        v-if="columnVisibles[14]"
-        :show-overflow-tooltip="true"
-        width="120"
-      />
-        
-      <el-table-column
-        prop="data_ip"
-        label="数据通道IP"
-        align="center"
-        v-if="columnVisibles[15]"
-        :show-overflow-tooltip="true"
-        width="140"
-      />
-        
-
-      <el-table-column
-        prop="data_tcp_port"
-        label="数据通道TCP端口"
-        align="center"
-        v-if="columnVisibles[16]"
-        :show-overflow-tooltip="true"
-        width="140"
-      />
-      <el-table-column
-        prop="data_udp_port"
-        label="数据通道UDP端口"
-        align="center"
-        v-if="columnVisibles[17]"
-        :show-overflow-tooltip="true"
-        width="140"
-      />
-      <el-table-column
-        prop="rfid_report_interval_rlian"
-        label="rfid数据上报周期"
-        align="center"
-        v-if="columnVisibles[18]"
-        :show-overflow-tooltip="true"
-        width="140"
-      />
-      <el-table-column
-        prop="rfid_buffer_max_count_rlian"
-        label="rfid缓存信号数"
-        align="center"
-        v-if="columnVisibles[19]"
-        :show-overflow-tooltip="true"
-        width="140"
-      />
-       <el-table-column
-        prop="rfid_enable_throttle_rlian"
-        label="是否启用节流模式"
-        align="center"
-        v-if="columnVisibles[26]"
-        :show-overflow-tooltip="true"
-        width="140"
-       >
-        <template slot-scope="record">
-            <span v-if="record.row.rfid_enable_throttle_rlian == 1">是</span>
-            <span v-else >否</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column
-        prop="rfid_offline_timeout_rlian"
-        label="rfid离线时间阀值"
-        align="center"
-        v-if="columnVisibles[21]"
-        :show-overflow-tooltip="true"
-        width="140"
-      />
-      <!-- <el-table-column
-        prop="dev_model"
-        label="设备型号"
-        align="center"
-        v-if="columnVisibles[22]"
-        :show-overflow-tooltip="true"
-        width="120"
-      /> -->
-      <el-table-column
-        prop="ram_used"
-        label="使用内存"
-        align="center"
-        v-if="columnVisibles[23]"
-        :show-overflow-tooltip="true"
-        width="120"
-      />
-      <el-table-column
-        prop="free_flash"
-        label="剩余flash空间"
-        align="center"
-        v-if="columnVisibles[24]"
-        :show-overflow-tooltip="true"
-        width="120"
-      />
-      <el-table-column
-        prop="rfid_min_diff_time"
-        label="首末次信号最小时间差"
-        align="center"
-        v-if="columnVisibles[25]"
-        :show-overflow-tooltip="true"
-        width="160"
-      />
-      <el-table-column
-        prop="response_content"
-        label="响应内容"
-        align="center"
-        v-if="columnVisibles[26]"
-        :show-overflow-tooltip="true"
-        width="320"
-      />
-     
-      
-
-      <!-- <el-table-column
-        label="操作"
-        min-width="240"
-        v-if="columnVisibles[28]"
-        align="center"
-        fixed="right"
-      >
-        <template slot-scope="record">
-          <el-button type="primary" icon="el-icon-edit" @click="handleUpdate(record.row)"></el-button>
-          <el-button type="primary" icon="el-icon-s-tools" @click="handleUpdateConfig(record.row)"></el-button>
-          <el-button type="primary" icon="el-icon-tickets" @click="handleShowLog(record.row)"></el-button>
-          <el-button type="danger" icon="el-icon-delete" @click="handleDelete(record.row.id)"></el-button>
-        </template>
-      </el-table-column> -->
-    </el-table>
-    <el-button
-      type="danger"
-      icon="el-icon-delete"
-      v-if="selectedIds.length>0"
-      style="margin-top:15px"
-      @click="handleMultiDelete()"
-    >删除</el-button>
-    <el-pagination
-      background
-      class="pagination-container"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-      :current-page="paginate.current"
-      
-      :page-sizes="paginate.sizes"
-      :page-size="paginate.limit"
-      :layout="paginate.layout"
-      :total="paginate.total"
-    />
-   
-  </div>
-  </el-dialog>
-</template>
-
-<script>
-import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
-
-export default {
-  props: ["displayVisible","currentRecord"],
-  name: "station",
-  mixins: [rlListOperate],
-
-  data() {
-    return {
-      title:'基站日志',
-      formName: 'dwstationConfig',
-      id:null,
-      url: "stationHeartbeat",
-      queryParam: {
-        device_id: "",
-      },
-      // defaultQueryParam: ["station_type"],
-      // exportUrl: "dwstation/export", //导出url
-      bmapVisible: false,
-      location: "",
-      formName: "station",
-      formVisible: false,
-      configFormVisible:false,
-      tableFormVisible:false,
-
-      tableVisible: false,
-      searchDisplay: true,
-
-
-      imgsVisible: false,
-      imgurl: "",
-
-      columnVisibles: new Array(29).fill(true), //初始为全true,并在每个列标签中使用v-if引用对应列下标的值。列下标从0开始。
-      columnInfos: [], // 所有列的信息
-      // hidenColumnIndexs: [10,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27], //初始隐藏的列的下标。列下标从 0 开始
-      hidenColumnIndexs: [], //初始隐藏的列的下标。列下标从 0 开始
-      visibleIndexs: [], // 可见列的下标集合
-      showAlwaysShowColumnInCheckbox: true, //设置是否在checkbox显示不允许隐藏的列信息
-      alwaysShowColumnIndexs: [0, 1, 2, 3, 4, 5, 6, 7, 9,11, 28] // 总是显示的列的下标（不可隐藏的列）。列下标从 0 开始
-    };
-  },
-  created() {
-  
-  },
-  methods: {
-
-    refresh() {
-      // this.queryParam.page = this.paginate.current;
-      this.getList();
-    },
-    // 处理初始隐藏的列
-    oprColumns(indexs, isShow) {
-      let self = this;
-      indexs.forEach(index => {
-        self.$set(self.columnVisibles, index, isShow);
-      });
-    },
-    handleDefaultcolumn(){
-      let self = this;
-
-      // if (self.$refs.heartLogTable.$slots.default) {
-      //   self.$refs.heartLogTable.$slots.default.forEach((columnIns, index) => {
-      //     if (columnIns.componentOptions === undefined) {
-      //       return;
-      //     }
-      //     let props = columnIns.componentOptions.propsData;
-      //     if (
-      //       props.label === undefined &&
-      //       props.type !== "selection" &&
-      //       props.type !== "index"
-      //     ) {
-      //       return;
-      //     }
-      //     // 保存所有列的信息
-      //     let label =
-      //         props.type === "selection"
-      //           ? "多选框"
-      //           : props.type === "index"
-      //           ? "索引"
-      //           : props.label,
-      //       // 默认多选框和索引不可隐藏
-      //       disabled =
-      //         props.type === "selection" || props.type === "index" ? true : false;
-      //     self.columnInfos.push({
-      //       label: label,
-      //       index: index,
-      //       disabled: disabled
-      //     });
-      //     // console.log(this.columnInfos)
-      //     // 记录初始展示的列的下标
-      //     if (self.hidenColumnIndexs.indexOf(index) === -1) {
-      //       self.visibleIndexs.push(index);
-      //     }
-      //   });
-      //   // 处理总是显示的列（不可隐藏的列）
-      //   self.alwaysShowColumnIndexs.forEach(
-      //     index => (self.columnInfos[index].disabled = true)
-      //   );
-      //   // 处理初始隐藏的列
-      //   self.oprColumns(self.hidenColumnIndexs, false);
-      // }
-    }
-    
-  },
-  watch: {
-    visibleIndexs(newValue, oldValue) {
-      let self = this;
-      var willHideIndexs = [],
-        willShowIndexs = [];
-
-      willShowIndexs = newValue.filter(index => {
-        return oldValue.indexOf(index) === -1;
-      });
-
-      willHideIndexs = oldValue.filter(index => {
-        return newValue.indexOf(index) === -1;
-      });
-
-      self.oprColumns(willShowIndexs, true);
-      self.oprColumns(willHideIndexs, false);
-    }
-  },
- computed: {
-    dialog: {
-      set(val) {
-        this.$emit("formCancel", val); // 表示将子组件改变的值传递给父组件
-      },
-      get() {
-        if (this.displayVisible) {
-          this.queryParam.device_id=this.currentRecord.station_code
-          this.getList();
-          this.handleDefaultcolumn();
-          
-        }
-         
-
-        return this.displayVisible; // 表示获取父组件的值
-      }
-    }
-  },
-  mounted() {
-    
-  }
-};
-</script>
-<style lang="scss" scoped>
-
-.col-setting-popover {
-  min-width: 100px;
-  padding: 9px 16px;
-  .col-setting-title {
-    color: #7f8b93;
-    font-size: 12px;
-  }
-  .col-setting-group {
-    .el-checkbox {
-      display: block;
-      margin-top: 5px;
-    }
-  }
-}
-.search-box-area {
-  width: 70%;
-  height: 44px;
-  float: left;
-}
-.search-operate-area {
-  width: 20%;
-  height: 44px;
-  float: left;
-}
-.search-item {
-  width: 25%;
-  height: 44px;
-  float: left;
-}
-#searchBox {
-  overflow: hidden;
-}
-</style>

src/views/device/wrench/index.scss

@@ -0,0 +1,109 @@
+.col-setting-popover {
+    min-width: 100px;
+    padding: 9px 16px;
+    .col-setting-title {
+      color: #7f8b93;
+      font-size: 12px;
+    }
+    .col-setting-group {
+      .el-checkbox {
+        display: block;
+        margin-top: 5px;
+      }
+    }
+  }
+  .icyuandianda {
+    font-size: 12px;
+  }
+  .search-box-area {
+    width: 70%;
+    height: 44px;
+    float: left;
+  }
+  .search-operate-area {
+    width: 20%;
+    height: 44px;
+    float: left;
+  }
+  .search-item {
+    width: 25%;
+    height: 44px;
+    float: left;
+  }
+  #searchBox {
+    overflow: hidden;
+  }
+  .upload-dialog .el-dialog__body {
+    padding: 0px, 20px !important;
+  }
+  .columnOption {
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: row-reverse;
+    .content {
+      width: 140px;
+      height: 100%;
+      background-color: rgb(255, 255, 255);
+      .head {
+        width: 100%;
+        height: 44px;
+        border-bottom: 1px solid #000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 12px;
+      }
+      .body {
+        width: 100%;
+        height: calc(100% - 88px);
+        box-sizing: border-box;
+        padding-top: 10px;
+        padding-left: 10px;
+        overflow-y: auto;
+        .items {
+          width: 100%;
+          height: 100%;
+          overflow-y: auto;
+          display: flex;
+          flex-direction: column;
+          .el-checkbox {
+            width: 100%;
+            height: 28px;
+            line-height: 28px;
+            margin-bottom: 14px;
+            display: inline-block;
+            font-family: PingFang SC;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 14px;
+            color: #000;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            box-sizing: border-box;
+            padding-left: 14px;
+          }
+          .el-checkbox:hover {
+            background-color: #f5f7fa;
+          }
+        }
+      }
+      .footer {
+        width: 100%;
+        height: 44px;
+        border-top: 1px solid #000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+  .el-tag {
+    border: 0px;
+  }

src/views/device/wrench/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <div class="filter-container" style="padding-bottom:0px">
+    <div class="filter-container" style="padding-bottom: 0px">
       <div class="search-box-area" id="searchBox">
         <div class="search-item">
           <el-cascader
@@ -18,8 +18,8 @@
         </div>
         <div class="search-item">
           <el-input
-            v-model="queryParam.name"
-            placeholder="基站名称"
+            v-model="queryParam.number"
+            placeholder="编号"
             clearable
             class="filter-item form-search-input fl"
             @keyup.enter.native="handleSearch"
@@ -27,8 +27,8 @@
         </div>
         <div class="search-item">
           <el-input
-            v-model="queryParam.mac"
-            placeholder="基站Mac"
+            v-model="queryParam.name"
+            placeholder="名称"
             clearable
             class="filter-item form-search-input fl"
             @keyup.enter.native="handleSearch"
@@ -36,55 +36,57 @@
         </div>
         <div class="search-item">
           <el-input
-            v-model="queryParam.shortcode"
-            placeholder="基站简码"
+            v-model="queryParam.model"
+            placeholder="型号"
             clearable
-            style="width:180px"
             class="filter-item form-search-input fl"
             @keyup.enter.native="handleSearch"
           />
         </div>
+        <div class="search-item">
+          <el-select
+            v-model="queryParam.is_used"
+            placeholder="使用状态"
+            class="filter-item form-search-input fl"
+            clearable
+          >
+            <el-option value="0" label="未使用">未使用</el-option>
+            <el-option value="1" label="已使用">已使用</el-option>
+          </el-select>
+        </div>
       </div>
       <div class="search-operate-area">
         <!-- <el-input v-model="queryParam.code" placeholder="唯一编码" clearable class="filter-item form-search-input fl" /> -->
-        <el-button class="filter-item search fl" icon="el-icon-search" @click="handleSearch">搜索</el-button>
-        <el-button class="filter-item fl" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
-        <!-- <el-button
+        <el-button
+          class="filter-item search fl"
+          icon="el-icon-search"
+          @click="handleSearch"
+          >搜索</el-button
+        >
+        <el-button
+          class="filter-item fl"
+          icon="el-icon-refresh"
+          @click="handleRefresh"
+          >重置</el-button
+        >
+        <el-button
           class="filter-item search fl"
-          :icon="this.searchDisplay?'el-icon-arrow-up':'el-icon-arrow-down'"
+          :icon="this.searchDisplay ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
           @click="searchDis"
-        >{{word}}</el-button> -->
+          >{{ word }}</el-button
+        >
       </div>
       <div class="list-operate-area">
-        <!-- 动态隐藏显示列 -->
-       
-          <el-popover
-            placement="bottom"
-            min-width="80"
-            trigger="click"
-            popper-class="col-setting-popover"
-          >
-            <el-button
-              slot="reference"
-              icon="el-icon-setting"
-              class="filter-item search fl"
-            >列设置</el-button>
-            <!-- <div class="col-setting-title">选择表列</div> -->
-            <el-checkbox-group v-model="visibleIndexs" :min="1" class="col-setting-group">
-              <el-checkbox
-                v-for="colInfo in columnInfos"
-                :label="colInfo.index"
-                :key="colInfo.index"
-                :disabled="colInfo.disabled"
-                v-show="!colInfo.disabled || showAlwaysShowColumnInCheckbox"
-              >{{ colInfo.label }}</el-checkbox>
-            </el-checkbox-group>
-          </el-popover>
-       
-         <el-button
+        <!-- <el-button size="mini" class="filter-item search fl" icon="el-icon-plus" @click="handleCreate">添加</el-button> -->
+        <el-button
+          class="filter-item search fl"
+          icon="el-icon-setting"
+          @click="showColumnOption"
+          >列设置</el-button
+        >
+        <el-button
           class="filter-item search fl"
           icon="el-icon-refresh-right"
-          style="margin-left:10px"
           @click="refresh"
           >刷新</el-button
         >
@@ -94,52 +96,50 @@
       :data="data"
       v-loading="loading"
       ref="multipleTable"
-      :columnVisibles="columnVisibles"
-      @selection-change="handleSelectMulti"
-      :showAlwaysShowColumnInCheckbox="true"
-      :dynamicColumnSetting="true"
+      @selection-change="hydraulicSelectMulti"
       @sort-change="sortChange"
+      :dynamicColumnSetting="true"
       tooltip-effect="dark"
       style="width: 100%"
       border
       fit
     >
-      <el-table-column type="selection" v-if="columnVisibles[0]" fixed="left" width="55"></el-table-column>
+      <el-table-column
+        type="selection"
+        fixed="left"
+        width="55"
+      ></el-table-column>
       <el-table-column
         prop="depart_name"
         label="所属部门"
         align="center"
-        v-if="columnVisibles[1]"
+        v-if="showColumn.depart_name"
         :show-overflow-tooltip="true"
+        width="150"
       />
       <el-table-column
-        prop="name"
-        label="基站名称"
+        prop="alarm_state_text"
+        label="告警状态"
         align="center"
-        v-if="columnVisibles[2]"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column
-        prop="mac"
-        label="基站mac"
-        align="center"
-        v-if="columnVisibles[3]"
-        :show-overflow-tooltip="true"
-        width="140"
-      />
-      <el-table-column
-        prop="shortcode"
-        label="基站简码"
-        align="center"
-        v-if="columnVisibles[4]"
-        :show-overflow-tooltip="true"
+        v-if="showColumn.alarm_state_text"
         width="120"
-      />
+      >
+        <template slot-scope="record">
+            <el-tag
+              effect="dark"
+              slot="reference"
+              :type="current_type[record.row.alarm_state] || ''"
+              size="small"
+              >{{ record.row.alarm_state_text }}</el-tag
+            >
+        </template>
+      </el-table-column>
+
       <el-table-column
         prop="net_state"
         label="在线状态"
         align="center"
-        v-if="columnVisibles[5]"
+        v-if="showColumn.net_state"
         :show-overflow-tooltip="true"
         width="120"
       >
@@ -153,406 +153,277 @@
           <el-tag type="danger" v-else>从未上线</el-tag>
         </template>
       </el-table-column>
-       <el-table-column
-        prop="open_status"
-        label="基站状态"
-        align="center"
-        v-if="columnVisibles[6]"
-        :show-overflow-tooltip="true"
-      >
-          <template slot-scope="record">
-            <el-tag type="success" v-if="record.row.open_status == 1"
-              >已开局</el-tag
-            >
-            <el-tag type="gray" v-else>未开局</el-tag>
-          </template>
-      </el-table-column>
       <el-table-column
-        prop="online_time"
-        label="在线时间"
+        prop="number"
+        label="编号"
         align="center"
-        v-if="columnVisibles[7]"
+        v-if="showColumn.number"
         :show-overflow-tooltip="true"
-        width="200"
-        sortable="custom"
+        width="150"
       />
-       <el-table-column
-        prop="open_time"
-        label="开局时间"
-        align="center"
-        v-if="columnVisibles[8]"
-        :show-overflow-tooltip="true"
-        width="160"
-        sortable="custom"
-      />
-       <el-table-column
-        prop="open_user_name"
-        label="开局员工"
-        align="center"
-        v-if="columnVisibles[9]"
-        :show-overflow-tooltip="true"
-      />
-       <el-table-column
-        prop="created_at"
-        label="入库时间"
+      <el-table-column
+        prop="name"
+        label="名称"
         align="center"
-        v-if="columnVisibles[10]"
+        v-if="showColumn.name"
         :show-overflow-tooltip="true"
-        width="160"
-        sortable="custom"
       />
-       <el-table-column
-        prop="creator_name"
-        label="入库员工"
+      <el-table-column
+        prop="brand"
+        label="品牌"
         align="center"
-        v-if="columnVisibles[11]"
+        v-if="showColumn.brand"
         :show-overflow-tooltip="true"
       />
-       <el-table-column
-        prop="remark"
-        label="备注"
+      <el-table-column
+        prop="supplier"
+        label="供应商"
         align="center"
-        v-if="columnVisibles[12]"
+        v-if="showColumn.supplier"
         :show-overflow-tooltip="true"
+        width="120"
       />
       <el-table-column
-        prop="model_text"
-        label="基站型号"
+        prop="model"
+        label="型号"
         align="center"
-        v-if="columnVisibles[13]"
+        v-if="showColumn.model"
         :show-overflow-tooltip="true"
       />
       <el-table-column
-        prop="address"
-        label="安装地址"
+        prop="out_date"
+        label="出厂日期"
         align="center"
-        v-if="columnVisibles[14]"
+        v-if="showColumn.out_date"
         :show-overflow-tooltip="true"
+        width="150"
       />
       <el-table-column
-        prop="sim_no"
-        label="SIM卡号"
+        prop="is_used"
+        label="使用状态"
         align="center"
-        v-if="columnVisibles[15]"
+        v-if="showColumn.is_used"
         :show-overflow-tooltip="true"
-        width="160"
-      />
+        width="120"
+      >
+        <template slot-scope="record">
+          <el-tag type="danger" v-if="record.row.is_used == 0"
+            >未使用</el-tag
+          >
+          <el-tag type="success" v-else>已使用</el-tag>
+        </template>
+      </el-table-column>
        <el-table-column
-        prop=" version"
-        label="基站版本"
+        prop="online_time"
+        label="在线时间"
         align="center"
-        v-if="columnVisibles[16]"
+        v-if="showColumn.online_time"
+        width="200"
+        sortable
+      />
+      <el-table-column
+        prop="creator_user"
+        label="导入用户"
+        align="center"
+        v-if="showColumn.creator_user"
         :show-overflow-tooltip="true"
-        width="160"
       />
-       <el-table-column
-        prop="longitude"
-        label="经度"
+      <el-table-column
+        prop="created_at"
+        label="添加时间"
         align="center"
-        v-if="columnVisibles[17]"
+        v-if="showColumn.created_at"
         :show-overflow-tooltip="true"
+        width="200"
+        sortable
       />
        <el-table-column
-        prop="latitude"
-        label="纬度"
+        prop="remark"
+        label="备注"
         align="center"
-        v-if="columnVisibles[18]"
-        :show-overflow-tooltip="true"
+        v-if="showColumn.remark"
+        width="100"
       />
       <el-table-column
         label="操作"
-        min-width="240"
-        v-if="columnVisibles[19]"
+        min-width="185"
         align="center"
         fixed="right"
       >
         <template slot-scope="record">
-          <el-button type="primary" icon="el-icon-edit" @click="handleUpdate(record.row)"></el-button>
-          <el-button type="danger" icon="el-icon-delete" @click="handleDelete(record.row.id)"></el-button>
+          <el-tooltip
+            content="修改"
+            placement="top"
+            :enterable="false"
+          >
+            <el-button
+              type="primary"
+              size="mini"
+              icon="el-icon-edit"
+              @click="handleUpdate(record.row)"
+            ></el-button>
+          </el-tooltip>
+          <el-tooltip
+            content="查看"
+            placement="top"
+            :enterable="false"
+          >
+            <el-button
+              type="primary"
+              size="mini"
+              icon="el-icon-view"
+              @click="handleDetail(record.row)"
+            ></el-button>
+          </el-tooltip>
         </template>
       </el-table-column>
     </el-table>
+    <transition name="fade">
+      <div class="columnOption" v-show="isShowColumn">
+        <div class="content">
+          <div class="head">选择显示字段</div>
+          <div class="body">
+            <el-checkbox v-model="checkList.depart_name" disabled>所属部门</el-checkbox>
+            <el-checkbox v-model="checkList.alarm_state_text" disabled>告警状态</el-checkbox>
+            <el-checkbox v-model="checkList.net_state">在线状态</el-checkbox>
+            <el-checkbox v-model="checkList.number">编号</el-checkbox>
+            <el-checkbox v-model="checkList.name">名称</el-checkbox>
+            <el-checkbox v-model="checkList.brand">品牌</el-checkbox>
+            <el-checkbox v-model="checkList.supplier">供应商</el-checkbox>
+            <el-checkbox v-model="checkList.model">型号</el-checkbox>
+            <el-checkbox v-model="checkList.out_date">出厂日期</el-checkbox>
+            <el-checkbox v-model="checkList.is_used">使用状态</el-checkbox>
+            <el-checkbox v-model="checkList.online_time">在线时间</el-checkbox>
+            <el-checkbox v-model="checkList.creator_user">导入用户</el-checkbox>
+            <el-checkbox v-model="checkList.created_at">添加时间</el-checkbox>
+            <el-checkbox v-model="checkList.remark">备注</el-checkbox>
+          </div>
+          <div class="footer">
+            <el-button size="small" type="primary" plain @click="saveColumn"
+              >保存列配置</el-button
+            >
+          </div>
+        </div>
+      </div>
+    </transition>
     <el-button
       type="primary"
       icon="el-icon-plus"
-      v-action="'Station@save'"
+      v-action="'Device@save'"
       :loading="downloadLoading"
       style="margin-top: 15px"
       @click="handleCreate"
       >添加</el-button
     >
     <el-button
-      type="warning"
-      icon="el-icon-download"
-      v-action="'Station@export_station'"
-      :loading="downloadLoading"
-      style="margin-top: 15px"
-      @click="exportExcel"
-      >导出</el-button
-    >
-    <el-button
-      type="success"
-      icon="el-icon-upload"
-      v-action="'Station@import_station'"
-      :loading="downloadLoading"
-      style="margin-top: 15px"
-      @click="importExcel"
-      >导入</el-button
-    >
-    <el-button
       type="danger"
       icon="el-icon-delete"
-      v-if="selectedIds.length>0"
-      style="margin-top:15px"
-      v-action="'Station@delete'"
+      v-if="selectedIds.length > 0"
+      style="margin-top: 15px"
+      v-action="'Hydraulic@delete'"
       @click="handleMultiDelete()"
-    >删除</el-button>
+      >删除</el-button
+    >
     <el-pagination
       background
       class="pagination-container"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="paginate.current"
-      
       :page-sizes="paginate.sizes"
       :page-size="paginate.limit"
       :layout="paginate.layout"
       :total="paginate.total"
     />
-    <!--------------------------------- 新增 修改弹框------------------------------------------------------->
-    <!-- 上传弹窗 -->
-    <el-dialog
-      title="导入基站"
-      append-to-body
-      width="400px"
-      :visible.sync="uploadDialogVisible"
-      custom-class="upload-dialog"
-    >
-      <el-cascader
-        v-model="selectedDepartId"
-        class="filter-item form-search-input fl"
-        :options="departments"
-        :props="{ checkStrictly: true, label: 'department_name', value: 'id' }"
-        style="margin-bottom: 10px"
-        placeholder="所属部门"
-        @change="changeDepart"
-      ></el-cascader>
-      <el-select v-model="selectedModelId" placeholder="设备型号" @change="changeModel" style="margin-bottom: 10px">
-        <el-option
-          v-for="item in models"
-          :key="item.value"
-          :label="item.text"
-          :value="item.value">
-        </el-option>
-      </el-select>
-      <el-upload
-        class="upload-demo"
-        drag
-        :action="actionUrl"
-        :headers="headers"
-        :before-upload="beforeUpload"
-        :show-file-list="true"
-        :on-change="onchange"
-        :on-remove="onremove"
-        :on-exceed="onexeced"
-        :limit="1"
-        ref="upload"
-      >
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">
-          将文件拖到此处，或
-          <em>点击上传</em>
-        </div>
-        <div class="el-upload__tip upload-tips" slot="tip">
-          只能上传xls/xlsx文件
-        </div>
-      </el-upload>
-      <el-link
-        type="primary"
-        href="https://rlfd.oss-cn-hangzhou.aliyuncs.com/catch_fd/excel_temp/fd_stations.xls"
-        style="margin-top: 10px"
-        >下载模板</el-link
-      >
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="uploadDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="importStations" :loading="loadings">{{
-          submitText
-        }}</el-button>
-      </span>
-    </el-dialog>
-    <form-model
+     <form-model
       @sendVal="closeDialog"
       :formModelVisible="formVisible"
       :title="title"
       :ref="formName"
-      :location="location"
     />
-    <!-- <heartLogTable
-      :displayVisible="tableFormVisible"
-      @formCancel="heartTableCancle"
-      :currentRecord="currentRecord"
-      ref="heartLog"
-    /> -->
-    <bmap-model @sendVal="closeBmapDialog" :bmapModelVisible="bmapVisible" />
+    <detail
+      :detailVisible="detailVisible"
+       @sendVal="closeDrawer"
+       :data="detail"
+    />
   </div>
 </template>
 
 <script>
 import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
-import formModel from "./formModel";
-import { getToken } from "../../../utils/auth";
 import { action } from "@/directive/permission/index.js";
-// import heartLogTable from "./heartLogTable";
-import bmapModel from "./bmapModel.vue";
+import detail from "./detail.vue"
+import formModel from './formModel.vue'
 export default {
-  name: "station",
-  mixins: [rlListOperate],
+  name: "hydraulic",
   directives: { action },
+  mixins: [rlListOperate],
   components: {
     formModel,
-    bmapModel,
-    // heartLogTable
+    detail,
   },
   data() {
     return {
-      url: "station",
+      url: "hydraulic",
       queryParam: {
-        department_id: "",
-        mac: "",
-        shortcode: "",
-        name:''
+        number: "",
+        department_id: [],
+        name: "",
+        model: "",
+        is_used: ""
       },
-      exportUrl: "station/export_station", //导出url
-      bmapVisible: false,
-      location: "",
-      formName: "station",
-      formVisible: false,
-      configFormVisible: false,
-      // tableFormVisible: false,
-       //导入请求url
-      loadings: false,
-      submitText: "确 定",
-      uploadDialogVisible:false,
-      actionUrl: process.env.VUE_APP_BASE_API + "/upload/file_excel",
-      headers: { authorization: "Bearer " + getToken() },
-      excel_url: "", //上传Excel返回的url
-      selectedDepartId: "",
-      selectedModelId:"",
-
-      departments:[],
-      models:[],
-      currentRecord: {},
-      tableVisible: false,
-
+      current_type: {
+        0: "success",
+        1: "danger",
+      },
+      formName:'hydraulic',
+      formVisible:false,
+      //搜索
       searchDisplay: true,
+      departments: [],
 
-      columnVisibles: new Array(20).fill(true), //初始为全true,并在每个列标签中使用v-if引用对应列下标的值。列下标从0开始。
-      columnInfos: [], // 所有列的信息
-      hidenColumnIndexs: [10,11,13,14,15,16,17,18], //初始隐藏的列的下标。列下标从 0 开始
-      visibleIndexs: [], // 可见列的下标集合
-      showAlwaysShowColumnInCheckbox: true, //设置是否在checkbox显示不允许隐藏的列信息
-      alwaysShowColumnIndexs: [0, 1, 2, 3, 4, 5, 6, 7,8,, 9, 12, 19] // 总是显示的列的下标（不可隐藏的列）。列下标从 0 开始
+      //详情
+      detailVisible:false,
+      detail:{},
+
+      isShowColumn: false,
+      // 列的配置化对象，存储配置信息
+      checkList: {},
+      showColumn: {
+        depart_name: true,
+        alarm_state_text: true,
+        net_state:true,
+        number: true,
+        name: true,
+        brand: true,
+        supplier: true,
+        model: true,
+        online_time: true
+      }
     };
   },
   created() {
     this.$http.get("departments").then((response) => {
       this.departments = response.data;
     });
-    this.$http.post('sysDictData/getOptions', {type: "StationModel"})
-                .then( resp => {
-                  this.models = resp.data
-     })
   },
   methods: {
-    changeDepart(v) {
-      this.selectedDepartId = v[v.length - 1];
-    },
-    changeModel(v){
-      this.selectedModelId = v;
-    },
-    importExcel() {
-      this.uploadDialogVisible = true;
-    },
+   
     handleChange(val) {
+      //  console.log(val)
       this.queryParam.department_id = val;
       this.handleSearch();
     },
-    handleUpdateConfig(record) {
-      this.currentRecord = record;
-      this.configFormVisible = true;
-    },
-    beforeUpload(file) {
-      if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
-        this.$notify.error({
-          title: "错误",
-          message: "上传文件只能为excel文件，且为xlsx,xls格式",
-        });
-        return false;
-      }
-      return true;
-    },
-    onremove() {
-      //移除文件钩子
-      this.excel_url = "";
-    },
-    onexeced(files) {
-      if (files.length == 1) {
-        this.$message.error("只能上传一个文件");
-      }
-    },
-    onchange(file, fileList) {
-      if (file.response) {
-        this.$message.success(file.response.data.msg);
-        this.excel_url = file.response.data.excel_url;
-      } else {
-        // console.log(file);
-      }
-    },
-    importStations() {
-      // console.log(this.excel_url);
-      var url = this.excel_url,depart_id = this.selectedDepartId,model_id = this.selectedModelId;
-      if (depart_id == "") {
-        this.$message.error("请选择部门");
-        return;
-      }
-      if (model_id == "") {
-        this.$message.error("请选择型号");
-        return;
-      }
-      if (url == "") {
-        this.$message.error("请上传文件");
-        return;
-      }
-      this.loadings = true;
-      this.submitText = "导入中";
-      this.$http
-        .post("import_station", { url: url, depart_id: depart_id,model_id:model_id })
-        .then((response) => {
-          if (response.data.error) {
-            this.$message.error(response.data.msg);
-          } else {
-            this.$message.success(response.data);
-          }
-          this.excel_url = "";
-          this.selectedDepartId = "";
-          this.$refs.upload.clearFiles();
-          this.loadings = false;
-          this.submitText = "确定";
-          this.uploadDialogVisible = false;
-          this.getList();
-        });
+    hydraulicSelectMulti(data) {
+      this.selectedIds = [];
+      data.forEach((item) => {
+        this.selectedIds.push(item.id);
+      });
     },
     refresh() {
       this.queryParam.page = this.paginate.current;
       this.getList();
     },
-    // 处理初始隐藏的列
-    oprColumns(indexs, isShow) {
-      let self = this;
-      indexs.forEach(index => {
-        self.$set(self.columnVisibles, index, isShow);
-      });
-    },
     searchDis() {
       this.searchDisplay = !this.searchDisplay;
       var searchBoxHeght = document.getElementById("searchBox");
@@ -561,25 +432,36 @@ export default {
       } else {
         searchBoxHeght.style.height = "auto";
       }
+    },
+    showColumnOption() {
+      this.isShowColumn = true;
+    },
+    saveColumn() {
+      localStorage.setItem("hydColumnSet", JSON.stringify(this.checkList));
+      this.isShowColumn = false;
+    },
+    handleDetail(row){
+      this.detailVisible = true,
+      this.detail = row
+    },
+    closeDrawer(){
+      this.detailVisible = false
     }
   },
   watch: {
-    visibleIndexs(newValue, oldValue) {
-      let self = this;
-      var willHideIndexs = [],
-        willShowIndexs = [];
-
-      willShowIndexs = newValue.filter(index => {
-        return oldValue.indexOf(index) === -1;
-      });
-
-      willHideIndexs = oldValue.filter(index => {
-        return newValue.indexOf(index) === -1;
-      });
-
-      self.oprColumns(willShowIndexs, true);
-      self.oprColumns(willHideIndexs, false);
-    }
+    // 监听复选框配置列所有的变化
+    checkList: {
+      handler: function (newnew, oldold) {
+        // console.log(newnew);
+        this.showColumn = newnew;
+        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
+        this.$nextTick(() => {
+          this.$refs.multipleTable.doLayout();
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
   },
   computed: {
     word: function () {
@@ -592,82 +474,29 @@ export default {
     },
   },
   mounted() {
-    let self = this;
-    if (self.$refs.multipleTable.$slots.default) {
-      self.$refs.multipleTable.$slots.default.forEach((columnIns, index) => {
-        if (columnIns.componentOptions === undefined) {
-          return;
-        }
-        let props = columnIns.componentOptions.propsData;
-        if (
-          props.label === undefined &&
-          props.type !== "selection" &&
-          props.type !== "index"
-        ) {
-          return;
-        }
-        // 保存所有列的信息
-        let label =
-            props.type === "selection"
-              ? "多选框"
-              : props.type === "index"
-              ? "索引"
-              : props.label,
-          // 默认多选框和索引不可隐藏
-          disabled =
-            props.type === "selection" || props.type === "index" ? true : false;
-        self.columnInfos.push({
-          label: label,
-          index: index,
-          disabled: disabled
-        });
-        // console.log(this.columnInfos)
-        // 记录初始展示的列的下标
-        if (self.hidenColumnIndexs.indexOf(index) === -1) {
-          self.visibleIndexs.push(index);
-        }
-      });
-      // 处理总是显示的列（不可隐藏的列）
-      self.alwaysShowColumnIndexs.forEach(
-        index => (self.columnInfos[index].disabled = true)
-      );
-      // 处理初始隐藏的列
-      self.oprColumns(self.hidenColumnIndexs, false);
+    // this.getIsUseVoice();
+    this.$nextTick(function () {
+      this.searchDis();
+    });
+    // 发请求得到checkListInitData的列的名字
+    if (localStorage.getItem("hydColumnSet")) {
+      this.checkList = JSON.parse(localStorage.getItem("hydColumnSet"));
+    } else {
+      this.checkList = {
+        depart_name: true,
+        alarm_state_text: true,
+        net_state:true,
+        number: true,
+        name: true,
+        brand: true,
+        supplier: true,
+        model: true,
+        online_time: true
+      };
     }
-  }
+  },
 };
 </script>
 <style lang="scss" scoped>
-.col-setting-popover {
-  min-width: 100px;
-  padding: 9px 16px;
-  .col-setting-title {
-    color: #7f8b93;
-    font-size: 12px;
-  }
-  .col-setting-group {
-    .el-checkbox {
-      display: block;
-      margin-top: 5px;
-    }
-  }
-}
-.search-box-area {
-  width: 70%;
-  height: 44px;
-  float: left;
-}
-.search-operate-area {
-  width: 20%;
-  height: 44px;
-  float: left;
-}
-.search-item {
-  width: 25%;
-  height: 44px;
-  float: left;
-}
-#searchBox {
-  overflow: hidden;
-}
-</style>
+ @import "@/views/device/hydraulic/index.scss";
+</style>