|
|
@@ -0,0 +1,275 @@
|
|
|
+<template>
|
|
|
+ <div class="health-tab-3">
|
|
|
+ <div class="query mg-b-8">
|
|
|
+ <div class="query-items">
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">场站：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-select
|
|
|
+ v-model="station"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择"
|
|
|
+ popper-class="select"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in stations"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">机组</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-select
|
|
|
+ v-model="windturbine"
|
|
|
+ placeholder="请选择"
|
|
|
+ popper-class="select"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in windturbines"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">开始日期：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="starts"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ popper-class="date-select"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">结束日期：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="endts"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ popper-class="date-select"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <div class="unit svg-icon svg-icon-gray">
|
|
|
+ <svg-icon :svgid="''" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-actions" style="margin-right: 500px">
|
|
|
+ <button class="btn green" @click="onClickSearch">搜索</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="table-box">
|
|
|
+ <table class="com-table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th v-for="(col, index) of tableData.column" :key="index">
|
|
|
+ {{ col }}
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(row, index) of tableData.data" :key="index">
|
|
|
+ <td>{{ row.wfname }}</td>
|
|
|
+ <td>{{ row.wtid }}</td>
|
|
|
+ <td>{{row.operationdate ? new Date(row.operationdate).formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
|
|
|
+ <td>{{row.departuretime ? new Date(row.departuretime).formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
|
|
|
+ <td>{{ row.reason }}</td>
|
|
|
+ <td>{{ row.ismain }}</td>
|
|
|
+ <td>{{ row.status }}</td>
|
|
|
+ <td>
|
|
|
+ <button class="btn success" @click="onClickTrack(row)">消缺跟踪</button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-dialog title="消缺跟踪" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
|
|
|
+ <info-track />
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import InfoTrack from "./infotrack.vue";
|
|
|
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { InfoTrack, SvgIcon },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ stations: [], // 场站
|
|
|
+ windturbines: [], // 风机
|
|
|
+ station: "",
|
|
|
+ windturbine: "",
|
|
|
+ starts: "",
|
|
|
+ endts: new Date(),
|
|
|
+ tableData: {
|
|
|
+ column: ["场站", "风机编号", "任务开始时间", "任务接受时间", "检修原因", "受否下单", "任务状态", "操作"],
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ dialogVisible: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.starts = new Date(new Date().setMonth(new Date().getMonth()-40)).formatDate("yyyy-MM-dd");
|
|
|
+ this.requestStations();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 搜索按钮
|
|
|
+ onClickSearch() {
|
|
|
+ this.requestUnfinishedList();
|
|
|
+ },
|
|
|
+ // 消缺跟踪
|
|
|
+ onClickTrack(row){
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ // 获取场站
|
|
|
+ requestStations() {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ subUrl: "powercompare/windfarmAjax",
|
|
|
+ success(res) {
|
|
|
+ if (res.code == 200) {
|
|
|
+ that.stations = res.data;
|
|
|
+ that.station = that.stations[3].id;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取风机
|
|
|
+ requestWindturbines(wpid) {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ subUrl: "powercompare/windturbineAjax",
|
|
|
+ data: { wpId: wpid },
|
|
|
+ success(res) {
|
|
|
+ if (res.code == 200) that.windturbines = res.data;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取未完成消缺单列表
|
|
|
+ requestUnfinishedList() {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "POST",
|
|
|
+ subUrl: "recommen/unfinishedList",
|
|
|
+ data: {
|
|
|
+ wpId: that.station,
|
|
|
+ wtId: that.windturbine,
|
|
|
+ beginDate: new Date(that.starts).formatDate("yyyy-MM-dd"),
|
|
|
+ endDate: new Date(that.endts).formatDate("yyyy-MM-dd"),
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ if (res.code == 200) {
|
|
|
+ that.tableData.data = res.data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ station(val) {
|
|
|
+ this.windturbine = "";
|
|
|
+ this.requestWindturbines(val);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scope>
|
|
|
+@titleGray: #9ca5a8;
|
|
|
+@rowGray: #606769;
|
|
|
+@darkBack: #536268;
|
|
|
+.health-tab-3 {
|
|
|
+ .table-box {
|
|
|
+ border: 0.093vh solid @darkgray;
|
|
|
+ position: relative;
|
|
|
+ overflow: auto;
|
|
|
+ flex-grow: 1;
|
|
|
+ top: 1vh;
|
|
|
+ }
|
|
|
+ .com-table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ max-height: calc(100vh - 175px);
|
|
|
+
|
|
|
+ thead {
|
|
|
+ tr {
|
|
|
+ position: relative;
|
|
|
+ display: table;
|
|
|
+ table-layout: fixed;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ th {
|
|
|
+ background-color: fade(@darkBack, 20%);
|
|
|
+ padding: 1.481vh 0;
|
|
|
+ color: @titleGray;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: @fontsize-s;
|
|
|
+ position: sticky;
|
|
|
+ // top: 0;
|
|
|
+
|
|
|
+ &.light {
|
|
|
+ color: @green;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ tbody {
|
|
|
+ display: block;
|
|
|
+ max-height: 100%;
|
|
|
+ overflow-y: scroll;
|
|
|
+
|
|
|
+ tr {
|
|
|
+ display: table;
|
|
|
+ table-layout: fixed;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ &:nth-child(2n) {
|
|
|
+ background-color: fade(@rowGray, 20%);
|
|
|
+ }
|
|
|
+
|
|
|
+ td {
|
|
|
+ padding: 0.556vh 0;
|
|
|
+ color: @rowGray;
|
|
|
+ text-align: center;
|
|
|
+ font-size: @fontsize-s;
|
|
|
+ overflow: hidden; //隐藏文字
|
|
|
+ text-overflow: ellipsis; //显示 ...
|
|
|
+ white-space: nowrap; //不换行
|
|
|
+
|
|
|
+ &.light {
|
|
|
+ color: @green !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.num {
|
|
|
+ font-family: "Bicubik";
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
yangxiao