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 { createRouter, createWebHashHistory } from "vue-router"; |
||||||
import layout from '@/layout/index.vue' |
import layout from "@/layout/index.vue"; |
||||||
const routerList :any = [ |
const routerList: any = [ |
||||||
{ |
{ |
||||||
path: "/", |
path: "/", |
||||||
component: layout, |
component: layout, |
||||||
children:[ |
children: [ |
||||||
{ |
{ |
||||||
path:'', |
path: "", |
||||||
name:'Home', |
name: "Home", |
||||||
component:() => import('@/views/largeDataScreen/home.vue') |
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({ |
const router: any = createRouter({ |
||||||
history: createWebHashHistory(), |
history: createWebHashHistory(), |
||||||
routes: routerList, |
routes: routerList, |
||||||
scrollBehavior() { |
scrollBehavior() { |
||||||
return { |
return { |
||||||
left: 0, |
left: 0, |
||||||
top: 0, |
top: 0, |
||||||
} |
}; |
||||||
}, |
}, |
||||||
}) |
}); |
||||||
export default router |
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