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

update data fetch

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-01-17 13:49:56 +08:00
parent 9d48e56dd0
commit 9805d29df3
5 changed files with 373 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.vue
View File

@ -1,12 +1,12 @@
<script setup> <script setup>
import { ref, provide } from "vue"; import { ref, watch, computed } from "vue";
import MainPage from "./MainPage.vue"; import MainPage from "./MainPage.vue";
import Slider from "./components/Slider.vue"; import Slider from "./components/Slider.vue";
import Client from "./utils/ws"; import Client from "./utils/ws";
import { useWsStore } from "./store"; import { useWsStore } from "./store";
const store = useWsStore(); const store = useWsStore();
const url = "ws://192.168.1.101:8082/QbMonitoring/websocket"; const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
let urlPath = document.location.pathname; let urlPath = document.location.pathname;
if (urlPath === "/") { if (urlPath === "/") {
@ -19,30 +19,28 @@ new Client(
}, },
(message) => { (message) => {
try { try {
const data = JSON.parse(message.data); const data = JSON.parse(message.data);
console.log("message", JSON.parse(message.data)); console.log("message", JSON.parse(message.data));
if ("specificationChanges" in data) { if ("specificationChanges" in data) {
console.log('[*] setting data1') console.log("[*] setting data1");
// 分屏推送1数据 // 分屏推送1数据
store.updateData('1', data); store.updateData("1", data);
} else if ("deliveryNotification" in data) { } else if ("deliveryNotification" in data) {
// 分屏推送3数据 // 分屏推送3数据
console.log('[*] setting data3') console.log("[*] setting data3");
store.updateData('3', data); store.updateData("3", data);
} else { } else {
// 分屏推送2数据 // 分屏推送2数据
console.log('[*] setting data2') console.log("[*] setting data2");
store.updateData('2', data); store.updateData("2", data);
} }
} catch(err) { } catch (err) {
console.log('[x] 未解析的ws数据: ', err); console.log("[x] 未解析的ws数据: ", err);
} }
} }
); );
const styles = ref({}); const styles = ref({});
function setSize(value) { function setSize(value) {
const v = (value / 100).toFixed(2); const v = (value / 100).toFixed(2);

15
src/components/HourChart.vue
View File

@ -2,8 +2,21 @@
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import Container from './Base/Container.vue'; import Container from './Base/Container.vue';
import { useWsStore } from '../store'
const store = useWsStore();
const chartChart = ref(null); const chartChart = 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}`,
// }));
// });
onMounted(() => { onMounted(() => {
chartChart.value.classList.add('h-full'); chartChart.value.classList.add('h-full');

26
src/components/RealtimeTable.vue
View File

@ -1,5 +1,29 @@
<!-- 实时数据表格 --> <!-- 实时数据表格 -->
<script setup> <script setup>
import { ref } from 'vue';
import { useWsStore } from '../store';
const listData = ref([]);
const store = useWsStore();
store.$subscribe((mutation, state) => {
listData.value = state.data2.lineDetailData.map((item, index) => ({
productLine: item.productLine,
mbt: item.edgingInput,
mbb: item.edgingOutput,
dkt: item.drillingInput,
dkb: item.drillingOutput,
dmt: item.coatingInput,
dmb: item.coatingOutput,
syt: item.silkInput,
syb: item.silkOutput,
ght: item.solidificationInput,
ghb: item.solidificationOutput,
gh1: item.temperingInput,
gh2: item.temperingOutput,
bzt: item.finalInput,
bzb: item.finalOutput,
}));
});
const tableData = [ const tableData = [
{ productLine: '00A', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' }, { productLine: '00A', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
@ -13,7 +37,7 @@ const tableData = [
<template> <template>
<div class="realtime-table"> <div class="realtime-table">
<el-table class="dark-table" :data="tableData" :show-overflow-tooltip="true" row-class-name="dark-row" <el-table class="dark-table" :data="listData" :show-overflow-tooltip="true" row-class-name="dark-row"
header-row-class-name="dark-header"> header-row-class-name="dark-header">
<el-table-column prop="productLine" label="产线"></el-table-column> <el-table-column prop="productLine" label="产线"></el-table-column>
<el-table-column prop="mbt" label="磨边上"></el-table-column> <el-table-column prop="mbt" label="磨边上"></el-table-column>

412
src/pages/AlertListPage.vue
View File

@ -1,140 +1,374 @@
<!-- 报警列表页面 --> <!-- 报警列表页面 -->
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from "vue";
import { useWsStore } from "../store";
const tableData = [ const alarmList = ref([]);
{ id: 1, eqName: '设备00A', eqIndex: '1', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, const store = useWsStore();
{ id: 2, eqName: '设备00B', eqIndex: '2', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, store.$subscribe((mutation, state) => {
{ id: 3, eqName: '设备00C', eqIndex: '3', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, // console.log("====state====\n");
{ id: 4, eqName: '设备00D', eqIndex: '4', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, // console.log(state.data1);
{ id: 5, eqName: '设备00E', eqIndex: '5', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, // console.log(state.data2);
{ id: 6, eqName: '设备00F', eqIndex: '6', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, // console.log(state.data3);
{ id: 7, eqName: '设备00G', eqIndex: '7', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, // console.log("====state end====\n");
{ id: 1, eqName: '设备00A', eqIndex: '1', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, alarmList.value = state.data1.alarmArrList.map((item, index) => ({
{ id: 2, eqName: '设备00B', eqIndex: '2', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, id: item.id,
{ id: 3, eqName: '设备00C', eqIndex: '3', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, eqName: item.equipmentName,
{ id: 4, eqName: '设备00D', eqIndex: '4', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, eqIndex: index + 1,
{ id: 5, eqName: '设备00E', eqIndex: '5', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, alarmGrade: item.alarmLevel,
{ id: 6, eqName: '设备00F', eqIndex: '6', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, alarmDetail: item.alarmDetails,
{ id: 7, eqName: '设备00G', eqIndex: '7', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, position: `${item.productLine} - ${item.segment}`,
{ id: 1, eqName: '设备00A', eqIndex: '1', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, }));
{ id: 2, eqName: '设备00B', eqIndex: '2', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' }, });
{ id: 3, eqName: '设备00C', eqIndex: '3', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
{ id: 4, eqName: '设备00D', eqIndex: '4', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
{ id: 5, eqName: '设备00E', eqIndex: '5', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
{ id: 6, eqName: '设备00F', eqIndex: '6', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
{ id: 7, eqName: '设备00G', eqIndex: '7', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
{ id: 1, eqName: '设备00A', eqIndex: '1', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
{ id: 2, eqName: '设备00B', eqIndex: '2', alarmGrade: 1, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
{ id: 3, eqName: '设备00C', eqIndex: '3', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
{ id: 4, eqName: '设备00D', eqIndex: '4', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
{ id: 5, eqName: '设备00E', eqIndex: '5', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
{ id: 6, eqName: '设备00F', eqIndex: '6', alarmGrade: 3, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
{ id: 7, eqName: '设备00G', eqIndex: '7', alarmGrade: 2, alarmDetail: 'lorem sdf fkj', position: 'x,y' },
]
// const tableData = [
// {
// id: 1,
// eqName: "设备00A",
// eqIndex: "1",
// alarmGrade: 1,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 2,
// eqName: "设备00B",
// eqIndex: "2",
// alarmGrade: 1,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 3,
// eqName: "设备00C",
// eqIndex: "3",
// alarmGrade: 3,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 4,
// eqName: "设备00D",
// eqIndex: "4",
// alarmGrade: 2,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 5,
// eqName: "设备00E",
// eqIndex: "5",
// alarmGrade: 3,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 6,
// eqName: "设备00F",
// eqIndex: "6",
// alarmGrade: 3,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 7,
// eqName: "设备00G",
// eqIndex: "7",
// alarmGrade: 2,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 1,
// eqName: "设备00A",
// eqIndex: "1",
// alarmGrade: 1,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 2,
// eqName: "设备00B",
// eqIndex: "2",
// alarmGrade: 1,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 3,
// eqName: "设备00C",
// eqIndex: "3",
// alarmGrade: 3,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 4,
// eqName: "设备00D",
// eqIndex: "4",
// alarmGrade: 2,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 5,
// eqName: "设备00E",
// eqIndex: "5",
// alarmGrade: 3,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 6,
// eqName: "设备00F",
// eqIndex: "6",
// alarmGrade: 3,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 7,
// eqName: "设备00G",
// eqIndex: "7",
// alarmGrade: 2,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 1,
// eqName: "设备00A",
// eqIndex: "1",
// alarmGrade: 1,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 2,
// eqName: "设备00B",
// eqIndex: "2",
// alarmGrade: 1,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 3,
// eqName: "设备00C",
// eqIndex: "3",
// alarmGrade: 3,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 4,
// eqName: "设备00D",
// eqIndex: "4",
// alarmGrade: 2,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 5,
// eqName: "设备00E",
// eqIndex: "5",
// alarmGrade: 3,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 6,
// eqName: "设备00F",
// eqIndex: "6",
// alarmGrade: 3,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 7,
// eqName: "设备00G",
// eqIndex: "7",
// alarmGrade: 2,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 1,
// eqName: "设备00A",
// eqIndex: "1",
// alarmGrade: 1,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 2,
// eqName: "设备00B",
// eqIndex: "2",
// alarmGrade: 1,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 3,
// eqName: "设备00C",
// eqIndex: "3",
// alarmGrade: 3,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 4,
// eqName: "设备00D",
// eqIndex: "4",
// alarmGrade: 2,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 5,
// eqName: "设备00E",
// eqIndex: "5",
// alarmGrade: 3,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 6,
// eqName: "设备00F",
// eqIndex: "6",
// alarmGrade: 3,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// {
// id: 7,
// eqName: "设备00G",
// eqIndex: "7",
// alarmGrade: 2,
// alarmDetail: "lorem sdf fkj",
// position: "x,y",
// },
// ];
</script> </script>
<template> <template>
<div class="alert-list-page"> <div class="alert-list-page">
<div class="alert-list"> <div class="alert-list">
<div class="alert-list__table" style=""> <div class="alert-list__table" style="">
<el-table class="dark-table" :data="tableData" :show-overflow-tooltip="true" row-class-name="dark-row" <el-table
header-row-class-name="dark-header"> class="dark-table"
<el-table-column prop="eqName" label="设备名" width="90"></el-table-column> :data="alarmList"
<el-table-column prop="eqIndex" label="序号" width="60"></el-table-column> :show-overflow-tooltip="true"
<el-table-column prop="alarmGrade" label="报警等级" width="90"></el-table-column> row-class-name="dark-row"
<el-table-column prop="alarmDetail" label="报警细节" width="144"></el-table-column> header-row-class-name="dark-header"
<el-table-column prop="position" label="定位"></el-table-column> >
</el-table> <el-table-column
</div> prop="eqName"
<button class="alert-btn">忽略</button> label="设备名"
</div> width="90"
></el-table-column>
<el-table-column
prop="eqIndex"
label="序号"
width="60"
></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 class="alert-btn">忽略</button>
</div> </div>
</div>
</template> </template>
<style> <style>
.dark-table { .dark-table {
/* height: 72vh; */ /* height: 72vh; */
/* height: 72%; */ /* height: 72%; */
height: 100%; height: 100%;
background: transparent; background: transparent;
} }
.dark-row { .dark-row {
color: #fff; color: #fff;
background: #005eff25 !important; background: #005eff25 !important;
} }
.dark-row>td.el-table__cell { .dark-row > td.el-table__cell {
border: none; border: none;
} }
.dark-row:hover>td.el-table__cell { .dark-row:hover > td.el-table__cell {
background-color: #005effaa !important; background-color: #005effaa !important;
} }
.dark-header { .dark-header {
background-color: transparent !important; background-color: transparent !important;
color: #fff; color: #fff;
} }
.dark-header>th.el-table__cell.is-leaf { .dark-header > th.el-table__cell.is-leaf {
border-bottom: none; border-bottom: none;
background-color: #005eff95 !important; background-color: #005eff95 !important;
font-weight: 400; font-weight: 400;
letter-spacing: 1px; letter-spacing: 1px;
} }
.dark-header>th.el-table__cell { .dark-header > th.el-table__cell {
} }
</style> </style>
<style scoped> <style scoped>
.alert-list-page { .alert-list-page {
flex: 1; flex: 1;
position: relative; position: relative;
} }
.alert-list { .alert-list {
height: 100%; height: 100%;
width: 480px; width: 480px;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.alert-list__table { .alert-list__table {
height: calc(100% - 72px); height: calc(100% - 72px);
background: linear-gradient(to right, transparent, #0ba6ff80); 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; background: transparent;
} }
button { button {
appearance: none; appearance: none;
outline: none; outline: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
.alert-btn { .alert-btn {
height: 72px; height: 72px;
background: #0f04; background: #0f04;
color: #fff; color: #fff;
font-size: 32px; font-size: 32px;
line-height: 1; line-height: 1;
letter-spacing: 2px; letter-spacing: 2px;
transition: all .2s ease-out; transition: all 0.2s ease-out;
} }
.alert-btn:hover { .alert-btn:hover {
background: #0f08; background: #0f08;
} }
</style> </style>

6
src/pages/DataPage.vue
View File

@ -3,12 +3,6 @@
import HourChart from "../components/HourChart.vue"; import HourChart from "../components/HourChart.vue";
import TeamChartDay from "../components/TeamChartDay.vue"; import TeamChartDay from "../components/TeamChartDay.vue";
import TeamChartMonth from "../components/TeamChartMonth.vue"; import TeamChartMonth from "../components/TeamChartMonth.vue";
import { useWsStore } from '../store'
const store = useWsStore();
console.log('store', store.data1.test);
</script> </script>
<template> <template>