更新机械分厂工位屏
This commit is contained in:
hzz
parent
69f08cd255
commit
47ec633340
@ -46,3 +46,9 @@ export function reqDeviceTotelStatusMF() {
|
||||
export function reqDeviceRemind() {
|
||||
return get('/screen/device/deviceRemind')
|
||||
}
|
||||
|
||||
|
||||
/**工位屏 */
|
||||
export function reqHologramDataMF(data:any){
|
||||
return get('/screen/device/getHologramDataMF',data)
|
||||
}
|
||||
@ -10,84 +10,39 @@
|
||||
<div class="sum">
|
||||
<div class="deviceimg">
|
||||
<!-- <img class="img" :src="allData.image" /> -->
|
||||
<img class="img" :src="allData.image" />
|
||||
<img class="img" :src="props.bottom_data.image" />
|
||||
</div>
|
||||
<div class="cicle1"></div>
|
||||
<div class="data1" id="data">
|
||||
<div class="qiu1" id="qiu">
|
||||
<p>{{ allData.data1 }}</p>
|
||||
<div :class="'data' + (i+1)" id="data" v-for="(item,i) in props.bottom_data.data">
|
||||
<div :class="'qiu' + (i+1)" id="qiu" v-if="Array.isArray(item.key)">
|
||||
<p v-for="item2 in item.key">{{ item2 }}</p>
|
||||
</div>
|
||||
<span>{{ allData.title1 }}</span>
|
||||
</div>
|
||||
<div class="data2" id="data">
|
||||
<div class="qiu2" id="qiu">
|
||||
<p>{{ allData.data2 }}</p>
|
||||
<p>{{ allData.data2s }}</p>
|
||||
<div :class="'qiu' + (i+1)" id="qiu" v-else>
|
||||
<p >{{ item.key }}</p>
|
||||
</div>
|
||||
<span>{{ allData.title2 }}</span>
|
||||
<span>{{ item.val }}</span>
|
||||
</div>
|
||||
|
||||
<div class="data5" id="data">
|
||||
<div class="qiu5" id="qiu">
|
||||
<p>{{ allData.data5}}</p>
|
||||
</div>
|
||||
<span>{{ allData.title5}}</span>
|
||||
</div>
|
||||
|
||||
<div class="data3" id="data">
|
||||
<div class="qiu3" id="qiu">
|
||||
<p>
|
||||
{{ allData.data3 }}
|
||||
</p>
|
||||
</div>
|
||||
<span>{{ allData.title3 }}</span>
|
||||
</div>
|
||||
<div class="data4" id="data">
|
||||
<div class="qiu4" id="qiu">
|
||||
<p>{{ allData.data4 }}</p>
|
||||
</div>
|
||||
<span>{{ allData.title4 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, getCurrentInstance, reactive, onMounted } from "vue";
|
||||
import { imgurlAddXhr } from "@/utils/devSever";
|
||||
// let allData = reactive({
|
||||
// data1: "高速",
|
||||
// data2: "50cm",
|
||||
// data2s: "2cm/s",
|
||||
// data3: "正转",
|
||||
// data4: "50cm",
|
||||
// data5: "50cm",
|
||||
// title1: "设备状态",
|
||||
// title2: "平台X轴距原点位置和速度",
|
||||
// title3: "设备状态",
|
||||
// title4: "平台y轴距原点位置",
|
||||
// title5: "平台z轴距原点位置",
|
||||
// image: "",
|
||||
// });
|
||||
|
||||
const props = defineProps({
|
||||
allData: {
|
||||
bottom_data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
data1: "",
|
||||
data2: "",
|
||||
data2s: "",
|
||||
data3: "",
|
||||
data4: "",
|
||||
data5: "",
|
||||
title1: "",
|
||||
title2: "",
|
||||
title3: "",
|
||||
title4: "",
|
||||
title5: "",
|
||||
image: "",
|
||||
};
|
||||
},
|
||||
},
|
||||
default: {
|
||||
image: 'http://8.130.165.100:9016/prod-api/profile/upload/2023/12/17/cba7a03d86a94775b6bdde70b0d069e6.png',
|
||||
data: [
|
||||
{ key: "高速", val: "设备状态" },
|
||||
{ key: ['50cm','2cm/s'], val: "平台X轴距原点位置和速度" },
|
||||
{ key: "正转", val: "设备状态" },
|
||||
{ key: "50cm", val: "平台y轴距原点位置" },
|
||||
{ key: "50cm", val: "平台z轴距原点位置" }
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
</script>
|
||||
@ -103,6 +58,7 @@ const { proxy } = getCurrentInstance() as any;
|
||||
background: url(./../img/big.png) no-repeat center;
|
||||
background-size: 55%;
|
||||
}
|
||||
|
||||
.deviceimg {
|
||||
height: 480px;
|
||||
width: 450px;
|
||||
@ -113,6 +69,7 @@ const { proxy } = getCurrentInstance() as any;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
/* 确保图片不会超出div的宽高 */
|
||||
max-width: 100%;
|
||||
@ -132,15 +89,18 @@ img {
|
||||
transform: rotateX(70deg);
|
||||
animation: circle 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes circle {
|
||||
100% {
|
||||
transform: rotateX(70deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.data1 {
|
||||
left: 12%;
|
||||
top: 35%;
|
||||
}
|
||||
|
||||
.qiu1 {
|
||||
background: url(./../img/cicle1.png) no-repeat center;
|
||||
}
|
||||
@ -149,15 +109,17 @@ img {
|
||||
left: 63%;
|
||||
top: 26%;
|
||||
}
|
||||
|
||||
.qiu2 {
|
||||
background: url(./../img/cicle03.png) no-repeat center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.data3 {
|
||||
left: -3%;
|
||||
top: 57%;
|
||||
}
|
||||
|
||||
.qiu3 {
|
||||
background: url(./../img/cicle02.png) no-repeat center;
|
||||
}
|
||||
@ -166,6 +128,7 @@ img {
|
||||
left: 80%;
|
||||
top: 48%;
|
||||
}
|
||||
|
||||
.qiu4 {
|
||||
background: url(./../img/cicle01.png) no-repeat center;
|
||||
}
|
||||
@ -174,8 +137,9 @@ img {
|
||||
left: 65%;
|
||||
top: 59%;
|
||||
}
|
||||
|
||||
.qiu5 {
|
||||
background: url(./../img/cicle1.png) no-repeat center;
|
||||
background: url(./../img/cicle1.png) no-repeat center;
|
||||
}
|
||||
|
||||
#data {
|
||||
@ -185,12 +149,14 @@ img {
|
||||
background: url(./../img/j5.png) no-repeat center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#qiu {
|
||||
width: 105px;
|
||||
height: 120px;
|
||||
@ -203,6 +169,7 @@ p {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#qiu::before {
|
||||
content: "";
|
||||
display: block;
|
||||
@ -216,21 +183,23 @@ p {
|
||||
border: 3px solid rgba(255, 255, 255, 0.5);
|
||||
animation: scale 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scale {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(0.9);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(1.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 18px;
|
||||
top: 22%;
|
||||
font-weight: 700;
|
||||
color: #aeeefa;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
|
||||
107
src/views/Mechanics/child/station/handle.ts
Normal file
107
src/views/Mechanics/child/station/handle.ts
Normal file
@ -0,0 +1,107 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* @param ori_data
|
||||
* @returns
|
||||
*/
|
||||
export default function getOriToData(ori_data: Object) {
|
||||
|
||||
let data: object = ori_data;
|
||||
|
||||
let dev_type = {
|
||||
"JJ412": {
|
||||
top: [
|
||||
{ key: data['activation'] + "%", val: "稼动率" },
|
||||
{ key: data['in1'] == "0"?'停止':'启动', val: "设备状态" },
|
||||
{ key: data['in3'] == "0"?'上电':'断电', val: "上电状态" },
|
||||
{ key: data['speed0'] + "转", val: "设备转速" }
|
||||
],
|
||||
bottom: {
|
||||
image: data['image'],
|
||||
data: [
|
||||
{ key: data['adc1'] + 'mm', val: "操作台距原点距离" },
|
||||
{ key: data['in7'] == "0"?'工作':'空挡', val: "档杆状态" },
|
||||
{ key: data['adc2'] + 'mm', val: "套筒台距原点距离" },
|
||||
{ key: data['in4'] == "0"?'开启':'关闭', val: "切削液状态" },
|
||||
{ key: data['in3'] == "0"?'开启':'关闭', val: "照明状态" }
|
||||
]
|
||||
}
|
||||
},
|
||||
"JJ508": {
|
||||
top: [
|
||||
{ key: data['activation'] + "%", val: "稼动率" },
|
||||
{ key: getDevStatus(), val: "设备状态" },
|
||||
{ key: data['speed0'] + '转', val: "钻头转速" },
|
||||
{ key: data['in8'] == "0"?'下降':'未下降', val: "钻头状态" }
|
||||
],
|
||||
bottom: {
|
||||
image: data['image'],
|
||||
data: [
|
||||
{ key: getRotateGear(), val: "设备状态" },
|
||||
{ key: [data['adc1'] + 'mm', data['speed0']+'cm/s'], val: "平台X轴距原点位置和速度" },
|
||||
{ key: getSpeedGear(), val: "设备状态" },
|
||||
{ key: data['adc2'] + 'mm', val: "平台y轴距原点位置" },
|
||||
{ key: data['adc3'] + 'mm', val: "平台z轴距原点位置" }
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
/**
|
||||
* 获得设备状态
|
||||
*/
|
||||
function getDevStatus() {
|
||||
if (data['in1'] == "1" && (data['in2'] == "1" || data['in3'] == 1)&&(data['in4'] == "1" || data['in7'] == 1)) {
|
||||
return '工作'
|
||||
} else if(data['in1'] == 1) {
|
||||
return '待机'
|
||||
} else {
|
||||
return '停机'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取正反转档位
|
||||
*/
|
||||
function getRotateGear() {
|
||||
console.log(data['in2'],data['in3']);
|
||||
|
||||
if (data['in2'] == "1") {
|
||||
return '正转'
|
||||
} else if(data['in3'] == "1") {
|
||||
return '反转'
|
||||
} else {
|
||||
return '停止'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取速度档位
|
||||
*/
|
||||
function getSpeedGear() {
|
||||
if (data['in4'] == "1") {
|
||||
return '高速'
|
||||
} else if(data['in7'] == "1") {
|
||||
return '低速'
|
||||
} else {
|
||||
return '停止'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return dev_type[ori_data['signalGroup']]
|
||||
}
|
||||
|
||||
@ -10,38 +10,30 @@
|
||||
<div class="container">
|
||||
<div class="bj">
|
||||
<div class="text">
|
||||
<span>{{ allData.header }}数据监控平台</span>
|
||||
<span>{{ ori_data.name }}数据监控平台</span>
|
||||
</div>
|
||||
<div class="date">
|
||||
<p class="date-time">{{ timeHtml }}</p>
|
||||
</div>
|
||||
<Float :top_data="topData"></Float>
|
||||
<Sum :allData="sumData"></Sum>
|
||||
<Sum :bottom_data="bottomData"></Sum>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, getCurrentInstance, reactive, onMounted } from "vue";
|
||||
import { reqHologramDataMF} from "@/http/Mechanics"
|
||||
import handleData from "./handle"
|
||||
import { useRoute } from "vue-router";
|
||||
import Sum from "./components/sum.vue";
|
||||
import Float from "./components/float.vue";
|
||||
import useNowTime from "@/hook/nowTime";
|
||||
let { timeHtml } = useNowTime();
|
||||
let route = useRoute();
|
||||
console.log(route.params.id);
|
||||
|
||||
let allData = reactive({
|
||||
header: "炮塔铣床",
|
||||
});
|
||||
|
||||
let topData = reactive([
|
||||
{ key: "95", val: "稼动率" },
|
||||
{ key: "N1", val: "设备状态" },
|
||||
{ key: "100", val: "钻头转速" },
|
||||
{ key: "下降", val: "钻头状态" }
|
||||
]);
|
||||
let sumData = reactive({
|
||||
let ori_data = ref({
|
||||
name: "机床1",
|
||||
data1: "高速",
|
||||
data2: "50cm",
|
||||
data2s: "2cm/s",
|
||||
@ -54,6 +46,24 @@ let sumData = reactive({
|
||||
title4: "平台y轴距原点位置",
|
||||
title5: "平台z轴距原点位置",
|
||||
image: "/dev-api/profile/upload/2023/12/17/cc3940d1e85e4861845e797213802975.png",
|
||||
})
|
||||
let topData = ref([]);
|
||||
|
||||
let bottomData = ref({})
|
||||
|
||||
function getHologramDataMF() {
|
||||
reqHologramDataMF({id:route.params.id}).then((res:any) => {
|
||||
if (res.code == 200&&res.data) {
|
||||
ori_data.value = res.data;
|
||||
let handle = handleData(ori_data.value)
|
||||
topData.value = handle.top;
|
||||
bottomData.value = handle.bottom;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getHologramDataMF();
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@ -79,7 +89,7 @@ let sumData = reactive({
|
||||
left: 38px;
|
||||
width: 614px;
|
||||
height: 53px;
|
||||
font-size: 55px;
|
||||
font-size: 48px;
|
||||
color: #aeeefa;
|
||||
font-family: "华文新魏", sans-serif;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user