hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

哥伦比亚展会大屏update

Browse Source
This commit is contained in:
hzz 2023-12-26 17:04:54 +08:00
parent cad9dc0c88
commit c8e298536a
4 changed files with 126 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/http/Exhibition/Colombia/index.ts Normal file
View File

@ -0,0 +1,12 @@
import {get,post} from "@/utils/http"
//获取设备在线状态、设备列表
export function columbiaDeviceList(){
return get('/screen/cisma/columbiaDeviceList')
}
//获取设备在线状态、设备列表
export function columbiaDeviceProduction(){
return get('/creen/cisma/columbiaDeviceProduction')
}

23
src/views/Elevator/index.vue
View File

@ -47,7 +47,7 @@
</template>
<script setup lang='ts'>
import { onMounted, onUnmounted, ref, reactive, watch, computed } from 'vue'
import { onMounted, onUnmounted, ref, reactive, watch, computed, onActivated, onDeactivated } from 'vue'
import Border from './components/Border.vue'
import LeftStatus from './components/LeftStatus.vue'
import Buttons from './components/Buttons.vue'
@ -57,13 +57,13 @@ let { timeHtml } = useNowTime();
let timer = null;
let thatstatus = computed(() => {
if (second_data.value.IN3||first_data.value.IN3||second_data.value.IN4||first_data.value.IN4) {
if (second_data.value.IN3 || first_data.value.IN3 || second_data.value.IN4 || first_data.value.IN4) {
clearInterval(timer)
return ''
}
if (second_data.value.IN7||first_data.value.IN7) {
if (second_data.value.IN7 || first_data.value.IN7) {
return 'up'
} else if (second_data.value.IN8||first_data.value.IN8) {
} else if (second_data.value.IN8 || first_data.value.IN8) {
return 'down'
} else if (second_data.value.IN6) {
return 'top'
@ -151,9 +151,11 @@ watch(thatstatus, (val) => {
function elevatorUp(type) {
if (type == 'top') {
y_px.value = min_px
clearInterval(timer)
return
} else if (type == 'bottom') {
y_px.value = max_px
clearInterval(timer)
return
}
timer = setInterval(() => {
@ -180,10 +182,10 @@ function getWebsocket(val) {
if (data.type == 'liftInfo') {
let msg = data.msg
if (msg.name == 'first') {
if (msg.IN7 == 1&&second_data.value.IN1 == 0) {
if (msg.IN7 == 1 && second_data.value.IN1 == 0) {
msg.IN1 = 1
}
if (msg.IN8 == 1&&second_data.value.IN2 == 0) {
if (msg.IN8 == 1 && second_data.value.IN2 == 0) {
msg.IN2 = 1
}
first_data.value = msg
@ -198,6 +200,8 @@ function getWebsocket(val) {
}
}
function errWebsocket(val) {
// console.log(val);
}
@ -211,6 +215,13 @@ onUnmounted(() => {
closeWebsocket()
document.getElementById('app').style.backgroundColor = '#100c2a'
})
onActivated(() => {
connectWebsocket(null, null, getWebsocket, errWebsocket)
})
onDeactivated(() => {
clearInterval(timer)
closeWebsocket()
})
</script>
<style scoped>

14
src/views/Exhibition/Colombia/component/BarChart.vue
View File

@ -27,13 +27,6 @@ const setCharts = () => {
// text: '工作时间'
// },
backgroundColor: '#0E0E0E',
legend: {
data: ['计划完成', '实际完成'],
textStyle: {
fontSize: 14
},
},
textStyle: {
fontSize:14
@ -61,7 +54,12 @@ const setCharts = () => {
}
}
],
series: prop.seriesData
series: [
{
data: prop.seriesData,
type: 'bar'
}
]
};
charts.setOption(option);

140
src/views/Exhibition/Colombia/index.vue
View File

@ -21,8 +21,8 @@
<div class="box">
<img src="./images/fzmbj.png" class="fzmbj-img" alt="">
<div class="devcard-container">
<DevCard :dev_title="dev_title" :dev_value="dev_value">
<BarChart style="width: 100%;height: 100%;" :xData="data.xData" :seriesData="data.series">
<DevCard :dev_title="dev_title" :dev_value="mubanji_value">
<BarChart style="width: 100%;height: 100%;" :xData="data_chart.xData" :seriesData="data_chart.mubanji_series">
</BarChart>
</DevCard>
</div>
@ -43,10 +43,20 @@
<div class="box-top">
<div class="top-item" v-for="(item, index) in mjxhj_data">
<span class="key-text">{{ item.key }}:</span>
<span class="value-text">{{ item.value }}</span>
<span class="value-text" :class="{ status: index == 1 }"
:style="{ background: index == 1 ? status_color[item.value] : '' }">{{ index ==
1 ? '' : item.value }}</span>
</div>
</div>
<div class="box-bottom">
<div class="box-bottom-left">
<BarChart style="width: 100%;height: 100%;" :xData="data_chart.xData" :seriesData="data_chart.xiuhuaji_series">
</BarChart>
</div>
<div class="box-bottom-right">
<img src="./images/mjxhj.png" alt="">
</div>
</div>
</div>
</BorderVue>
</div>
@ -56,8 +66,8 @@
<div class="box">
<img src="./images/hty.png" class="fzmbj-img" alt="">
<div class="devcard-container">
<DevCard :dev_title="dev_title" :dev_value="dev_value">
<BarChart style="width: 100%;height: 100%;" :xData="data.xData" :seriesData="data.series">
<DevCard :dev_title="dev_title" :dev_value="huituyi_value">
<BarChart style="width: 100%;height: 100%;" :xData="data_chart.xData" :seriesData="data_chart.huituyi_series">
</BarChart>
</DevCard>
</div>
@ -78,49 +88,75 @@ import BarChart from './component/BarChart.vue'
import { getmDeviceList, getmDeviceProduction } from '@/http/MicroExhibition'
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed, reactive } from 'vue'
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
import {columbiaDeviceList,columbiaDeviceProduction} from '@/http/Exhibition/Colombia'
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
const store = useMicroExhibitionStore()
let videoUrl = ref('https://d.tufting222.cn/video/yzy/a.mp4')
const videoElement = ref(null)
let timer = null
let dev_title = ref(['机架号', '设备状态', '稼 动 率', '工作时长'])
let dev_value = ref([
let mubanji_value = ref([
[102014422, '0', '40层', '0min']
])
let mjxhj_data = ref([
let huituyi_value = ref([
[102014422, '0', '40层', '0min']
])
let mjxhj_data = reactive([
{ key: '机 架 号', value: '102014422' },
{ key: '设备状态', value: 2 },
{ key: '稼 动 率', value: '40层' },
{ key: '工作时长', value: '0min' },
])
let data = reactive({ series: [], xData: [] })
setTimeout(() => {
data.series = [
{
"type": "bar",
"data": [
100,
],
"name": "计划完成"
},
{
"type": "bar",
"data": [
0,
],
"name": "实际完成"
const status_color = {
'0': '#FF6E76',
'1': '#FDDD60',
'2': '#7CFFB2',
'3': '#FDDD60',
}
async function getcolumbiaDeviceList() {
const result:any = await columbiaDeviceList();
if (result.code == 200) {
let {data} = result;
let mubanji = data['服装模板机']
let huituyi = data['绘图仪(一代)']
let xiuhuaji = data['单头混合毛巾绣花机']
mubanji_value.value = [
[mubanji.label,mubanji.status,mubanji.ratio,mubanji.workTime]
]
huituyi_value.value = [
[huituyi.label,huituyi.status,huituyi.ratio,huituyi.workTime]
]
mjxhj_data[0].value = xiuhuaji.label
mjxhj_data[1].value = xiuhuaji.status
mjxhj_data[2].value = xiuhuaji.ratio
mjxhj_data[3].value = xiuhuaji.workTime
}
}
let data_chart = reactive({ mubanji_series: [], xiuhuaji_series: [], huituyi_series: [], xData: ["计划产量","实际产量"] })
function getcolumbiaDeviceProduction() {
columbiaDeviceProduction().then((result:any) => {
if (result.code == 200) {
let {data} = result;
console.log(data,'-----');
data_chart.mubanji_series = data.mubanji
data_chart.xiuhuaji_series = data.xiuhuaji
data_chart.huituyi_series = data.huituyi
}
]
data.xData = [
"振镜激光裁床",
]
})
})
}
@ -150,21 +186,8 @@ function errWebsocket(val) {
onMounted(() => {
// setInterval(() => {
// let status = Math.round(Math.random() * 3)
// let val = {
// step: '后整设备',
// num: 24,
// status: status
// }
// changestatus(val)
// }, 5000)
getcolumbiaDeviceList()
getcolumbiaDeviceProduction()
connectWebsocket(null, null, getWebsocket, errWebsocket)
document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
})
@ -275,14 +298,28 @@ onUnmounted(() => {
width: 100%;
height: 70%;
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
}
.box-bottom-left {
width: 250px;
height: 100%;
}
.box-bottom-right {
flex: 1;
height: 100%;
}
.box-bottom-right img {
max-width: 100%;
}
.top-item {
width: 33%;
height: 50%;
display: flex;
justify-content: space-between;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
padding: 0 20px;
@ -299,8 +336,13 @@ onUnmounted(() => {
font-size: 24px;
color: #AEEEFAFE;
font-family: '华文新魏', sans-serif;
text-align: left;
box-sizing: border-box;
padding-left: 10px;
}
.status {
width: 24px;
height: 24px;
border-radius: 50%;
}
</style>