monitorTable.vue 8.36 KB
Newer Older
neogcg's avatar
neogcg committed
1 2 3 4 5 6
<template>
  <div>
    <div class="leakage-top">
      <div style="color: #666666"></div>

      <div class="operate-btn">
neogcg's avatar
neogcg committed
7 8 9
        <delids :multipleSelection2="multipleSelection" @del="del()"
          >删除</delids
        >
neogcg's avatar
neogcg committed
10
        <el-button type="primary" @click="refresh">刷新</el-button>
neogcg's avatar
neogcg committed
11
        <el-button type="primary" @click="block = !block">查询</el-button>
neogcg's avatar
neogcg committed
12 13
        <el-button type="primary" @click="exportData">导出</el-button>
      </div>
neogcg's avatar
neogcg committed
14
    </div>
neogcg's avatar
neogcg committed
15 16 17 18 19 20 21 22
    <el-form
      class="search-div"
      v-if="block"
      :model="monitorForm"
      :inline="true"
      size="mini"
    >
      <el-form-item label="设备名称:">
neogcg's avatar
neogcg committed
23 24 25 26 27 28
        <el-input
          placeholder="请输入设备名称"
          v-model="monitorForm.equipName"
          clearable
        >
        </el-input>
neogcg's avatar
neogcg committed
29 30
      </el-form-item>
      <el-form-item label="设备身份编号:">
neogcg's avatar
neogcg committed
31 32 33 34 35 36
        <el-input
          placeholder="请输入设备身份编号"
          v-model="monitorForm.equipCode"
          clearable
        >
        </el-input>
neogcg's avatar
neogcg committed
37 38 39
      </el-form-item>
      <el-form-item label="IP地址:">
        <el-input placeholder="请输入IP地址" v-model="monitorForm.ip" clearable>
neogcg's avatar
neogcg committed
40
        </el-input>
neogcg's avatar
neogcg committed
41 42
      </el-form-item>
      <el-form-item label="所在铁路线:">
neogcg's avatar
neogcg committed
43 44
        <el-select
          placeholder="请选择所在铁路线"
neogcg's avatar
neogcg committed
45
          v-model="monitorForm.wayId"
neogcg's avatar
neogcg committed
46 47 48
          clearable
          @change="changerailWay()"
        >
neogcg's avatar
neogcg committed
49
          <el-option
neogcg's avatar
neogcg committed
50 51 52 53 54 55
            v-for="item in railWaySelect"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
neogcg's avatar
neogcg committed
56 57
      </el-form-item>
      <el-form-item label="所在站点:">
neogcg's avatar
neogcg committed
58 59 60
        <el-select
          placeholder="请选择所在站点"
          v-model="monitorForm.siteId"
neogcg's avatar
neogcg committed
61
          @change="changesite()"
neogcg's avatar
neogcg committed
62 63
          clearable
        >
neogcg's avatar
neogcg committed
64
          <el-option
neogcg's avatar
neogcg committed
65 66 67 68 69 70
            v-for="item in stationSelect2"
            :key="item.id"
            :label="item.siteName"
            :value="item.id"
          ></el-option>
        </el-select>
neogcg's avatar
neogcg committed
71 72
      </el-form-item>
      <el-form-item label="所在FSU:">
neogcg's avatar
neogcg committed
73 74 75 76 77
        <el-select
          placeholder="请选择所在FSU"
          v-model="monitorForm.fsuId"
          clearable
        >
neogcg's avatar
neogcg committed
78
          <el-option
neogcg's avatar
neogcg committed
79 80 81 82 83 84
            v-for="item in fsuSelect2"
            :key="item.id"
            :label="item.equipName"
            :value="item.id"
          ></el-option>
        </el-select>
neogcg's avatar
neogcg committed
85
      </el-form-item>
neogcg's avatar
neogcg committed
86 87 88
      <el-form-item>
        <el-button type="success" @click="searchQuery()">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
neogcg's avatar
neogcg committed
89 90
      </el-form-item>
    </el-form>
neogcg's avatar
neogcg committed
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
    <el-table
      ref="multipleTable"
      class="statistics-table"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      :row-style="{ height: '50px' }"
      :header-cell-style="{
        background: '#eaf1fe',
        color: '#000',
        fontWeight: 700,
        height: '50px',
      }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column
        prop="equipName"
        label="设备名"
        show-overflow-tooltip
        align="center"
      />
