2021-12-08

src/views/DeviceMana/Device.vue

@@ -1,15 +1,175 @@
 <!--
  * @Author: your name
  * @Date: 2021-12-07 14:27:28
- * @LastEditTime: 2021-12-07 14:50:34
+ * @LastEditTime: 2021-12-08 10:12:04
  * @LastEditors: Please set LastEditors
  * @Description: 设备管理页面
  * @FilePath: \hyyfClient\src\views\DeviceMana\Device.vue
 -->
 <template>
-  <div class="device"></div>
+  <div class="device">
+    <div class="manage-items">
+      <manage-item
+        v-for="(item, index) in manageItems"
+        :key="item.key"
+        v-bind="item"
+      >
+        <template #icon>
+          <div :class="manageItemClass[index]"></div>
+        </template>
+      </manage-item>
+    </div>
+    <new-table v-bind="tableData" :listData="listData">
+      <!-- 右上角新增按钮 -->
+      <template #right>
+        <el-button size="mini" @click="handleAdd">
+          新增设备
+        </el-button>
+      </template>
+      <template #handler="slotProps">
+        <el-button type="text" @click="handleEdit(slotProps.row)">
+          编辑
+        </el-button>
+        <el-button type="text" @click="handleDelete(slotProps.row)">
+          删除
+        </el-button>
+      </template>
+    </new-table>
+    <table-footer
+      v-bind="tableFooterData"
+      @sizeChange="sizeChange"
+      @pageChange="pageChange"
+    >
+    </table-footer>
+    <add-or-edit ref="addOrEdit"></add-or-edit>
+  </div>
 </template>
 <script>
-export default {};
+import ManageItem from "./device/ManageItem.vue";
+import NewTable from "@/components/newTable/NewTable";
+import TableFooter from "@/components/TableFooter";
+import AddOrEdit from "./device/AddOrEdit.vue";
+
+import { tableData } from "./device/table.config";
+
+export default {
+  components: {
+    ManageItem,
+    NewTable,
+    TableFooter,
+    AddOrEdit,
+  },
+  data() {
+    return {
+      manageItems: [
+        {
+          title: "设备总数",
+          num: "105",
+        },
+        {
+          title: "故障设备",
+          num: "5",
+        },
+        {
+          title: "设备故障率",
+          num: "3%",
+        },
+      ],
+      manageItemClass: ["total", "badCount", "badPercent"],
+      tableFooterData: {
+        totals: 0,
+        size: 20,
+        pageNum: 1,
+      },
+      tableData: tableData,
+      listData: [
+        {
+          name: "摄像头",
+          code: "001",
+          model: "hm-001",
+          manufacturer: "大华",
+          person: "-",
+          basicalParams: "200万像素星光级网络摄像头",
+          status: 1,
+          record: "-",
+        },
+        {
+          name: "摄像头",
+          code: "002",
+          model: "hm-002",
+          manufacturer: "大华",
+          person: "-",
+          basicalParams: "200万像素星光级网络摄像头",
+          status: 1,
+          record: "-",
+        },
+        {
+          name: "摄像头",
+          code: "003",
+          model: "hm-003",
+          manufacturer: "大华",
+          person: "-",
+          basicalParams: "200万像素星光级网络摄像头",
+          status: 1,
+          record: "-",
+        },
+      ],
+    };
+  },
+  methods: {
+    // size 改变
+    sizeChange(val) {
+      this.tableFooterData.size = val;
+      this.tableFooterData.pageNum = 1;
+    },
+    // 页数改变
+    pageChange(val) {
+      this.tableFooterData.pageNum = val;
+    },
+    // 新增事件
+    handleAdd() {
+      this.$refs["addOrEdit"].init();
+    },
+    // 编辑事件
+    handleEdit(row) {
+      this.$refs["addOrEdit"].init(row);
+    },
+    // 删除事件
+    handleDelete(row) {
+      console.log("删除设备", row);
+    },
+  },
+};
 </script>
