update header part

src/components/Dribbble/Dialog.vue

@@ -1,54 +0,0 @@
-<script setup>
-import './style.css';
-import { Close } from '@element-plus/icons-vue';
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-
-const contentVisible = ref(false);
-const emit = defineEmits(['close']);
-
-onMounted(() => {
-  setTimeout(() => {
-    contentVisible.value = true;
-  }, 100);
-});
-
-onBeforeUnmount(() => {});
-
-function close() {
-  contentVisible.value = false;
-  setTimeout(() => {
-    emit('close');
-  }, 150);
-}
-</script>
-
-<template>
-  <div class="modal">
-    <div class="dribbble-dialog pop-out" :class="{ visible: contentVisible }">
-      <div class="logo"></div>
-      <div class="left"></div>
-      <div class="right"></div>
-      <div class="content-text">
-        <p>Advance your career with a</p>
-        <p>Professional Diploma in UX Design</p>
-        <button>Learn More</button>
-      </div>
-      <el-button
-        :icon="Close"
-        size="small"
-        circle
-        style="
-          background: #eeeb;
-          color: #000;
-          border: none;
-          position: absolute;
-          top: -3px;
-          right: 8px;
-          z-index: -10;
-        "
-        @click="close"
-      ></el-button>
-    </div>
-  </div>
-</template>
-i

src/components/Dribbble/style.css

@@ -1,105 +0,0 @@
-.modal {
-  background: #0003;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  display: grid;
-  place-items: center;
-  color: #000;
-}
-
-.dribbble-dialog {
-  position: relative;
-  margin: 12px;
-  background: #fff;
-  border-radius: 18px;
-  box-shadow: 0 0 32px 2px #0001;
-  overflow-x: hidden;
-  height: auto;
-  padding: 20px;
-  transition: all 0.1s cubic-bezier(0, 0.48, 0, 1.18);
-}
-
-.content-text {
-  margin: 56px 56px 32px;
-  text-align: center;
-  font-weight: 700;
-  line-height: 1;
-}
-
-p {
-  margin: 10px 0;
-  user-select: none;
-}
-
-button {
-  border: none;
-  outline: none;
-  appearance: none;
-  padding: 12px 24px;
-  border-radius: 20px;
-  background: #000;
-  color: #fff;
-  margin-top: 12px;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  transition: all 0.1s ease-out;
-}
-
-button:hover {
-  cursor: pointer;
-  background: #000b;
-}
-
-.logo {
-  width: 128px;
-  height: 40px;
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  background: url(../../assets/logo@2x.png) center / contain no-repeat;
-}
-
-.left {
-  width: 160px;
-  height: 80px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  background: url(../../assets/leftcorner@2x.png) center / 100% 100% no-repeat;
-  z-index: -100;
-}
-
-.right {
-  width: 100px;
-  height: 118px;
-  position: absolute;
-  z-index: -100;
-  top: -2px;
-  right: 0;
-  background: url(../../assets/rightcorner@2x.png) center / 100% 100% no-repeat;
-}
-
-.fade-in {
-  opacity: 0;
-  transform: translateY(-56px);
-}
-
-.fade-in.visible {
-  transform: translateY(0);
-  opacity: 1;
-}
-
-.pop-out {
-  opacity: 0;
-  transform: scale(0);
-}
-
-.pop-out.visible {
-  opacity: 1;
-  transform: scale(1);
-}

src/components/HeadTime.vue

@@ -0,0 +1,30 @@
+<!-- 顶部的时间  -->
+
+<script setup>
+import { ref, watch, onMounted } from "vue";
+const time = ref(new Date().toLocaleTimeString());
+const date = ref(new Date().toLocaleDateString().replaceAll("/", "."));
+
+onMounted(() => {
+  setInterval(() => {
+    time.value = new Date().toLocaleTimeString();
+    date.value = new Date().toLocaleDateString().replaceAll("/", ".");
+  }, 1000);
+});
+</script>
+
+<template>
+  <div class="datetime">{{ time }} | {{ date }}</div>
+</template>
+
+<style scoped>
+.datetime {
+  padding: 8px;
+  position: absolute;
+  top: 50px;
+  right: 420px;
+  font-size: 24px;
+  color: #69B4FF;
+  line-height: 1;
+}
+</style>

src/components/HourChart.vue

@@ -1,35 +1,55 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, watch, onMounted } from "vue";
 import * as echarts from "echarts";
 import Container from "./Base/Container.vue";
 import { useWsStore } from "../store";
-import charSetup from "./HourChartOptions";
+import chartSetup from "./HourChartOptions";
 
 const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 // 小时数据
