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>
|
||||
import { ref, onMounted } from "vue";
|
||||
import MainPage from "./MainPage.vue";
|
||||
import MainScreen from "./MainScreen.vue";
|
||||
import AlertListScreen from "./AlertListScreen.vue";
|
||||
// import Slider from "./components/Slider.vue";
|
||||
import useWebsocket from "./utils/useWebsocket";
|
||||
import { useWsStore } from "./store";
|
||||
const store = useWsStore();
|
||||
|
||||
const excludePaths = ["/alert-list", "/main-screen"];
|
||||
// use websocket
|
||||
let urlPath = ref(document.location.pathname);
|
||||
if (urlPath.value === "/") {
|
||||
urlPath.value = "/1-1";
|
||||
}
|
||||
useWebsocket(store, urlPath.value);
|
||||
useWebsocket(store, urlPath.value, excludePaths);
|
||||
|
||||
// size setting
|
||||
// const size = ref(80);
|
||||
@ -33,8 +36,10 @@ useWebsocket(store, urlPath.value);
|
||||
|
||||
<template>
|
||||
<div id="app-container">
|
||||
<MainPage :path="urlPath" />
|
||||
<!-- <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>
|
||||
</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";
|
||||
|
||||
export default function useWebsocket(store, path) {
|
||||
export default function useWebsocket(store, path, excludePaths = []) {
|
||||
if (excludePaths.includes(path)) return;
|
||||
// connect0(store);
|
||||
connectPath(store, path);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user