JayChou
2 months ago
parent
54664b5459
commit
89c63b9606
55 changed files with 4234 additions and 27 deletions
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 317 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 496 B |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
@ -1,27 +1,36 @@ |
||||
import { createRouter, createWebHashHistory } from "vue-router"; |
||||
import layout from '@/layout/index.vue' |
||||
const routerList :any = [ |
||||
import layout from "@/layout/index.vue"; |
||||
const routerList: any = [ |
||||
{ |
||||
path: "/", |
||||
component: layout, |
||||
children:[ |
||||
children: [ |
||||
{ |
||||
path:'', |
||||
name:'Home', |
||||
component:() => import('@/views/largeDataScreen/home.vue') |
||||
path: "", |
||||
name: "Home", |
||||
component: () => import("@/views/largeDataScreen/home.vue"), |
||||
}, |
||||
|
||||
] |
||||
{ |
||||
path: "designRoute", |
||||
name: "DesignRoute", |
||||
component: () => import("@/views/designRoute/index.vue"), |
||||
}, |
||||
{ |
||||
path: "program", |
||||
name: "Program", |
||||
component: () => import("@/views/program/index.vue"), |
||||
} |
||||
], |
||||
}, |
||||
]; |
||||
const router :any = createRouter({ |
||||
history: createWebHashHistory(), |
||||
routes: routerList, |
||||
scrollBehavior() { |
||||
return { |
||||
left: 0, |
||||
top: 0, |
||||
} |
||||
}, |
||||
}) |
||||
export default router |
||||
const router: any = createRouter({ |
||||
history: createWebHashHistory(), |
||||
routes: routerList, |
||||
scrollBehavior() { |
||||
return { |
||||
left: 0, |
||||
top: 0, |
||||
}; |
||||
}, |
||||
}); |
||||
export default router; |
||||
|
||||
@ -0,0 +1,21 @@ |
||||
<template> |
||||
<div class="main"> |
||||
%RH |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
width: 40px; |
||||
height: 20px; |
||||
color: #fff; |
||||
border: 1px solid #d83fce; |
||||
border-left: 3px solid #d83fce; |
||||
line-height: 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,23 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/TCP.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
|
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
|
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/boolean.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
|
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
|
||||
} |
||||
.main::after{ |
||||
content: "布尔"; |
||||
display: block; |
||||
position: absolute; |
||||
width: 120px; |
||||
top: -35px; |
||||
left: -40px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,23 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/dianchizu.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 70px; |
||||
|
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
|
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,21 @@ |
||||
<template> |
||||
<div class="main"> |
||||
℃ |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
width: 20px; |
||||
height: 20px; |
||||
color: #fff; |
||||
border: 1px solid #d83fce; |
||||
border-left: 3px solid #d83fce; |
||||
line-height: 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/error.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
|
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
|
||||
} |
||||
.main::after{ |
||||
content: "错误输出"; |
||||
display: block; |
||||
position: absolute; |
||||
width: 120px; |
||||
top: -35px; |
||||
left: -40px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/fuwuqiIP.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
|
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
|
||||
} |
||||
.main::after{ |
||||
content: "服务器IP地址"; |
||||
display: block; |
||||
position: absolute; |
||||
width: 120px; |
||||
top: -35px; |
||||
left: -40px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/fuwuqiProt.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
|
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
|
||||
} |
||||
.main::after{ |
||||
content: "服务器端口号"; |
||||
display: block; |
||||
position: absolute; |
||||
width: 120px; |
||||
top: -35px; |
||||
left: -40px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,24 @@ |
||||
<template> |
||||
<div class="main"> |
||||
i |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, nextTick, watch, onMounted } from "vue" |
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
width: 40px; |
||||
height: 40px; |
||||
border: 2px solid #0712ca; |
||||
text-align: center; |
||||
font-size: 20px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
color: #0712ca; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,26 @@ |
||||
<template> |
||||
<div class="main"> |
||||
10 |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, nextTick, watch, onMounted } from "vue" |
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
width: 40px; |
||||
height: 40px; |
||||
border: 2px solid #0712ca; |
||||
text-align: center; |
||||
font-size: 20px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
color: #0712ca; |
||||
|
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,23 @@ |
||||
<template> |
||||
<div class="main"> |
||||
2 |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped> |
||||
.main{ |
||||
width: 20px; |
||||
height: 30px; |
||||
border: 2px solid #0712ca; |
||||
text-align: center; |
||||
font-size: 20px; |
||||
line-height: 30px; |
||||
font-weight: 700; |
||||
color: #0712ca; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/openTCP.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
|
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
|
||||
} |
||||
.main::after{ |
||||
content: "打开TCP连接"; |
||||
display: block; |
||||
position: absolute; |
||||
width: 120px; |
||||
top: -35px; |
||||
left: -40px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,26 @@ |
||||
<template> |
||||
<div class="main"></div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, nextTick, watch, onMounted } from "vue"; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.main { |
||||
position: relative; |
||||
width: 0; |
||||
height: 0; |
||||
border-style: solid; |
||||
border-width: 20px 0 20px 34.6px; |
||||
border-color: transparent transparent transparent #c5d646; |
||||
} |
||||
.main::after { |
||||
content: "÷"; |
||||
display: block; |
||||
position: absolute; |
||||
top: -15px; |
||||
left: -30px; |
||||
font-size: 22px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/setTCP.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
|
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
|
||||
} |
||||
.main::after{ |
||||
content: "写入TCP数据"; |
||||
display: block; |
||||
position: absolute; |
||||
width: 120px; |
||||
top: -35px; |
||||
left: -40px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/setzijie.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
|
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
|
||||
} |
||||
.main::after{ |
||||
content: "写入的字节"; |
||||
display: block; |
||||
position: absolute; |
||||
width: 120px; |
||||
top: -35px; |
||||
left: -40px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,21 @@ |
||||
<template> |
||||
<div class="main"> |
||||
湿度： |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
width: 60px; |
||||
height: 20px; |
||||
color: #fff; |
||||
border: 1px solid #d83fce; |
||||
border-left: 3px solid #d83fce; |
||||
line-height: 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="main"> |
||||
1.23 |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
border: 2px solid #e5bc87; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
color: #e5bc87; |
||||
} |
||||
.main::after{ |
||||
content: "湿度显示数值%RH"; |
||||
display: block; |
||||
position: absolute; |
||||
width: 120px; |
||||
top: -35px; |
||||
left: -30px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/valueSetting.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
|
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
|
||||
} |
||||
.main::after{ |
||||
content: "湿度参数基本设置"; |
||||
display: block; |
||||
position: absolute; |
||||
width: 120px; |
||||
top: -35px; |
||||
left: -40px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,47 @@ |
||||
<template> |
||||
<div class="box"> |
||||
<div class="left"> |
||||
|
||||
</div> |
||||
<div class="right"> |
||||
<div class="item">初始湿度</div> |
||||
<div class="item">加湿功率W</div> |
||||
<div class="item">加湿面积</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, nextTick, watch, onMounted } from "vue" |
||||
|
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped > |
||||
|
||||
.box{ |
||||
width: 120px; |
||||
height: 84px; |
||||
display: flex; |
||||
|
||||
|
||||
} |
||||
.left{ |
||||
width: 20px; |
||||
border: 1px solid #8f8f8f; |
||||
} |
||||
.right{ |
||||
width: 84px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
.item{ |
||||
width: 100%; |
||||
border: 1px solid #8f8f8f; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,23 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/swatch.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 20px; |
||||
height: 20px; |
||||
|
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
|
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,249 @@ |
||||
<template> |
||||
<div class="aaa"> |
||||
<div id="main"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { onMounted, watch } from "vue"; |
||||
import * as echarts from "echarts"; |
||||
import settingStore from "../store/setting"; |
||||
const useSettingStore = settingStore(); |
||||
var value = useSettingStore.temperature; |
||||
var kd = []; |
||||
// 刻度使用柱状图模拟，短设置3，长的设置5；构造一个数据 |
||||
for (var i = 0, len = 130; i <= len; i++) { |
||||
if (i > 100 || i < 30) { |
||||
kd.push("0"); |
||||
} else { |
||||
if (i % 5 === 0) { |
||||
kd.push("5"); |
||||
} else { |
||||
kd.push("3"); |
||||
} |
||||
} |
||||
} |
||||
console.log(kd); |
||||
// 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值 |
||||
function getData(value) { |
||||
return [value + 30]; |
||||
} |
||||
var myChart = null; |
||||
|
||||
const initChart = () => { |
||||
var data = getData(value); |
||||
var mercuryColor = "#fd4d49"; |
||||
var borderColor = "#fd4d49"; |
||||
var option; |
||||
|
||||
option = { |
||||
title: { |
||||
text: "温度计", |
||||
show: false, |
||||
}, |
||||
yAxis: [ |
||||
{ |
||||
show: false, |
||||
min: 0, |
||||
max: 130, |
||||
}, |
||||
{ |
||||
show: false, |
||||
data: [], |
||||
min: 0, |
||||
max: 130, |
||||
}, |
||||
], |
||||
xAxis: [ |
||||
{ |
||||
show: false, |
||||
data: [], |
||||
}, |
||||
{ |
||||
show: false, |
||||
data: [], |
||||
}, |
||||
{ |
||||
show: false, |
||||
data: [], |
||||
}, |
||||
{ |
||||
show: false, |
||||
min: -110, |
||||
max: 100, |
||||
}, |
||||
], |
||||
series: [ |
||||
{ |
||||
name: "条", |
||||
type: "bar", |
||||
// 对应上面XAxis的第一个对象配置 |
||||
xAxisIndex: 0, |
||||
data: data, |
||||
barWidth: 18, |
||||
itemStyle: { |
||||
normal: { |
||||
color: mercuryColor, |
||||
barBorderRadius: 0, |
||||
}, |
||||
}, |
||||
label: { |
||||
normal: { |
||||
show: true, |
||||
position: "top", |
||||
formatter: function (param) { |
||||
// 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值 |
||||
return param.value - 30 + "°C"; |
||||
}, |
||||
textStyle: { |
||||
color: "#ccc", |
||||
fontSize: "10", |
||||
}, |
||||
}, |
||||
}, |
||||
z: 2, |
||||
}, |
||||
{ |
||||
name: "白框", |
||||
type: "bar", |
||||
xAxisIndex: 1, |
||||
barGap: "-100%", |
||||
data: [129], |
||||
barWidth: 28, |
||||
itemStyle: { |
||||
normal: { |
||||
color: "#ffffff", |
||||
barBorderRadius: 50, |
||||
}, |
||||
}, |
||||
z: 1, |
||||
}, |
||||
{ |
||||
name: "外框", |
||||
type: "bar", |
||||
xAxisIndex: 2, |
||||
barGap: "-100%", |
||||
data: [130], |
||||
barWidth: 38, |
||||
itemStyle: { |
||||
normal: { |
||||
color: borderColor, |
||||
barBorderRadius: 50, |
||||
}, |
||||
}, |
||||
z: 0, |
||||
}, |
||||
{ |
||||
name: "圆", |
||||
type: "scatter", |
||||
hoverAnimation: false, |
||||
data: [0], |
||||
xAxisIndex: 0, |
||||
symbolSize: 48, |
||||
itemStyle: { |
||||
normal: { |
||||
color: mercuryColor, |
||||
opacity: 1, |
||||
}, |
||||
}, |
||||
z: 2, |
||||
}, |
||||
{ |
||||
name: "白圆", |
||||
type: "scatter", |
||||
hoverAnimation: false, |
||||
data: [0], |
||||
xAxisIndex: 1, |
||||
symbolSize: 60, |
||||
itemStyle: { |
||||
normal: { |
||||
color: "#ffffff", |
||||
opacity: 1, |
||||
}, |
||||
}, |
||||
z: 1, |
||||
}, |
||||
{ |
||||
name: "外圆", |
||||
type: "scatter", |
||||
hoverAnimation: false, |
||||
data: [0], |
||||
xAxisIndex: 2, |
||||
symbolSize: 70, |
||||
itemStyle: { |
||||
normal: { |
||||
color: borderColor, |
||||
opacity: 1, |
||||
}, |
||||
}, |
||||
z: 0, |
||||
}, |
||||
{ |
||||
name: "刻度", |
||||
type: "bar", |
||||
yAxisIndex: 1, |
||||
xAxisIndex: 3, |
||||
label: { |
||||
normal: { |
||||
show: true, |
||||
position: "right", |
||||
distance: 5, |
||||
color: "#525252", |
||||
fontSize: 10, |
||||
formatter: function (params) { |
||||
// 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值 |
||||
if (params.dataIndex > 100 || params.dataIndex < 30) { |
||||
return ""; |
||||
} else { |
||||
if (params.dataIndex % 5 === 0) { |
||||
return params.dataIndex - 30; |
||||
} else { |
||||
return ""; |
||||
} |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
barGap: "-100%", |
||||
data: kd, |
||||
barWidth: 1, |
||||
itemStyle: { |
||||
normal: { |
||||
color: borderColor, |
||||
barBorderRadius: 10, |
||||
}, |
||||
}, |
||||
z: 0, |
||||
}, |
||||
], |
||||
}; |
||||
var chartDom = document.getElementById("main"); |
||||
myChart = echarts.init(chartDom); |
||||
option && myChart.setOption(option); |
||||
}; |
||||
|
||||
onMounted(() => { |
||||
initChart(); |
||||
}); |
||||
watch( |
||||
() => useSettingStore.temperature, |
||||
(newValue) => { |
||||
value=newValue |
||||
setTimeout(() => { |
||||
initChart(); |
||||
}, 100); |
||||
} |
||||
); |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.aaa { |
||||
width: 320px; |
||||
height: 500px; |
||||
/* background-color: pink; */ |
||||
} |
||||
#main { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,72 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<div class="t0">T0</div> |
||||
<div class="M">M</div> |
||||
<div class="S">S</div> |
||||
<div class="W">W</div> |
||||
<div class="t">t</div> |
||||
<div class="T">T</div> |
||||
<textarea type="textarea" style="width: 100%;height: 100%;border: none;font-size: 14px;line-height: 30px;" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, nextTick, watch, onMounted } from "vue"; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.main { |
||||
position: relative; |
||||
width: 200px; |
||||
height: 300px; |
||||
border: 5px solid #ccc; |
||||
} |
||||
.t0 { |
||||
position: absolute; |
||||
/* top: 5px; */ |
||||
left: -25px; |
||||
border: 1px solid #ccc; |
||||
color: #fff; |
||||
|
||||
} |
||||
.M { |
||||
position: absolute; |
||||
top: 55px; |
||||
left: -25px; |
||||
border: 1px solid #ccc; |
||||
color: #fff; |
||||
|
||||
} |
||||
.S { |
||||
position: absolute; |
||||
top: 120px; |
||||
left: -17px; |
||||
border: 1px solid #ccc; |
||||
color: #fff; |
||||
|
||||
} |
||||
.W{ |
||||
position: absolute; |
||||
top: 180px; |
||||
left: -17px; |
||||
border: 1px solid #ccc; |
||||
color: #fff; |
||||
|
||||
} |
||||
.t{ |
||||
position: absolute; |
||||
top: 240px; |
||||
left: -17px; |
||||
border: 1px solid #ccc; |
||||
color: #fff; |
||||
|
||||
} |
||||
.T{ |
||||
position: absolute; |
||||
top: 50%; |
||||
right: -17px; |
||||
border: 1px solid #ccc; |
||||
color: #fff; |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,72 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<div class="t0">R0</div> |
||||
<div class="M">S0</div> |
||||
<div class="S">W1</div> |
||||
<!-- <div class="W">W</div> --> |
||||
<div class="t">t1</div> |
||||
<div class="T">R</div> |
||||
<textarea type="textarea" style="width: 100%;height: 100%;border: none;font-size: 14px;line-height: 30px;" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, nextTick, watch, onMounted } from "vue"; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.main { |
||||
position: relative; |
||||
width: 200px; |
||||
height: 300px; |
||||
border: 5px solid #ccc; |
||||
} |
||||
.t0 { |
||||
position: absolute; |
||||
top: 5px; |
||||
left: -25px; |
||||
border: 1px solid #ccc; |
||||
color: #fff; |
||||
|
||||
} |
||||
.M { |
||||
position: absolute; |
||||
top: 75px; |
||||
left: -25px; |
||||
border: 1px solid #ccc; |
||||
color: #fff; |
||||
|
||||
} |
||||
.S { |
||||
position: absolute; |
||||
top: 150px; |
||||
left: -29px; |
||||
border: 1px solid #ccc; |
||||
color: #fff; |
||||
|
||||
} |
||||
.W{ |
||||
position: absolute; |
||||
top: 180px; |
||||
left: -17px; |
||||
border: 1px solid #ccc; |
||||
color: #fff; |
||||
|
||||
} |
||||
.t{ |
||||
position: absolute; |
||||
top: 230px; |
||||
left: -17px; |
||||
border: 1px solid #ccc; |
||||
color: #fff; |
||||
|
||||
} |
||||
.T{ |
||||
position: absolute; |
||||
top: 50%; |
||||
right: -17px; |
||||
border: 1px solid #ccc; |
||||
color: #fff; |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,21 @@ |
||||
<template> |
||||
<div class="main"> |
||||
温度： |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
width: 60px; |
||||
height: 20px; |
||||
color: #fff; |
||||
border: 1px solid #d83fce; |
||||
border-left: 3px solid #d83fce; |
||||
line-height: 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="main"> |
||||
1.23 |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
border: 2px solid #e5bc87; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
color: #e5bc87; |
||||
} |
||||
.main::after{ |
||||
content: "温度显示数值"; |
||||
display: block; |
||||
position: absolute; |
||||
width: 120px; |
||||
top: -35px; |
||||
left: -30px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/valueSetting.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
|
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
|
||||
} |
||||
.main::after{ |
||||
content: "温度参数基本设置"; |
||||
display: block; |
||||
position: absolute; |
||||
width: 120px; |
||||
top: -35px; |
||||
left: -40px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/wenduyibiao.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
|
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
|
||||
} |
||||
.main::after{ |
||||
content: "湿度仪表"; |
||||
display: block; |
||||
position: absolute; |
||||
width: 120px; |
||||
top: -35px; |
||||
left: -40px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,47 @@ |
||||
<template> |
||||
<div class="box"> |
||||
<div class="left"> |
||||
|
||||
</div> |
||||
<div class="right"> |
||||
<div class="item">初始温度</div> |
||||
<div class="item">质量Kg</div> |
||||
<div class="item">散热面积</div> |
||||
<div class="item">加热功率W</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, nextTick, watch, onMounted } from "vue" |
||||
|
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped > |
||||
.box{ |
||||
width: 120px; |
||||
height: 100px; |
||||
display: flex; |
||||
|
||||
|
||||
} |
||||
.left{ |
||||
width: 20px; |
||||
border: 1px solid #8f8f8f; |
||||
} |
||||
.right{ |
||||
width: 100px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
.item{ |
||||
width: 100%; |
||||
border: 1px solid #8f8f8f; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/thermometer.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
border: 2px solid #e5bc87; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
color: #e5bc87; |
||||
} |
||||
.main::after{ |
||||
content: "温度计"; |
||||
display: block; |
||||
position: absolute; |
||||
width: 120px; |
||||
top: -35px; |
||||
left: -40px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,23 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<img style="width: 100%;height: 100%;" src="../../../assets/images/zhuanhuanqi.png" alt="" srcset=""> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup > |
||||
</script> |
||||
|
||||
<style scoped > |
||||
.main{ |
||||
position: relative; |
||||
width: 40px; |
||||
height: 40px; |
||||
|
||||
text-align: center; |
||||
font-size: 16px; |
||||
line-height: 40px; |
||||
font-weight: 700; |
||||
|
||||
} |
||||
|
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,250 @@ |
||||
<template> |
||||
<div class="aaa"> |
||||
<div id="main"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { onMounted, watch } from "vue"; |
||||
import * as echarts from "echarts"; |
||||
import settingStore from "@/store/modules/setting"; |
||||
const useSettingStore = settingStore(); |
||||
var value = useSettingStore.qw; |
||||
var kd = []; |
||||
// 刻度使用柱状图模拟，短设置3，长的设置5；构造一个数据 |
||||
for (var i = 0, len = 130; i <= len; i++) { |
||||
if (i > 130 || i < 30) { |
||||
kd.push("0"); |
||||
} else { |
||||
if (i % 5 === 0) { |
||||
kd.push("5"); |
||||
} else { |
||||
kd.push("3"); |
||||
} |
||||
} |
||||
} |
||||
console.log(kd); |
||||
// 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值 |
||||
function getData(value) { |
||||
return [value + 30]; |
||||
} |
||||
var myChart = null; |
||||
|
||||
const initChart = () => { |
||||
var data = getData(value); |
||||
var mercuryColor = "#fd4d49"; |
||||
var borderColor = "#fd4d49"; |
||||
var option; |
||||
|
||||
option = { |
||||
title: { |
||||
text: "温度计", |
||||
show: false, |
||||
}, |
||||
yAxis: [ |
||||
{ |
||||
show: false, |
||||
min: 0, |
||||
max: 130, |
||||
}, |
||||
{ |
||||
show: false, |
||||
data: [], |
||||
min: 0, |
||||
max: 130, |
||||
}, |
||||
], |
||||
xAxis: [ |
||||
{ |
||||
show: false, |
||||
data: [], |
||||
}, |
||||
{ |
||||
show: false, |
||||
data: [], |
||||
}, |
||||
{ |
||||
show: false, |
||||
data: [], |
||||
}, |
||||
{ |
||||
show: false, |
||||
min: -110, |
||||
max: 80, |
||||
}, |
||||
], |
||||
series: [ |
||||
{ |
||||
name: "条", |
||||
type: "bar", |
||||
// 对应上面XAxis的第一个对象配置 |
||||
xAxisIndex: 0, |
||||
data: data, |
||||
barWidth: 18, |
||||
itemStyle: { |
||||
normal: { |
||||
color: mercuryColor, |
||||
barBorderRadius: 0, |
||||
}, |
||||
}, |
||||
// label: { |
||||
// normal: { |
||||
// show: true, |
||||
// position: "top", |
||||
// formatter: function (param) { |
||||
// // 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值 |
||||
// return param.value - 30 + "°C"; |
||||
// }, |
||||
// textStyle: { |
||||
// color: "#000", |
||||
// fontSize: "10", |
||||
// }, |
||||
// }, |
||||
// }, |
||||
z: 2, |
||||
}, |
||||
{ |
||||
name: "白框", |
||||
type: "bar", |
||||
xAxisIndex: 1, |
||||
barGap: "-100%", |
||||
data: [129], |
||||
barWidth: 28, |
||||
itemStyle: { |
||||
normal: { |
||||
color: "#ffffff", |
||||
barBorderRadius: 50, |
||||
}, |
||||
}, |
||||
z: 1, |
||||
}, |
||||
{ |
||||
name: "外框", |
||||
type: "bar", |
||||
xAxisIndex: 2, |
||||
barGap: "-100%", |
||||
data: [130], |
||||
barWidth: 38, |
||||
itemStyle: { |
||||
normal: { |
||||
color: borderColor, |
||||
barBorderRadius: 50, |
||||
}, |
||||
}, |
||||
z: 0, |
||||
}, |
||||
{ |
||||
name: "圆", |
||||
type: "scatter", |
||||
hoverAnimation: false, |
||||
data: [0], |
||||
xAxisIndex: 0, |
||||
symbolSize: 48, |
||||
itemStyle: { |
||||
normal: { |
||||
color: mercuryColor, |
||||
opacity: 1, |
||||
}, |
||||
}, |
||||
z: 2, |
||||
}, |
||||
{ |
||||
name: "白圆", |
||||
type: "scatter", |
||||
hoverAnimation: false, |
||||
data: [0], |
||||
xAxisIndex: 1, |
||||
symbolSize: 60, |
||||
itemStyle: { |
||||
normal: { |
||||
color: "#ffffff", |
||||
opacity: 1, |
||||
}, |
||||
}, |
||||
z: 1, |
||||
}, |
||||
{ |
||||
name: "外圆", |
||||
type: "scatter", |
||||
hoverAnimation: false, |
||||
data: [0], |
||||
xAxisIndex: 2, |
||||
symbolSize: 70, |
||||
itemStyle: { |
||||
normal: { |
||||
color: borderColor, |
||||
opacity: 1, |
||||
}, |
||||
}, |
||||
z: 0, |
||||
}, |
||||
{ |
||||
name: "刻度", |
||||
type: "bar", |
||||
yAxisIndex: 1, |
||||
xAxisIndex: 3, |
||||
label: { |
||||
normal: { |
||||
show: true, |
||||
position: "right", |
||||
distance: 5, |
||||
color: "#fff", |
||||
fontSize: 10, |
||||
formatter: function (params) { |
||||
// 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值 |
||||
if (params.dataIndex > 130 || params.dataIndex < 30) { |
||||
return ""; |
||||
} else { |
||||
if (params.dataIndex % 5 === 0) { |
||||
return params.dataIndex - 30; |
||||
} else { |
||||
return ""; |
||||
} |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
barGap: "-100%", |
||||
data: kd, |
||||
barWidth: 1, |
||||
itemStyle: { |
||||
normal: { |
||||
color: borderColor, |
||||
barBorderRadius: 10, |
||||
}, |
||||
}, |
||||
z: 0, |
||||
}, |
||||
], |
||||
}; |
||||
var chartDom = document.getElementById("main"); |
||||
myChart = echarts.init(chartDom); |
||||
option && myChart.setOption(option); |
||||
}; |
||||
|
||||
onMounted(() => { |
||||
initChart(); |
||||
}); |
||||
watch( |
||||
() => useSettingStore.qw, |
||||
(newValue) => { |
||||
value=newValue; |
||||
setTimeout(() => { |
||||
initChart(); |
||||
}, 100); |
||||
} |
||||
); |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.aaa { |
||||
width: 350px; |
||||
height: 400px; |
||||
/* background-color: pink; */ |
||||
} |
||||
#main { |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,282 @@ |
||||
<template> |
||||
<div class="aaa"> |
||||
<div id="chart"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { onMounted, watch } from "vue"; |
||||
import * as echarts from "echarts"; |
||||
import settingStore from "@/store/modules/setting"; |
||||
const useSettingStore = settingStore(); |
||||
var value = useSettingStore.cssd * 100; |
||||
var myChart = null; |
||||
const initChart = () => { |
||||
const option = { |
||||
backgroundColor: "transparent", |
||||
tooltip: { |
||||
formatter: "{b}{c}", |
||||
}, |
||||
series: [ |
||||
{ |
||||
tooltip: { |
||||
show: false, |
||||
}, |
||||
name: "wrap", |
||||
type: "pie", |
||||
hoverAnimation: false, |
||||
legendHoverLink: false, |
||||
center: ["50%", "60%"], |
||||
radius: ["0%", "7%"], |
||||
z: 5, |
||||
label: { |
||||
normal: { |
||||
show: false, |
||||
position: "center", |
||||
}, |
||||
emphasis: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
labelLine: { |
||||
normal: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 100, |
||||
itemStyle: { |
||||
normal: { |
||||
color: "#f2ee00", |
||||
}, |
||||
emphasis: { |
||||
color: "#072B79", |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
tooltip: { |
||||
show: false, |
||||
}, |
||||
name: "wrap", |
||||
type: "pie", |
||||
hoverAnimation: false, |
||||
legendHoverLink: false, |
||||
center: ["50%", "60%"], |
||||
radius: ["6%", "8%"], |
||||
z: 5, |
||||
label: { |
||||
normal: { |
||||
show: false, |
||||
position: "center", |
||||
}, |
||||
emphasis: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
labelLine: { |
||||
normal: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 100, |
||||
itemStyle: { |
||||
normal: { |
||||
color: "#eaed00", |
||||
}, |
||||
emphasis: { |
||||
color: "#8ee700", |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
tooltip: { |
||||
show: false, |
||||
}, |
||||
name: "刻度", |
||||
type: "gauge", |
||||
radius: "83%", |
||||
z: 1, |
||||
min: 0, |
||||
max: 100, |
||||
center: ["50%", "60%"], |
||||
splitNumber: 5, //刻度数量 |
||||
startAngle: 180, |
||||
endAngle: 0, |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
width: 5, |
||||
color: [ |
||||
[0, "#00d900"], |
||||
[0.2, "#55e400"], |
||||
[0.4, "#cfee00"], |
||||
[0.6, "#ffab00"], |
||||
[0.8, "#ff1700"], |
||||
[1, "#ff1a00"], |
||||
], |
||||
}, |
||||
}, //仪表盘轴线 |
||||
axisLabel: { |
||||
show: false, |
||||
}, //刻度标签。 |
||||
axisTick: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "auto", |
||||
width: 0, |
||||
}, |
||||
length: -15, |
||||
}, //刻度样式 |
||||
splitLine: { |
||||
show: true, |
||||
length: 0, |
||||
lineStyle: { |
||||
color: "auto", |
||||
width: 2, |
||||
}, |
||||
}, //分隔线样式 |
||||
detail: { |
||||
show: false, |
||||
}, |
||||
pointer: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "", |
||||
type: "gauge", |
||||
radius: "80%", |
||||
min: 0, |
||||
max: 100, |
||||
center: ["50%", "60%"], |
||||
data: [ |
||||
{ |
||||
value: value, |
||||
name: "", |
||||
}, |
||||
], |
||||
splitNumber: 10, //刻度数量 |
||||
startAngle: 180, |
||||
endAngle: 0, |
||||
z: 5, |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
width: 0, |
||||
color: [ |
||||
[0, "#00d900"], |
||||
[0.2, "#55e400"], |
||||
[0.4, "#cfee00"], |
||||
[0.6, "#ffab00"], |
||||
[0.8, "#ff1700"], |
||||
[1, "#ff1a00"], |
||||
], |
||||
}, |
||||
}, //仪表盘轴线 |
||||
axisLabel: { |
||||
show: true, |
||||
color: "#fff", |
||||
fontSize: 20, |
||||
distance: -70, |
||||
formatter: function (params) { |
||||
var value = params.toFixed(0); |
||||
|
||||
if (value == 0.0) { |
||||
return "0"; |
||||
} else if (value == 20) { |
||||
return "2"; |
||||
} else if (value == 40) { |
||||
return "4"; |
||||
} else if (value == 60) { |
||||
return "6"; |
||||
} else if (value == 80) { |
||||
return "8"; |
||||
} else if (value == 100) { |
||||
return "10"; |
||||
} else { |
||||
return " "; |
||||
} |
||||
}, |
||||
}, //刻度标签。 |
||||
axisTick: { |
||||
splitNumber: 10, |
||||
show: true, |
||||
lineStyle: { |
||||
color: "auto", |
||||
width: 2, |
||||
}, |
||||
length: 20, |
||||
}, //刻度样式 |
||||
splitLine: { |
||||
show: true, |
||||
length: 25, |
||||
lineStyle: { |
||||
color: "auto", |
||||
width: 5, |
||||
}, |
||||
}, //分隔线样式 |
||||
|
||||
itemStyle: { |
||||
normal: { |
||||
color: "#ff1d04", //指针颜色 |
||||
}, |
||||
}, |
||||
pointer: { |
||||
width: 10, |
||||
length: "80%", |
||||
}, |
||||
detail: { |
||||
formatter: function (params) { |
||||
return params / 100; |
||||
}, |
||||
fontSize: 30, |
||||
color: "#fff", |
||||
offsetCenter: ["0%", "-35%"], |
||||
}, |
||||
title: { |
||||
offsetCenter: ["0", "-60%"], |
||||
fontSize: 40, |
||||
color: "#fff", |
||||
show: true, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
var chartDom = document.getElementById("chart"); |
||||
myChart = echarts.init(chartDom); |
||||
option && myChart.setOption(option); |
||||
}; |
||||
|
||||
onMounted(() => { |
||||
initChart(); |
||||
}); |
||||
watch( |
||||
() => useSettingStore.cssd, |
||||
(newValue) => { |
||||
value=newValue * 100 |
||||
setTimeout(() => { |
||||
initChart(); |
||||
}, 100); |
||||
} |
||||
); |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.aaa { |
||||
width: 350px; |
||||
height: 300px; |
||||
/* background-color: pink; */ |
||||
} |
||||
#chart { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue