1.设备采集报表。2.环境监控添加报表。

src/views/report/environment/equipment/index.vue

@@ -1,130 +1,127 @@
 <template>
-  <div>
-    <div class="top-title">防静电监控</div>
-    <div class="station-containter">
-      <div
-        v-for="station in stationsList"
-        :key="station.id"
-        class="station-item"
-      >
-        <div
-          :class="[
-            'station-status',
-            station?.status === 1 ? 'success' : 'warning',
-          ]"
-        ></div>
-        <div class="station-name">工位</div>
-      </div>
-    </div>
+  <div class="mainContentBox">
+    <avue-crud
+      ref="crudRef"
+      v-model:search="search"
+      v-model="form"
+      :data="data"
+      :option="option"
+      v-model:page="page"
+      @row-save="createRow"
+      @row-update="updateRow"
+      @row-del="deleteRow"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @size-change="dataList"
+      @current-change="dataList"
+      @selection-change="selectionChange"
+    >
+      <template #menu-right="{}">
+        <el-button
+          class="ml-3"
+          @click="exportData('/api/v1/plan/order/export')"
+        >
+          <template #icon> <i-ep-download /> </template>导出
+        </el-button>
+      </template>
+    </avue-crud>
   </div>
 </template>
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+import dictDataUtil from "@/common/configs/dictDataUtil";
+import ButtonPermKeys from "@/common/configs/buttonPermission";
+import { useCommonStoreHook, useDictionaryStore } from "@/store";
 
-<script setup lang="ts">
-const stationsList = ref<any[]>([]);
+// 数据字典相关
+const { dicts } = useDictionaryStore();
 
-const getStations = async () => {
-  // const response = await fetch('/api/stations')
-  // const data = await response.json()
-  stationsList.value = [
-    { id: 1, name: "Station 1", status: 1 },
-    { id: 2, name: "Station 2", status: 1 },
-    { id: 2, name: "Station 2", status: 1 },
+// 传入一个url，后面不带/
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+  useCrud({
+    src: "/api/v1/op/baseOperation",
+  });
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords; //增删改查
+const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
+const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
+// checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
+// const permission = reactive({
+//   delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
+//   addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
+//   editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
+//   menu: true,
+// });
 
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-    {},
-  ];
-};
-
-//定义定时器
-const timer = setInterval(() => {
-  getStations();
-}, 60000);
+const crudRef = ref(null); //crudRef.value 获取avue-crud对象
 
 onMounted(() => {
-  getStations();
+  // dataList();
+  data.value = [
+    {
+      device_code: "123",
+      device_name: "设备名称",
+      liyonglv: "设备利用率",
+      xiaolv: "综合效率",
+      shengcl: "安全有效生产率",
+      pjgz: "平均故障间隔时间",
+      pjbysj: "设备平均保养时间",
+      wgzgzsj: "平均无故障工作时间(MTBF)",
+      pjxfsj: "平均修复时间(MTTR)",
+      pjsxsj: "平均失效时间(MTTF)",
+    },
+  ];
 });
 
