Compare commits
No commits in common. "52a9111a1931dfcda30b8691d77ebe93f5c39631" and "fb4c1500e713b1279e44459cbf26619fad2bdda0" have entirely different histories.
52a9111a19
...
fb4c1500e7
@ -6,7 +6,6 @@ import Container from "./components/Base/Container.vue";
|
|||||||
import DatetimeTool from "./components/HeadTime.vue";
|
import DatetimeTool from "./components/HeadTime.vue";
|
||||||
import AppHeader from "./components/Base/Header.vue";
|
import AppHeader from "./components/Base/Header.vue";
|
||||||
import Tools from "./components/Tools.vue";
|
import Tools from "./components/Tools.vue";
|
||||||
import FullEqList from "./FullEqList.vue";
|
|
||||||
|
|
||||||
const mainContainer = ref(null);
|
const mainContainer = ref(null);
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -48,14 +47,24 @@ function handleResolutionChange(width, height) {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="main-container" ref="mainContainer" class="main-container">
|
<div id="main-container" ref="mainContainer" class="main-container">
|
||||||
<div id="main-container__fulleq">
|
<div id="main-container__fulleq"></div>
|
||||||
<FullEqList />
|
|
||||||
</div>
|
|
||||||
<DatetimeTool />
|
<DatetimeTool />
|
||||||
<Tools @change-resolution="handleResolutionChange" />
|
<Tools @change-resolution="handleResolutionChange" />
|
||||||
<AppHeader />
|
<AppHeader />
|
||||||
|
|
||||||
<div class="alert-list-page">
|
<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">
|
<Container class="alert-list" title="报警列表" icon="cube">
|
||||||
<div class="alert-list__table" style="">
|
<div class="alert-list__table" style="">
|
||||||
<el-table
|
<el-table
|
||||||
|
|||||||
@ -1,119 +0,0 @@
|
|||||||
<!--
|
|
||||||
filename: FullEqList.vue
|
|
||||||
author: liubin
|
|
||||||
date: 2024-03-05 14:13:06
|
|
||||||
description:
|
|
||||||
-->
|
|
||||||
<script setup>
|
|
||||||
import "./full-eq-list.css";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="absolute v-1 tag-container">
|
|
||||||
<span class="name-tag">M7上片</span>
|
|
||||||
<span class="name-tag">M6上片</span>
|
|
||||||
<span class="name-tag">M5上片</span>
|
|
||||||
<span class="name-tag">M4上片</span>
|
|
||||||
<span class="name-tag">M3上片</span>
|
|
||||||
<span class="name-tag">M2上片</span>
|
|
||||||
<span class="name-tag">M1上片</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute v-2 tag-container">
|
|
||||||
<span class="name-tag">M7磨边机</span>
|
|
||||||
<span class="name-tag">M6磨边机</span>
|
|
||||||
<span class="name-tag">M5磨边机</span>
|
|
||||||
<span class="name-tag">M4磨边机</span>
|
|
||||||
<span class="name-tag">M3磨边机</span>
|
|
||||||
<span class="name-tag">M2磨边机</span>
|
|
||||||
<span class="name-tag">M1磨边机</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute v-3 tag-container">
|
|
||||||
<span class="name-tag">M7清洗机</span>
|
|
||||||
<span class="name-tag">M6清洗机</span>
|
|
||||||
<span class="name-tag">M5清洗机</span>
|
|
||||||
<span class="name-tag">M4清洗机</span>
|
|
||||||
<span class="name-tag">M3清洗机</span>
|
|
||||||
<span class="name-tag">M2清洗机</span>
|
|
||||||
<span class="name-tag">M1清洗机</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute z-1 v-4 tag-container">
|
|
||||||
<span class="name-tag">Z7钻孔机</span>
|
|
||||||
<span class="name-tag">Z6钻孔机</span>
|
|
||||||
<span class="name-tag">Z5钻孔机</span>
|
|
||||||
<span class="name-tag">Z4钻孔机</span>
|
|
||||||
<span class="name-tag">Z3钻孔机</span>
|
|
||||||
<span class="name-tag">Z2钻孔机</span>
|
|
||||||
<span class="name-tag">Z1钻孔机</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute z-1 v-5 tag-container">
|
|
||||||
<span class="name-tag">S7清洗机</span>
|
|
||||||
<span class="name-tag">S6清洗机</span>
|
|
||||||
<span class="name-tag">S5清洗机</span>
|
|
||||||
<span class="name-tag">S4清洗机</span>
|
|
||||||
<span class="name-tag">S3清洗机</span>
|
|
||||||
<span class="name-tag">S2清洗机</span>
|
|
||||||
<span class="name-tag">S1清洗机</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute z-1 v-6 tag-container">
|
|
||||||
<span class="name-tag">S7前储片台</span>
|
|
||||||
<span class="name-tag">S6前储片台</span>
|
|
||||||
<span class="name-tag">S5前储片台</span>
|
|
||||||
<span class="name-tag">S4前储片台</span>
|
|
||||||
<span class="name-tag">S3前储片台</span>
|
|
||||||
<span class="name-tag">S2前储片台</span>
|
|
||||||
<span class="name-tag">S1前储片台</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute z-2 v-7 tag-container">
|
|
||||||
<span class="name-tag">S7丝印机</span>
|
|
||||||
<span class="name-tag">S6丝印机</span>
|
|
||||||
<span class="name-tag">S5丝印机</span>
|
|
||||||
<span class="name-tag">S4丝印机</span>
|
|
||||||
<span class="name-tag">S3丝印机</span>
|
|
||||||
<span class="name-tag">S2丝印机</span>
|
|
||||||
<span class="name-tag">S1丝印机</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute z-2 v-8 tag-container">
|
|
||||||
<span class="name-tag">S7固化炉</span>
|
|
||||||
<span class="name-tag">S6固化炉</span>
|
|
||||||
<span class="name-tag">S5固化炉</span>
|
|
||||||
<span class="name-tag">S4固化炉</span>
|
|
||||||
<span class="name-tag">S3固化炉</span>
|
|
||||||
<span class="name-tag">S2固化炉</span>
|
|
||||||
<span class="name-tag">S1固化炉</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute z-1 v-10 tag-container">
|
|
||||||
<span class="name-tag">D2镀膜机</span>
|
|
||||||
<span class="name-tag">D1镀膜机</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute z-1 v-9 tag-container">
|
|
||||||
<span class="name-tag">S7后储片台</span>
|
|
||||||
<span class="name-tag">S6后储片台</span>
|
|
||||||
<span class="name-tag">S5后储片台</span>
|
|
||||||
<span class="name-tag">S4后储片台</span>
|
|
||||||
<span class="name-tag">S3后储片台</span>
|
|
||||||
<span class="name-tag">S2后储片台</span>
|
|
||||||
<span class="name-tag">S1后储片台</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute z-3 tag-container">
|
|
||||||
<span class="name-tag">B3前储片台</span>
|
|
||||||
<span class="name-tag">B2前储片台</span>
|
|
||||||
<span class="name-tag">B1前储片台</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute z-3 b-1 tag-container">
|
|
||||||
<span class="name-tag">B3清洗机</span>
|
|
||||||
<span class="name-tag">B2清洗机</span>
|
|
||||||
<span class="name-tag">B1清洗机</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute z-3 b-2 tag-container">
|
|
||||||
<span class="name-tag">B3下片</span>
|
|
||||||
<span class="name-tag">B2下片</span>
|
|
||||||
<span class="name-tag">B1下片</span>
|
|
||||||
</div>
|
|
||||||
<div class="absolute z-3 b-3 tag-container">
|
|
||||||
<span class="name-tag">B3后储片台</span>
|
|
||||||
<span class="name-tag">B2后储片台</span>
|
|
||||||
<span class="name-tag">B1后储片台</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
|
||||||
@ -9,8 +9,6 @@ import TodayYield from "./components/mainscreen/TodayYield.vue";
|
|||||||
import SumYield from "./components/mainscreen/SumYield.vue";
|
import SumYield from "./components/mainscreen/SumYield.vue";
|
||||||
import TodayRate from "./components/mainscreen/TodayRate.vue";
|
import TodayRate from "./components/mainscreen/TodayRate.vue";
|
||||||
import SumRate from "./components/mainscreen/SumRate.vue";
|
import SumRate from "./components/mainscreen/SumRate.vue";
|
||||||
import FullEqList from "./FullEqList.vue";
|
|
||||||
import { connect0 } from "./utils/useWebsocket";
|
|
||||||
|
|
||||||
const mainContainer = ref(null);
|
const mainContainer = ref(null);
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -20,9 +18,6 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
const store = useWsStore();
|
const store = useWsStore();
|
||||||
|
|
||||||
connect0(store);
|
|
||||||
|
|
||||||
const alarmList = ref(
|
const alarmList = ref(
|
||||||
(store.data1.alarmArrList || []).map((item, index) => ({
|
(store.data1.alarmArrList || []).map((item, index) => ({
|
||||||
id: item.id,
|
id: item.id,
|
||||||
@ -55,9 +50,7 @@ function handleResolutionChange(width, height) {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="main-container" ref="mainContainer" class="main-container">
|
<div id="main-container" ref="mainContainer" class="main-container">
|
||||||
<div id="main-container__fulleq">
|
<div id="main-container__fulleq"></div>
|
||||||
<FullEqList />
|
|
||||||
</div>
|
|
||||||
<DatetimeTool />
|
<DatetimeTool />
|
||||||
<Tools @change-resolution="handleResolutionChange" />
|
<Tools @change-resolution="handleResolutionChange" />
|
||||||
<AppHeader />
|
<AppHeader />
|
||||||
@ -173,6 +166,15 @@ function handleResolutionChange(width, height) {
|
|||||||
background: url(./assets/bg.png) 100% / cover no-repeat;
|
background: url(./assets/bg.png) 100% / cover no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#main-container__fulleq {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(./assets/full-lines.png) 100% / cover no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
.pages-wrapper {
|
.pages-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -1,152 +1,10 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, nextTick } from "vue";
|
import { ref, onMounted, nextTick } from "vue";
|
||||||
import * as echarts from "echarts";
|
|
||||||
import Container from "../Base/Container.vue";
|
import Container from "../Base/Container.vue";
|
||||||
import { useWsStore } from "../../store";
|
|
||||||
|
|
||||||
const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
|
|
||||||
const option = {
|
|
||||||
color: ["#F3908B"],
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
type: "shadow",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: "5%",
|
|
||||||
bottom: "5%",
|
|
||||||
left: "3%",
|
|
||||||
right: "5%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 14,
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#ccc6",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: ["钢1线", "钢2线", "钢3线"],
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 14,
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#ccc6",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: "line",
|
|
||||||
data: datalist,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: "top",
|
|
||||||
// formatter: (params) => {
|
|
||||||
// console.log("params", datalist[params.dataIndex]);
|
|
||||||
// },
|
|
||||||
formatter: "{c}%",
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
chart.setOption(option);
|
|
||||||
};
|
|
||||||
|
|
||||||
const store = useWsStore();
|
|
||||||
const chartChart = ref(null);
|
|
||||||
const chart = ref(null);
|
|
||||||
const showChartDom = ref(false);
|
|
||||||
|
|
||||||
/** 无状态，处理数据 */
|
|
||||||
function loadData(yieldArray) {
|
|
||||||
// lineSumProductYield
|
|
||||||
const result = [];
|
|
||||||
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
|
||||||
for (let i = 0; i < yieldArray.length; ++i) {
|
|
||||||
if (yieldArray[i].name == "钢1线") {
|
|
||||||
result[0] = parseFloat(yieldArray[i].data);
|
|
||||||
} else if (yieldArray[i].name == "钢2线") {
|
|
||||||
result[1] = parseFloat(yieldArray[i].data);
|
|
||||||
} else if (yieldArray[i].name == "钢3线") {
|
|
||||||
result[2] = parseFloat(yieldArray[i].data);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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);
|
|
||||||
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.mainDataChart.lineSumProductYield);
|
|
||||||
// __apply([
|
|
||||||
// { name: "钢1线", data: 0.32 },
|
|
||||||
// { name: "钢2线", data: 0.91 },
|
|
||||||
// { name: "钢3线", data: 0.54 },
|
|
||||||
// ]);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
chartChart.value.classList.add("h-full");
|
|
||||||
__apply([
|
|
||||||
{ name: "钢1线", data: "0%" },
|
|
||||||
{ name: "钢2线", data: "0%" },
|
|
||||||
{ name: "钢3线", data: "0%" },
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Container class="chart" title="累计生产线成品率" icon="cube">
|
<Container class="chart" title="累计生产线成品率" icon="cube">
|
||||||
<div
|
<p class="empty-data-hint">暂无数据</p>
|
||||||
ref="chartChart"
|
|
||||||
class="chart-chart"
|
|
||||||
:style="{ opacity: showChartDom ? 1 : 0 }"
|
|
||||||
></div>
|
|
||||||
<p v-show="!chart" class="empty-data-hint">暂无数据</p>
|
|
||||||
</Container>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chart {
|
|
||||||
/* height: 300px; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-chart {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -3,70 +3,7 @@ import { ref, onMounted, nextTick } 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";
|
import { useWsStore } from "../../store";
|
||||||
|
import setupFn from "./TeamChartDayOptions";
|
||||||
|
|
||||||
const setupFn = (chart, datalist = [0.0, 0.0, 0.0, 0.0]) => {
|
|
||||||
console.log("datalist", datalist);
|
|
||||||
const option = {
|
|
||||||
color: ["#3398FB"],
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
type: "shadow",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: "5%",
|
|
||||||
bottom: "5%",
|
|
||||||
left: "3%",
|
|
||||||
right: "5%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "value",
|
|
||||||
boundaryGap: [0, 0.01],
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 14,
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#ccc6",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: ["钢1线", "钢2线", "钢3线", "合计"],
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 14,
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#ccc6",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: "bar",
|
|
||||||
data: datalist,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: "right",
|
|
||||||
formatter: "{c}",
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
chart.setOption(option);
|
|
||||||
};
|
|
||||||
|
|
||||||
const store = useWsStore();
|
const store = useWsStore();
|
||||||
const chartChart = ref(null);
|
const chartChart = ref(null);
|
||||||
@ -78,15 +15,12 @@ function loadData(yieldArray) {
|
|||||||
const result = [];
|
const result = [];
|
||||||
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
||||||
for (let i = 0; i < yieldArray.length; ++i) {
|
for (let i = 0; i < yieldArray.length; ++i) {
|
||||||
if (yieldArray[i].name == "钢1线") {
|
if (yieldArray[i].teamName == "A组") {
|
||||||
result[0] = parseInt(yieldArray[i].data);
|
result[0] = parseInt(yieldArray[i].yield);
|
||||||
} else if (yieldArray[i].name == "钢2线") {
|
} else if (yieldArray[i].teamName == "B组") {
|
||||||
result[1] = parseInt(yieldArray[i].data);
|
result[1] = parseInt(yieldArray[i].yield);
|
||||||
} else if (yieldArray[i].name == "钢3线") {
|
} else if (yieldArray[i].teamName == "C组") {
|
||||||
result[2] = parseInt(yieldArray[i].data);
|
result[2] = parseInt(yieldArray[i].yield);
|
||||||
} else {
|
|
||||||
// 合计
|
|
||||||
result[3] = parseInt(yieldArray[i].data);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
@ -103,6 +37,11 @@ function setupChart(chart, dom, data) {
|
|||||||
/** 有状态，处理数据 */
|
/** 有状态，处理数据 */
|
||||||
function __apply(yieldArray) {
|
function __apply(yieldArray) {
|
||||||
const d = loadData(yieldArray);
|
const d = loadData(yieldArray);
|
||||||
|
// const d = loadData([
|
||||||
|
// { teamName: "A组", yield: 11 },
|
||||||
|
// { teamName: "B组", yield: 23 },
|
||||||
|
// { teamName: "C组", yield: 14 },
|
||||||
|
// ]);
|
||||||
if (!d) {
|
if (!d) {
|
||||||
showChartDom.value = false;
|
showChartDom.value = false;
|
||||||
if (chart.value) chart.value.dispose();
|
if (chart.value) chart.value.dispose();
|
||||||
@ -114,23 +53,12 @@ function __apply(yieldArray) {
|
|||||||
|
|
||||||
// 订阅
|
// 订阅
|
||||||
store.$subscribe((mutation, state) => {
|
store.$subscribe((mutation, state) => {
|
||||||
__apply(state.mainDataChart.lineSumProductData);
|
__apply(state.data2.classTodayProductYield);
|
||||||
// __apply([
|
|
||||||
// { name: "钢1线", data: 11 },
|
|
||||||
// { name: "钢2线", data: 22 },
|
|
||||||
// { name: "钢3线", data: 33 },
|
|
||||||
// { name: "合计", data: 66 },
|
|
||||||
// ]);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
chartChart.value.classList.add("h-full");
|
chartChart.value.classList.add("h-full");
|
||||||
__apply([
|
// __apply();
|
||||||
{ name: "钢1线", data: 0 },
|
|
||||||
{ name: "钢2线", data: 0 },
|
|
||||||
{ name: "钢3线", data: 0 },
|
|
||||||
{ name: "合计", data: 0 },
|
|
||||||
]);
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
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);
|
||||||
|
}
|
||||||
@ -1,153 +1,10 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, nextTick } from "vue";
|
import { ref, onMounted, nextTick } from "vue";
|
||||||
import * as echarts from "echarts";
|
|
||||||
import Container from "../Base/Container.vue";
|
import Container from "../Base/Container.vue";
|
||||||
import { useWsStore } from "../../store";
|
|
||||||
|
|
||||||
const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
|
|
||||||
const option = {
|
|
||||||
color: ["#F3908B"],
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
type: "shadow",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: "5%",
|
|
||||||
bottom: "5%",
|
|
||||||
left: "3%",
|
|
||||||
right: "5%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 14,
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#ccc6",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: ["钢1线", "钢2线", "钢3线"],
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 14,
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#ccc6",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: "line",
|
|
||||||
data: datalist,
|
|
||||||
// data: datalist.map((item) => item * 100),
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: "top",
|
|
||||||
// formatter: (params) => {
|
|
||||||
// console.log("params", datalist[params.dataIndex]);
|
|
||||||
// },
|
|
||||||
formatter: "{c}%",
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
chart.setOption(option);
|
|
||||||
};
|
|
||||||
|
|
||||||
const store = useWsStore();
|
|
||||||
const chartChart = ref(null);
|
|
||||||
const chart = ref(null);
|
|
||||||
const showChartDom = ref(false);
|
|
||||||
|
|
||||||
/** 无状态，处理数据 */
|
|
||||||
function loadData(yieldArray) {
|
|
||||||
// lineTodayProductYield
|
|
||||||
const result = [];
|
|
||||||
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
|
||||||
for (let i = 0; i < yieldArray.length; ++i) {
|
|
||||||
if (yieldArray[i].name == "钢1线") {
|
|
||||||
result[0] = parseFloat(yieldArray[i].data) || 0.0;
|
|
||||||
} else if (yieldArray[i].name == "钢2线") {
|
|
||||||
result[1] = parseFloat(yieldArray[i].data) || 0.0;
|
|
||||||
} else if (yieldArray[i].name == "钢3线") {
|
|
||||||
result[2] = parseFloat(yieldArray[i].data) || 0.0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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);
|
|
||||||
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.mainDataChart.lineTodayProductYield);
|
|
||||||
// __apply([
|
|
||||||
// { name: "钢1线", data: 0.32 },
|
|
||||||
// { name: "钢2线", data: 0.91 },
|
|
||||||
// { name: "钢3线", data: 0.54 },
|
|
||||||
// ]);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
chartChart.value.classList.add("h-full");
|
|
||||||
__apply([
|
|
||||||
{ name: "钢1线", data: "0%" },
|
|
||||||
{ name: "钢2线", data: "0%" },
|
|
||||||
{ name: "钢3线", data: "0%" },
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Container class="chart" title="今日生产线成品率" icon="cube">
|
<Container class="chart" title="今日生产线成品率" icon="cube">
|
||||||
<div
|
<p class="empty-data-hint">暂无数据</p>
|
||||||
ref="chartChart"
|
|
||||||
class="chart-chart"
|
|
||||||
:style="{ opacity: showChartDom ? 1 : 0 }"
|
|
||||||
></div>
|
|
||||||
<p v-show="!chart" class="empty-data-hint">暂无数据</p>
|
|
||||||
</Container>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chart {
|
|
||||||
/* height: 300px; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-chart {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -3,69 +3,7 @@ import { ref, onMounted, nextTick } 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";
|
import { useWsStore } from "../../store";
|
||||||
|
import setupFn from "./TeamChartDayOptions";
|
||||||
const setupFn = (chart, datalist = [0.0, 0.0, 0.0, 0.0]) => {
|
|
||||||
console.log("datalist", datalist);
|
|
||||||
const option = {
|
|
||||||
color: ["#3398FB"],
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
type: "shadow",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: "5%",
|
|
||||||
bottom: "5%",
|
|
||||||
left: "3%",
|
|
||||||
right: "5%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "value",
|
|
||||||
boundaryGap: [0, 0.01],
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 14,
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#ccc6",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: ["钢1线", "钢2线", "钢3线", "合计"],
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 14,
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#ccc6",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: "bar",
|
|
||||||
data: datalist,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: "right",
|
|
||||||
formatter: "{c}",
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
chart.setOption(option);
|
|
||||||
};
|
|
||||||
|
|
||||||
const store = useWsStore();
|
const store = useWsStore();
|
||||||
const chartChart = ref(null);
|
const chartChart = ref(null);
|
||||||
@ -74,19 +12,15 @@ const showChartDom = ref(false);
|
|||||||
|
|
||||||
/** 无状态，处理数据 */
|
/** 无状态，处理数据 */
|
||||||
function loadData(yieldArray) {
|
function loadData(yieldArray) {
|
||||||
// lineTodayProductData
|
|
||||||
const result = [];
|
const result = [];
|
||||||
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
||||||
for (let i = 0; i < yieldArray.length; ++i) {
|
for (let i = 0; i < yieldArray.length; ++i) {
|
||||||
if (yieldArray[i].name == "钢1线") {
|
if (yieldArray[i].teamName == "A组") {
|
||||||
result[0] = parseInt(yieldArray[i].data);
|
result[0] = parseInt(yieldArray[i].yield);
|
||||||
} else if (yieldArray[i].name == "钢2线") {
|
} else if (yieldArray[i].teamName == "B组") {
|
||||||
result[1] = parseInt(yieldArray[i].data);
|
result[1] = parseInt(yieldArray[i].yield);
|
||||||
} else if (yieldArray[i].name == "钢3线") {
|
} else if (yieldArray[i].teamName == "C组") {
|
||||||
result[2] = parseInt(yieldArray[i].data);
|
result[2] = parseInt(yieldArray[i].yield);
|
||||||
} else {
|
|
||||||
// 合计
|
|
||||||
result[3] = parseInt(yieldArray[i].data);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
@ -103,6 +37,11 @@ function setupChart(chart, dom, data) {
|
|||||||
/** 有状态，处理数据 */
|
/** 有状态，处理数据 */
|
||||||
function __apply(yieldArray) {
|
function __apply(yieldArray) {
|
||||||
const d = loadData(yieldArray);
|
const d = loadData(yieldArray);
|
||||||
|
// const d = loadData([
|
||||||
|
// { teamName: "A组", yield: 11 },
|
||||||
|
// { teamName: "B组", yield: 23 },
|
||||||
|
// { teamName: "C组", yield: 14 },
|
||||||
|
// ]);
|
||||||
if (!d) {
|
if (!d) {
|
||||||
showChartDom.value = false;
|
showChartDom.value = false;
|
||||||
if (chart.value) chart.value.dispose();
|
if (chart.value) chart.value.dispose();
|
||||||
@ -114,23 +53,12 @@ function __apply(yieldArray) {
|
|||||||
|
|
||||||
// 订阅
|
// 订阅
|
||||||
store.$subscribe((mutation, state) => {
|
store.$subscribe((mutation, state) => {
|
||||||
__apply(state.mainDataChart.lineTodayProductData);
|
__apply(state.data2.classTodayProductYield);
|
||||||
// __apply([
|
|
||||||
// { name: "钢1线", data: 11 },
|
|
||||||
// { name: "钢2线", data: 22 },
|
|
||||||
// { name: "钢3线", data: 33 },
|
|
||||||
// { name: "合计", data: 66 },
|
|
||||||
// ]);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
chartChart.value.classList.add("h-full");
|
chartChart.value.classList.add("h-full");
|
||||||
__apply([
|
// __apply();
|
||||||
{ name: "钢1线", data: 0 },
|
|
||||||
{ name: "钢2线", data: 0 },
|
|
||||||
{ name: "钢3线", data: 0 },
|
|
||||||
{ name: "合计", data: 0 },
|
|
||||||
]);
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -1,179 +0,0 @@
|
|||||||
#main-container__fulleq {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url(./assets/full-lines.png) 100% / cover no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name-tag {
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: #ccc3;
|
|
||||||
backdrop-filter: blur(3px);
|
|
||||||
color: #000a;
|
|
||||||
font-size: 12px;
|
|
||||||
/* font-weight: 600; */
|
|
||||||
transition: background 0.1s ease-out;
|
|
||||||
user-select: none;
|
|
||||||
width: 72px;
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
|
||||||
/* cursor: pointer; */
|
|
||||||
/* transform: rotate(-45deg); */
|
|
||||||
box-shadow: 0 0 5px 2px #0003;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .name-tag:hover {
|
|
||||||
background: #666c;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.tag-container > .name-tag:first-child {
|
|
||||||
bottom: 214px;
|
|
||||||
left: -128px;
|
|
||||||
}
|
|
||||||
.tag-container > .name-tag:nth-child(2) {
|
|
||||||
bottom: 182px;
|
|
||||||
left: -100px;
|
|
||||||
}
|
|
||||||
.tag-container > .name-tag:nth-child(3) {
|
|
||||||
bottom: 150px;
|
|
||||||
left: -88px;
|
|
||||||
}
|
|
||||||
.tag-container > .name-tag:nth-child(4) {
|
|
||||||
bottom: 118px;
|
|
||||||
left: -68px;
|
|
||||||
}
|
|
||||||
.tag-container > .name-tag:nth-child(5) {
|
|
||||||
bottom: 86px;
|
|
||||||
left: -52px;
|
|
||||||
}
|
|
||||||
.tag-container > .name-tag:nth-child(6) {
|
|
||||||
bottom: 32px;
|
|
||||||
left: -20px;
|
|
||||||
}
|
|
||||||
.tag-container > .name-tag:nth-child(7) {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.absolute {
|
|
||||||
position: absolute;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-1 {
|
|
||||||
bottom: 160px;
|
|
||||||
left: 430px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-2 {
|
|
||||||
bottom: 200px;
|
|
||||||
left: 480px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-3 {
|
|
||||||
bottom: 250px;
|
|
||||||
left: 620px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.z-1 > .name-tag:first-child {
|
|
||||||
bottom: 205px;
|
|
||||||
left: -155px;
|
|
||||||
}
|
|
||||||
.z-1 > .name-tag:nth-child(2) {
|
|
||||||
bottom: 180px;
|
|
||||||
left: -130px;
|
|
||||||
}
|
|
||||||
.v-4 {
|
|
||||||
bottom: 300px;
|
|
||||||
left: 730px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-5 {
|
|
||||||
bottom: 340px;
|
|
||||||
left: 780px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-6 {
|
|
||||||
bottom: 360px;
|
|
||||||
left: 840px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.z-2 > .name-tag:first-child {
|
|
||||||
bottom: 205px;
|
|
||||||
left: -140px;
|
|
||||||
}
|
|
||||||
.z-2 > .name-tag:nth-child(2) {
|
|
||||||
bottom: 180px;
|
|
||||||
left: -110px;
|
|
||||||
}
|
|
||||||
.z-2 > .name-tag:nth-child(3) {
|
|
||||||
bottom: 152px;
|
|
||||||
left: -70px;
|
|
||||||
}
|
|
||||||
.z-2 > .name-tag:nth-child(4) {
|
|
||||||
bottom: 128px;
|
|
||||||
left: -50px;
|
|
||||||
}
|
|
||||||
.z-2 > .name-tag:nth-child(5) {
|
|
||||||
bottom: 100px;
|
|
||||||
left: -36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-7 {
|
|
||||||
bottom: 380px;
|
|
||||||
left: 880px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-8 {
|
|
||||||
bottom: 410px;
|
|
||||||
left: 930px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-9 {
|
|
||||||
bottom: 440px;
|
|
||||||
left: 1020px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-10 {
|
|
||||||
bottom: 260px;
|
|
||||||
left: 1100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.z-3 {
|
|
||||||
bottom: 550px;
|
|
||||||
left: 1400px;
|
|
||||||
/* background: #c003; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.z-3 > .name-tag:first-child {
|
|
||||||
bottom: 235px;
|
|
||||||
left: -155px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.z-3 > .name-tag:nth-child(2) {
|
|
||||||
bottom: 188px;
|
|
||||||
left: -85px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.z-3 > .name-tag:nth-child(3) {
|
|
||||||
bottom: 120px;
|
|
||||||
left: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b-1 {
|
|
||||||
bottom: 570px;
|
|
||||||
left: 1440px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b-2 {
|
|
||||||
bottom: 600px;
|
|
||||||
left: 1490px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b-3 {
|
|
||||||
bottom: 620px;
|
|
||||||
left: 1530px;
|
|
||||||
}
|
|
||||||
@ -2,11 +2,9 @@ import { defineStore } from "pinia";
|
|||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
|
|
||||||
export const useWsStore = defineStore("wsData", () => {
|
export const useWsStore = defineStore("wsData", () => {
|
||||||
const data1 = ref({});
|
const data1 = ref({ test: "hello world" });
|
||||||
const data2 = ref({});
|
const data2 = ref({});
|
||||||
const data3 = ref({});
|
const data3 = ref({});
|
||||||
const mainDataChart = ref({});
|
|
||||||
const mainDataAlarm = ref({});
|
|
||||||
|
|
||||||
function updateData(category, data) {
|
function updateData(category, data) {
|
||||||
switch (category) {
|
switch (category) {
|
||||||
@ -18,19 +16,12 @@ export const useWsStore = defineStore("wsData", () => {
|
|||||||
break;
|
break;
|
||||||
case "3":
|
case "3":
|
||||||
data3.value = { ...data3.value, ...data };
|
data3.value = { ...data3.value, ...data };
|
||||||
break;
|
|
||||||
case "main-chart":
|
|
||||||
mainDataChart.value = { ...mainDataChart.value, ...data };
|
|
||||||
break;
|
|
||||||
case "main-alarm":
|
|
||||||
mainDataAlarm.value = { ...mainDataAlarm.value, ...data };
|
|
||||||
break;
|
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return { data1, data2, data3, mainDataChart, mainDataAlarm, updateData };
|
return { data1, data2, data3, updateData };
|
||||||
});
|
});
|
||||||
// export const useWsStore = defineStore('wsData', {
|
// export const useWsStore = defineStore('wsData', {
|
||||||
// state: () => ({
|
// state: () => ({
|
||||||
|
|||||||
@ -6,8 +6,7 @@ export default function useWebsocket(store, path, excludePaths = []) {
|
|||||||
connectPath(store, path);
|
connectPath(store, path);
|
||||||
}
|
}
|
||||||
|
|
||||||
// const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
|
const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
|
||||||
const url = "ws://192.168.0.33:8082/QbMonitoring/websocket";
|
|
||||||
function connectPath(store, path) {
|
function connectPath(store, path) {
|
||||||
new Client(
|
new Client(
|
||||||
{
|
{
|
||||||
@ -35,8 +34,7 @@ function connectPath(store, path) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function connect0(store) {
|
function connect0(store) {
|
||||||
console.log("[*] Connecting main screen........");
|
|
||||||
new Client(
|
new Client(
|
||||||
{
|
{
|
||||||
url: url + "/0",
|
url: url + "/0",
|
||||||
@ -46,14 +44,6 @@ export function connect0(store) {
|
|||||||
try {
|
try {
|
||||||
const data = JSON.parse(message.data);
|
const data = JSON.parse(message.data);
|
||||||
console.log("message --- 0 ---> ", JSON.parse(message.data));
|
console.log("message --- 0 ---> ", JSON.parse(message.data));
|
||||||
|
|
||||||
if ("lineSumProductYield" in data) {
|
|
||||||
// 主屏推送 图表数据
|
|
||||||
store.updateData("main-chart", data);
|
|
||||||
} else {
|
|
||||||
// 主屏推送 报警数据
|
|
||||||
store.updateData("main-alarm", data);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log("[x] 未解析的ws数据: ", err);
|
console.log("[x] 未解析的ws数据: ", err);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user