诊断样本模块上传

src/views/fault/diagnosefault.vue

@@ -1,5 +1,414 @@
 <template>
-     <div>
-          诊断样本
-     </div>
-</template>
+  <div>
+    <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="changzhan"
+              placeholder="请选择"
+              popper-class="select"
+              @change="
+                () => {
+                  getFengji();
+                }
+              "
+            >
+              <el-option
+                v-for="item in changzhanArray"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">风机：</div>
+          <div class="search-input">
+            <el-select
+              v-model="fengji"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+              :disabled="!changzhan"
+              @change="
+                () => {
+                  getTableData();
+                }
+              "
+            >
+              <el-option
+                v-for="item in fengjiArray"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">故障类型：</div>
+          <div class="search-input">
+            <el-select
+              v-model="fault"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+              @change="
+                () => {
+                  getTableData();
+                }
+              "
+            >
+              <el-option
+                v-for="item in faultArray"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">算法：</div>
+          <div class="search-input">
+            <el-select
+              v-model="method"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+              @change="
+                () => {
+                  getTableData();
+                }
+              "
+            >
+              <el-option
+                v-for="item in methodArray"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">日期：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="dateArray"
+              type="daterange"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              popper-class="date-select"
+              @change="
+                () => {
+                  getTableData();
+                }
+              "
+            >
+            </el-date-picker>
+          </div>
+        </div>
+        <div
+          class="query-actions"
+          :class="selectArray.length ? 'show' : 'hidden'"
+          style="margin-left: 0px"
+        >
+          <button class="btn green" @click="confirm">批量打标签</button>
+        </div>
+      </div>
+    </div>
+    <div class="df-table">
+      <el-table
+        :data="tableData"
+        class="custom-table"
+        height="80vh"
+        ref="gzTableRef"
+        @selection-change="getSelectArray"
+      >
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column prop="stationcn" align="center" label="场站" />
+        <el-table-column prop="windturbineid" align="center" label="风机" />
+        <el-table-column align="center" label="故障类型">
+          <template v-slot="scope">
+            <el-select
+              size="mini"
+              v-model="scope.row.faulttype"
+              placeholder="请选择"
+              popper-class="select"
+              :disabled="scope.row.confirm"
+              @change="
+                (res) => {
+                  changeTableItem(res, scope.row);
+                }
+              "
+            >
+              <el-option
+                v-for="item in faultArray"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              >
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="algname" align="center" label="算法名" />
+        <el-table-column prop="starttime" align="center" label="故障时间" />
+        <el-table-column prop="confirmName" align="center" label="是否确认" />
+
+        <el-table-column align="center" label="操作">
+          <template v-slot="scope">
+            <el-button type="text" @click="delItem(scope)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+import { ElMessageBox } from "element-plus";
+export default {
+  components: {},
+  data() {
+    return {
+      changzhan: "",
+      changzhanArray: [],
+      fengji: "",
+      fengjiArray: [],
+      fault: "",
+      faultArray: [],
+      method: "",
+      methodArray: [],
+      dateArray: [
+        new Date(new Date().getTime() - 86400000).formatDate(
+          "yyyy-MM-dd hh:mm:ss"
+        ),
+        new Date().formatDate("yyyy-MM-dd hh:mm:ss"),
+      ],
+      tableData: [],
+      selectArray: [],
+    };
+  },
+  created() {
+    this.getChangeZhan();
+    this.getFaultType();
+    this.getMethod();
+  },
+  methods: {
+    getSelectArray(res) {
+      this.selectArray = res;
+    },
+    // 获取场站列表
+    getChangeZhan() {
+      const that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "basic/station/all",
+        success(res) {
+          that.changzhanArray = res.data;
+          that.getFengji();
+        },
+      });
+    },
+
+    // 获取风机列表
+    getFengji(fjId) {
+      const that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "basic/windturbine/all",
+        data: {
+          station: that.changzhan,
+        },
+        success(res) {
+          that.fengjiArray = res.data;
+          that.fengji = fjId || "";
+          that.getTableData();
+        },
+      });
+    },
+
+    // 获取故障类型
+    getFaultType() {
+      const that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://192.168.1.18:9002/",
+        subUrl: "know/fault/type/all",
+        success(res) {
+          that.faultArray = res.data;
+        },
+      });
+    },
+
+    // 获取算法
+    getMethod() {
+      const that = this;
+      //  that.API.requestData({
+      //    method: "GET",
+      //    baseURL: "http://192.168.1.18:9002/",
+      //    subUrl: "",
+      //    success(res) {
+      //       that.methodArray=res.data;
+      //    },
+      //  });
+    },
+
+    // 获取表格数据
+    getTableData() {
+      const that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://192.168.10.5:9002/",
+        subUrl: "case/faultalg/list",
+        showLoading: true,
+        data: {
+          station: that.changzhan,
+          windturbineid: that.fengji,
+          faultType: that.fault,
+          starttime: that.dateArray[0],
+          endtime: that.dateArray[1],
+        },
+        success(res) {
+          res.data.forEach((ele) => {
+            ele.confirmName = ele.confirm ? "是" : "否";
+          });
+          that.tableData = res.data;
+        },
+      });
+    },
+
+    // 修改表格内单项故障类型
+    changeTableItem(id, data) {
+      const that = this;
+      const faultItem = that.faultArray.find((ele) => {
+        return ele.id === id;
+      });
+      data.faultcode = faultItem.code;
+      data.faulttype = faultItem.name;
+      that.API.request({
+        method: "POST",
+        baseURL: "http://192.168.10.5:9002/",
+        subUrl: "case/faultalg/edit",
+        showLoading: true,
+        data: Array.isArray(data) ? data : [data],
+        success() {
+          that.BASE.showMsg({
+            type: "success",
+            msg: "修改成功",
+          });
+          that.getTableData();
+        },
+      });
+    },
+
+    // 删除按钮逻辑
+    delItem({ row }) {
+      const that = this;
+      ElMessageBox.alert(`确定进行删除该条？此操作不可逆！`, "", {
+        showCancelButton: true,
+        showConfirmButton: true,
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        callback(action) {
+          if (action === "confirm") {
+            that.API.requestData({
+              method: "GET",
+              baseURL: "http://192.168.10.5:9002/",
+              subUrl: "case/faultalg/delete",
+              showLoading: true,
+              data: {
+                id: row.id,
+              },
+              success() {
+                that.BASE.showMsg({
+                  type: "success",
+                  msg: "修改成功",
+                });
+                that.getTableData();
+              },
+            });
+          }
+        },
+      });
+    },
+
+    confirm() {
+      const that = this;
+      if (
+        that.selectArray.some((ele) => {
+          return !ele.confirm;
+        })
+      ) {
+        ElMessageBox.alert(`是否生成结论样本`, "", {
+          showCancelButton: true,
+          showConfirmButton: true,
+          confirmButtonText: "生成",
+          cancelButtonText: "取消",
+          callback(action) {
+            if (action === "confirm") {
+              let data = [];
+
+              that.selectArray.forEach((ele) => {
+                if (!ele.confirm) {
+                  ele.confirm = true;
+                  data.push(ele);
+                }
+              });
+
+              that.API.request({
+                method: "POST",
+                baseURL: "http://192.168.10.5:9002/",
+                subUrl: "case/faultalg/confirm",
+                showLoading: true,
+                data,
+                success() {
+                  that.BASE.showMsg({
+                    type: "success",
+                    msg: "操作完成",
+                  });
+                  that.getTableData();
+                },
+              });
+            }
+          },
+        });
+      } else {
+        that.BASE.showMsg({
+          msg: "已生成结论样本的项目无法重复生成",
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.query-actions button {
+  white-space: nowrap;
+}
+.query-actions.show {
+  position: relative;
+  left: 0;
+  width: 90px;
+  transition: 0.2s;
+  overflow: hidden;
+}
+.query-actions.hidden {
+  position: relative;
+  left: 45px;
+  width: 0;
+  transition: 0.2s;
+  overflow: hidden;
+}
+</style>