Compare commits
2 Commits
544e42ac83
...
8d30507f1b
| Author | SHA1 | Date | |
|---|---|---|---|
|
8d30507f1b | ||
|
|
23bf4790df |
225
src/AlertListScreen.vue
Normal file
225
src/AlertListScreen.vue
Normal file
@ -0,0 +1,225 @@
|
|||||||
|
<!-- 报警列表页面 -->
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useWsStore } from "./store";
|
||||||
|
import Container from "./components/Base/Container.vue";
|
||||||
|
import DatetimeTool from "./components/HeadTime.vue";
|
||||||
|
import AppHeader from "./components/Base/Header.vue";
|
||||||
|
import Tools from "./components/Tools.vue";
|
||||||
|
|
||||||
|
const mainContainer = ref(null);
|
||||||
|
const props = defineProps({
|
||||||
|
line: {
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const store = useWsStore();
|
||||||
|
const alarmList = ref(
|
||||||
|
(store.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)
|
||||||
|
// }
|
||||||
|
|
||||||
|
function handleResolutionChange(width, height) {
|
||||||
|
mainContainer.value && changeScale(mainContainer.value, width, height);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="main-container" ref="mainContainer" class="main-container">
|
||||||
|
<DatetimeTool />
|
||||||
|
<Tools @change-resolution="handleResolutionChange" />
|
||||||
|
<AppHeader />
|
||||||
|
|
||||||
|
<div class="alert-list-page">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -279px;
|
||||||
|
width: calc(100% + 279px);
|
||||||
|
height: 100%;
|
||||||
|
background: #ccc3;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<!-- <ThreeD :line="line ?? '1'" /> -->
|
||||||
|
</div>
|
||||||
|
<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="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> -->
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.dark-table {
|
||||||
|
height: 100%;
|
||||||
|
background: transparent;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-row {
|
||||||
|
color: #fff;
|
||||||
|
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: #fff1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-header {
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-header > th.el-table__cell.is-leaf {
|
||||||
|
border-bottom: none;
|
||||||
|
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>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.main-container {
|
||||||
|
width: 1920px;
|
||||||
|
height: 1080px;
|
||||||
|
background: #000;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: url(./assets/bg.png) 100% / cover no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pages-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-list-page {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-list {
|
||||||
|
height: calc(100% - 56px);
|
||||||
|
width: 520px;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
right: 32px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
:fullscreen .alert-list {
|
||||||
|
width: 35%;
|
||||||
|
top: 32px;
|
||||||
|
height: calc(100% - 64px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-list__table {
|
||||||
|
height: calc(100% - 72px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-list__table >>> .el-table__inner-wrapper::before {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
appearance: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 72px;
|
||||||
|
background: #0f04;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
transition: all 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-btn:hover {
|
||||||
|
background: #0f08;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,17 +1,20 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from "vue";
|
import { ref, onMounted } from "vue";
|
||||||
import MainPage from "./MainPage.vue";
|
import MainPage from "./MainPage.vue";
|
||||||
|
import MainScreen from "./MainScreen.vue";
|
||||||
|
import AlertListScreen from "./AlertListScreen.vue";
|
||||||
// import Slider from "./components/Slider.vue";
|
// import Slider from "./components/Slider.vue";
|
||||||
import useWebsocket from "./utils/useWebsocket";
|
import useWebsocket from "./utils/useWebsocket";
|
||||||
import { useWsStore } from "./store";
|
import { useWsStore } from "./store";
|
||||||
const store = useWsStore();
|
const store = useWsStore();
|
||||||
|
|
||||||
|
const excludePaths = ["/alert-list", "/main-screen"];
|
||||||
// use websocket
|
// use websocket
|
||||||
let urlPath = ref(document.location.pathname);
|
let urlPath = ref(document.location.pathname);
|
||||||
if (urlPath.value === "/") {
|
if (urlPath.value === "/") {
|
||||||
urlPath.value = "/1-1";
|
urlPath.value = "/1-1";
|
||||||
}
|
}
|
||||||
useWebsocket(store, urlPath.value);
|
useWebsocket(store, urlPath.value, excludePaths);
|
||||||
|
|
||||||
// size setting
|
// size setting
|
||||||
// const size = ref(80);
|
// const size = ref(80);
|
||||||
@ -33,8 +36,10 @@ useWebsocket(store, urlPath.value);
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="app-container">
|
<div id="app-container">
|
||||||
<MainPage :path="urlPath" />
|
|
||||||
<!-- <Slider :size="size" @size-change="setSize" /> -->
|
<!-- <Slider :size="size" @size-change="setSize" /> -->
|
||||||
|
<MainPage v-if="!excludePaths.includes(urlPath)" :path="urlPath" />
|
||||||
|
<MainScreen v-if="urlPath == '/main-screen'" />
|
||||||
|
<AlertListScreen v-if="urlPath == '/alert-list'" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
233
src/MainScreen.vue
Normal file
233
src/MainScreen.vue
Normal file
@ -0,0 +1,233 @@
|
|||||||
|
<!-- 报警列表页面 -->
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useWsStore } from "./store";
|
||||||
|
import DatetimeTool from "./components/HeadTime.vue";
|
||||||
|
import AppHeader from "./components/Base/Header.vue";
|
||||||
|
import Tools from "./components/Tools.vue";
|
||||||
|
import TodayYield from "./components/mainscreen/TodayYield.vue";
|
||||||
|
import SumYield from "./components/mainscreen/SumYield.vue";
|
||||||
|
import TodayRate from "./components/mainscreen/TodayRate.vue";
|
||||||
|
import SumRate from "./components/mainscreen/SumRate.vue";
|
||||||
|
|
||||||
|
const mainContainer = ref(null);
|
||||||
|
const props = defineProps({
|
||||||
|
line: {
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const store = useWsStore();
|
||||||
|
const alarmList = ref(
|
||||||
|
(store.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)
|
||||||
|
// }
|
||||||
|
|
||||||
|
function handleResolutionChange(width, height) {
|
||||||
|
mainContainer.value && changeScale(mainContainer.value, width, height);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="main-container" ref="mainContainer" class="main-container">
|
||||||
|
<DatetimeTool />
|
||||||
|
<Tools @change-resolution="handleResolutionChange" />
|
||||||
|
<AppHeader />
|
||||||
|
|
||||||
|
<div class="main-screen">
|
||||||
|
<!-- <div
|
||||||
|
style="
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -279px;
|
||||||
|
width: calc(100% + 279px);
|
||||||
|
height: 100%;
|
||||||
|
background: #ccc3;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<ThreeD :line="line ?? '1'" />
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<TodayYield class=" " />
|
||||||
|
<SumYield class=" " />
|
||||||
|
<TodayRate class=" " />
|
||||||
|
<SumRate class=" " />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.dark-table {
|
||||||
|
height: 100%;
|
||||||
|
background: transparent;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-row {
|
||||||
|
color: #fff;
|
||||||
|
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: #fff1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-header {
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-header > th.el-table__cell.is-leaf {
|
||||||
|
border-bottom: none;
|
||||||
|
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>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.ccontainer {
|
||||||
|
width: 420px;
|
||||||
|
height: 420px;
|
||||||
|
background: #ccc3;
|
||||||
|
/* position: absolute; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-top {
|
||||||
|
top: 32px;
|
||||||
|
left: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-bottom {
|
||||||
|
bottom: 32px;
|
||||||
|
left: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-top {
|
||||||
|
top: 32px;
|
||||||
|
right: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-bottom {
|
||||||
|
bottom: 32px;
|
||||||
|
right: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
width: 1920px;
|
||||||
|
height: 1080px;
|
||||||
|
background: #000;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: url(./assets/bg.png) 100% / cover no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pages-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-screen {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: repeat(2, 400px);
|
||||||
|
grid-template-columns: repeat(2, 400px);
|
||||||
|
justify-content: center;
|
||||||
|
/* align-content: center; */
|
||||||
|
/* place-content: center; */
|
||||||
|
gap: 15% 55%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-list {
|
||||||
|
height: calc(100% - 56px);
|
||||||
|
width: 520px;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
right: 32px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
:fullscreen .alert-list {
|
||||||
|
width: 35%;
|
||||||
|
top: 32px;
|
||||||
|
height: calc(100% - 64px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-list__table {
|
||||||
|
height: calc(100% - 72px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-list__table >>> .el-table__inner-wrapper::before {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
appearance: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 72px;
|
||||||
|
background: #0f04;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
transition: all 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-btn:hover {
|
||||||
|
background: #0f08;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
10
src/components/mainscreen/SumRate.vue
Normal file
10
src/components/mainscreen/SumRate.vue
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, nextTick } from "vue";
|
||||||
|
import Container from "../Base/Container.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Container class="chart" title="累计生产线成品率" icon="cube">
|
||||||
|
<p class="empty-data-hint">暂无数据</p>
|
||||||
|
</Container>
|
||||||
|
</template>
|
||||||
84
src/components/mainscreen/SumYield.vue
Normal file
84
src/components/mainscreen/SumYield.vue
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, nextTick } from "vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import Container from "../Base/Container.vue";
|
||||||
|
import { useWsStore } from "../../store";
|
||||||
|
import setupFn from "./TeamChartDayOptions";
|
||||||
|
|
||||||
|
const store = useWsStore();
|
||||||
|
const chartChart = ref(null);
|
||||||
|
const chart = ref(null);
|
||||||
|
const showChartDom = ref(false);
|
||||||
|
|
||||||
|
/** 无状态，处理数据 */
|
||||||
|
function loadData(yieldArray) {
|
||||||
|
const result = [];
|
||||||
|
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
||||||
|
for (let i = 0; i < yieldArray.length; ++i) {
|
||||||
|
if (yieldArray[i].teamName == "A组") {
|
||||||
|
result[0] = parseInt(yieldArray[i].yield);
|
||||||
|
} else if (yieldArray[i].teamName == "B组") {
|
||||||
|
result[1] = parseInt(yieldArray[i].yield);
|
||||||
|
} else if (yieldArray[i].teamName == "C组") {
|
||||||
|
result[2] = parseInt(yieldArray[i].yield);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupChart(chart, dom, data) {
|
||||||
|
if (chart.value) chart.value.dispose();
|
||||||
|
nextTick(() => {
|
||||||
|
chart.value = echarts.init(dom);
|
||||||
|
setupFn(chart.value, data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 有状态，处理数据 */
|
||||||
|
function __apply(yieldArray) {
|
||||||
|
const d = loadData(yieldArray);
|
||||||
|
// const d = loadData([
|
||||||
|
// { teamName: "A组", yield: 11 },
|
||||||
|
// { teamName: "B组", yield: 23 },
|
||||||
|
// { teamName: "C组", yield: 14 },
|
||||||
|
// ]);
|
||||||
|
if (!d) {
|
||||||
|
showChartDom.value = false;
|
||||||
|
if (chart.value) chart.value.dispose();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
showChartDom.value = true;
|
||||||
|
setupChart(chart, chartChart.value, d);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 订阅
|
||||||
|
store.$subscribe((mutation, state) => {
|
||||||
|
__apply(state.data2.classTodayProductYield);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
chartChart.value.classList.add("h-full");
|
||||||
|
// __apply();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Container class="chart" title="累计生产线产量" icon="cube">
|
||||||
|
<div
|
||||||
|
ref="chartChart"
|
||||||
|
class="chart-chart"
|
||||||
|
:style="{ opacity: showChartDom ? 1 : 0 }"
|
||||||
|
></div>
|
||||||
|
<p v-show="!chart" class="empty-data-hint">暂无数据</p>
|
||||||
|
</Container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.chart {
|
||||||
|
/* height: 300px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-chart {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
59
src/components/mainscreen/TeamChartDayOptions.js
Normal file
59
src/components/mainscreen/TeamChartDayOptions.js
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
export const options = {
|
||||||
|
color: ['#a4c9d1', '#72340b', '#ffd601' ],
|
||||||
|
grid: {
|
||||||
|
top: 8,
|
||||||
|
bottom: 20,
|
||||||
|
left: 42,
|
||||||
|
right: 28,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
max: 100,
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#fff2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#e5e5e5a3",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: ["A组", "B组", "C组"],
|
||||||
|
inverse: true,
|
||||||
|
max: 2, // only the largest 3 bars will be displayed
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#e5e5e5a3",
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#e5e5e5",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
data: [34, 2, 23],
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "right",
|
||||||
|
formatter: "{c}%",
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function setup(echartInstance, dataArr) {
|
||||||
|
const new_options = { ...options };
|
||||||
|
new_options.series[0].data = dataArr;
|
||||||
|
echartInstance.setOption(new_options);
|
||||||
|
}
|
||||||
10
src/components/mainscreen/TodayRate.vue
Normal file
10
src/components/mainscreen/TodayRate.vue
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, nextTick } from "vue";
|
||||||
|
import Container from "../Base/Container.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Container class="chart" title="今日生产线成品率" icon="cube">
|
||||||
|
<p class="empty-data-hint">暂无数据</p>
|
||||||
|
</Container>
|
||||||
|
</template>
|
||||||
84
src/components/mainscreen/TodayYield.vue
Normal file
84
src/components/mainscreen/TodayYield.vue
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, nextTick } from "vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import Container from "../Base/Container.vue";
|
||||||
|
import { useWsStore } from "../../store";
|
||||||
|
import setupFn from "./TeamChartDayOptions";
|
||||||
|
|
||||||
|
const store = useWsStore();
|
||||||
|
const chartChart = ref(null);
|
||||||
|
const chart = ref(null);
|
||||||
|
const showChartDom = ref(false);
|
||||||
|
|
||||||
|
/** 无状态，处理数据 */
|
||||||
|
function loadData(yieldArray) {
|
||||||
|
const result = [];
|
||||||
|
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
||||||
|
for (let i = 0; i < yieldArray.length; ++i) {
|
||||||
|
if (yieldArray[i].teamName == "A组") {
|
||||||
|
result[0] = parseInt(yieldArray[i].yield);
|
||||||
|
} else if (yieldArray[i].teamName == "B组") {
|
||||||
|
result[1] = parseInt(yieldArray[i].yield);
|
||||||
|
} else if (yieldArray[i].teamName == "C组") {
|
||||||
|
result[2] = parseInt(yieldArray[i].yield);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupChart(chart, dom, data) {
|
||||||
|
if (chart.value) chart.value.dispose();
|
||||||
|
nextTick(() => {
|
||||||
|
chart.value = echarts.init(dom);
|
||||||
|
setupFn(chart.value, data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 有状态，处理数据 */
|
||||||
|
function __apply(yieldArray) {
|
||||||
|
const d = loadData(yieldArray);
|
||||||
|
// const d = loadData([
|
||||||
|
// { teamName: "A组", yield: 11 },
|
||||||
|
// { teamName: "B组", yield: 23 },
|
||||||
|
// { teamName: "C组", yield: 14 },
|
||||||
|
// ]);
|
||||||
|
if (!d) {
|
||||||
|
showChartDom.value = false;
|
||||||
|
if (chart.value) chart.value.dispose();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
showChartDom.value = true;
|
||||||
|
setupChart(chart, chartChart.value, d);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 订阅
|
||||||
|
store.$subscribe((mutation, state) => {
|
||||||
|
__apply(state.data2.classTodayProductYield);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
chartChart.value.classList.add("h-full");
|
||||||
|
// __apply();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Container class="chart" title="今日生产线产量" icon="cube">
|
||||||
|
<div
|
||||||
|
ref="chartChart"
|
||||||
|
class="chart-chart"
|
||||||
|
:style="{ opacity: showChartDom ? 1 : 0 }"
|
||||||
|
></div>
|
||||||
|
<p v-show="!chart" class="empty-data-hint">暂无数据</p>
|
||||||
|
</Container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.chart {
|
||||||
|
/* height: 300px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-chart {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,6 +1,7 @@
|
|||||||
import Client from "./ws";
|
import Client from "./ws";
|
||||||
|
|
||||||
export default function useWebsocket(store, path) {
|
export default function useWebsocket(store, path, excludePaths = []) {
|
||||||
|
if (excludePaths.includes(path)) return;
|
||||||
// connect0(store);
|
// connect0(store);
|
||||||
connectPath(store, path);
|
connectPath(store, path);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user