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

修改场外接收socket处理方式

Browse Source 
修改机械分厂设备大屏 标题装饰
添加装饰组件 和svg图片
This commit is contained in:
hzz 2023-06-27 17:00:43 +08:00
parent fcd2b922e1
commit 550a042107
11 changed files with 163 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/img/bg_left.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="58px" height="14px" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask fill="white" id="clip1">
<path d="M 255 113 C 253.89 113 253 112.11 253 111 L 253 101 C 253 99.89 253.89 99 255 99 L 309 99 C 310.11 99 311 99.89 311 101 L 311 111 C 311 112.11 310.11 113 309 113 " fill-rule="evenodd" />
</mask>
</defs>
<g transform="matrix(1 0 0 1 -253 -99 )">
<image preserveAspectRatio="none" style="overflow:visible" width="58" height="14" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAAOCAYAAAB+UA+TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADJmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTVCODU4NzY5ODc4MTFFQzlDREVENjhDQTJDMTU3RjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTVCODU4Nzc5ODc4MTFFQzlDREVENjhDQTJDMTU3RjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFNUI4NTg3NDk4NzgxMUVDOUNERUQ2OENBMkMxNTdGOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFNUI4NTg3NTk4NzgxMUVDOUNERUQ2OENBMkMxNTdGOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtheM6MAAAJJSURBVEhL3Ze7axVBGEc3xkeMgiYYxSBq1BRJSCkSEIxlULCx1sJKO/8FG7EWxc7Sxs4UaZJCC0mXqBBFBCFqFHyb+DZ6zpqBcXZ2Sev9wWHvZO7O7Jm595ubtqNX7hVkM3yFnzYy6YEl+Fy2qtkF3v+6bFWzG9bA07JVzR7ogpmyVc0+GIJbZauaPjgOl8tWJu19x852cN0KXr/BMsTZBPuhGz7CD4hj/wj0wjtIF2MjnADHeAvvIc56OAPD4PgvIU47XIIj4GI+hDhtcANOgnPdhkoUdRdd7Q2Qk1XsN2yBnKyvvWcn5GQd/wO46u5MKvsLXsEgDEAq69yP4DAcgpzsNLijo5CVVdSrD9okuwhNsoo0ydpWrk7W/hdQJ/sG/I7VyTreJNTKBlHT0rKxqGlZ2VTU/G+yzjUHIVlZhXIJx4z9ufd8X7nat+7vy3/yBVwc+12sNB5VFiH7PdrSfAIXz4rqsZPGxXQO44KmceF8jymPtpyEx4W75a65ekEqxF3cC/Y/gTBgyHY4CD7kLDyDODtgDFygu/AA4nj/aeiEOzAFcbz/ImyDCbgKcTzzb8IBGIdzsJyKrlbSrEZyHuIESc9OJe9DnCDpcyjpRzBOkFQmSPqsIUGyH4Jk+emMRVtW0gTRlpY0ilpdmySdvEnS/iZJq16TpH8/BXWS/gS8AHWSznsdlPS3cEXSeLxY/RzMMp5KGqvfWrDEp5ImVEeLTippnNT3PIdU0ji/VdZ/CNLCY5RaACv1tZV2msfgM5yHimRRFMUf5rMaGf6QPUsAAAAASUVORK5CYII=" x="253px" y="99px" mask="url(#clip1)" />
</g>
</svg>

35
src/components/decoration/DecorationFadeOut.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="title">
<slot></slot>
</div>
</template>
<script setup lang='ts'>
</script>
<style scoped>
.title {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.title::before {
content: '';
width: 70px;
height: 20px;
background: url('@/assets/img/bg_left.svg');
background-size: 100% 100%;
}
.title::after {
content: '';
width: 70px;
height: 20px;
background: url('@/assets/img/bg_left.svg');
background-size: 100% 100%;
transform: rotateY(180deg);
}
</style>

4
src/store/module/offsite.ts
View File

@ -70,12 +70,12 @@ export const Offsite = defineStore(Names.offsite, {
setcity(val: string[]) { setcity(val: string[]) {
this.city = val; this.city = val;
}, },
setdevitem(val: any) { setdevitem(val: any) {
this.itemDevNum.forEach((ele) => { this.itemDevNum.forEach((ele) => {
val.forEach((res) => { val.forEach((res) => {
if (res.name == ele.type) { if (res.name == ele.type) {
//网关是否在线 //网关是否在线
ele.status=res.gatewayStatus // ele.status=res.gatewayStatus
ele.num = res.counts; ele.num = res.counts;
} }
}); });

10
src/views/Mechanics/components/devStatusTip.vue
View File

@ -9,7 +9,11 @@
--> -->
<template> <template>
<div style="height: 100%; width: 100%"> <div style="height: 100%; width: 100%">
<h2 class="components-header">{{ title }}</h2> <h2 class="components-header">
<DecorationFadeOut>
&nbsp;{{ title }}&nbsp;
</DecorationFadeOut>
</h2>
<div class="components-content" :key="keynum"> <div class="components-content" :key="keynum">
<swiper-container :slidesPerView="props.per_view" :loop="true" :initialSlide="0" :spaceBetween="0" <swiper-container :slidesPerView="props.per_view" :loop="true" :initialSlide="0" :spaceBetween="0"
direction="vertical" :autoplay="{ direction="vertical" :autoplay="{
@ -70,6 +74,7 @@
import { reactive, ref, watch } from "vue"; import { reactive, ref, watch } from "vue";
import { register } from "swiper/element/bundle"; import { register } from "swiper/element/bundle";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
let { t } = useI18n(); let { t } = useI18n();
register(); register();
const props: any = defineProps({ const props: any = defineProps({
@ -152,5 +157,6 @@ swiper-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: inline-block !important; display: inline-block !important;
}</style> }
</style>

40
src/views/Mechanics/components/gateway.vue
View File

@ -10,21 +10,26 @@
<template> <template>
<div class="box" :style="{ width: '100%', height: '100%' }"> <div class="box" :style="{ width: '100%', height: '100%' }">
<div class="title-box" > <div class="title-box">
<h2>{{ props.title }}</h2> <h2>
<DecorationFadeOut>
&nbsp;{{ props.title }}&nbsp;
</DecorationFadeOut>
</h2>
<div class="colorTip"> <div class="colorTip">
<div><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-blue"></i> {{t('messages.onLine')}}</div> <div><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-blue"></i>
{{ t('messages.onLine') }}</div>
<div style="color:#e43961"><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-red"></i> <div style="color:#e43961"><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-red"></i>
{{t('messages.offline')}}</div> {{ t('messages.offline') }}</div>
</div> </div>
</div> </div>
<ul class="gatewaystatus"> <ul class="gatewaystatus">
<li v-for="item in props.data" @click="clickBotton(item)"> <li v-for="item in props.data" @click="clickBotton(item)">
<i :class="JSON.parse(item.gateway) <i :class="JSON.parse(item.gateway)
? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan online' ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan online'
: 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan noonline' : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan noonline'
"></i> "></i>
<h2 class="titlesize-name">{{ item.title+'车间' }}</h2> <h2 class="titlesize-name">{{ item.title + '车间' }}</h2>
</li> </li>
</ul> </ul>
</div> </div>
@ -36,22 +41,23 @@ import border13 from "@/components/border/Border13.vue";
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useMechanicsStore } from "@/store/module/Mechanics"; import { useMechanicsStore } from "@/store/module/Mechanics";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
const router=useRouter() import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
const router = useRouter()
const store = useMechanicsStore(); const store = useMechanicsStore();
let {t} = useI18n(); let { t } = useI18n();
let props = defineProps<{ let props = defineProps<{
title: string; title: string;
data: any data: any
}>(); }>();
const clickBotton=(item:any)=>{ const clickBotton = (item: any) => {
store.changePage(item.index) store.changePage(item.index)
router.push({ router.push({
name:'Mechanicschild', name: 'Mechanicschild',
params:{ params: {
id:item.index id: item.index
} }
}) })
} }
onMounted(() => { }); onMounted(() => { });
</script> </script>

37
src/views/Mechanics/components/ringChart.vue
View File

@ -8,13 +8,21 @@
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved. * 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
--> -->
<template> <template>
<div class="ring" ref="ringRef"></div> <div class="container">
<h2 class="title">
<DecorationFadeOut>
&nbsp;{{ t('messages.设备状态总览') }}&nbsp;
</DecorationFadeOut>
</h2>
<div class="ring" ref="ringRef"></div>
</div>
</template> </template>
<script setup lang='ts'> <script setup lang='ts'>
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue' import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue'
const { proxy } = getCurrentInstance() as any; const { proxy } = getCurrentInstance() as any;
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
let { t } = useI18n(); let { t } = useI18n();
let ringRef = ref(); let ringRef = ref();
let ringChart = null; let ringChart = null;
@ -25,21 +33,12 @@ const prop = defineProps({
const init = () => { const init = () => {
ringChart = proxy.$echarts.init(ringRef.value, 'dark') ringChart = proxy.$echarts.init(ringRef.value, 'dark')
let option = { let option = {
title: {
text: t('messages.设备状态总览'),
show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
left: 'center'
},
tooltip: { tooltip: {
trigger: "item", trigger: "item",
}, },
legend: { legend: {
type: "scroll", type: "scroll",
top: "10%", top: "5%",
left: "center", left: "center",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
@ -69,7 +68,7 @@ const init = () => {
labelLine: { labelLine: {
show: true, show: true,
}, },
top: '20%', top: '10%',
data: prop.data, data: prop.data,
}, },
], ],
@ -92,8 +91,20 @@ onMounted(() => {
</script> </script>
<style scoped> <style scoped>
.ring { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.title {
color: #fff;
font-size: 20px;
margin-bottom: 10px;
text-align: center;
}
.ring {
width: 100%;
height: calc(100% - 50px);
}
</style> </style>

73
src/views/Mechanics/components/scrollBoard.vue
View File

@ -9,14 +9,19 @@
--> -->
<template> <template>
<div class="box"> <div class="box">
<div class="box-title">{{t('messages.机械分厂设备列表')}}</div> <div class="box-title">
<DecorationFadeOut>
&nbsp;{{ t('messages.机械分厂设备列表') }}&nbsp;
</DecorationFadeOut>
</div>
<div class="box-body"> <div class="box-body">
<dv-scroll-board ref="devList" @click="dvClick" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave" :style="{ <dv-scroll-board ref="devList" @click="dvClick" :config="prop.config" @mouseover="dvMouseover"
width: '100%', @mouseend="dvmouseleave" :style="{
height: '100%', width: '100%',
}" /> height: '100%',
<el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click" popper-class="tooltip-class" }" />
virtual-triggering :virtual-ref="triggerRef" /> <el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click"
popper-class="tooltip-class" virtual-triggering :virtual-ref="triggerRef" />
</div> </div>
</div> </div>
</template> </template>
@ -26,7 +31,8 @@ import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { devListType } from "@/type/InPlantProducts"; import { devListType } from "@/type/InPlantProducts";
import { useRouter } from "vue-router" import { useRouter } from "vue-router"
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
let {t} = useI18n(); import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
let { t } = useI18n();
const prop = defineProps({ const prop = defineProps({
config: Object, config: Object,
}) })
@ -44,7 +50,7 @@ let triggerRef = ref(null)
* @函数备注: * @函数备注:
*/ */
const dvMouseover = (value) => { const dvMouseover = (value) => {
if (value.toElement && value.toElement.innerHTML&&value.toElement.className == 'ceil') { if (value.toElement && value.toElement.innerHTML && value.toElement.className == 'ceil') {
triggerRef.value = value.toElement triggerRef.value = value.toElement
tipcontent.value = value.toElement.innerText tipcontent.value = value.toElement.innerText
visible.value = true visible.value = true
@ -54,30 +60,30 @@ const dvMouseover = (value) => {
/** /**
* 点击表格事件 * 点击表格事件
*/ */
const dvClick = (value) =>{ const dvClick = (value) => {
if (value.row) { if (value.row) {
let id = { let id = {
'精加车间':1, '精加车间': 1,
'机加车间':2, '机加车间': 2,
'大件车间':3, '大件车间': 3,
'精饰车间':4, '精饰车间': 4,
'焊接车间':5, '焊接车间': 5,
} }
prop.config.rawData.forEach((res,index) => { prop.config.rawData.forEach((res, index) => {
if (index == value.row[0]-1) { if (index == value.row[0] - 1) {
router.push({ router.push({
name: "Mechanicsson", name: "Mechanicsson",
params: { params: {
id: id[value.row[2]], id: id[value.row[2]],
dev: res.id dev: res.id
}, },
});
}
}); });
} }
});
}
} }
/** /**
* @函数功能: 鼠标移出组件方法 * @函数功能: 鼠标移出组件方法
@ -111,7 +117,7 @@ const dvmouseleave = () => {
} }
.box-body { .box-body {
width: 100%; width: 100%;
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@ -123,12 +129,13 @@ const dvmouseleave = () => {
white-space: pre-wrap; white-space: pre-wrap;
text-overflow: none text-overflow: none
} }
:deep(.dv-scroll-board .rows .row-item) { :deep(.dv-scroll-board .rows .row-item) {
font-size: 16px; font-size: 16px;
} }
</style> </style>
<style> <style>
.el-popper.tooltip-class{ .el-popper.tooltip-class {
color: #fff !important; color: #fff !important;
} }
</style> </style>

11
src/views/Mechanics/indexNew.vue
View File

@ -14,7 +14,11 @@
<div style="width: 100%; height: 68%;"> <div style="width: 100%; height: 68%;">
<border13> <border13>
<div style="width: 100%;height: 100%;"> <div style="width: 100%;height: 100%;">
<h2 class="module-header">设备总览</h2> <h2 class="module-header">
<DecorationFadeOut>
&nbsp;设备总览&nbsp;
</DecorationFadeOut>
</h2>
<div class="module-content"> <div class="module-content">
<DevOverview :title="'设备总数'" :value="{ onLine: facTotal.onLine, total: facTotal.total }"></DevOverview> <DevOverview :title="'设备总数'" :value="{ onLine: facTotal.onLine, total: facTotal.total }"></DevOverview>
<DevOverview :title="item.name" :value="{ onLine: item.onLine, total: item.total }" <DevOverview :title="item.name" :value="{ onLine: item.onLine, total: item.total }"
@ -64,6 +68,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"; import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
import header2 from "@/components/headerBox/header2.vue"; import header2 from "@/components/headerBox/header2.vue";
import border13 from '@/components/border/Border13.vue' import border13 from '@/components/border/Border13.vue'
import DevOverview from "./components/DevOverview.vue"; import DevOverview from "./components/DevOverview.vue";
@ -95,7 +100,7 @@ let scrollBoardConfig = reactive({
columnWidth: [80, 290, 120, 120, 120, 120], columnWidth: [80, 290, 120, 120, 120, 120],
align: ['center', 'center', 'center', 'center', 'center', 'center'], align: ['center', 'center', 'center', 'center', 'center', 'center'],
data: [], data: [],
rawData:[] rawData: []
}) })
let gatewayData = ref([]) let gatewayData = ref([])
let devNumTimer: any = null let devNumTimer: any = null
@ -165,7 +170,7 @@ async function reqDeviceTotelListMFfun() {
index + 1, index + 1,
item.name, item.name,
item.dept, item.dept,
compare[item.status]? compare[item.status] : '停机', compare[item.status] ? compare[item.status] : '停机',
item.activation + '%', item.activation + '%',
item.failure + '%' item.failure + '%'
] ]

6
src/views/Offsite/content/center.vue
View File

@ -81,6 +81,10 @@ const box = (width: any, height: any) => {
watch( watch(
() => store.devlist, () => store.devlist,
(newVal, oldVal) => { (newVal, oldVal) => {
city1['on'] = 0
city1['off'] = 0
city2['on'] = 0
city2['off'] = 0
newVal.forEach(res => { newVal.forEach(res => {
if (res.city == '广东省') { if (res.city == '广东省') {
if (res.deviceStatus == "true") { if (res.deviceStatus == "true") {
@ -108,6 +112,8 @@ watch(
{ deep: true, flush: "post" } { deep: true, flush: "post" }
); );
function setdata(data: any) { function setdata(data: any) {
city1['num'] = 0
city2['num'] = 0
data.forEach(res => { data.forEach(res => {

2
src/views/Offsite/content/right.vue
View File

@ -81,7 +81,7 @@ watch(
(newVal, oldVal) => { (newVal, oldVal) => {
let arr = []; let arr = [];
newVal.forEach((res) => { newVal.forEach((res) => {
if (res.type == t('messages.OnProduct') || res.type == t('messages.OffProduct')) { if (res.type == '在线产品' || res.type == '离线产品') {
arr.push({ name: res.title, value: res.num }); arr.push({ name: res.title, value: res.num });
} }
}); });

12
src/views/Offsite/index.vue
View File

@ -78,9 +78,9 @@ let {t} = useI18n();
if(result.code==200){ if(result.code==200){
result.data.forEach(res=>{ result.data.forEach(res=>{
if(res.deptId=='true'){ if(res.deptId=='true'){
res.name=t('messages.OnProduct') res.name='在线产品'
}else{ }else{
res.name=t('messages.OffProduct') res.name='离线产品'
} }
}) })
@ -98,7 +98,6 @@ let {t} = useI18n();
city.push(res.city) city.push(res.city)
}) })
store.setcity([...new Set(city)]); store.setcity([...new Set(city)]);
console.log(store.city);
} }
} }
@ -109,17 +108,16 @@ let {t} = useI18n();
if(data.type=='deviceStatusCountsOfOutPlant'){ if(data.type=='deviceStatusCountsOfOutPlant'){
data.msg.forEach(res=>{ data.msg.forEach(res=>{
if(res.deptId=='true'){ if(res.deptId=='true'){
res.name=t('messages.OnProduct') res.name='在线产品'
}else{ }else{
res.name=t('messages.OffProduct') res.name='离线产品'
} }
store.setdevitem(res)
}) })
store.setdevitem(data.msg)
// store.socketMechanicsDatadata(data.msg) // store.socketMechanicsDatadata(data.msg)
} }
if(data.type=='DeviceOutPlant'){ if(data.type=='DeviceOutPlant'){
store.changeDevList(data.msg) store.changeDevList(data.msg)
console.log(data.msg);
} }