1.logo修改。2.环境监控。

src/layout/components/Sidebar/components/SidebarLogo.vue

@@ -36,8 +36,8 @@ const logo = ref(new URL(`../../../../assets/logo.png`, import.meta.url).href);
   //background-color: $sidebar-logo-background;
 
   .logo-image {
-    width: 20px;
-    height: 20px;
+    width: 30px;
+    height: 30px;
   }
 
   .logo-title {

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

@@ -1,311 +1,130 @@
 <template>
-  <div class="mainContentBox">
-    <avue-crud ref="crudRef1" v-model:search="data1.search" :data="data1.data" :option="data1.option"
-      v-model:page="data1.page" @row-update="updateRow" @row-del="deleteRow" @search-change="dataList"
-      @search-reset="resetChange" @size-change="dataList" @current-change="dataList"
-      @selection-change="selectionChange">
-      <template #header="{ size }">
-        <div id="dailystoragecharts"></div>
-      </template>
-      <template #menu-right="{}">
-        <el-button class="ml-3" @click="exportData('/api/v1/process/census/beatInfo/export')">
-          <template #icon> <i-ep-download /> </template>导出
-        </el-button>
-      </template>
-    </avue-crud>
+  <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>
 </template>
-<script setup>
-import { ref, getCurrentInstance } from "vue";
-import { useCrud } from "@/hooks/userCrud";
-import { useCommonStoreHook, useDictionaryStore } from "@/store";
-import dictDataUtil from "@/common/configs/dictDataUtil";
-import editSkill from "@/views/base/skill/components/edit-skill.vue";
-import { getBeatInfo } from "@/api/report";
-import * as echarts from "echarts";
-// 数据字典相关
-const { dicts } = useDictionaryStore();
-// const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
-//   useCrud({
-//     src: "/api/v1/process/census/completeOrder",
-//   });
-// ;
-const data1 = ref(
-  useCrud({
-    src: "/api/v1/process/census/beatInfo",
-  })
-);
 
-const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
-  data1.value.Methords;
+<script setup lang="ts">
+const stationsList = ref<any[]>([]);
 
-const { selectionChange, multipleDelete } = data1.value.Methords;
-const { checkBtnPerm, downloadTemplate, exportData } = data1.value.Utils;
-const charts = shallowRef(null);
-const chartsData = ref([]);
+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 },
 
-// 设置表格列或者其他自定义的option
-data1.value.option = Object.assign(data1.value.option, {
-  selection: true,
-  menu: false,
-  menuWidth: 100,
-  addBtn: false,
-  filterBtn: false,
-  searchShowBtn: false,
-  columnBtn: false,
-  gridBtn: false,
-  editBtn: false,
-  viewBtn: false,
-  delBtn: false,
-  column: [
-    {
-      label: "日期范围",
-      prop: "searchTime",
-      search: true,
-      hide: true,
-      type: "date",
-      format: "YYYY-MM-DD",
-      valueFormat: "YYYY-MM-DD",
-      searchRange: true,
-      startPlaceholder: "开始日期",
-      endPlaceholder: "结束日期",
-    },
-    {
-      label: "订单编码",
-      prop: "orderCode",
-      overHidden: true,
-      search: true,
-      editDisabled: true,
-      hide: true,
-    },
-    {
-      label: "物料编码",
-      prop: "materialCode",
-      overHidden: true,
-      search: true,
-      editDisabled: true,
-      hide: true,
-    },
-    {
-      label: "工单编码",
-      prop: "workOrderCode",
-      width: 140,
-      overHidden: true,
-      search: true,
-      editDisabled: true,
-      hide: true,
-    },
-    //展示
-    {
-      label: "订单编码",
-      prop: "orderCode",
-      search: false,
-    },
-    {
-      label: "订单名称",
-      prop: "orderName",
-      search: false,
-    },
-    {
-      label: "工单编码",
-      prop: "workOrderCode",
-      search: false,
-    },
-    {
-      label: "工单数量",
-      prop: "planNum",
-      search: false,
-    },
-    {
-      label: "物料编码",
-      prop: "materialCode",
-      search: false,
-    },
-    {
-      label: "物料名称",
-      prop: "materialName",
-      search: false,
-    },
-    {
-      label: "物料规格",
-      prop: "materialModel",
-      search: false,
-    },
-    {
-      label: "标准用时(秒)",
-      prop: "standardWorktime",
-      search: false,
-    },
-    {
-      label: "总共用时(秒)",
-      prop: "totalTime",
-      search: false,
-    },
-    {
-      label: "时差比",
-      prop: "totalTime",
-      search: false,
-      html: true,
-      formatter: (val) => {
-        return (
-          "<span>" +
-          (Number(val.totalTime) - Number(val.standardWorktime)) +
-          "</span>"
-        );
-      },
-    },
-  ],
-});
-
-const getCurrentMonthStartAndEndDates = () => {
-  // 获取当前日期
-  let now = new Date();
-
-  // 获取当前月份的第一天
-  let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
-
-  // 获取当前月份的最后一天
-  let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+  ];
+};
 