neogcg's avatar
neogcg committed
115 116 117
      <el-table-column prop="equipCode" label="设备身份编号" align="center" />
      <el-table-column prop="ip" label="IP" align="center" />
      <el-table-column prop="railWayName" label="所在铁路线" align="center" />
neogcg's avatar
neogcg committed
118 119
      <el-table-column prop="siteName" label="所在站点" align="center" />
      <el-table-column prop="fsuName" label="所在FSU" align="center" />
neogcg's avatar
neogcg committed
120 121 122 123 124 125 126 127 128 129 130 131 132
      <el-table-column
        prop="action"
        label="详细信息"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="{ row }">
          <el-link type="primary" :underline="false" @click="handleView(row)"
            >查看</el-link
          >
        </template>
      </el-table-column>
    </el-table>
neogcg's avatar
neogcg committed
133
    <Pagination
neogcg's avatar
neogcg committed
134 135
      :limit="monitorForm.size"
      :page="monitorForm.current"
neogcg's avatar
neogcg committed
136 137 138 139 140 141 142 143 144 145 146
      :total="total"
      class="pagination"
      @pagination="handlePageChange"
    />
  </div>
</template>
<script>
import {
  monitorEquiplist,
  monitorEquipbatchDelete,
  monitorEquipdetail,
neogcg's avatar
neogcg committed
147 148 149
  railWaylist,
  selectForSite,
  selectForFsu,
neogcg's avatar
neogcg committed
150
} from "../../api";
neogcg's avatar
neogcg committed
151
import { successAlert, warningAlert } from "@/utils/alert";
neogcg's avatar
neogcg committed
152 153
import download from "@/utils/download";
import { exportMonitorEquip } from "@/api/export";
neogcg's avatar
neogcg committed
154 155
export default {
  props: [],
neogcg's avatar
neogcg committed
156
  components: {},
neogcg's avatar
neogcg committed
157 158
  data() {
    return {
neogcg's avatar
neogcg committed
159
      railWaySelect: [],
neogcg's avatar
neogcg committed
160 161
      stationSelect2: [],
      fsuSelect2: [],
neogcg's avatar
neogcg committed
162
      monitorForm: formInit(),
neogcg's avatar
neogcg committed
163 164
      tableData: [],
      params: {
neogcg's avatar
neogcg committed
165 166
        current: 1,
        size: 10,
neogcg's avatar
neogcg committed
167 168 169 170
      },
      total: 10,
      multipleSelection: [],
      ids: [],
neogcg's avatar
neogcg committed
171
      block: 0,
neogcg's avatar
neogcg committed
172
      istrue: 0,
neogcg's avatar
neogcg committed
173
      exids: [],
neogcg's avatar
neogcg committed
174 175
    };
  },
neogcg's avatar
neogcg committed
176
  computed: {},
neogcg's avatar
neogcg committed
177
  methods: {
neogcg's avatar
neogcg committed
178
    changerailWay() {
neogcg's avatar
neogcg committed
179 180 181
      selectForSite({ wayId: this.monitorForm.wayId }).then((res) => {
        this.stationSelect2 = res;
      });
neogcg's avatar
neogcg committed
182
    },
neogcg's avatar
neogcg committed
183
    changesite() {
neogcg's avatar
neogcg committed
184 185 186 187
      selectForFsu({ siteId: this.monitorForm.siteId }).then((res) => {
        this.fsuSelect2 = res;
        console.log(this.fsuSelect2);
      });
neogcg's avatar
neogcg committed
188
    },
neogcg's avatar
neogcg committed
189 190 191 192 193 194
    tableRowClassName({ row, rowIndex }) {
      return rowIndex % 2 === 0 ? "" : "single-row";
    },
    changeType(item) {
      this.activeName = item.key;
    },
neogcg's avatar
neogcg committed
195
    del() {
neogcg's avatar
neogcg committed
196
      let ids = this.ids;
neogcg's avatar
neogcg committed
197
      monitorEquipbatchDelete({ ids }).then((res) => {
neogcg's avatar
neogcg committed
198
        if (res.code == 200) {
neogcg's avatar
neogcg committed
199
          successAlert("删除成功");
neogcg's avatar
neogcg committed
200

neogcg's avatar
neogcg committed
201
          this.getTableData();
neogcg's avatar
neogcg committed
202 203
        } else {
          warningAlert("删除失败");
neogcg's avatar
neogcg committed
204 205
        }
      });
neogcg's avatar
neogcg committed
206 207
    },
    refresh() {
neogcg's avatar
neogcg committed
208
      this.reset();
neogcg's avatar
neogcg committed
209
    },
neogcg's avatar
neogcg committed
210
    searchQuery() {
neogcg's avatar
neogcg committed
211
      this.istrue = 1;
neogcg's avatar
neogcg committed
212 213 214
      this.getTableData();
    },
    reset() {
neogcg's avatar
neogcg committed
215
      this.monitorForm = formInit();
neogcg's avatar
neogcg committed
216
      this.searchQuery();
neogcg's avatar
neogcg committed
217
    },
neogcg's avatar
neogcg committed
218

neogcg's avatar
neogcg committed
219
    exportData() {
neogcg's avatar
neogcg committed
220 221 222 223
       if (this.exids.length == 0) {
        this.$message.warning("暂无数据");
        return false;
      } else {
neogcg's avatar
neogcg committed
224 225 226
      exportMonitorEquip({ ids: this.exids }).then((res) => {
        download(res, "vnd.ms-excel", `监测设备表.xls`);
      });
neogcg's avatar
neogcg committed
227
      }
neogcg's avatar
neogcg committed
228
    },
neogcg's avatar
neogcg committed
229 230 231 232 233 234 235
    handleSelectionChange(val) {
      this.multipleSelection = val;

      this.ids = this.multipleSelection.map((i) => i.id);
    },

    handleView(row) {
neogcg's avatar
neogcg committed
236 237 238 239 240 241
      this.$router.push({
        path: "/detail",
        query: {
          id: row.id,
          type: 4,
        },
neogcg's avatar
neogcg committed
242 243 244
      });
    },
    handlePageChange(pageData) {
neogcg's avatar
neogcg committed
245 246
      this.monitorForm.size = pageData.size;
      this.monitorForm.current = pageData.page;
neogcg's avatar
neogcg committed
247 248 249
      this.getTableData();
    },
    getTableData() {
neogcg's avatar
neogcg committed
250
      monitorEquiplist(this.monitorForm).then((res) => {
neogcg's avatar
neogcg committed
251 252 253
        let list = res.records || [];
        this.tableData = list;
        this.total = res.total;
neogcg's avatar
neogcg committed
254
        this.exids = list.map((i) => i.id);
neogcg's avatar
neogcg committed
255
        if (this.istrue == 1) {
neogcg's avatar
neogcg committed
256
          if (this.tableData.length) {
yanzhongrong's avatar
yanzhongrong committed
257
            successAlert("操作成功");
neogcg's avatar
neogcg committed
258 259 260 261 262
          } else {
            warningAlert("查询结果为空");
          }
          this.istrue = 0;
        }
neogcg's avatar
neogcg committed
263 264
      });
    },
neogcg's avatar
neogcg committed
265 266 267 268 269 270 271 272 273
    getAllWay() {
      railWaylist(this.params).then((res) => {
        this.railWaySelect = res.records;
        if (res.total > this.params.size) {
          this.params.size = res.total;
          this.getAllWay();
        }
      });
    },
neogcg's avatar
neogcg committed
274
  },
neogcg's avatar
neogcg committed
275
  created() {
neogcg's avatar
neogcg committed
276 277 278
    var that = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
neogcg's avatar
neogcg committed
279
      if (key == 13) {
neogcg's avatar
neogcg committed
280 281 282
        that.searchQuery();
      }
    };
neogcg's avatar
neogcg committed
283 284 285
  },
  mounted() {
    this.getTableData();
neogcg's avatar
neogcg committed
286
    this.getAllWay();
neogcg's avatar
neogcg committed
287 288
  },
};
neogcg's avatar
neogcg committed
289 290 291 292 293 294 295 296 297 298 299 300 301 302
function formInit(data = {}) {
  return {
    wayId: "",
    parentId: "",
    ip: "",
    siteId: "",
    fsuId: "",
    equipCode: "",
    equipName: "",
    current: 1,
    size: 10,
    ...data,
  };
}
neogcg's avatar
neogcg committed
303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344
</script>
<style lang="scss" scoped>
.leakage-cable {
  .leakage-top {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  & ::v-deep .cell {
    color: #333333;
  }
  & ::v-deep .stripe {
    background-color: #eaf1fe;
  }
  & ::v-deep .red {
    background-color: #f00;
  }
  & ::v-deep .green {
    background-color: green;
  }
  .page {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    .pageNum {
      margin: 0 20px;
    }
  }
}
</style>
<style lang="scss">
.statistics-table {
  .single-row {
    background: #f1f6ff;
  }
  td {
    padding: 5px !important;
  }
}
</style>