2021-12-09 设备管理 + 首页销售的 bug

src/components/newTable/NewTable.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-18 16:30:17
- * @LastEditTime: 2021-12-06 13:45:19
+ * @LastEditTime: 2021-12-09 15:57:21
  * @LastEditors: Please set LastEditors
  * @Description: 表格的封装
  * @FilePath: \hyyfClient\src\components\NewTable.vue
@@ -37,6 +37,7 @@
         border
         :height="height"
         @selection-change="handleSelectionChange"
+        ref="table"
       >
         <el-table-column
           v-if="shows.showSelect"
@@ -112,6 +113,16 @@ export default {
       this.$emit("selectionChange", rows);
     },
   },
+  watch: {
+    listData: {
+      handler() {
+        this.$nextTick(() => {
+          this.$refs["table"].bodyWrapper.scrollTop = 0;
+        });
+      },
+      deep: true,
+    },
+  },
 };
 </script>
 <style scoped>

src/utils/chenApi.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-11-18 13:40:39
- * @LastEditTime: 2021-12-08 19:45:43
+ * @LastEditTime: 2021-12-09 16:01:11
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \hyyfClient\src\utils\chenApi.js
@@ -153,10 +153,10 @@ export function getTheSales(params) {
 }
 
 /* 电子秤 */
-// 重量详情
+// 重量详情 
 export function getDayWeight(params) {
   return axios({
-    url: 'http://192.168.1.49:8089/weight/getBatchWeightOnPage2',
+    url: '/produce/weight/getBatchWeightOnPage2',
     method: 'get',
     params: params
   })
@@ -287,3 +287,55 @@ export function getAlarmInfo(params) {
     data: params
   })
 }
+
+/** 
+ * 设备管理
+ */
+/* 设备详情 */
+// 设备概况
+export function getDeviceSummer(params) {
+  return axios({
+    url: 'http://192.168.1.165:8010/device/farm/device/getCountDeviceFailureRate',
+    method: 'get',
+    params: params
+  })
+}
+// 设备列表 
+// FIXME: 卓哥接口还没放到服务器上
+export function getDeviceList(params) {
+  return axios({
+    url: 'http://192.168.1.165:8010/device/farm/device/listDevice',
+    method: 'get',
+    params: params
+  })
+}
+
+// 设备新增 
+// FIXME: 卓哥接口还没放到服务器上
+export function postDeviceAdd(params) {
+  return axios({
+    url: 'http://192.168.1.165:8010/device/farm/device/newDevice',
+    method: 'get',
+    params: params
+  })
+}
+
+// 设备编辑 
+// FIXME: 卓哥接口还没放到服务器上
+export function postDeviceEdit(params) {
+  return axios({
+    url: 'http://192.168.1.165:8010/device/farm/device/editDevice',
+    method: 'get',
+    params: params
+  })
+}
+
+// 设备删除 
+// FIXME: 卓哥接口还没放到服务器上
+export function postDeviceDel(params) {
+  return axios({
+    url: 'http://192.168.1.165:8010/device/farm/device/removeDevice',
+    method: 'get',
+    params: params
+  })
+}

src/views/BioSafety/PersonAdmin.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-16 11:27:35
- * @LastEditTime: 2021-12-06 13:17:13
+ * @LastEditTime: 2021-12-09 13:56:51
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\src\views\BioSafety\PersonAdmin.vue

src/views/DeviceMana/Device.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-12-07 14:27:28
- * @LastEditTime: 2021-12-08 10:12:04
+ * @LastEditTime: 2021-12-09 16:02:13
  * @LastEditors: Please set LastEditors
  * @Description: 设备管理页面
  * @FilePath: \hyyfClient\src\views\DeviceMana\Device.vue
@@ -19,18 +19,36 @@
         </template>
       </manage-item>
     </div>
-    <new-table v-bind="tableData" :listData="listData">
+    <new-table
+      v-bind="tableData"
+      :listData="listData"
+      @selectionChange="selectionChange"
+    >
       <!-- 右上角新增按钮 -->
       <template #right>
         <el-button size="mini" @click="handleAdd">
           新增设备
         </el-button>
+        <el-button size="mini" @click="handleDelete(true)">
+          批量删除
+        </el-button>
+      </template>
+
+      <!-- table-col -->
+      <template #state="scope">
+        <el-tag
+          size="small"
+          :type="scope.row.state === 1 ? 'success' : 'danger'"
+        >
+          {{ scope.row.state === 1 ? "正常" : "异常" }}
+        </el-tag>
       </template>
