update tools |dialog|store
BIN
src/assets/dialog-bg.png
Normal file
After Width: | Height: | Size: 218 KiB |
BIN
src/assets/dialog-button.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/line.png
Normal file
After Width: | Height: | Size: 429 KiB |
BIN
src/assets/logo.png
Normal file
After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 12 KiB |
@ -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">
|
||||
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
@ -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">
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
@ -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">
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@ -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">
|
||||
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
@ -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);
|
||||
|
@ -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;
|
||||
|
@ -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
@ -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>
|
@ -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>
|
||||
|
@ -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) => {
|
||||
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(){
|
||||
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
|
||||
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 > 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 {
|
||||
background-color: #005effaa !important;
|
||||
.dark-row>td.el-table__cell:not(:last-child) {
|
||||
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;
|
||||
}
|
||||
|
||||
|
@ -48,8 +48,8 @@ const handleClose = () => {
|
||||
<button
|
||||
style="
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 10px;
|
||||
left: 12px;
|
||||
bottom: 28px;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
@ -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
@ -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,4 +1,5 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-family: '黑体', Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|