-  // 格式化日期为'YYYY-MM-DD'格式
-  function formatDate(date) {
-    let year = date.getFullYear();
-    let month = String(date.getMonth() + 1).padStart(2, "0");
-    let day = String(date.getDate()).padStart(2, "0");
-    return `${year}-${month}-${day}`;
-  }
+//定义定时器
+const timer = setInterval(() => {
+  getStations();
+}, 60000);
 
-  // 返回包含开始和结束日期的数组
-  return [formatDate(startDate), formatDate(endDate)];
-};
-const clickSearch = async () => {
-  await setChartsData();
-  setOption();
-  charts.value.setOption(
-    {
-      tooltip: {
-        trigger: "axis",
-        axisPointer: {
-          type: "shadow",
-        },
-      },
-      legend: {
-        data: ["标准用时", "总共用时", "时差比"],
-      },
-      xAxis: [
-        {
-          type: "category",
-          axisTick: { show: false },
-          data: chartOption.value.xData,
-        },
-      ],
-      toolbox: {
-        feature: {
-          saveAsImage: {},
-        },
-      },
-      yAxis: [
-        {
-          type: "value",
-        },
-      ],
-      series: chartOption.value.series,
-    },
-    true
-  );
-};
-//设置搜索条件中的时间范围为默认此月
-const setTime = () => {
-  data1.value.search.searchTime = getCurrentMonthStartAndEndDates();
-};
-const labelOption = {
-  show: false,
-  position: "insideBottom",
-  distance: 15,
-  align: "left",
-  verticalAlign: "middle",
-  rotate: 90,
-  formatter: "{c}  {name|{a}}",
-  fontSize: 24,
-  rich: {
-    name: {},
-  },
-};
-const chartOption = ref({
-  xData: [],
-  series: [],
+onMounted(() => {
+  getStations();
 });
-const setChartsData = async () => {
-  const { data } = await getBeatInfo({
-    ...data1.value.search,
-    pageSize: 99999,
-  });
-  chartsData.value = data.records;
-};
-const setOption = () => {
-  let array1 = [];
-  let array2 = [];
-  let obj1 = {
-    name: "标准用时",
-    type: "bar",
-    barGap: 0,
-    label: labelOption,
-    emphasis: {
-      focus: "series",
-    },
-    data: [],
-  };
-  let obj2 = {
-    name: "总共用时",
-    type: "bar",
-    barGap: 0,
-    label: labelOption,
-    emphasis: {
-      focus: "series",
-    },
-    data: [],
-  };
-  let obj3 = {
-    name: "时差比",
-    type: "bar",
-    barGap: 0,
-    label: labelOption,
-    emphasis: {
-      focus: "series",
-    },
-    data: [],
-  };
-  chartsData.value.forEach((item) => {
-    array1.push(`${item.orderName}:${item.workOrderCode}`);
-    obj1.data.push(item.standardWorktime);
-    obj2.data.push(item.totalTime);
-    obj3.data.push(Number(item.totalTime) - Number(item.standardWorktime));
-  });
-  array2 = [obj1, obj2, obj3];
-  chartOption.value.xData = array1;
-  chartOption.value.series = array2;
-};
 
-onMounted(async () => {
-  setTime();
-  charts.value = echarts.init(document.getElementById("dailystoragecharts"));
-  dataList();
-  clickSearch();
+onBeforeUnmount(() => {
+  timer && clearInterval(timer);
 });
 </script>
-<style lang="scss" scoped>
-:deep(.avue-crud__left) {
+
+<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;
 }
 
-.cellStyle {
-  color: "#409eff" !important;
-  cursor: "pointer" !important;
+.top-title {
+  font-size: 18px;
+
+  font-weight: bold;
+  margin-bottom: 20px;
+
+  text-align: left;
 }
 
-#dailystoragecharts {
-  width: 100%;
-  height: 400px;
-  border: 1px solid #ccc;
+.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>