mt-fe-group/chenzhou
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update tools |dialog|store

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-01-22 11:25:13 +08:00
parent 3d765b4026
commit c39a00cac1
19 changed files with 299 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/dialog-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 218 KiB

BIN
src/assets/dialog-button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 429 KiB

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/logo@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

2
src/assets/svg/check.svg
View File

@ -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">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

2
src/assets/svg/cube-twice.svg
View File

@ -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">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

2
src/assets/svg/cube.svg
View File

@ -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">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

2
src/assets/svg/stack.svg
View File

@ -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">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

6
src/components/Base/Container.vue
View File

@ -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);

16
src/components/Base/Header.vue
View File

@ -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;

5
src/components/Base/Icon.vue
View File

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

198
src/components/SettingDialog.vue Normal file
View File

@ -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>

9
src/components/Tools.vue
View File

@ -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>

84
src/pages/AlertListPage.vue
View File

@ -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,16 +19,16 @@ alarmList.value = (store.data1.alarmArrList ?? []).map((item, index) => ({
position: `${item.productLine} - ${item.segment}`,
}));
store.$subscribe((mutation, state) => {
alarmList.value = state.data1.alarmArrList.map((item, index) => ({
id: item.id,
eqName: item.equipmentName,
eqIndex: index + 1,
alarmGrade: item.alarmLevel,
alarmDetail: item.alarmDetails,
position: `${item.productLine} - ${item.segment}`,
}));
});
// store.$subscribe((mutation, state) => {
// alarmList.value = state.data1.alarmArrList.map((item, index) => ({
// id: item.id,
// eqName: item.equipmentName,
// eqIndex: index + 1,
// alarmGrade: item.alarmLevel,
// alarmDetail: item.alarmDetails,
// position: `${item.productLine} - ${item.segment}`,
// }));
// });
function handleIgnore() {
alarmList.value.splice(0)
@ -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
class="dark-table"
:data="alarmList"
:show-overflow-tooltip="true"
row-class-name="dark-row"
header-row-class-name="dark-header"
>
<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 class="dark-table" :data="alarmList" :show-overflow-tooltip="true" row-class-name="dark-row"
header-row-class-name="dark-header">
<el-table-column prop="eqName" label="设备名" width="80"></el-table-column>
<el-table-column prop="eqIndex" label="序号" width="60"></el-table-column>
<el-table-column prop="alarmGrade" label="报警等级" width="100"></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:nth-child(odd) {
background: #020D2D32 !important;
}
.dark-row>td.el-table__cell {
border: none;
font-size: 16px;
}
.dark-row>td.el-table__cell:not(:last-child) {
border-right: 1px solid #0003;
}
.dark-row:hover>td.el-table__cell {
background-color: #005effaa !important;
/* background-color: #020D2D20 !important; */
background-color: #fff1 !important;
}
.dark-header {
@ -98,12 +93,17 @@ function handleIgnore(){
.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 {
font-size: 16px;
}
.dark-header>th.el-table__cell:not(:last-child) {
border-right: 1px solid #0003;
}
</style>

4
src/pages/AnnouncementPage.vue
View File

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

5
src/store/index.js
View File

@ -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({});

16
src/store/settings.js Normal file
View File

@ -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 };
});

1
src/style.css
View File

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