Update API target in vue.config.js and enhance operation warning result view: improve UI elements, rename labels for clarity, and streamline form handling.

src/views/system/operationWarnresult/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="app-container">
     <el-form
-      :model="queryParams"
+      v-show="showSearch"
       ref="queryForm"
+      :model="queryParams"
       size="small"
       :inline="true"
-      v-show="showSearch"
-      label-width="68px"
+      class="app-container--search"
     >
-      <el-form-item label="预警时间">
+      <el-form-item label="发生时间">
         <el-date-picker
           v-model="daterangeWarnTime"
           style="width: 240px"
@@ -18,12 +18,12 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           :default-time="['00:00:00', '23:59:59']"
-        ></el-date-picker>
+        />
       </el-form-item>
-      <el-form-item label="商品名字" prop="goodsSkuName">
+      <el-form-item label="商品名称" prop="goodsSkuName">
         <el-input
           v-model="queryParams.goodsSkuName"
-          placeholder="请输入商品名字"
+          placeholder="请输入商品名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -50,31 +50,18 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="比对状态" prop="status">
-        <el-select
-          v-model="queryParams.compareStatus"
-          placeholder="请选择比对状态"
-          clearable
-        >
-          <el-option
-            v-for="dict in dict.type.zs_operation_compare_status"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item>
         <el-button
           type="primary"
           icon="el-icon-search"
           size="mini"
           @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-          >重置</el-button
-        >
+        >搜索</el-button>
+        <el-button
+          icon="el-icon-refresh"
+          size="mini"
+          @click="resetQuery"
+        >重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -102,31 +89,26 @@
       </el-col>-->
       <el-col :span="1.5">
         <el-button
+          v-hasPermi="['system:operationWarnresult:remove']"
           type="danger"
           plain
           icon="el-icon-delete"
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
-          v-hasPermi="['system:operationWarnresult:remove']"
-          >删除</el-button
-        >
+        >删除</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
+          v-hasPermi="['system:operationWarnresult:export']"
           type="warning"
           plain
           icon="el-icon-download"
           size="mini"
           @click="handleExport"
-          v-hasPermi="['system:operationWarnresult:export']"
-          >导出</el-button
-        >
+        >导出</el-button>
       </el-col>
-      <right-toolbar
-        :showSearch.sync="showSearch"
-        @queryTable="getList"
-      ></right-toolbar>
+      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
     </el-row>
 
     <el-table
@@ -135,20 +117,20 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键ID" align="center" prop="id" v-if="false" />
+      <el-table-column v-if="false" label="主键ID" align="center" prop="id" />
       <el-table-column