-const hourData = ref([]);
-// store.$subscribe((mutation, state) => {
-//   hourData.value = state.data2.lineDetailData.map((item, index) => ({
-//     id: item.id,
-//     eqName: item.equipmentName,
-//     eqIndex: index + 1,
-//     alarmGrade: item.alarmLevel,
-//     alarmDetail: item.alarmDetails,
-//     position: `${item.productLine} - ${item.segment}`,
-//   }));
+const hourData = ref(null);
+store.$subscribe((mutation, state) => {
+  console.log("lineHourList ===> ", state.data2.lineHourList);
+  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
+    id: `${item.lineName}_${index}`,
+    hour: item.hour || `${index}`.padStart(2, "0"),
+    data: item.num || Math.random() * 100,
+  }));
+  chartSetup(
+    chart.value,
+    hourData.value.map((item) => item.hour),
+    hourData.value.map((item) => item.data)
+  );
+});
+
+// watch(hourData, (newVal) => {
+//   console.log("hourData", newVal);
+//   if (newVal) {
+//     chartSetup(
+//       chart.value,
+//       newVal.map((item) => item.hour),
+//       newVal.map((item) => item.data)
+//     );
+//   }
 // });
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
   chart.value = echarts.init(chartChart.value);
+  chart.value.setOption({})
 });
 </script>
 
 <template>
   <Container class="chart" title="小时数据" icon="cube">
-    <div ref="chartChart" class="chart-chart"></div>
+    <div
+      v-show="hourData && hourData.length > 0"
+      ref="chartChart"
+      class="chart-chart"
+    ></div>
+    <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">暂无数据</p>
   </Container>
 </template>
 
@@ -46,3 +66,23 @@ onMounted(() => {
   height: 100%;
 }
 </style>
+
+<style>
+.empty-data-hint {
+  color: #c5c5c5;
+  letter-spacing: 1px;
+  font-size: 24px;
+  line-height: 1.25;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  display: inline-block;
+  width: 200px;
+  height: 32px;
+  user-select: none;
+}
+</style>

src/components/HourChartOptions.js

@@ -8,21 +8,33 @@ export const options = {
   },
   xAxis: {
     type: "category",
-    data: [],
+    data: ["00", "11", "22", "33", "44", "55", "66"],
     axisLabel: {
-      fontSize: 24,
+      fontSize: 16,
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#dff1fe",
+      },
     },
   },
   yAxis: {
     type: "value",
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#dff1fe",
+      },
+    },
     axisLabel: {
-      fontSize: 24,
+      fontSize: 16,
     },
     minInterval: 1,
   },
   series: [
     {
-      data: [],
+      data: Array.from({ length: 7 }, () => Math.random() * 100),
       type: "bar",
       showBackground: true,
       backgroundStyle: {
@@ -33,8 +45,8 @@ export const options = {
 };
 
 export default function setup(echartInstance, timeArr, dataArr) {
-  const options = { ...options };
-  options.xAxis.data = timeArr;
-  options.series[0].data = dataArr;
-  echartInstance.setOption(options);
+  const new_options = { ...options };
+  new_options.xAxis.data = timeArr;
+  new_options.series[0].data = dataArr;
+  echartInstance.setOption(new_options);
 }

src/components/Tools.vue

@@ -1,21 +1,60 @@
 <script setup>
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted } from "vue";
+import IconBack from "../assets/menu_icon/IconBack.vue";
+import IconExchange from "../assets/menu_icon/IconExchange.vue";
+import IconSetting from "../assets/menu_icon/IconSetting.vue";
 </script>
 
 <template>
   <div class="tools">
-    <button>Home</button>
-    <button>Settings</button>
-    <button>AutoScroll</button>
+    <button><IconBack /></button>
+    <button><IconSetting /></button>
+    <button><IconExchange /></button>
   </div>
 </template>
 
 <style scoped>
 .tools {
-  background: #00f;
-  padding: 8px;
   position: absolute;
-  bottom: 24px;
-  left: 24px;
+  top: 28px;
+  right: 24px;
+  display: flex;
+  gap: 0px;
+  z-index: 3;
+}
+
+button {
+  appearance: none;
+  border: none;
+  outline: none;
+  background: transparent;
+  cursor: pointer;
+  user-select: none;
+  transition: fill 0.2s ease-out;
+  cursor: pointer;
+}
+
+.tools button {
+  transform: scale(0.75);
+}
+
+.tools button:not(:first-child) {
+  /* transform: scale(.7) translateX(-20px); */
+  margin-left: -10px;
+}
+</style>
+
+<style>
+button svg #back-btn,
+button svg #setting-btn,
+button svg #switch-btn {
+  transition: fill 0.2s ease-out;
+}
+
+
+button:hover svg #back-btn,
+button:hover svg #setting-btn,
+button:hover svg #switch-btn {
+  fill: #b1daff !important;
 }
 </style>

src/components/data.json

@@ -1,11 +0,0 @@
-{
-  "code": 0,
-  "data": [
-    { "date": "2023-01-01", "检测项目": "光刻胶&显影", "光刻胶残留": "1" },
-    { "date": "2023-01-01", "检测项目": "激光一", "磨面擦伤": "1" },
-    { "date": "2023-01-01", "检测项目": "激光二", "刻线宽度不良": "1" },
-    { "date": "2023-01-02", "检测项目": "光刻胶&显影", "光刻胶残留": "2" },
-    { "date": "2023-01-02", "检测项目": "激光一", "刻线宽度不良": "2" },
-    { "date": "2023-01-03", "检测项目": "激光二", "擦伤": "3" }
-  ]
-}