-<style scoped></style>
+<style scoped>
+.device {
+  padding: 20px 20px 0;
+}
+.manage-items {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+/* 设备总数的 icon */
+.total {
+  background: url("~@/assets/images/device/设备总数.svg") no-repeat;
+  background-size: contain;
+  width: 40px;
+  height: 40px;
+}
+/* 故障设备的 icon */
+.badCount {
+  background: url("~@/assets/images/device/设备故障.svg") no-repeat;
+  background-size: contain;
+  width: 50px;
+  height: 50px;
+}
+/* 设备故障率的 icon */
+.badPercent {
+  background: url("~@/assets/images/device/故障率统计.svg") no-repeat;
+  background-size: contain;
+  width: 45px;
+  height: 45px;
+}
+</style>

src/views/DeviceMana/device/AddOrEdit.vue

@@ -0,0 +1,99 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-12-08 09:57:19
+ * @LastEditTime: 2021-12-08 10:21:05
+ * @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%">
+    <div class="reset-form">
+      <el-form label-width="120px" size="small">
+        <el-form-item label="设备名称：">
+          <el-input></el-input>
+        </el-form-item>
+        <el-form-item label="设备编号：">
+          <el-input></el-input>
+        </el-form-item>
+        <el-form-item label="型号：">
+          <el-input></el-input>
+        </el-form-item>
+        <el-form-item label="厂家：">
+          <el-input></el-input>
+        </el-form-item>
+        <el-form-item label="维保人：">
+          <el-input></el-input>
+        </el-form-item>
+        <el-form-item label="基本参数：">
+          <el-input></el-input>
+        </el-form-item>
+        <el-form-item label="状态：">
+          <el-select v-model="form.status" style="width: 100%">
+            <el-option
+              v-for="item in statusItems"
+              :key="item.label"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="维修记录：">
+          <el-input></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" type="primary" @click="handleSubmit">
+        确 定
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      title: "",
+      dialogVisible: false,
+      form: {
+        id: "",
+      },
+      statusItems: [
+        {
+          label: "正常",
+          value: 1,
+        },
+        {
+          label: "异常",
+          value: 0,
+        },
+      ],
+    };
+  },
+  methods: {
+    init(row) {
+      if (row) {
+        this.title = "编辑设备";
+      } else {
+        this.title = "新增设备";
+      }
+      this.dialogVisible = true;
+    },
+    handleSubmit() {
+      console.log("成功提交");
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+<style scoped>
+.reset-form {
+  margin-right: 20px;
+}
+.dialog-footer {
+  margin-right: 20px;
+}
+</style>

src/views/DeviceMana/device/ManageItem.vue

@@ -0,0 +1,50 @@
+<!--
+ * @Author: East
+ * @Date: 2021-12-08 08:39:57
+ * @LastEditTime: 2021-12-08 09:04:13
+ * @LastEditors: Please set LastEditors
+ * @Description: 上面的一项
+ * @FilePath: \hyyfClient\src\views\DeviceMana\device\ManageItem.vue
+-->
+<template>
+  <div class="manage-item">
+    <div class="icon">
+      <slot name="icon"></slot>
+    </div>
+    <div class="data">
+      <div class="title">{{ title }}</div>
+      <div class="num">{{ num }}</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    num: {
+      type: String,
+      default: "暂无数据",
+    },
+  },
+};
+</script>
+<style scoped>
+.manage-item {
+  border: 1px solid #ddd;
+  height: 100px;
+  width: 18%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.icon {
+  margin: 0 10px 0 30px;
+}
+.title {
+  font-size: 1rem;
+}
+</style>

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

@@ -0,0 +1,71 @@
+/*
+ * @Author: your name
+ * @Date: 2021-12-08 09:47:30
+ * @LastEditTime: 2021-12-08 09:48:39
+ * @LastEditors: Please set LastEditors
+ * @Description: 设备详情 - 表格参数
+ * @FilePath: \hyyfClient\src\views\DeviceMana\device\table.config.js
+ */
+export const tableData = {
+  title: "摄像头列表",
+  shows: {
+    showIndex: false,
+    showSelect: false,
+  },
+  tableItems: [
+    {
+      prop: "name",
+      label: "设备名称",
+      minWidth: 100,
+      slotName: "name",
+    },
+    {
+      prop: "code",
+      label: "设备编号",
+      minWidth: 100,
+      slotName: "code",
+    },
+    {
+      prop: "model",
+      label: "型号",
+      minWidth: 100,
+      slotName: "model",
+    },
+    {
+      prop: "manufacturer",
+      label: "厂家",
+      minWidth: 100,
+      slotName: "manufacturer",
+    },
+    {
+      prop: "person",
+      label: "维保人",
+      minWidth: 100,
+      slotName: "person",
+    },
+    {
+      prop: "basicalParams",
+      label: "基本参数",
+      minWidth: 120,
+      slotName: "basicalParams",
+    },
+    {
+      prop: "status",
+      label: "状态",
+      minWidth: 120,
+      slotName: "status",
+    },
+    {
+      prop: "record",
+      label: "维修记录",
+      minWidth: 120,
+      slotName: "record",
+    },
+    {
+      label: "操作",
+      minWidth: 120,
+      slotName: "handler",
+    },
+  ],
+  height: 470,
+}

src/views/PdcData/analysis/SalesChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-12 13:45:04
- * @LastEditTime: 2021-12-02 17:42:09
+ * @LastEditTime: 2021-12-08 13:22:51
  * @LastEditors: Please set LastEditors
  * @Description: 销售情况面积图
  * @FilePath: \hyyfClient\src\views\PdcData\analysis\SalesChart.vue
@@ -57,19 +57,25 @@ export default {
         tooltip: {
           trigger: "axis",
           formatter: (params) => {
+            // console.log(params[0].value);
             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++) {
+              console.log(parseFloat(params[0].value).toLocaleString());
+              // console.log(moneyListTooltip[i]);
               //因为是个数组，所以要遍历拿到里面的数据，并加入到tooltip的数据内容部分里面去
               res +=
                 `<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>
-                  ${moneyListTooltip[i]}元
+                  ${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>`;
+                ]};"></span>${quantityList[index]}头</div>`;
             }
             return res;
           },
@@ -151,7 +157,7 @@ export default {
   },
   mounted() {
     this.myChart = this.$echarts.init(document.getElementById("salesChart"));
-    // this.init();
+    this.init();
   },
   watch: {
     data: {