+
       <template #handler="slotProps">
         <el-button type="text" @click="handleEdit(slotProps.row)">
           编辑
         </el-button>
-        <el-button type="text" @click="handleDelete(slotProps.row)">
+        <el-button type="text" @click="handleDelete(false, slotProps.row)">
           删除
         </el-button>
       </template>
@@ -41,7 +59,7 @@
       @pageChange="pageChange"
     >
     </table-footer>
-    <add-or-edit ref="addOrEdit"></add-or-edit>
+    <add-or-edit ref="addOrEdit" @reflash="reflash"></add-or-edit>
   </div>
 </template>
 <script>
@@ -51,6 +69,11 @@ import TableFooter from "@/components/TableFooter";
 import AddOrEdit from "./device/AddOrEdit.vue";
 
 import { tableData } from "./device/table.config";
+import {
+  getDeviceList,
+  postDeviceDel,
+  getDeviceSummer,
+} from "@/utils/chenApi.js";
 
 export default {
   components: {
@@ -64,15 +87,15 @@ export default {
       manageItems: [
         {
           title: "设备总数",
-          num: "105",
+          num: "0",
         },
         {
           title: "故障设备",
-          num: "5",
+          num: "0",
         },
         {
           title: "设备故障率",
-          num: "3%",
+          num: "0%",
         },
       ],
       manageItemClass: ["total", "badCount", "badPercent"],
@@ -114,6 +137,7 @@ export default {
           record: "-",
         },
       ],
+      rows: [],
     };
   },
   methods: {
@@ -121,10 +145,13 @@ export default {
     sizeChange(val) {
       this.tableFooterData.size = val;
       this.tableFooterData.pageNum = 1;
+      this.initList();
+      this.initSummer();
     },
     // 页数改变
     pageChange(val) {
       this.tableFooterData.pageNum = val;
+      this.initList();
     },
     // 新增事件
     handleAdd() {
@@ -134,10 +161,73 @@ export default {
     handleEdit(row) {
       this.$refs["addOrEdit"].init(row);
     },
+    // 选中
+    selectionChange(rows) {
+      this.rows = rows;
+      console.log(rows);
+    },
     // 删除事件
-    handleDelete(row) {
-      console.log("删除设备", row);
+    handleDelete(flag, row) {
+      if (flag && this.rows.length === 0) {
+        this.$message.warning("请选中设备再删除");
+        return;
+      }
+      let ids = "";
+      if (flag) {
+        const items = [];
+        this.rows.forEach((item) => {
+          items.push(item.id);
+        });
+        ids = items.join(",");
+      } else {
+        ids += row.id;
+      }
+      this.$confirm("确定删除该文件？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+      }).then(async () => {
+        const res = await postDeviceDel({
+          ids: ids,
+        });
+        this.tableFooterData.pageNum = 1;
+        this.initList();
+        this.initSummer();
+        if (res.code === 10000) {
+          this.$message.success("删除成功");
+        }
+      });
     },
+    initList() {
+      getDeviceList({
+        pageNo: this.tableFooterData.pageNum,
+        pageSize: this.tableFooterData.size,
+      }).then((res) => {
+        if (res.code === 10000) {
+          this.listData = res.data.content;
+          this.tableFooterData.totals = res.data.totalElements;
+        }
+      });
+    },
+    initSummer() {
+      getDeviceSummer({
+        bit: 2,
+      }).then((res) => {
+        if (res.code === 10000) {
+          this.manageItems[0].num = res.data.total;
+          this.manageItems[1].num = res.data.num;
+          this.manageItems[2].num = res.data.rate;
+        }
+      });
+    },
+    reflash() {
+      this.initSummer();
+      this.tableFooterData.pageNum = 1;
+      this.initList();
+    },
+  },
+  mounted() {
+    this.initList();
+    this.initSummer();
   },
 };
 </script>

src/views/DeviceMana/device/AddOrEdit.vue

@@ -1,51 +1,62 @@
 <!--
  * @Author: your name
  * @Date: 2021-12-08 09:57:19
- * @LastEditTime: 2021-12-08 10:21:05
+ * @LastEditTime: 2021-12-09 16:07:27
  * @LastEditors: Please set LastEditors
  * @Description: 设备详情 - 新增 or 编辑 设备 的 dialog
  * @FilePath: \hyyfClient\src\views\DeviceMana\device\AddOrEdit.vue
 -->
 <template>
-  <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogVisible"
+    width="30%"
+    @close="handleCancel"
+  >
     <div class="reset-form">
-      <el-form label-width="120px" size="small">
-        <el-form-item label="设备名称：">
-          <el-input></el-input>
+      <el-form
+        label-width="120px"
+        size="small"
+        :rules="rules"
+        :model="form"
+        ref="form"
+      >
+        <el-form-item label="设备名称：" prop="deviceName">
+          <el-input v-model="form.deviceName"></el-input>
         </el-form-item>
-        <el-form-item label="设备编号：">
-          <el-input></el-input>
+        <el-form-item label="设备编号：" prop="deviceCode">
+          <el-input v-model="form.deviceCode"></el-input>
         </el-form-item>
-        <el-form-item label="型号：">
-          <el-input></el-input>
+        <el-form-item label="型号：" prop="deviceType">
+          <el-input v-model="form.deviceType"></el-input>
         </el-form-item>
-        <el-form-item label="厂家：">
-          <el-input></el-input>
+        <el-form-item label="厂家：" prop="factory">
+          <el-input v-model="form.factory"></el-input>
         </el-form-item>
-        <el-form-item label="维保人：">
-          <el-input></el-input>
+        <el-form-item label="维保人：" prop="worker">
+          <el-input v-model="form.worker"></el-input>
         </el-form-item>
-        <el-form-item label="基本参数：">
-          <el-input></el-input>
+        <el-form-item label="基本参数：" prop="mainParams">
+          <el-input v-model="form.mainParams"></el-input>
         </el-form-item>
-        <el-form-item label="状态：">
-          <el-select v-model="form.status" style="width: 100%">
+        <el-form-item label="状态：" prop="state">
+          <el-select v-model="form.state" style="width: 100%">
             <el-option
               v-for="item in statusItems"
               :key="item.label"
               :value="item.value"
+              :label="item.label"
             >
-              {{ item.label }}
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="维修记录：">
-          <el-input></el-input>
+        <el-form-item label="维修记录：" prop="record">
+          <el-input v-model="form.record"></el-input>
         </el-form-item>
       </el-form>
     </div>
     <span slot="footer" class="dialog-footer">
-      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+      <el-button size="small" @click="handleCancel">取 消</el-button>
       <el-button size="small" type="primary" @click="handleSubmit">
         确 定
       </el-button>
@@ -53,13 +64,30 @@
   </el-dialog>
 </template>
 <script>
+import { postDeviceAdd, postDeviceEdit } from "@/utils/chenApi.js";
 export default {
   data() {
     return {
       title: "",
       dialogVisible: false,
       form: {
-        id: "",
+        id: undefined,
+        deviceName: "",
+        deviceCode: "",
+        deviceType: "",
+        factory: "",
+        worker: "",
+        mainParams: "",
+        state: "",
+        record: "",
+      },
+      rules: {
+        deviceName: [
+          { required: true, message: "设备名称不可以为空", trigger: "blur" },
+        ],
+        state: [
+          { required: true, message: "设备状态需要选择", trigger: "blur" },
+        ],
       },
       statusItems: [
         {
@@ -68,7 +96,7 @@ export default {
         },
         {
           label: "异常",
-          value: 0,
+          value: 2,
         },
       ],
     };
@@ -77,14 +105,35 @@ export default {
     init(row) {
       if (row) {
         this.title = "编辑设备";
+        this.$nextTick(() => {
+          this.form = { ...row };
+        });
       } else {
         this.title = "新增设备";
       }
       this.dialogVisible = true;
     },
     handleSubmit() {
-      console.log("成功提交");
+      let request = postDeviceAdd;
+      if (this.form.id) {
+        request = postDeviceEdit;
+      }
+      request({ ...this.form }).then((res) => {
+        if (res.code === 10000) {
+          this.$message.success(`${this.form.id ? "添加" : "修改"}成功`);
+          this.handleCancel();
+          this.$emit("reflash");
+        }
+      });
+    },
+    // 取消
+    handleCancel() {
       this.dialogVisible = false;
+      if (this.form.id) {
+        this.$nextTick(() => {
+          this.$refs["form"].resetFields();
+        });
+      }
     },
   },
 };

src/views/DeviceMana/device/table.config.js

@@ -1,59 +1,59 @@
 /*
  * @Author: your name
  * @Date: 2021-12-08 09:47:30
- * @LastEditTime: 2021-12-08 09:48:39
+ * @LastEditTime: 2021-12-09 16:13:06
  * @LastEditors: Please set LastEditors
  * @Description: 设备详情 - 表格参数
  * @FilePath: \hyyfClient\src\views\DeviceMana\device\table.config.js
  */
 export const tableData = {
-  title: "摄像头列表",
+  title: "设备列表",
   shows: {
     showIndex: false,
-    showSelect: false,
+    showSelect: true,
   },
   tableItems: [
     {
-      prop: "name",
+      prop: "deviceName",
       label: "设备名称",
       minWidth: 100,
-      slotName: "name",
+      slotName: "deviceName",
     },
     {
-      prop: "code",
+      prop: "deviceCode",
       label: "设备编号",
       minWidth: 100,
-      slotName: "code",
+      slotName: "deviceCode",
     },
     {
-      prop: "model",
+      prop: "deviceType",
       label: "型号",
       minWidth: 100,
-      slotName: "model",
+      slotName: "deviceType",
     },
     {
-      prop: "manufacturer",
+      prop: "factory",
       label: "厂家",
       minWidth: 100,
-      slotName: "manufacturer",
+      slotName: "factory",
     },
     {
-      prop: "person",
+      prop: "worker",
       label: "维保人",
       minWidth: 100,
-      slotName: "person",
+      slotName: "worker",
     },
     {
-      prop: "basicalParams",
+      prop: "mainParams",
       label: "基本参数",
       minWidth: 120,
-      slotName: "basicalParams",
+      slotName: "mainParams",
     },
     {
-      prop: "status",
+      prop: "state",
       label: "状态",
       minWidth: 120,
-      slotName: "status",
+      slotName: "state",
     },
     {
       prop: "record",

src/views/PdcData/analysis/SalesChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-12 13:45:04
- * @LastEditTime: 2021-12-08 13:22:51
+ * @LastEditTime: 2021-12-09 17:00:45
  * @LastEditors: Please set LastEditors
  * @Description: 销售情况面积图
  * @FilePath: \hyyfClient\src\views\PdcData\analysis\SalesChart.vue

src/views/dashboard/chart/ChartPig.vue

@@ -3,41 +3,41 @@
 </template>
 
 <script>
-import {mapState} from "vuex";
+import { mapState } from "vuex";
 
 export default {
   name: "ChartPig",
   data() {
     return {
-      myChart: null
-    }
+      myChart: null,
+    };
   },
   props: {
     data: {
       type: Object,
-      default: function () {
-        return {}
-      }
-    }
+      default: function() {
+        return {};
+      },
+    },
   },
   computed: {
-    ...mapState(['color'])
+    ...mapState(["color"]),
   },
   watch: {
     color(newVal) {
-      if(newVal) {
+      if (newVal) {
         this.myChart.clear();
-        this.init()
+        this.init();
       }
     },
     data: {
       handler(newVal) {
-        if(newVal) {
+        if (newVal) {
           this.myChart.clear();
-          this.init()
+          this.init();
         }
       },
-      deep: true
+      deep: true,
     },
   },
   methods: {
@@ -46,6 +46,7 @@ export default {
       let start = dataAxis.length - 12;
       let end = dataAxis.length - 1;
       let quantityList = this.data.quantityList;
+      let moneyListTooltip = this.data.moneyList1;
       let options = {
         title: {
           x: 60,
@@ -60,18 +61,21 @@ export default {
           trigger: "axis",
           formatter: (params) => {
             var res = "<div>" + params[0].name + "</div>"; // 字符串形式的html标签会被echarts转换渲染成数据，这个res主要是画的tooltip里的上部分的标题部分
+            const index = this.data.moneyList.findIndex(
+              (item) => item === params[0].value
+            );
             for (var i = 0; i < params.length; i++) {
               //因为是个数组，所以要遍历拿到里面的数据，并加入到tooltip的数据内容部分里面去
               res +=
-                  `<div style="color: #fff;font-size: 14px; padding:0 12px;">
+                `<div style="color: #fff;font-size: 14px; padding:0 12px;">
                   <span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
                     params[i].color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
                   ]};"></span>
-                  ${params[i].data}元
+                  ${moneyListTooltip[index]}元
                 </div>` +
-                  `<div style="color: #fff;font-size: 14px; padding:0 12px;"><span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
-                    params[i].color,
-                  ]};"></span>${quantityList[i]}头</div>`;
+                `<div style="color: #fff;font-size: 14px; padding:0 12px;"><span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
+                  params[i].color,
+                ]};"></span>${quantityList[index]}头</div>`;
             }
             return res;
           },
@@ -150,16 +154,14 @@ export default {
           },
         ],
       };
-      this.myChart.setOption(options)
-    }
+      this.myChart.setOption(options);
+    },
   },
   mounted() {
-    this.myChart = this.$echarts.init(document.getElementById('ChartPig'))
-    this.init()
-  }
-}
+    this.myChart = this.$echarts.init(document.getElementById("ChartPig"));
+    this.init();
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>