-        label="预警时间"
+        label="发生时间"
         align="center"
         prop="warnTime"
         width="180"
       >
         <template slot-scope="scope">
           <span>{{
-            parseTime(scope.row.warnTime, "{y}-{m}-{d} {h}:{i}:{s}")
+            parseTime(scope.row.warnTime, '{y}-{m}-{d} {h}:{i}:{s}')
           }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="商品" align="center" prop="goodsSkuName">
+      <el-table-column label="预警商品" align="center" prop="goodsSkuName">
         <template slot-scope="scope">
           <div class="goods--info">
             <el-link
@@ -165,39 +147,55 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="预警价格" align="center" prop="initPrice">
+      <el-table-column
+        width="150"
+        label="预警价格"
+        align="center"
+        prop="initPrice"
+      >
         <template slot-scope="scope">
-          <div v-if="scope.row.curPrice" class="price--info">
-            <span style="color: #303133; font-size: 14px; margin-right: 2px;">￥{{ scope.row.curPrice }}</span>
-            <i class="icon-arrow-up" style="color: green;" v-if="scope.row.curPrice > scope.row.initPrice"></i>
-            <i class="icon-arrow-down" style="color: red;" v-else></i>
+          <div v-if="scope.row.curPrice" class="price--info" style="text-align: left; display: flex;">
+            
+
+            <span style="display: inline-flex; align-items: center; justify-content: center; text-align: center; width: 30px; padding: 2px;">
+              <i
+                v-if="
+                parseFloat(scope.row.curPrice) > parseFloat(scope.row.initPrice)
+              "
+              class="el-icon-top"
+              style="color: green; font-size: 16px"
+            />
+            <i
+              v-else-if="
+                parseFloat(scope.row.curPrice) ===
+                  parseFloat(scope.row.initPrice)
+              "
+              class="el-icon-minus"
+              style="color: #999; font-size: 16px"
+            />
+              <i
+                v-else
+                class="el-icon-bottom"
+                style="color: red; font-size: 16px"
+              />
+            </span>
+
+            <span
+              style="color: #303133; font-size: 14px;"
+            >￥{{ scope.row.curPrice }}</span>
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="预警方式" align="center" prop="warnTypes">
-        <template slot-scope="scope">
-          <dict-tag
-            :options="dict.type.zs_operation_warn_types"
-            :value="scope.row.warnTypes"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="通知内容/结果"
-        align="center"
-        prop="warnContent"
-      />
       <el-table-column
-        label="图片快照"
+        width="120"
+        label="通知方式"
         align="center"
-        prop="snapshotUrl"
-        width="100"
+        prop="warnTypes"
       >
         <template slot-scope="scope">
-          <image-preview
-            :src="scope.row.snapshotUrl"
-            :width="50"
-            :height="50"
+          <dict-tag
+            :options="dict.type.zs_operation_warn_types"
+            :value="scope.row.warnTypes"
           />
         </template>
       </el-table-column>
@@ -209,46 +207,42 @@
           />
         </template>
       </el-table-column>
-      <el-table-column label="处理状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag
-            :options="dict.type.zs_operation_status"
-            :value="scope.row.status"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column label="比对状态" align="center" prop="compareStatus">
-        <template slot-scope="scope">
-          <dict-tag
-            :options="dict.type.zs_operation_compare_status"
-            :value="scope.row.compareStatus"
-          />
-        </template>
-      </el-table-column>
       <el-table-column
         label="操作"
         align="center"
+        width="220"
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
           <el-button
+            v-if="scope.row.status == 1"
+            v-hasPermi="['system:operationWarnresult:edit']"
             size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="el-icon-circle-check"
             @click="handleUpdate(scope.row)"
-            v-if="scope.row.compareStatus == 1"
-            :disabled="scope.row.status === 1"
-            v-hasPermi="['system:operationWarnresult:edit']"
-            >处理</el-button
-          >
+          >处理</el-button>
+
+          <span
+            v-else
+            class="text-info"
+            style="margin-right: 10px"
+          >已处理</span>
+
           <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-camera"
+            @click="handleView(scope.row)"
+          >快照</el-button>
+
+          <el-button
+            v-hasPermi="['system:operationWarnresult:remove']"
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:operationWarnresult:remove']"
-            >删除</el-button
-          >
+          >删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -262,15 +256,8 @@
     />
 
     <!-- 添加或修改预警结果对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button :loading="buttonLoading" type="primary" @click="submitForm"
-          >确 定</el-button
-        >
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
+      <div class="warn-result" v-html="warnResult" />
     </el-dialog>
   </div>
 </template>
@@ -281,12 +268,17 @@ import {
   getOperationWarnresult,
   delOperationWarnresult,
   addOperationWarnresult,
-  updateOperationWarnresult,
-} from "@/api/system/operationWarnresult";
+  updateOperationWarnresult
+} from '@/api/system/operationWarnresult'
 
 export default {
-  name: "OperationWarnresult",
-  dicts: ["zs_operation_warn_types", "zs_operation_status","zs_operation_compare_status","zs_operation_platform"],
+  name: 'OperationWarnresult',
+  dicts: [
+    'zs_operation_warn_types',
+    'zs_operation_status',
+    'zs_operation_compare_status',
+    'zs_operation_platform'
+  ],
   data() {
     return {
       // 按钮loading
@@ -306,7 +298,7 @@ export default {
       // 预警结果表格数据
       operationWarnresultList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       // 图片快照时间范围
@@ -319,40 +311,42 @@ export default {
         goodsSkuName: undefined,
         goodsSkuSn: undefined,
         status: undefined,
-        compareStatus: undefined,
+        compareStatus: undefined
       },
       // 表单参数
       form: {},
+      // 预警结果
+      warnResult: '',
       // 表单校验
       rules: {
         snapshotUrl: [
-          { required: true, message: "图片快照不能为空", trigger: "blur" },
-        ],
-      },
-    };
+          { required: true, message: '图片快照不能为空', trigger: 'blur' }
+        ]
+      }
+    }
   },
   created() {
-    this.getList();
+    this.getList()
   },
   methods: {
     /** 查询预警结果列表 */
     getList() {
-      this.loading = true;
-      this.queryParams.params = {};
-      if (null != this.daterangeWarnTime && "" != this.daterangeWarnTime) {
-        this.queryParams.params["beginWarnTime"] = this.daterangeWarnTime[0];
-        this.queryParams.params["endWarnTime"] = this.daterangeWarnTime[1];
+      this.loading = true
+      this.queryParams.params = {}
+      if (this.daterangeWarnTime != null && this.daterangeWarnTime != '') {
+        this.queryParams.params['beginWarnTime'] = this.daterangeWarnTime[0]
+        this.queryParams.params['endWarnTime'] = this.daterangeWarnTime[1]
       }
       listOperationWarnresult(this.queryParams).then((response) => {
-        this.operationWarnresultList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+        this.operationWarnresultList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -367,118 +361,105 @@ export default {
         warnTypes: undefined,
         warnContent: undefined,
         status: undefined,
-        snapshotUrl: undefined,
-      };
-      this.resetForm("form");
+        snapshotUrl: undefined
+      }
+      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.daterangeWarnTime = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.daterangeWarnTime = []
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.id);
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
+      this.ids = selection.map((item) => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加预警结果";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      //将状态设置为已处理
-      row.status = 1;
-      updateOperationWarnresult(row)
-        .then((response) => {
-          this.$modal.msgSuccess("处理成功");
-          this.open = false;
-          this.getList();
-        })
-        .finally(() => {
-          this.buttonLoading = false;
-        });
-      /*       this.loading = true;
-      this.reset();
-      const id = row.id || this.ids
-      getOperationWarnresult(id).then(response => {
-        this.loading = false;
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改预警结果";
-      }); */
+    handleView(row) {
+      // 将状态设置为已处理
+      this.open = true
+      this.title = '预警结果'
+      this.warnResult = row.warnContent
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate((valid) => {
+      this.$refs['form'].validate((valid) => {
         if (valid) {
-          this.buttonLoading = true;
+          this.buttonLoading = true
           if (this.form.id != null) {
             updateOperationWarnresult(this.form)
               .then((response) => {
-                this.$modal.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
+                this.$modal.msgSuccess('修改成功')
+                this.open = false
+                this.getList()
               })
               .finally(() => {
-                this.buttonLoading = false;
-              });
+                this.buttonLoading = false
+              })
           } else {
             addOperationWarnresult(this.form)
               .then((response) => {
-                this.$modal.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
+                this.$modal.msgSuccess('新增成功')
+                this.open = false
+                this.getList()
               })
               .finally(() => {
-                this.buttonLoading = false;
-              });
+                this.buttonLoading = false
+              })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids;
+      const ids = row.id || this.ids
       this.$modal
         .confirm('是否确认删除预警结果编号为"' + ids + '"的数据项？')
         .then(() => {
-          this.loading = true;
-          return delOperationWarnresult(ids);
+          this.loading = true
+          return delOperationWarnresult(ids)
         })
         .then(() => {
-          this.loading = false;
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
+          this.loading = false
+          this.getList()
+          this.$modal.msgSuccess('删除成功')
         })
         .catch(() => {})
         .finally(() => {
-          this.loading = false;
-        });
+          this.loading = false
+        })
     },
     /** 导出按钮操作 */
     handleExport() {
       this.download(
-        "system/operationWarnresult/export",
+        'system/operationWarnresult/export',
         {
-          ...this.queryParams,
+          ...this.queryParams
         },
         `operationWarnresult_${new Date().getTime()}.xlsx`
-      );
-    },
-  },
-};
+      )
+    }
+  }
+}
 </script>
-
+<style>
+.warn-result table{
+  width: 100% !important;
+}
+.warn-result table td a {
+  display: none;
+}
+.warn-result table img{
+  width: 100% !important;
+}
+</style>
 <style lang="scss" scoped>
 .goods--info {
   display: flex;

vue.config.js

@@ -33,7 +33,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.1.111:4001`,
+        target: `http://192.168.1.107:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''