update tools |dialog|store

src/assets/svg/check.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="26px" height="26px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="28px" height="28px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>任务</title>
     <defs>
         <linearGradient x1="91.384997%" y1="100%" x2="25.4330364%" y2="7.84095011e-14%" id="linearGradient-1">

src/assets/svg/cube-twice.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="26px" height="26px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="28px" height="28px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>更多 2</title>
     <defs>
         <linearGradient x1="100%" y1="100%" x2="20.318998%" y2="7.84095011e-14%" id="linearGradient-1">

src/assets/svg/cube.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="26px" height="26px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="28px" height="28px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>多种 2</title>
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="环动科技热处理车间立库看板" transform="translate(-39.000000, -620.000000)" fill="#FFFFFF" fill-rule="nonzero">

src/assets/svg/stack.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="26px" height="26px" viewBox="0 0 24.4721163 23.7661066" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="28px" height="28px" viewBox="0 0 24.4721163 23.7661066" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>多种</title>
     <defs>
         <linearGradient x1="100%" y1="89.6187762%" x2="20.318998%" y2="10.3812238%" id="linearGradient-1">

src/components/Base/Container.vue

@@ -51,7 +51,7 @@ const props = defineProps({
       <div class="cube" :class="[`cube-${cubeCorner}`]"></div>
       <div class="container-header">
         <Icon :name="icon" />
-        <span>{{ title }}</span>
+        <span class="container-header__title">{{ title }}</span>
       </div>
       <div class="container-body">
         <slot />
@@ -105,6 +105,10 @@ const props = defineProps({
   padding: 8px 12px;
 }
 
+.container-header__title {
+  font-size: 24px;
+}
+
 .container-body {
   background: #ffffff11;
   backdrop-filter: blur(2px);

src/components/Base/Header.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { ref, computed } from 'vue';
 </script>
 
 <template>
   <header class="header">
     <div>
-      <Icon htmlRole="logo" icon="logo" />
+      <div class="icon"></div>
       <h1 class="header__title">郴州旗滨光伏光电玻璃有限公司</h1>
     </div>
   </header>
@@ -18,18 +17,29 @@ import { ref, computed } from 'vue';
   background: url(../../assets/header-bg@2x.png) 100% / 100% no-repeat;
 }
 
+
+header .icon {
+  background: url(../../assets/logo.png) 100% / contain no-repeat;
+  width: 52px;
+  height: 40px;
+}
+
 .header > div {
   position: absolute;
   left: 0;
   right: 0;
   margin: 0 auto;
   /** width: 520px; **/
-  width: 480px;
+  width: 520px;
   top: 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
 .header__title {
   font-weight: 400;
+  font-size: 30px;
   letter-spacing: 2px;
   color: #fff;
   user-select: none;

src/components/Base/Icon.vue

@@ -41,9 +41,8 @@ const icon = computed(() => {
 
 <style scoped>
 .icon {
-  height: 16px;
+  height: 24px;
-  width: 16px;
+  width: 24px;
-  background: #fff3;
   display: flex;
   justify-content: center;
   align-items: center;

src/components/SettingDialog.vue

@@ -0,0 +1,198 @@
+<script setup>
+import { ref } from 'vue';
+const emit = defineEmits(["close"]);
+const setting = ref({
+    resolution: {
+        width: null,
+        height: null
+    },
+    carousel: null,
+    fullscreen: false,
+    status: false,
+});
+
+function handleCancel() {
+    emit('close')
+}
+
+function handleConfirm() { }
+</script>
+
+<template>
+    <div class="setting-dialog">
+        <h1>设置</h1>
+        <div class="main-content">
+            <div class="form-item">
+                <label for="carousel">轮播时间</label>
+                <input id="carousel" type="number" v-model="setting.carousel" />
+                <span>秒</span>
+            </div>
+            <div class="form-item">
+                <label for="resolution1">分辨率</label>
+                <input id="resolution1" type="number" v-model="setting.resolution.width" />
+                <span>X</span>
+                <input id="resolution2" type="number" v-model="setting.resolution.height" />
+                <span>px</span>
+            </div>
+            <div class="form-item selector">
+                <div class="opt opt1">
+                    <input type="checkbox" id="fullscreen" name="fullscreen" :class="[setting.fullscreen ? 'checked' : '']"
+                        v-model="setting.fullscreen" />
+                    <label for="fullscreen">全屏显示</label>
+                </div>
+                <div class="opt opt2">
+                    <input type="checkbox" id="status" name="status" :class="[setting.status ? 'checked' : '']"
+                        v-model="setting.status" />
+                    <label for="status">设备状态</label>
+                </div>
+            </div>
+        </div>
+        <div class="footer">
+            <button @click="handleCancel" class="btn btn-cancel">取消</button>
+            <button @click="handleConfirm" class="btn btn-confirm">确认</button>
+        </div>
+    </div>
+    <div class="modal"></div>
+</template>
+
+<style scoped>
+* {
+    user-select: none;
+}
+
+.setting-dialog {
+    position: fixed;
+    margin: auto;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 577px;
+    height: 422px;
+    background: url(../assets/dialog-bg.png) 100% / contain no-repeat;
+    z-index: 1000;
+    transition: all .3s ease-out;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    padding: 24px 80px;
+}
+
+.main-content {
+    flex: 1;
+    padding-top: 10px;
+}
+
+.form-item {
+    margin: 32px 0;
+    display: flex;
+    gap: 8px;
+    color: #fff;
+    font-size: 28px;
+    letter-spacing: 2px;
+    padding: 0 12px;
+}
+
+.form-item.selector {
+    gap: 32px;
+}
+
+.opt {
+    margin-left: 24px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.form-item input {
+    flex: 1;
+    border: none;
+    appearance: none;
+    outline: none;
+    border-radius: 4px;
+    padding: 4px 12px;
+    font-size: 18px;
+}
+
+input#resolution1,
+input#resolution2 {
+    width: 10px;
+}
+
+input[type="checkbox"] {
+    appearance: initial;
+    width: 24px;
+    height: 24px;
+    background: #fff;
+    flex: unset;
+    padding: unset;
+    font-size: unset;
+    cursor: pointer;
+}
+
+input[type="checkbox"].checked {
+    background: #0049ff;
+    position: relative;
+}
+
+input[type="checkbox"].checked::after {
+    content: '\2713';
+    color: #fff;
+    font-size: 22px;
+    line-height: 24px;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+label {
+    cursor: pointer;
+    user-select: none;
+}
+
+.footer {
+    display: flex;
+    gap: 12px;
+}
+
+.btn {
+    flex: 1;
+    padding: 18px;
+    font-size: 28px;
+    cursor: pointer;
+    letter-spacing: 12px;
+    background: url(../assets/dialog-button.png) 0 0 / 100% 100% no-repeat;
+}
+
+button {
+    appearance: none;
+    outline: none;
+    background: none;
+    border: none;
+    color: #fff;
+}
+
+.modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 1080px;
+    width: 1920px;
+    background: #0003;
+    backdrop-filter: blur(3px);
+    z-index: 999;
+    transition: all .3s ease-out;
+}
+
+.setting-dialog>h1 {
+    text-align: center;
+    letter-spacing: 24px;
+    font-weight: 400;
+    text-shadow: 0 5px 1px #001124;
+    user-select: none;
+    color: #fff;
+}
+</style>

src/components/Tools.vue

@@ -4,17 +4,24 @@ import IconBack from "../assets/menu_icon/IconBack.vue";
 import IconExchange from "../assets/menu_icon/IconExchange.vue";
 import IconSetting from "../assets/menu_icon/IconSetting.vue";
 
+import SettingDialogVue from "./SettingDialog.vue";
+
+const visible = ref(false);
 function toHome() {
   document.location.href = '/1-1'
 }
+function showDialog(){
+  visible.value = true;
+}
 </script>
 
 <template>
   <div class="tools">
     <button @click="toHome"><IconBack /></button>
-    <button><IconSetting /></button>
+    <button @click="showDialog"><IconSetting /></button>
     <button><IconExchange /></button>
   </div>
+  <SettingDialogVue v-if="visible" @close="visible = false;"/>
 </template>
 
 <style scoped>

src/pages/AlertListPage.vue

@@ -6,7 +6,11 @@ import Container from "../components/Base/Container.vue";
 const alarmList = ref([]);
 const store = useWsStore();
 
-alarmList.value = (store.data1.alarmArrList ?? []).map((item, index) => ({
+alarmList.value = (store.data1.alarmArrList ?? [
+  { id: 1, equipmentName: 'hallo', alarmLevel: 1, alarmDetails: 'asdf', productLine: 'A001', segment: '2' },
+  { id: 1, equipmentName: 'fffff', alarmLevel: 1, alarmDetails: 'sda', productLine: 'A002', segment: '3' },
+  { id: 1, equipmentName: 'aaaa', alarmLevel: 1, alarmDetails: 'dfd', productLine: 'A001', segment: '1' },
+]).map((item, index) => ({
   id: item.id,
   eqName: item.equipmentName,
   eqIndex: index + 1,
@@ -15,18 +19,18 @@ alarmList.value = (store.data1.alarmArrList ?? []).map((item, index) => ({
   position: `${item.productLine} - ${item.segment}`,
 }));
 
-store.$subscribe((mutation, state) => {
+// store.$subscribe((mutation, state) => {
-  alarmList.value = state.data1.alarmArrList.map((item, index) => ({
+//   alarmList.value = state.data1.alarmArrList.map((item, index) => ({
-    id: item.id,
+//     id: item.id,
-    eqName: item.equipmentName,
+//     eqName: item.equipmentName,
-    eqIndex: index + 1,
+//     eqIndex: index + 1,
-    alarmGrade: item.alarmLevel,
+//     alarmGrade: item.alarmLevel,
-    alarmDetail: item.alarmDetails,
+//     alarmDetail: item.alarmDetails,
-    position: `${item.productLine} - ${item.segment}`,
+//     position: `${item.productLine} - ${item.segment}`,
-  }));
+//   }));
-});
+// });
 
-function handleIgnore(){
+function handleIgnore() {
   alarmList.value.splice(0)
 }
 </script>
@@ -35,37 +39,16 @@ function handleIgnore(){
   <div class="alert-list-page">
     <Container class="alert-list" title="报警列表" icon="cube">
       <div class="alert-list__table" style="">
-        <el-table
+        <el-table class="dark-table" :data="alarmList" :show-overflow-tooltip="true" row-class-name="dark-row"
-          class="dark-table"
+          header-row-class-name="dark-header">
-          :data="alarmList"
+          <el-table-column prop="eqName" label="设备名" width="80"></el-table-column>
-          :show-overflow-tooltip="true"
+          <el-table-column prop="eqIndex" label="序号" width="60"></el-table-column>
-          row-class-name="dark-row"
+          <el-table-column prop="alarmGrade" label="报警等级" width="100"></el-table-column>
-          header-row-class-name="dark-header"
+          <el-table-column prop="alarmDetail" label="报警细节" width="144"></el-table-column>
-        >
-          <el-table-column
-            prop="eqName"
-            label="设备名"
-            width="78"
-          ></el-table-column>
-          <el-table-column
-            prop="eqIndex"
-            label="序号"
-            width="56"
-          ></el-table-column>
-          <el-table-column
-            prop="alarmGrade"
-            label="报警等级"
-            width="90"
-          ></el-table-column>
-          <el-table-column
-            prop="alarmDetail"
-            label="报警细节"
-            width="144"
-          ></el-table-column>
           <el-table-column prop="position" label="定位"></el-table-column>
         </el-table>
       </div>
-      <button @click="handleIgnore" class="alert-btn">忽略</button>
+      <!-- <button @click="handleIgnore" class="alert-btn">忽略</button> -->
     </Container>
   </div>
 </template>
@@ -76,19 +59,31 @@ function handleIgnore(){
   /* height: 72%; */
   height: 100%;
   background: transparent;
+  user-select: none;
 }
 
 .dark-row {
   color: #fff;
-  background: #005eff25 !important;
+  background: #006ACD32 !important;
+  user-select: none;
 }
 
-.dark-row > td.el-table__cell {
+.dark-row:nth-child(odd) {
+  background: #020D2D32 !important;
+}
+
+.dark-row>td.el-table__cell {
   border: none;
+  font-size: 16px;
 }
 
-.dark-row:hover > td.el-table__cell {
+.dark-row>td.el-table__cell:not(:last-child) {
-  background-color: #005effaa !important;
+  border-right: 1px solid #0003;
+}
+
+.dark-row:hover>td.el-table__cell {
+  /* background-color: #020D2D20 !important; */
+  background-color: #fff1 !important;
 }
 
 .dark-header {
@@ -96,14 +91,19 @@ function handleIgnore(){
   color: #fff;
 }
 
-.dark-header > th.el-table__cell.is-leaf {
+.dark-header>th.el-table__cell.is-leaf {
   border-bottom: none;
-  background-color: #005eff95 !important;
+  background-color: #006ACD32 !important;
   font-weight: 400;
   letter-spacing: 1px;
 }
 
-.dark-header > th.el-table__cell {
+.dark-header>th.el-table__cell {
+  font-size: 16px;
+}
+
+.dark-header>th.el-table__cell:not(:last-child) {
+  border-right: 1px solid #0003;
 }
 </style>
 
@@ -130,7 +130,7 @@ function handleIgnore(){
   /* background: linear-gradient(to right, transparent, #0ba6ff80); */
 }
 
-.alert-list__table >>> .el-table__inner-wrapper::before {
+.alert-list__table>>>.el-table__inner-wrapper::before {
   background: transparent;
 }
 

src/pages/AnnouncementPage.vue

@@ -48,8 +48,8 @@ const handleClose = () => {
       <button
         style="
           position: absolute;
-          left: 0;
+          left: 12px;
-          bottom: 10px;
+          bottom: 28px;
           appearance: none;
           background: transparent;
           border: none;

src/store/index.js

@@ -1,9 +1,8 @@
 import { defineStore } from "pinia";
-import { ref } from 'vue';
+import { ref } from "vue";
-
 
 export const useWsStore = defineStore("wsData", () => {
-  const data1 = ref({ test: 'hello world'});
+  const data1 = ref({ test: "hello world" });
   const data2 = ref({});
   const data3 = ref({});
 

src/store/settings.js

@@ -0,0 +1,16 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useSettings = defineStore("settings", () => {
+  const settings = ref({
+    resolution: {
+      width: null,
+      height: null,
+    },
+    carousel: null,
+    fullscreen: false,
+    status: false,
+  });
+  function updateSettings() {}
+  return { settings, updateSettings };
+});

src/style.css

@@ -1,4 +1,5 @@
 * {
   box-sizing: border-box;
   margin: 0;
+  font-family: '黑体', Arial, Helvetica, sans-serif;
 }