@@ -40,7 +40,7 @@ defineProps({ | |||
result="shadowBlurOuter1" | |||
></feGaussianBlur> | |||
<feColorMatrix | |||
values="0 0 0 0 0.000727194297 0 0 0 0 0.0682545659 0 0 0 0 0.141870471 0 0 0 1 0" | |||
values="0 0 0 0 0.0123 0 0 0 0 0.0123 0 0 0 0 0.0123 0 0 0 1 0" | |||
type="matrix" | |||
in="shadowBlurOuter1" | |||
result="shadowMatrixOuter1" | |||
@@ -1,5 +1,5 @@ | |||
<script setup> | |||
import { ref, watch, onMounted } from "vue"; | |||
import { ref, watch, onMounted, nextTick } from "vue"; | |||
import * as echarts from "echarts"; | |||
import Container from "./Base/Container.vue"; | |||
import { useWsStore } from "../store"; | |||
@@ -9,46 +9,69 @@ const store = useWsStore(); | |||
const chartChart = ref(null); | |||
const chart = ref(null); | |||
// 小时数据 | |||
const hourData = ref(null); | |||
const hourData = ref([]); | |||
store.$subscribe((mutation, state) => { | |||
console.log("=======>", state.data2.lineHourList?.length); | |||
if ( | |||
state.data2.lineHourList == undefined || | |||
state.data2.lineHourList?.length == 0 | |||
) { | |||
hourData.value.splice(0); | |||
if (chart.value) chart.value.dispose(); | |||
return; | |||
} | |||
console.log("lineHourList ===> ", state.data2.lineHourList); | |||
hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({ | |||
id: `${item.lineName}_${index}`, | |||
hour: item.hour || `${index}`.padStart(2, "0"), | |||
data: item.num || Math.random() * 100, | |||
data: item.num || Math.floor(Math.random() * 100), | |||
})); | |||
chartSetup( | |||
chart.value, | |||
hourData.value.map((item) => item.hour), | |||
hourData.value.map((item) => item.data) | |||
); | |||
setupChart(); | |||
}); | |||
// watch(hourData, (newVal) => { | |||
// if (newVal) { | |||
// chartSetup( | |||
// chart.value, | |||
// newVal.map((item) => item.hour), | |||
// newVal.map((item) => item.data) | |||
// ); | |||
// } | |||
// }); | |||
function setupChart() { | |||
if (chart.value) chart.value.dispose(); | |||
nextTick(() => { | |||
chart.value = echarts.init(chartChart.value); | |||
chartSetup( | |||
chart.value, | |||
hourData.value.map((item) => item.hour), | |||
hourData.value.map((item) => item.data) | |||
); | |||
}); | |||
// chart.value.setOption({ | |||
// xAxis: { | |||
// type: "category", | |||
// data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], | |||
// }, | |||
// yAxis: { | |||
// type: "value", | |||
// }, | |||
// series: [ | |||
// { | |||
// data: [150, 230, 224, 218, 135, 147, 260], | |||
// type: "line", | |||
// }, | |||
// ], | |||
// }); | |||
} | |||
onMounted(() => { | |||
chartChart.value.classList.add("h-full"); | |||
chart.value = echarts.init(chartChart.value); | |||
chart.value.setOption({}) | |||
}); | |||
</script> | |||
<template> | |||
<Container class="chart" title="小时数据" icon="cube"> | |||
<div | |||
v-show="hourData && hourData.length > 0" | |||
ref="chartChart" | |||
class="chart-chart" | |||
style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}" | |||
></div> | |||
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint">暂无数据</p> | |||
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint"> | |||
暂无数据 | |||
</p> | |||
</Container> | |||
</template> | |||
@@ -58,7 +81,6 @@ onMounted(() => { | |||
} | |||
.chart-inner { | |||
background: #0f0; | |||
} | |||
.chart-chart { | |||
@@ -1,21 +1,22 @@ | |||
export const options = { | |||
grid: { | |||
top: "5%", | |||
bottom: "5%", | |||
left: "3%", | |||
right: "3%", | |||
top: "10", | |||
bottom: "10", | |||
left: "10", | |||
right: "10", | |||
containLabel: true, | |||
}, | |||
xAxis: { | |||
type: "category", | |||
data: ["00", "11", "22", "33", "44", "55", "66"], | |||
data: [], | |||
axisLabel: { | |||
fontSize: 16, | |||
color: '#fff8' | |||
}, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: "#dff1fe", | |||
color: "#e6e6e633", | |||
}, | |||
}, | |||
}, | |||
@@ -24,13 +25,21 @@ export const options = { | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: "#dff1fe", | |||
color: "#e6e6e633", | |||
}, | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: '#e6e6e633' | |||
} | |||
}, | |||
axisLabel: { | |||
fontSize: 16, | |||
color: '#fff8' | |||
}, | |||
minInterval: 1, | |||
max: 100, | |||
min: 1 | |||
}, | |||
series: [ | |||
{ | |||
@@ -3,43 +3,59 @@ import { ref, onMounted } from "vue"; | |||
import * as echarts from "echarts"; | |||
import Container from "./Base/Container.vue"; | |||
import { useWsStore } from "../store"; | |||
import chartSetup from "./HourChartOptions"; | |||
import setupFn from "./TeamChartDayOptions"; | |||
const store = useWsStore(); | |||
const chartChart = ref(null); | |||
const chart = ref(null); | |||
// 小时数据 | |||
const hourData = ref(null); | |||
const dayData = ref([]); | |||
store.$subscribe((mutation, state) => { | |||
console.log("lineHourList ===> ", state.data2.lineHourList); | |||
hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({ | |||
id: `${item.lineName}_${index}`, | |||
hour: item.hour || `${index}`.padStart(2, "0"), | |||
data: item.num || Math.random() * 100, | |||
})); | |||
chartSetup( | |||
chart.value, | |||
hourData.value.map((item) => item.hour), | |||
hourData.value.map((item) => item.data) | |||
if ( | |||
state.data2.classTodayProductYield == undefined || | |||
state.data2.classTodayProductYield?.length == 0 | |||
) { | |||
dayData.value.splice(0); | |||
if (chart.value) chart.value.dispose(); | |||
return; | |||
} | |||
console.log( | |||
"classTodayProductYield ===> ", | |||
state.data2.classTodayProductYield | |||
); | |||
for (let i = 0; i < state.data2.classTodayProductYield.length; ++i) { | |||
if (state.data2.classTodayProductYield[i].teamName == "A组") { | |||
dayData.value[0] = parseInt(state.data2.classTodayProductYield[i].yield); | |||
} else if (state.data2.classTodayProductYield[i].teamName == "B组") { | |||
dayData.value[1] = parseInt(state.data2.classTodayProductYield[i].yield); | |||
} else if (state.data2.classTodayProductYield[i].teamName == "C组") { | |||
dayData.value[2] = parseInt(state.data2.classTodayProductYield[i].yield); | |||
} | |||
} | |||
setupChart(); | |||
}); | |||
function setupChart() { | |||
if (chart.value) chart.value.dispose(); | |||
nextTick(() => { | |||
chart.value = echarts.init(chartChart.value); | |||
setupFn(chart.value, dayData.value); | |||
}); | |||
} | |||
onMounted(() => { | |||
chartChart.value.classList.add("h-full"); | |||
chart.value = echarts.init(chartChart.value); | |||
chart.value.setOption({}); | |||
}); | |||
</script> | |||
<template> | |||
<Container class="chart" title="本日班组情况" icon="cube"> | |||
<div | |||
v-show="hourData && hourData.length > 0" | |||
ref="chartChart" | |||
class="chart-chart" | |||
style="{opacity: (dayData && dayData.length > 0) ? 1 : 0}" | |||
></div> | |||
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint"> | |||
<p v-show="!dayData || dayData.length === 0" class="empty-data-hint"> | |||
暂无数据 | |||
</p> | |||
</Container> | |||
@@ -51,7 +67,6 @@ onMounted(() => { | |||
} | |||
.chart-inner { | |||
background: #0f0; | |||
} | |||
.chart-chart { | |||
@@ -1,15 +1,16 @@ | |||
export const options = { | |||
grid: { | |||
top: "10%", | |||
bottom: "5%", | |||
left: "3%", | |||
right: "5%", | |||
top: "10", | |||
bottom: "10", | |||
left: "10", | |||
right: "10", | |||
containLabel: true, | |||
}, | |||
xAxis: { | |||
max: 100, | |||
axisLabel: { | |||
fontSize: 22, | |||
color: "#e5e5e533", | |||
}, | |||
}, | |||
yAxis: { | |||
@@ -21,6 +22,11 @@ export const options = { | |||
max: 2, // only the largest 3 bars will be displayed | |||
axisLabel: { | |||
fontSize: 22, | |||
color: "#e5e5e533", | |||
}, | |||
splitLine: { | |||
show: false, | |||
color: "#e5e5e533", | |||
}, | |||
}, | |||
series: [ | |||
@@ -34,7 +40,7 @@ export const options = { | |||
position: "right", | |||
valueAnimation: true, | |||
formatter: "{c}%", | |||
color: "rgba(255, 255, 255, 1)", | |||
color: "#fff8", | |||
fontWeight: "bold", | |||
fontSize: 22, | |||
}, | |||
@@ -3,45 +3,50 @@ import { ref, onMounted } from "vue"; | |||
import * as echarts from "echarts"; | |||
import Container from "./Base/Container.vue"; | |||
import { useWsStore } from "../store"; | |||
import chartSetup from "./HourChartOptions"; | |||
import setupFn from "./TeamChartMonthOptions"; | |||
const store = useWsStore(); | |||
const chartChart = ref(null); | |||
const chart = ref(null); | |||
// 小时数据 | |||
const hourData = ref(null); | |||
const monthData = ref(null); | |||
store.$subscribe((mutation, state) => { | |||
console.log("lineHourList ===> ", state.data2.lineHourList); | |||
hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({ | |||
id: `${item.lineName}_${index}`, | |||
hour: item.hour || `${index}`.padStart(2, "0"), | |||
data: item.num || Math.random() * 100, | |||
})); | |||
chartSetup( | |||
chart.value, | |||
hourData.value.map((item) => item.hour), | |||
hourData.value.map((item) => item.data) | |||
); | |||
if ( | |||
state.data2.monthlyTarget == undefined || | |||
state.data2.monthlyTarget?.length == 0 | |||
) { | |||
monthData.value = null; | |||
if (chart.value) chart.value.dispose(); | |||
return; | |||
} | |||
console.log("monthlyTarget ===> ", state.data2.monthlyTarget); | |||
const { targetProduction, nowProduction, targetYield, nowYield } = | |||
state.data2.monthlyTarget[0]; | |||
monthData.value = { targetProduction, nowProduction, targetYield, nowYield }; | |||
setupChart(); | |||
}); | |||
function setupChart() { | |||
if (chart.value) chart.value.dispose(); | |||
nextTick(() => { | |||
chart.value = echarts.init(chartChart.value); | |||
setupFn(chart.value, monthData.value); | |||
}); | |||
} | |||
onMounted(() => { | |||
chartChart.value.classList.add("h-full"); | |||
chart.value = echarts.init(chartChart.value); | |||
chart.value.setOption({}); | |||
}); | |||
</script> | |||
<template> | |||
<Container class="chart" title="本月班组情况" icon="cube"> | |||
<div | |||
v-show="hourData && hourData.length > 0" | |||
ref="chartChart" | |||
class="chart-chart" | |||
style="{opacity: (monthData) ? 1 : 0}" | |||
></div> | |||
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint"> | |||
暂无数据 | |||
</p> | |||
<p v-show="!monthData" class="empty-data-hint">暂无数据</p> | |||
</Container> | |||
</template> | |||
@@ -51,7 +56,6 @@ onMounted(() => { | |||
} | |||
.chart-inner { | |||
background: #0f0; | |||
} | |||
.chart-chart { | |||
@@ -117,7 +117,7 @@ export const options = { | |||
offsetCenter: [0, "0%"], | |||
formatter: 0 + "%", | |||
// formatter: (nowYield / targetYield * 100).toFixed(1) + '%', | |||
color: "rgba(255, 255, 255, 1)", | |||
color: "#fff8", | |||
}, | |||
data: [ | |||
{ | |||
@@ -3,11 +3,15 @@ import { ref, watch, onMounted } from "vue"; | |||
import IconBack from "../assets/menu_icon/IconBack.vue"; | |||
import IconExchange from "../assets/menu_icon/IconExchange.vue"; | |||
import IconSetting from "../assets/menu_icon/IconSetting.vue"; | |||
function toHome() { | |||
document.location.href = '/1-1' | |||
} | |||
</script> | |||
<template> | |||
<div class="tools"> | |||
<button><IconBack /></button> | |||
<button @click="toHome"><IconBack /></button> | |||
<button><IconSetting /></button> | |||
<button><IconExchange /></button> | |||
</div> | |||
@@ -2,6 +2,7 @@ | |||
<script setup> | |||
import { ref } from "vue"; | |||
import { useWsStore } from "../store"; | |||
import IconBack from "../assets/menu_icon/IconBack.vue"; | |||
const emit = defineEmits(["home"]); | |||
// load 公告 | |||
@@ -45,10 +46,18 @@ const handleClose = () => { | |||
</main> | |||
<div class="announcement-footer"> | |||
<button | |||
style="position: absolute; left: 0; bottom: 10px" | |||
style=" | |||
position: absolute; | |||
left: 0; | |||
bottom: 10px; | |||
appearance: none; | |||
background: transparent; | |||
border: none; | |||
cursor: pointer; | |||
" | |||
@click="handleClose" | |||
> | |||
返回 | |||
<IconBack /> | |||
</button> | |||
<ScrollText> {{ horizontal_content }} </ScrollText> | |||
</div> | |||
@@ -4,4 +4,8 @@ import vue from '@vitejs/plugin-vue' | |||
// https://vitejs.dev/config/ | |||
export default defineConfig({ | |||
plugins: [vue()], | |||
server: { | |||
host: '0.0.0.0', | |||
port: '5173' | |||
} | |||
}) |