哥伦比亚展会大屏update
This commit is contained in:
hzz
parent
cad9dc0c88
commit
c8e298536a
12
src/http/Exhibition/Colombia/index.ts
Normal file
12
src/http/Exhibition/Colombia/index.ts
Normal 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')
|
||||
}
|
||||
@ -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'
|
||||
@ -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(() => {
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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]
|
||||
]
|
||||
data.xData = [
|
||||
"振镜激光裁床",
|
||||
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
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user