-onBeforeUnmount(() => {
-  timer && clearInterval(timer);
+option.value = Object.assign(option.value, {
+  selection: true,
+  addBtn: false,
+  menu: false,
+  searchMenuSpan: 8,
+  column: [
+    {
+      label: "设备编号",
+      prop: "device_code",
+      search: true,
+    },
+    {
+      label: "设备名称",
+      prop: "device_name",
+      search: true,
+    },
+    {
+      label: "设备利用率",
+      prop: "liyonglv",
+    },
+    {
+      label: "综合效率",
+      prop: "xiaolv",
+    },
+    {
+      label: "安全有效生产率",
+      prop: "shengcl",
+    },
+    {
+      label: "平均故障间隔时间",
+      prop: "pjgz",
+    },
+    {
+      label: "设备平均保养时间",
+      prop: "pjbysj",
+    },
+    {
+      label: "平均无故障工作时间(MTBF)",
+      prop: "wgzgzsj",
+    },
+    {
+      label: "平均修复时间(MTTR)",
+      prop: "pjxfsj",
+    },
+    {
+      label: "平均失效时间(MTTF)",
+      prop: "pjsxsj",
+    },
+  ],
 });
 </script>
-
-<style scoped lang="scss">
-.station-containter {
-  width: 100%;
-  display: grid;
-  /*行间距*/
-  //grid-row-gap: 24px;
-  ///*列间距*/
-  //grid-column-gap: 24px;
-  /*每3行有2个行间距，所以每个格子的宽高都要减去(24*2) / 3 */
-  //grid-template-columns: repeat(4, calc(33.33% - 16px));
-  //grid-template-rows: repeat(4, calc(33.33% - 16px));
-  //grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-template-columns: repeat(auto-fit, 60px);
-  grid-auto-rows: 60px;
-  grid-gap: 15px; /* 设置元素之间的间距 */
-  overflow-y: auto;
-}
-
-.top-title {
-  font-size: 18px;
-
-  font-weight: bold;
-  margin-bottom: 20px;
-
-  text-align: left;
-}
-
-.station-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  .success {
-    background-color: #67c23a;
-  }
-  .warning {
-    background-color: #e6a23c;
-  }
-  .error {
-    background-color: #f56c6c;
-  }
-
-  .station-name {
-    font-size: 16px;
-    color: blue;
-    text-align: center;
-  }
-
-  .station-status {
-    width: 12px;
-    height: 12px;
-    border-radius: 6px;
-    overflow: hidden;
-  }
-}
-</style>

src/views/report/environment/temperature/index.vue

@@ -1,32 +1,43 @@
 <template>
-  <div class="mainContentBox">
-    <div class="box">
-      <div class="titleText">防静电监控</div>
-      <div class="itemBox">
-        <div class="item" v-for="(item, index) in 20">
-          <div class="sc"></div>
-          <div class="gw">工位:{{ index }}</div>
+  <el-tabs v-model="activeName">
+    <el-tab-pane label="视图" name="first">
+      <div class="mainContentBox">
+        <div class="box">
+          <div class="titleText">防静电监控</div>
+          <div class="itemBox">
+            <div class="item" v-for="(item, index) in 20">
+              <div class="sc"></div>
+              <div class="gw">工位:{{ index }}</div>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
-  <div class="mainContentBox">
-    <div class="box">
-      <div class="titleText">温湿度监控</div>
-      <div class="charts">
-        <div id="dailystoragecharts1"></div>
-        <div id="dailystoragecharts2"></div>
-      </div>
-      <el-divider />
-      <div class="charts">
-        <div id="dailystoragecharts3"></div>
-        <div id="dailystoragecharts4"></div>
+      <div class="mainContentBox">
+        <div class="box">
+          <div class="titleText">温湿度监控</div>
+          <div class="charts">
+            <div id="dailystoragecharts1"></div>
+            <div id="dailystoragecharts2"></div>
+          </div>
+          <el-divider />
+          <div class="charts">
+            <div id="dailystoragecharts3"></div>
+            <div id="dailystoragecharts4"></div>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
+    </el-tab-pane>
+    <el-tab-pane label="报表" name="second">
+      <Tables v-if="activeName === 'second'"></Tables>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 <script setup>
+import Tables from "./tables.vue";
 import * as echarts from "echarts";
+
+const activeName = ref("first");
+
 const charts1 = shallowRef(null);
 const charts2 = shallowRef(null);
 const charts3 = shallowRef(null);

src/views/report/environment/temperature/tables.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="mainContentBox">
+    <avue-crud
+      ref="crudRef"
+      v-model:search="search"
+      v-model="form"
+      :data="data"
+      :option="option"
+      v-model:page="page"
+      @row-save="createRow"
+      @row-update="updateRow"
+      @row-del="deleteRow"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @size-change="dataList"
+      @current-change="dataList"
+      @selection-change="selectionChange"
+    >
+      <template #menu-right="{}">
+        <el-button
+          class="ml-3"
+          @click="exportData('/api/v1/plan/order/export')"
+        >
+          <template #icon> <i-ep-download /> </template>导出
+        </el-button>
+      </template>
+    </avue-crud>
+  </div>
+</template>
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+import dictDataUtil from "@/common/configs/dictDataUtil";
+import ButtonPermKeys from "@/common/configs/buttonPermission";
+import { useCommonStoreHook, useDictionaryStore } from "@/store";
+
+// 数据字典相关
+const { dicts } = useDictionaryStore();
+
+// 传入一个url，后面不带/
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+  useCrud({
+    src: "/api/v1/op/baseOperation",
+  });
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords; //增删改查
+const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
+const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
+// checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
+// const permission = reactive({
+//   delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
+//   addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
+//   editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
+//   menu: true,
+// });
+
+const crudRef = ref(null); //crudRef.value 获取avue-crud对象
+
+onMounted(() => {
+  // dataList();
+  data.value = [
+    {
+      time: "2022-01-01 10:00:00",
+      dian: "123",
+      temperature: "23.4",
+      humidity: "56.7",
+    },
+    {
+      time: "2022-01-01 11:00:00",
+      dian: "456",
+      temperature: "24.5",
+      humidity: "57.8",
+    },
+  ];
+});
+
+option.value = Object.assign(option.value, {
+  selection: true,
+  addBtn: false,
+  menu: false,
+  column: [
+    {
+      label: "时间",
+      prop: "time",
+    },
+    {
+      label: "防静电监控",
+      prop: "dian",
+    },
+    {
+      label: "温度",
+      prop: "temperature",
+    },
+    {
+      label: "湿度",
+      prop: "humidity",
+    },
+  ],
+});
+</script>