mirror of
https://gitee.com/dromara/go-view.git
synced 2025-06-30 00:29:16 +08:00
feat: 新增综合PUE1 功率容量
This commit is contained in:
huanghao1412
parent
2e80be90a3
commit
35779870be
5
.env
5
.env
@ -3,8 +3,9 @@ VITE_DEV_PORT = '8080'
|
||||
|
||||
# development path
|
||||
# VITE_DEV_PATH = 'http://192.168.0.34:11887'
|
||||
VITE_DEV_PATH = 'http://192.168.0.34:18077'
|
||||
VITE_DEV_PATH = 'http://192.168.0.34:8022'
|
||||
# VITE_DEV_PATH = 'http://192.168.0.120:3001'
|
||||
VITE_DEV_TOKEN = '0e1e851b-8522-477c-9f84-d415999816d1'
|
||||
|
||||
# production path
|
||||
VITE_PRO_PATH = 'http://192.168.0.34:11887'
|
||||
VITE_PRO_PATH = 'http://192.168.0.235:8177'
|
||||
|
||||
@ -88,7 +88,12 @@ getMessageByParent('getStore', (e) => {
|
||||
|
||||
getMessageByParent('loaded', (e) => {
|
||||
if(e.data.type === 'changeRoute' && e.data.page === 'customLargeScreen') {
|
||||
routerStore.setToken(e.data.token)
|
||||
if(import.meta.env.MODE === 'production') {
|
||||
routerStore.setToken(e.data.token)
|
||||
}
|
||||
else {
|
||||
routerStore.setToken(import.meta.env.VITE_DEV_TOKEN)
|
||||
}
|
||||
router.replace(e.data.path ? e.data.path : '/chart/preview/null')
|
||||
}
|
||||
})
|
||||
|
||||
@ -46,7 +46,14 @@ export async function getToken() {
|
||||
|
||||
export const publicInterface = async (paramType:string, interfaceType:string, paramData?:unknown) =>{
|
||||
try {
|
||||
const access_token = await getToken()
|
||||
let access_token = ''
|
||||
if(import.meta.env.MODE === 'production') {
|
||||
access_token = await getToken() as string
|
||||
}
|
||||
else {
|
||||
console.log(import.meta.env, 777)
|
||||
access_token = import.meta.env.VITE_DEV_TOKEN
|
||||
}
|
||||
const res = await http(RequestHttpEnum.POST)<any>(paramType, {
|
||||
access_token,
|
||||
type: interfaceType,
|
||||
|
||||
BIN
src/assets/images/chart/customponents/ComprehensivePUE1.png
Normal file
BIN
src/assets/images/chart/customponents/ComprehensivePUE1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/assets/images/chart/customponents/PowerCapacity.png
Normal file
BIN
src/assets/images/chart/customponents/PowerCapacity.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="64px" height="64px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||
<g>
|
||||
<polygon style="fill:#4196FF;" points="33.326,57.133 25.326,19.799 14.706,34.667 0,34.667 0,29.333 11.961,29.333 28.008,6.867
|
||||
36.008,44.201 46.627,29.333 64,29.333 64,34.667 49.373,34.667 "/>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,370 @@
|
||||
<template>
|
||||
<div class="VCircle">
|
||||
<svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="180px" height="180px" viewBox="0 0 180 180" style="enable-background:new 0 0 230 162;">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient-pue" x1="32.09" y1="80" x2="171.91" y2="80" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#4196ff" stop-opacity="0.1" />
|
||||
<stop offset="0.5" stop-color="#4196ff" stop-opacity="0.5" />
|
||||
<stop offset="1" stop-color="#4196ff" stop-opacity="0.1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="linear-gradient-pue-2" x1="72" y1="191" x2="132" y2="191" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#4196ff" stop-opacity="0.5" />
|
||||
<stop offset="1" stop-color="#4196ff" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="linear-gradient-pue-3" x1="0" x2="60" xlink:href="#linear-gradient-pue-2" />
|
||||
<linearGradient id="linear-gradient-pue-4" x1="144" x2="204" xlink:href="#linear-gradient-pue-2" />
|
||||
</defs>
|
||||
<g id="内容" transform="translate(-12, 10)">
|
||||
<circle cx="102" cy="80" r="80" style="fill:#4196ff;opacity:0.05" />
|
||||
<circle cx="102" cy="80" r="72.73" style="fill:#4196ff;opacity:0.1" />
|
||||
<path d="M58.73,142.92a76.38,76.38,0,0,0,87.27-.5" style="fill:none;stroke:#55a8fd;stroke-miterlimit:10;stroke-opacity:0.2" />
|
||||
<path d="M177.09,66.11A76.38,76.38,0,0,0,115,4.75" style="fill:none;stroke:#55a8fd;stroke-miterlimit:10;stroke-opacity:0.2" />
|
||||
<path d="M67.82,11.69A76.5,76.5,0,0,0,26.75,67" style="fill:none;stroke:#55a8fd;stroke-miterlimit:10;stroke-opacity:0.2" />
|
||||
<circle cx="102" cy="80" r="69.91" style="fill:#091c38" />
|
||||
<path d="M102,11.09A68.91,68.91,0,1,1,33.09,80,69,69,0,0,1,102,11.09m0-1A69.91,69.91,0,1,0,171.91,80,69.91,69.91,0,0,0,102,10.09Z" style="fill:url(#linear-gradient-pue)" />
|
||||
<g style="opacity:0.5">
|
||||
<path d="M50,123.65l-1.53,1.28a70.46,70.46,0,0,0,8.62,8.62L58.35,132A68.56,68.56,0,0,1,50,123.65Z" style="fill:#3a73ad" />
|
||||
<path d="M58.35,132l-1.28,1.53a70.24,70.24,0,0,0,10,7l1-1.73A68.28,68.28,0,0,1,58.35,132Z" style="fill:#3a73ad" />
|
||||
<path d="M43.18,114l-1.73,1a70.13,70.13,0,0,0,7,10L50,123.65A68.08,68.08,0,0,1,43.18,114Z" style="fill:#3a73ad" />
|
||||
<path d="M35.11,91.79l-2,.35a69.56,69.56,0,0,0,3.15,11.78l1.88-.69A67.34,67.34,0,0,1,35.11,91.79Z" style="fill:#3a73ad" />
|
||||
<path d="M160.82,114l1.73,1a69.49,69.49,0,0,0,5.16-11l-1.88-.68A67.78,67.78,0,0,1,160.82,114Z" style="fill:#3a73ad" />
|
||||
<path d="M102,147.91h0v2h0a70.34,70.34,0,0,0,12.14-1.05l-.35-2A68.44,68.44,0,0,1,102,147.91Z" style="fill:#3a73ad" />
|
||||
<path d="M113.79,146.89l.35,2a69.43,69.43,0,0,0,11.78-3.14l-.68-1.88A67.47,67.47,0,0,1,113.79,146.89Z" style="fill:#3a73ad" />
|
||||
<path d="M58.35,28l-1.28-1.53a70.46,70.46,0,0,0-8.62,8.62L50,36.35A68.42,68.42,0,0,1,58.35,28Z" style="fill:#3a73ad" />
|
||||
<path d="M154,36.35l1.53-1.28a70.46,70.46,0,0,0-8.62-8.62L145.65,28A68.49,68.49,0,0,1,154,36.35Z" style="fill:#3a73ad" />
|
||||
<path d="M160.82,46l1.73-1a70.09,70.09,0,0,0-7-10L154,36.35A68.23,68.23,0,0,1,160.82,46Z" style="fill:#3a73ad" />
|
||||
<path d="M38.17,56.77l-1.88-.68a69.49,69.49,0,0,0-3.15,11.78l2,.35A67.43,67.43,0,0,1,38.17,56.77Z" style="fill:#3a73ad" />
|
||||
<path d="M68,21.18l-1-1.73a70.12,70.12,0,0,0-10,7L58.35,28A68,68,0,0,1,68,21.18Z" style="fill:#3a73ad" />
|
||||
<path d="M78.77,16.17l-.68-1.88a69.72,69.72,0,0,0-11,5.16l1,1.73A67.55,67.55,0,0,1,78.77,16.17Z" style="fill:#3a73ad" />
|
||||
<path d="M113.79,13.11l.35-2A70.43,70.43,0,0,0,102,10.09v2A68.44,68.44,0,0,1,113.79,13.11Z" style="fill:#3a73ad" />
|
||||
</g>
|
||||
<g style="opacity:0.25">
|
||||
<path d="M102,22.09A57.91,57.91,0,1,1,44.09,80,58,58,0,0,1,102,22.09m0-1A58.91,58.91,0,1,0,160.91,80,58.91,58.91,0,0,0,102,21.09Z" style="fill:#55a8fd" />
|
||||
</g>
|
||||
<line x1="102" y1="14" x2="102" y2="20" style="fill:#55a8fd" />
|
||||
<line x1="99.81" y1="17.41" x2="99.88" y2="19.43" style="fill:#55a8fd" />
|
||||
<line x1="97.49" y1="15.51" x2="97.77" y2="19.54" style="fill:#55a8fd" />
|
||||
<line x1="95.46" y1="17.72" x2="95.67" y2="19.73" style="fill:#55a8fd" />
|
||||
<line x1="93" y1="15.98" x2="93.56" y2="19.98" style="fill:#55a8fd" />
|
||||
<line x1="91.13" y1="18.32" x2="91.48" y2="20.32" style="fill:#55a8fd" />
|
||||
<line x1="88.56" y1="16.77" x2="89.4" y2="20.72" style="fill:#55a8fd" />
|
||||
<line x1="86.85" y1="19.23" x2="87.34" y2="21.19" style="fill:#55a8fd" />
|
||||
<line x1="84.18" y1="17.86" x2="85.29" y2="21.74" style="fill:#55a8fd" />
|
||||
<line x1="82.65" y1="20.44" x2="83.27" y2="22.36" style="fill:#55a8fd" />
|
||||
<line x1="79.89" y1="19.25" x2="81.27" y2="23.05" style="fill:#55a8fd" />
|
||||
<line x1="78.54" y1="21.93" x2="79.3" y2="23.81" style="fill:#55a8fd" />
|
||||
<line x1="75.71" y1="20.94" x2="77.35" y2="24.63" style="fill:#55a8fd" />
|
||||
<line x1="74.55" y1="23.71" x2="75.43" y2="25.53" style="fill:#55a8fd" />
|
||||
<line x1="71.65" y1="22.92" x2="73.55" y2="26.49" style="fill:#55a8fd" />
|
||||
<line x1="70.69" y1="25.76" x2="71.7" y2="27.51" style="fill:#55a8fd" />
|
||||
<line x1="67.74" y1="25.18" x2="69.88" y2="28.6" style="fill:#55a8fd" />
|
||||
<line x1="66.98" y1="28.08" x2="68.11" y2="29.75" style="fill:#55a8fd" />
|
||||
<line x1="64" y1="27.7" x2="66.38" y2="30.97" style="fill:#55a8fd" />
|
||||
<line x1="63.44" y1="30.65" x2="64.69" y2="32.24" style="fill:#55a8fd" />
|
||||
<line x1="60.45" y1="30.48" x2="63.04" y2="33.57" style="fill:#55a8fd" />
|
||||
<line x1="60.1" y1="33.46" x2="61.45" y2="34.96" style="fill:#55a8fd" />
|
||||
<line x1="57.09" y1="33.5" x2="59.9" y2="36.4" style="fill:#55a8fd" />
|
||||
<line x1="56.95" y1="36.5" x2="58.4" y2="37.9" style="fill:#55a8fd" />
|
||||
<line x1="53.96" y1="36.74" x2="56.96" y2="39.45" style="fill:#55a8fd" />
|
||||
<line x1="54.03" y1="39.75" x2="55.57" y2="41.04" style="fill:#55a8fd" />
|
||||
<line x1="51.06" y1="40.2" x2="54.24" y2="42.69" style="fill:#55a8fd" />
|
||||
<line x1="51.34" y1="43.19" x2="52.97" y2="44.38" style="fill:#55a8fd" />
|
||||
<line x1="48.41" y1="43.85" x2="51.75" y2="46.11" style="fill:#55a8fd" />
|
||||
<line x1="48.89" y1="46.81" x2="50.6" y2="47.88" style="fill:#55a8fd" />
|
||||
<line x1="46.01" y1="47.68" x2="49.51" y2="49.7" style="fill:#55a8fd" />
|
||||
<line x1="46.71" y1="50.6" x2="48.49" y2="51.55" style="fill:#55a8fd" />
|
||||
<line x1="43.9" y1="51.66" x2="47.53" y2="53.43" style="fill:#55a8fd" />
|
||||
<line x1="44.79" y1="54.53" x2="46.63" y2="55.35" style="fill:#55a8fd" />
|
||||
<line x1="42.06" y1="55.78" x2="45.81" y2="57.3" style="fill:#55a8fd" />
|
||||
<line x1="43.15" y1="58.58" x2="45.05" y2="59.27" style="fill:#55a8fd" />
|
||||
<line x1="40.52" y1="60.02" x2="44.36" y2="61.27" style="fill:#55a8fd" />
|
||||
<line x1="41.8" y1="62.74" x2="43.74" y2="63.29" style="fill:#55a8fd" />
|
||||
<line x1="39.27" y1="64.36" x2="43.19" y2="65.34" style="fill:#55a8fd" />
|
||||
<line x1="40.74" y1="66.98" x2="42.72" y2="67.4" style="fill:#55a8fd" />
|
||||
<line x1="38.34" y1="68.78" x2="42.31" y2="69.48" style="fill:#55a8fd" />
|
||||
<line x1="39.98" y1="71.29" x2="41.98" y2="71.57" style="fill:#55a8fd" />
|
||||
<line x1="37.71" y1="73.24" x2="41.72" y2="73.67" style="fill:#55a8fd" />
|
||||
<line x1="39.53" y1="75.63" x2="41.54" y2="75.77" style="fill:#55a8fd" />
|
||||
<line x1="37.39" y1="77.74" x2="41.43" y2="77.89" style="fill:#55a8fd" />
|
||||
<line x1="39" y1="80" x2="42" y2="80" style="fill:#55a8fd" />
|
||||
<line x1="37.39" y1="82.26" x2="41.43" y2="82.11" style="fill:#55a8fd" />
|
||||
<line x1="39.53" y1="84.37" x2="41.54" y2="84.23" style="fill:#55a8fd" />
|
||||
<line x1="37.71" y1="86.76" x2="41.72" y2="86.33" style="fill:#55a8fd" />
|
||||
<line x1="39.98" y1="88.71" x2="41.98" y2="88.43" style="fill:#55a8fd" />
|
||||
<line x1="38.34" y1="91.22" x2="42.31" y2="90.52" style="fill:#55a8fd" />
|
||||
<line x1="40.74" y1="93.02" x2="42.72" y2="92.6" style="fill:#55a8fd" />
|
||||
<line x1="39.27" y1="95.64" x2="43.19" y2="94.66" style="fill:#55a8fd" />
|
||||
<line x1="41.8" y1="97.26" x2="43.74" y2="96.71" style="fill:#55a8fd" />
|
||||
<line x1="40.52" y1="99.98" x2="44.36" y2="98.73" style="fill:#55a8fd" />
|
||||
<line x1="43.15" y1="101.42" x2="45.05" y2="100.73" style="fill:#55a8fd" />
|
||||
<line x1="42.06" y1="104.22" x2="45.81" y2="102.7" style="fill:#55a8fd" />
|
||||
<line x1="44.79" y1="105.47" x2="46.63" y2="104.65" style="fill:#55a8fd" />
|
||||
<line x1="43.9" y1="108.34" x2="47.53" y2="106.57" style="fill:#55a8fd" />
|
||||
<line x1="46.71" y1="109.4" x2="48.49" y2="108.45" style="fill:#55a8fd" />
|
||||
<line x1="46.01" y1="112.32" x2="49.51" y2="110.3" style="fill:#55a8fd" />
|
||||
<line x1="48.89" y1="113.19" x2="50.6" y2="112.12" style="fill:#55a8fd" />
|
||||
<line x1="48.41" y1="116.15" x2="51.75" y2="113.89" style="fill:#55a8fd" />
|
||||
<line x1="51.34" y1="116.81" x2="52.97" y2="115.62" style="fill:#55a8fd" />
|
||||
<line x1="51.06" y1="119.8" x2="54.24" y2="117.31" style="fill:#55a8fd" />
|
||||
<line x1="54.03" y1="120.25" x2="55.57" y2="118.96" style="fill:#55a8fd" />
|
||||
<line x1="53.96" y1="123.26" x2="56.96" y2="120.55" style="fill:#55a8fd" />
|
||||
<line x1="56.95" y1="123.5" x2="58.4" y2="122.1" style="fill:#55a8fd" />
|
||||
<line x1="57.09" y1="126.5" x2="59.9" y2="123.6" style="fill:#55a8fd" />
|
||||
<line x1="60.1" y1="126.54" x2="61.45" y2="125.04" style="fill:#55a8fd" />
|
||||
<line x1="60.45" y1="129.52" x2="63.04" y2="126.43" style="fill:#55a8fd" />
|
||||
<line x1="63.44" y1="129.35" x2="64.69" y2="127.76" style="fill:#55a8fd" />
|
||||
<line x1="64" y1="132.3" x2="66.38" y2="129.03" style="fill:#55a8fd" />
|
||||
<line x1="66.98" y1="131.92" x2="68.11" y2="130.25" style="fill:#55a8fd" />
|
||||
<line x1="67.74" y1="134.82" x2="69.88" y2="131.4" style="fill:#55a8fd" />
|
||||
<line x1="70.69" y1="134.24" x2="71.7" y2="132.49" style="fill:#55a8fd" />
|
||||
<line x1="71.65" y1="137.08" x2="73.55" y2="133.51" style="fill:#55a8fd" />
|
||||
<line x1="74.55" y1="136.29" x2="75.43" y2="134.47" style="fill:#55a8fd" />
|
||||
<line x1="75.71" y1="139.06" x2="77.35" y2="135.37" style="fill:#55a8fd" />
|
||||
<line x1="78.54" y1="138.07" x2="79.29" y2="136.19" style="fill:#55a8fd" />
|
||||
<line x1="79.89" y1="140.75" x2="81.27" y2="136.95" style="fill:#55a8fd" />
|
||||
<line x1="82.65" y1="139.56" x2="83.27" y2="137.64" style="fill:#55a8fd" />
|
||||
<line x1="84.18" y1="142.14" x2="85.29" y2="138.26" style="fill:#55a8fd" />
|
||||
<line x1="86.85" y1="140.77" x2="87.34" y2="138.81" style="fill:#55a8fd" />
|
||||
<line x1="88.56" y1="143.23" x2="89.4" y2="139.28" style="fill:#55a8fd" />
|
||||
<line x1="91.13" y1="141.68" x2="91.48" y2="139.68" style="fill:#55a8fd" />
|
||||
<line x1="93" y1="144.02" x2="93.56" y2="140.02" style="fill:#55a8fd" />
|
||||
<line x1="95.46" y1="142.28" x2="95.67" y2="140.27" style="fill:#55a8fd" />
|
||||
<line x1="97.49" y1="144.49" x2="97.77" y2="140.46" style="fill:#55a8fd" />
|
||||
<line x1="99.81" y1="142.59" x2="99.88" y2="140.57" style="fill:#55a8fd" />
|
||||
<line x1="102" y1="146" x2="102" y2="140" style="fill:#55a8fd" />
|
||||
<line x1="104.19" y1="142.59" x2="104.12" y2="140.57" style="fill:#55a8fd" />
|
||||
<line x1="106.51" y1="144.49" x2="106.23" y2="140.46" style="fill:#55a8fd" />
|
||||
<line x1="108.55" y1="142.28" x2="108.34" y2="140.27" style="fill:#55a8fd" />
|
||||
<line x1="111" y1="144.02" x2="110.44" y2="140.02" style="fill:#55a8fd" />
|
||||
<line x1="112.87" y1="141.68" x2="112.52" y2="139.68" style="fill:#55a8fd" />
|
||||
<line x1="115.44" y1="143.23" x2="114.6" y2="139.28" style="fill:#55a8fd" />
|
||||
<line x1="117.15" y1="140.77" x2="116.66" y2="138.81" style="fill:#55a8fd" />
|
||||
<line x1="119.82" y1="142.14" x2="118.71" y2="138.26" style="fill:#55a8fd" />
|
||||
<line x1="121.35" y1="139.56" x2="120.73" y2="137.64" style="fill:#55a8fd" />
|
||||
<line x1="124.11" y1="140.75" x2="122.73" y2="136.95" style="fill:#55a8fd" />
|
||||
<line x1="125.46" y1="138.07" x2="124.7" y2="136.19" style="fill:#55a8fd" />
|
||||
<line x1="128.29" y1="139.06" x2="126.65" y2="135.37" style="fill:#55a8fd" />
|
||||
<line x1="129.46" y1="136.29" x2="128.57" y2="134.47" style="fill:#55a8fd" />
|
||||
<line x1="132.35" y1="137.08" x2="130.45" y2="133.51" style="fill:#55a8fd" />
|
||||
<line x1="133.31" y1="134.24" x2="132.3" y2="132.49" style="fill:#55a8fd" />
|
||||
<line x1="136.26" y1="134.82" x2="134.12" y2="131.4" style="fill:#55a8fd" />
|
||||
<line x1="137.02" y1="131.92" x2="135.89" y2="130.25" style="fill:#55a8fd" />
|
||||
<line x1="140" y1="132.3" x2="137.62" y2="129.03" style="fill:#55a8fd" />
|
||||
<line x1="140.56" y1="129.35" x2="139.31" y2="127.76" style="fill:#55a8fd" />
|
||||
<line x1="143.55" y1="129.52" x2="140.96" y2="126.43" style="fill:#55a8fd" />
|
||||
<line x1="143.91" y1="126.54" x2="142.55" y2="125.04" style="fill:#55a8fd" />
|
||||
<line x1="146.91" y1="126.5" x2="144.1" y2="123.6" style="fill:#55a8fd" />
|
||||
<line x1="147.05" y1="123.5" x2="145.6" y2="122.1" style="fill:#55a8fd" />
|
||||
<line x1="150.04" y1="123.26" x2="147.04" y2="120.55" style="fill:#55a8fd" />
|
||||
<line x1="149.98" y1="120.25" x2="148.43" y2="118.96" style="fill:#55a8fd" />
|
||||
<line x1="152.94" y1="119.8" x2="149.76" y2="117.31" style="fill:#55a8fd" />
|
||||
<line x1="152.67" y1="116.81" x2="151.03" y2="115.62" style="fill:#55a8fd" />
|
||||
<line x1="155.59" y1="116.15" x2="152.25" y2="113.89" style="fill:#55a8fd" />
|
||||
<line x1="155.11" y1="113.19" x2="153.4" y2="112.12" style="fill:#55a8fd" />
|
||||
<line x1="157.99" y1="112.32" x2="154.49" y2="110.3" style="fill:#55a8fd" />
|
||||
<line x1="157.29" y1="109.4" x2="155.51" y2="108.45" style="fill:#55a8fd" />
|
||||
<line x1="160.1" y1="108.34" x2="156.47" y2="106.57" style="fill:#55a8fd" />
|
||||
<line x1="159.21" y1="105.47" x2="157.37" y2="104.65" style="fill:#55a8fd" />
|
||||
<line x1="161.94" y1="104.22" x2="158.19" y2="102.7" style="fill:#55a8fd" />
|
||||
<line x1="160.85" y1="101.42" x2="158.95" y2="100.73" style="fill:#55a8fd" />
|
||||
<line x1="163.48" y1="99.98" x2="159.64" y2="98.73" style="fill:#55a8fd" />
|
||||
<line x1="162.2" y1="97.26" x2="160.26" y2="96.71" style="fill:#55a8fd" />
|
||||
<line x1="164.73" y1="95.64" x2="160.81" y2="94.66" style="fill:#55a8fd" />
|
||||
<line x1="163.26" y1="93.02" x2="161.28" y2="92.6" style="fill:#55a8fd" />
|
||||
<line x1="165.66" y1="91.22" x2="161.69" y2="90.52" style="fill:#55a8fd" />
|
||||
<line x1="164.02" y1="88.71" x2="162.02" y2="88.43" style="fill:#55a8fd" />
|
||||
<line x1="166.29" y1="86.76" x2="162.28" y2="86.33" style="fill:#55a8fd" />
|
||||
<line x1="164.47" y1="84.37" x2="162.46" y2="84.23" style="fill:#55a8fd" />
|
||||
<line x1="166.61" y1="82.25" x2="162.57" y2="82.11" style="fill:#55a8fd" />
|
||||
<line x1="165" y1="80" x2="163" y2="80" style="fill:#55a8fd" />
|
||||
<line x1="166.61" y1="77.74" x2="162.57" y2="77.89" style="fill:#55a8fd" />
|
||||
<line x1="164.47" y1="75.63" x2="162.46" y2="75.77" style="fill:#55a8fd" />
|
||||
<line x1="166.29" y1="73.24" x2="162.28" y2="73.67" style="fill:#55a8fd" />
|
||||
<line x1="164.02" y1="71.28" x2="162.02" y2="71.57" style="fill:#55a8fd" />
|
||||
<line x1="165.66" y1="68.78" x2="161.69" y2="69.48" style="fill:#55a8fd" />
|
||||
<line x1="163.26" y1="66.98" x2="161.28" y2="67.4" style="fill:#55a8fd" />
|
||||
<line x1="164.73" y1="64.36" x2="160.81" y2="65.34" style="fill:#55a8fd" />
|
||||
<line x1="162.2" y1="62.74" x2="160.26" y2="63.29" style="fill:#55a8fd" />
|
||||
<line x1="163.48" y1="60.02" x2="159.64" y2="61.27" style="fill:#55a8fd" />
|
||||
<line x1="160.85" y1="58.58" x2="158.95" y2="59.27" style="fill:#55a8fd" />
|
||||
<line x1="161.94" y1="55.78" x2="158.19" y2="57.3" style="fill:#55a8fd" />
|
||||
<line x1="159.21" y1="54.53" x2="157.37" y2="55.35" style="fill:#55a8fd" />
|
||||
<line x1="160.1" y1="51.66" x2="156.47" y2="53.43" style="fill:#55a8fd" />
|
||||
<line x1="157.29" y1="50.6" x2="155.51" y2="51.55" style="fill:#55a8fd" />
|
||||
<line x1="157.99" y1="47.68" x2="154.49" y2="49.7" style="fill:#55a8fd" />
|
||||
<line x1="155.11" y1="46.81" x2="153.4" y2="47.88" style="fill:#55a8fd" />
|
||||
<line x1="155.59" y1="43.85" x2="152.25" y2="46.11" style="fill:#55a8fd" />
|
||||
<line x1="152.67" y1="43.19" x2="151.03" y2="44.38" style="fill:#55a8fd" />
|
||||
<line x1="152.94" y1="40.2" x2="149.76" y2="42.69" style="fill:#55a8fd" />
|
||||
<line x1="149.97" y1="39.74" x2="148.43" y2="41.04" style="fill:#55a8fd" />
|
||||
<line x1="150.04" y1="36.74" x2="147.04" y2="39.45" style="fill:#55a8fd" />
|
||||
<line x1="147.05" y1="36.5" x2="145.6" y2="37.9" style="fill:#55a8fd" />
|
||||
<line x1="146.91" y1="33.5" x2="144.1" y2="36.4" style="fill:#55a8fd" />
|
||||
<line x1="143.9" y1="33.46" x2="142.55" y2="34.96" style="fill:#55a8fd" />
|
||||
<line x1="143.55" y1="30.48" x2="140.96" y2="33.57" style="fill:#55a8fd" />
|
||||
<line x1="140.56" y1="30.65" x2="139.31" y2="32.24" style="fill:#55a8fd" />
|
||||
<line x1="140" y1="27.7" x2="137.62" y2="30.97" style="fill:#55a8fd" />
|
||||
<line x1="137.02" y1="28.08" x2="135.89" y2="29.75" style="fill:#55a8fd" />
|
||||
<line x1="136.26" y1="25.18" x2="134.12" y2="28.6" style="fill:#55a8fd" />
|
||||
<line x1="133.31" y1="25.76" x2="132.3" y2="27.51" style="fill:#55a8fd" />
|
||||
<line x1="132.35" y1="22.92" x2="130.45" y2="26.49" style="fill:#55a8fd" />
|
||||
<line x1="129.45" y1="23.71" x2="128.57" y2="25.53" style="fill:#55a8fd" />
|
||||
<line x1="128.29" y1="20.94" x2="126.65" y2="24.63" style="fill:#55a8fd" />
|
||||
<line x1="125.46" y1="21.93" x2="124.71" y2="23.81" style="fill:#55a8fd" />
|
||||
<line x1="124.11" y1="19.25" x2="122.73" y2="23.05" style="fill:#55a8fd" />
|
||||
<line x1="121.35" y1="20.44" x2="120.73" y2="22.36" style="fill:#55a8fd" />
|
||||
<line x1="119.82" y1="17.86" x2="118.71" y2="21.74" style="fill:#55a8fd" />
|
||||
<line x1="117.15" y1="19.23" x2="116.66" y2="21.19" style="fill:#55a8fd" />
|
||||
<line x1="115.44" y1="16.77" x2="114.6" y2="20.72" style="fill:#55a8fd" />
|
||||
<line x1="112.87" y1="18.32" x2="112.52" y2="20.32" style="fill:#55a8fd" />
|
||||
<line x1="111" y1="15.98" x2="110.44" y2="19.98" style="fill:#55a8fd" />
|
||||
<line x1="108.54" y1="17.72" x2="108.34" y2="19.73" style="fill:#55a8fd" />
|
||||
<line x1="106.51" y1="15.51" x2="106.23" y2="19.54" style="fill:#55a8fd" />
|
||||
<line x1="104.19" y1="17.41" x2="104.12" y2="19.43" style="fill:#55a8fd" />
|
||||
<g id="PUE表盘">
|
||||
<text transform="translate(81.38 127.27)" style="font-size:12px;fill:#fff;font-family:PingFang-SC-Regular, PingFang SC-Regular">{{value[0].label}}</text>
|
||||
<text transform="translate(78 109)" style="font-size:24px;fill:#4dca59;font-family:PingFang-SC-Bold, PingFang SC-Bold;font-weight:700" :style="{ fill: color }">{{ value[0].value }}</text>
|
||||
<g id="PUE表盘-2" data-name="PUE表盘">
|
||||
<path d="M157,80A55,55,0,0,0,47,80Z" style="fill:#1c3d5e" />
|
||||
<line x1="50.05" y1="80" x2="47" y2="80" style="fill:#fff" />
|
||||
<line x1="59.98" y1="49.47" x2="57.5" y2="47.67" style="fill:#fff" />
|
||||
<line x1="85.95" y1="30.6" x2="85" y2="27.69" style="fill:#fff" />
|
||||
<line x1="118.05" y1="30.6" x2="119" y2="27.69" style="fill:#fff" />
|
||||
<line x1="144.02" y1="49.47" x2="146.5" y2="47.67" style="fill:#fff" />
|
||||
<line x1="153.95" y1="80" x2="157" y2="80" style="fill:#fff" />
|
||||
<path d="M144.78,80a42.78,42.78,0,0,0-85.56,0Z" style="fill:#091c38" />
|
||||
<path d="M50.05,80h6.11a45.84,45.84,0,0,1,41-45.58l-.64-6.08A52,52,0,0,0,50.05,80Z" style="fill:#4dca59" />
|
||||
<path d="M102,28.06a52.48,52.48,0,0,0-5.43.28l.64,6.08a46.48,46.48,0,0,1,4.79-.25,45.76,45.76,0,0,1,37.08,18.89L144,49.47A51.86,51.86,0,0,0,102,28.06Z" style="fill:#e3bb26" />
|
||||
<path d="M139.08,53.06A45.63,45.63,0,0,1,147.83,80h6.11A51.71,51.71,0,0,0,144,49.47Z" style="fill:#d73f40" />
|
||||
<text transform="translate(58 79.34)" style="font-size:5.527289867401123px;fill:#909fad;font-family:MicrosoftYaHei, Microsoft YaHei">1.0</text>
|
||||
<text transform="translate(131.7 58.97)" style="font-size:5.527289867401123px;fill:#909fad;font-family:MicrosoftYaHei, Microsoft YaHei">2.2</text>
|
||||
<text transform="translate(110.82 43.93)" style="font-size:5.527289867401123px;fill:#909fad;font-family:MicrosoftYaHei, Microsoft YaHei">1.9</text>
|
||||
<text transform="translate(67.21 58.97)" style="font-size:5.527289867401123px;fill:#909fad;font-family:MicrosoftYaHei, Microsoft YaHei">1.3</text>
|
||||
<text transform="translate(86.86 43.93)" style="font-size:5.527289867401123px;fill:#909fad;font-family:MicrosoftYaHei, Microsoft YaHei">1.6</text>
|
||||
<text transform="translate(138.45 79.34)" style="font-size:5.527289867401123px;fill:#909fad;font-family:MicrosoftYaHei, Microsoft YaHei">2.5</text>
|
||||
<polygon points="110 80 104.06 78 64 80 104.06 82 110 80" style="fill:#fff" :transform="getRotate('80', value[0].value)" />
|
||||
<circle cx="102" cy="80" r="4" style="fill:#fff" />
|
||||
<circle cx="102" cy="80" r="2" style="fill:#091c38" />
|
||||
</g>
|
||||
</g>
|
||||
<!-- <rect x="72" y="186" width="60" height="10" style="fill:url(#linear-gradient-pue-2)" />-->
|
||||
<!-- <text transform="translate(81 189.89)" style="font-size:12px;fill:#fff;font-family:PingFang-SC-Regular, PingFang SC-Regular">{{value[1].label}}</text>-->
|
||||
<!-- <text transform="translate(82 221)" style="font-size:20px;fill:#4dca59;font-family:PingFang-SC-Bold, PingFang SC-Bold;font-weight:700">{{ value[1].value }}</text>-->
|
||||
<!-- <rect y="186" width="60" height="10" style="fill:url(#linear-gradient-pue-3)" />-->
|
||||
<!-- <text transform="translate(9 189.89)" style="font-size:12px;fill:#fff;font-family:PingFang-SC-Regular, PingFang SC-Regular">{{value[2].label}}</text>-->
|
||||
<!-- <text transform="translate(10 221)" style="font-size:20px;fill:#4dca59;font-family:PingFang-SC-Bold, PingFang SC-Bold;font-weight:700">{{ value[2].value }}</text>-->
|
||||
<!-- <rect x="144" y="186" width="60" height="10" style="fill:url(#linear-gradient-pue-4)" />-->
|
||||
<!-- <text transform="translate(153 189.89)" style="font-size:12px;fill:#fff;font-family:PingFang-SC-Regular, PingFang SC-Regular">{{value[3].label}}</text>-->
|
||||
<!-- <text transform="translate(154 221)" style="font-size:20px;fill:#4dca59;font-family:PingFang-SC-Bold, PingFang SC-Bold;font-weight:700">{{ value[3].value }}</text>-->
|
||||
</g>
|
||||
</svg>
|
||||
<div class="sideBox">
|
||||
<div class="item">
|
||||
<div class="rect"></div>
|
||||
<div class="label">{{value[2].label}}</div>
|
||||
<div class="value">{{value[2].value}}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="rect"></div>
|
||||
<div class="label">{{value[1].label}}</div>
|
||||
<div class="value">{{value[1].value}}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="rect"></div>
|
||||
<div class="label">{{value[3].label}}</div>
|
||||
<div class="value">{{value[3].value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="split"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toRefs, ref } from 'vue'
|
||||
|
||||
type ItemType = { label: string, value: number }
|
||||
type ValueType = ItemType[]
|
||||
const { value } = defineProps(['value']) as { value: ValueType }
|
||||
|
||||
const color = ref('#4dca59')
|
||||
const getRotate = (horizontal:string, data:number) => {
|
||||
// 传入指针水平位置，计算指针角度，水平位置即为指针角度为0时，两端点的纵坐标
|
||||
const pue = parseFloat(data.toString()) // 当前指针值
|
||||
if (pue >= 0 && pue < 1.7) {
|
||||
color.value = '#4dca59'
|
||||
} else if (pue >= 1.7 && pue < 2.2) {
|
||||
color.value = '#e3bb26'
|
||||
} else if (pue >= 2.2) {
|
||||
color.value = '#d73f40'
|
||||
}
|
||||
const angel = Math.ceil((pue - 1) / (2.5 - 1) * 180) // 1代表表盘最小值，2.5代表表盘最大值，180代表表盘最大角度
|
||||
return `rotate(${angel} 102 ${horizontal})`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.VCircle{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 50px;
|
||||
width: calc(100% - 50px)!important;
|
||||
position: relative;
|
||||
.svg{
|
||||
width: calc(100% - 60px);
|
||||
height: 100%;
|
||||
}
|
||||
.sideBox{
|
||||
flex: none;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.item{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.rect{
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #245894;
|
||||
top: 12px;
|
||||
}
|
||||
.label{
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.value{
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
&.red{
|
||||
color: #f00;
|
||||
}
|
||||
&.green{
|
||||
color: #0f0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.split{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: 1px;
|
||||
height: 80%;
|
||||
top: 10%;
|
||||
background: #134265;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,67 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ComprehensivePUEV4Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
// import logo from '@/assets/logo.png'
|
||||
|
||||
export const option = {
|
||||
// // 图片路径
|
||||
// dataset: '',
|
||||
// // 适应方式
|
||||
// fit: 'contain',
|
||||
// // 圆角
|
||||
// borderRadius: 0
|
||||
}
|
||||
export const customData = {
|
||||
title: '综合PUE',
|
||||
circle: {
|
||||
title: '实时PUE',
|
||||
id: null
|
||||
},
|
||||
leftBottom: [
|
||||
{
|
||||
title: '昨日PUE',
|
||||
id: null
|
||||
},
|
||||
{
|
||||
title: '上周PUE',
|
||||
id: null
|
||||
},
|
||||
{
|
||||
title: '上月PUE',
|
||||
id: null
|
||||
}
|
||||
],
|
||||
right: [
|
||||
{
|
||||
title: '总市电负载',
|
||||
unit: '(kWh)',
|
||||
id: null
|
||||
},
|
||||
{
|
||||
title: 'IT用电负载',
|
||||
unit: '(kWh)',
|
||||
id: null
|
||||
},
|
||||
{
|
||||
title: '其他负载',
|
||||
unit: '(kWh)',
|
||||
id: null
|
||||
}
|
||||
],
|
||||
showInterval: true,
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType
|
||||
{
|
||||
constructor() {
|
||||
super();
|
||||
this.attr.w = 450
|
||||
this.attr.h = 300
|
||||
this.request.requestInterval = 15
|
||||
}
|
||||
public key = ComprehensivePUEV4Config.key
|
||||
public chartConfig = cloneDeep(ComprehensivePUEV4Config)
|
||||
public option = cloneDeep(option)
|
||||
public customData = cloneDeep(customData)
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<!-- <collapse-item name="属性" :expanded="true">-->
|
||||
<!-- <setting-item-box name="路径" :alone="true">-->
|
||||
<!-- <setting-item>-->
|
||||
<!-- <n-input v-model:value="optionData.dataset" size="small"></n-input>-->
|
||||
<!-- </setting-item>-->
|
||||
<!-- </setting-item-box>-->
|
||||
<!-- <setting-item-box name="样式">-->
|
||||
<!-- <setting-item name="类型">-->
|
||||
<!-- <n-select-->
|
||||
<!-- v-model:value="optionData.fit"-->
|
||||
<!-- size="small"-->
|
||||
<!-- :options="fitList"-->
|
||||
<!-- ></n-select>-->
|
||||
<!-- </setting-item>-->
|
||||
<!-- <setting-item name="圆角">-->
|
||||
<!-- <n-input-number-->
|
||||
<!-- v-model:value="optionData.borderRadius"-->
|
||||
<!-- size="small"-->
|
||||
<!-- :min="0"-->
|
||||
<!-- placeholder="圆角"-->
|
||||
<!-- ></n-input-number>-->
|
||||
<!-- </setting-item>-->
|
||||
<!-- </setting-item-box>-->
|
||||
<!-- </collapse-item>-->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { option } from './config'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem,
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
// 适应类型
|
||||
const fitList = [
|
||||
{
|
||||
value: 'fill',
|
||||
label: 'fill'
|
||||
},
|
||||
{
|
||||
value: 'contain',
|
||||
label: 'contain'
|
||||
},
|
||||
{
|
||||
value: 'cover',
|
||||
label: 'cover'
|
||||
},
|
||||
{
|
||||
value: 'scale-down',
|
||||
label: 'scale-down'
|
||||
},
|
||||
{
|
||||
value: 'none',
|
||||
label: 'none'
|
||||
},
|
||||
]
|
||||
</script>
|
||||
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<setting-item-box name="标题" :alone="true">
|
||||
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="仪表盘">
|
||||
<setting-item name="标题">
|
||||
<n-input v-model:value="props.customData.circle.title" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="id">
|
||||
<n-input v-model:value="props.customData.circle.id" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="左下部分">
|
||||
<setting-item name="标题1">
|
||||
<n-input v-model:value="props.customData.leftBottom[1].title" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="id1">
|
||||
<n-input v-model:value="props.customData.leftBottom[1].id" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="标题2">
|
||||
<n-input v-model:value="props.customData.leftBottom[0].title" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="id2">
|
||||
<n-input v-model:value="props.customData.leftBottom[0].id" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="标题3">
|
||||
<n-input v-model:value="props.customData.leftBottom[2].title" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="id3">
|
||||
<n-input v-model:value="props.customData.leftBottom[2].id" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="右半部分">
|
||||
<template v-for="i in 3" :key="i">
|
||||
<setting-item :name="'标题' + i">
|
||||
<n-input v-model:value="props.customData.right[i - 1].title" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item :name="'单位' + i">
|
||||
<n-input v-model:value="props.customData.right[i - 1].unit" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item :name="'id' + i">
|
||||
<n-input v-model:value="props.customData.right[i - 1].id" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="">
|
||||
</setting-item>
|
||||
</template>
|
||||
</setting-item-box>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps(['customData', 'request'])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/CustomComponents/index.d'
|
||||
|
||||
export const ComprehensivePUEV4Config: ConfigType = {
|
||||
key: 'ComprehensivePUEV4',
|
||||
chartKey: 'VComprehensivePUEV4',
|
||||
conKey: 'VCComprehensivePUEV4',
|
||||
conDataKey: 'VCDComprehensivePUEV4',
|
||||
title: '综合PUE通用1',
|
||||
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
|
||||
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
|
||||
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'ComprehensivePUE1.png'
|
||||
}
|
||||
@ -0,0 +1,565 @@
|
||||
<template>
|
||||
<div :style="getStyle(borderRadius)" style="overflow: visible;">
|
||||
<BorderBox :title="customData?.title">
|
||||
<div class="inner">
|
||||
<div class="left">
|
||||
<VCircle :value="value" style="height: 100%;width: 100%"/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item" v-for="(item, i) in rightArr" :key="i">
|
||||
<div v-if="i === 0" class="leftBox" style="position: absolute;height: 37%;display: flex;justify-content: center">
|
||||
<Svg style="height: 100%;width: 50%;"/>
|
||||
</div>
|
||||
<v-chart class="leftBox" :option="item.option" autoresize :update-options="{ notMerge: true, replaceMerge: ['series'] }"/>
|
||||
<div class="rightBox">
|
||||
<div>{{item.label}}</div>
|
||||
<div>{{item.unit}}</div>
|
||||
<div>{{item.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BorderBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, shallowReactive, watch, toRefs, reactive, onMounted, onUnmounted, computed } from 'vue'
|
||||
import type { Ref } from 'vue'
|
||||
import { customData as customDataConfig } from './config'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { publicInterface } from '@/api/path/business.api'
|
||||
import BorderBox from '../components/BorderBox.vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import {isPreview} from '@/utils'
|
||||
import {graphic} from "echarts";
|
||||
import {cloneDeep} from 'lodash'
|
||||
import moment from "moment"
|
||||
import VCircle from './VCircle.vue'
|
||||
import Svg from './Svg.vue'
|
||||
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
|
||||
import {RequestHttpIntervalEnum} from "@/enums/httpEnum";
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
|
||||
|
||||
const getStyle = (radius: number) => {
|
||||
return {
|
||||
borderRadius: `${radius}px`,
|
||||
overflow: 'hidden'
|
||||
}
|
||||
}
|
||||
|
||||
const customData: Ref<typeof customDataConfig> = computed(() => {
|
||||
return props.chartConfig.customData as typeof customDataConfig
|
||||
})
|
||||
|
||||
const values = reactive(['1.000', '0.000', '0.000', '0.000'])
|
||||
const value = computed(() => {
|
||||
let arr = []
|
||||
arr.push({label: customData.value.circle.title, id: customData.value.circle.id, value: values[0]})
|
||||
customData.value.leftBottom.forEach((item, i) => {
|
||||
arr.push({label: item.title, id: item.id, value: values[i + 1]})
|
||||
})
|
||||
return arr
|
||||
})
|
||||
const getPointData = (id: string) => {
|
||||
return publicInterface('/dcim/system/custom_large_screen', 'get_point_value', id)
|
||||
}
|
||||
const formatNumber = (num: number) => {
|
||||
// 使用 toFixed(3) 将数字转换为三位小数
|
||||
const formattedNum = num.toFixed(3);
|
||||
// 在小数点后面添加零
|
||||
const parts = formattedNum.split('.');
|
||||
parts[1] = parts[1].padEnd(3, '0');
|
||||
// 将整数部分和小数部分拼接起来
|
||||
const result = parts.join('.');
|
||||
return result;
|
||||
}
|
||||
watch(() => value.value.map(_ => _.id).toString(), async (v, o) => {
|
||||
if(v === o) return
|
||||
let diffIndex = -1
|
||||
let ids = v.split(',')
|
||||
let oIds = o.split(',')
|
||||
ids.forEach((id, i) => {
|
||||
if(id !== oIds[i]) diffIndex = i
|
||||
})
|
||||
let id = ids[diffIndex]
|
||||
if(id !== null && id !== '') {
|
||||
let res = await getPointData(id) as any
|
||||
if(res.errcode === '00000') {
|
||||
values[diffIndex] = formatNumber(Number(res.data.value))
|
||||
}
|
||||
}
|
||||
else {
|
||||
values[diffIndex] = diffIndex === 0 ? '1.000' : '0.000'
|
||||
}
|
||||
})
|
||||
|
||||
const option1 = {
|
||||
title: [],
|
||||
grid: {
|
||||
top: '0%',
|
||||
bottom: '0%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
// clockwise: false, // 逆时针
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '150%' // 图形大小
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#4396fd'
|
||||
// color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
// offset: 0,
|
||||
// color: '#aaf14f'
|
||||
// }, {
|
||||
// offset: 1,
|
||||
// color: '#0acfa1'
|
||||
// }])
|
||||
}
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 2,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 2
|
||||
},
|
||||
{ // 灰色环
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#000',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 5,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 2,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 1
|
||||
}]
|
||||
}
|
||||
const option2 = {
|
||||
title: [
|
||||
{
|
||||
text: '0',
|
||||
left: 'center',
|
||||
top: '35%',
|
||||
textStyle: {
|
||||
color: '#00ffff',
|
||||
fontSize: 8
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '%',
|
||||
left: 'center',
|
||||
top: '52%',
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
fontSize: 8
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: '0%',
|
||||
bottom: '0%',
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
containLabel: true
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
// clockwise: false, // 逆时针
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '150%' // 图形大小
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#00ffff'
|
||||
// color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
// offset: 0,
|
||||
// color: '#aaf14f'
|
||||
// }, {
|
||||
// offset: 1,
|
||||
// color: '#0acfa1'
|
||||
// }])
|
||||
}
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 2,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 2
|
||||
},
|
||||
{ // 灰色环
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#000',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 5,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 2,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 1
|
||||
}]
|
||||
}
|
||||
const option3 = {
|
||||
title: [
|
||||
{
|
||||
text: '0',
|
||||
left: 'center',
|
||||
top: '35%',
|
||||
textStyle: {
|
||||
color: '#f7c916',
|
||||
fontSize: 8
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '%',
|
||||
left: 'center',
|
||||
top: '52%',
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
fontSize: 8
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: '0%',
|
||||
bottom: '0%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
// clockwise: false, // 逆时针
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '150%' // 图形大小
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f7c916'
|
||||
// color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
// offset: 0,
|
||||
// color: '#aaf14f'
|
||||
// }, {
|
||||
// offset: 1,
|
||||
// color: '#0acfa1'
|
||||
// }])
|
||||
}
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 2,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 2
|
||||
},
|
||||
{ // 灰色环
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#000',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 5,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 2,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 1
|
||||
}]
|
||||
}
|
||||
const values1 = reactive([0, 0, 0])
|
||||
const options = reactive([option1, option2, option3])
|
||||
const rightArr = computed(() => {
|
||||
let arr: {label: string, unit: string, id: string | null, value: number, option: any}[] = []
|
||||
customData.value.right.forEach((item, i) => {
|
||||
arr.push({
|
||||
label: item.title,
|
||||
unit: item.unit,
|
||||
id: item.id,
|
||||
value: values1[i],
|
||||
option: options[i]
|
||||
})
|
||||
})
|
||||
return arr
|
||||
})
|
||||
|
||||
watch(() => rightArr.value.map(_ => _.id).toString(), async (v, o) => {
|
||||
if(v === o) return
|
||||
let diffIndex = -1
|
||||
let ids = v.split(',')
|
||||
let oIds = o.split(',')
|
||||
ids.forEach((id, i) => {
|
||||
if(id !== oIds[i]) diffIndex = i
|
||||
})
|
||||
let id = ids[diffIndex]
|
||||
if(id !== null && id !== '') {
|
||||
let res = await getPointData(id) as any
|
||||
if(res.errcode === '00000') {
|
||||
values1[diffIndex] = Number(res.data.value)
|
||||
}
|
||||
}
|
||||
else {
|
||||
values1[diffIndex] = 0
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const getData = () => {
|
||||
let ids = value.value.map(_ => _.id) as (string | null)[]
|
||||
ids = ids.concat(rightArr.value.map(_ => _.id))
|
||||
ids.forEach((id, i) => {
|
||||
if(id !== null && id !== '') {
|
||||
getPointData(id).then((res: any) => {
|
||||
if(res.errcode === '00000') {
|
||||
if (i < 4) values[i] = formatNumber(Number(res.data.value))
|
||||
else values1[i - 4] = res.data.value
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
if (i < 4) values[i] = i === 0 ? '1.000' : '0.000'
|
||||
else values1[i - 4] = 0
|
||||
}
|
||||
})
|
||||
}
|
||||
let timer:unknown
|
||||
watch(() => values1, () => {
|
||||
if(values1[0] !== 0 && values1[1] !== 0) {
|
||||
let percent = ((values1[1] / values1[0]) * 100).toFixed(0)
|
||||
options[1].series[0].data[0].value = Number(percent)
|
||||
options[1].title[0].text = percent
|
||||
}
|
||||
else {
|
||||
options[1].series[0].data[0].value = 0
|
||||
options[1].title[0].text = '0'
|
||||
}
|
||||
if(values1[0] !== 0 && values1[2] !== 0) {
|
||||
let percent = ((values1[2] / values1[0]) * 100).toFixed(0)
|
||||
options[2].series[0].data[0].value = Number(percent)
|
||||
options[2].title[0].text = percent
|
||||
}
|
||||
else {
|
||||
options[2].series[0].data[0].value = 0
|
||||
options[2].title[0].text = '0'
|
||||
}
|
||||
}, {
|
||||
deep: true
|
||||
})
|
||||
|
||||
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
|
||||
if(!isPreview()) return
|
||||
if(props.chartConfig.request.requestInterval) {
|
||||
if(timer) clearInterval(timer as number)
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
|
||||
const unit = obj.unit
|
||||
const number = unit * props.chartConfig.request.requestInterval
|
||||
timer = setInterval(() => {
|
||||
getData()
|
||||
}, number)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
if(!isPreview()) return
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
|
||||
const unit = obj.unit
|
||||
const number = unit * props.chartConfig.request.requestInterval!
|
||||
timer = setInterval(() => {
|
||||
getData()
|
||||
}, number)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
if(timer) clearInterval(timer as number)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.left{
|
||||
flex: 6;
|
||||
min-width: 60%;
|
||||
.circle{
|
||||
|
||||
}
|
||||
.bottomBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
flex: 4;
|
||||
max-width: 40%;
|
||||
.item{
|
||||
box-sizing: border-box;
|
||||
height: 33.3%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 5px 0;
|
||||
.leftBox{
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
}
|
||||
.rightBox{
|
||||
width: 65%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
& > div:nth-child(2) {
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,42 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { PowerCapacityConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
// import logo from '@/assets/logo.png'
|
||||
|
||||
export const option = {}
|
||||
export const customData = {
|
||||
title: '功率容量',
|
||||
enable: false,
|
||||
topBox: {
|
||||
name: '一号楼', label: '设计容量', value: 20000, label1: '已使用', calculation: '', name1: '', upper_limit: 0, floor: [
|
||||
{label: '1F', calculation: '', name: '', upper_limit: 0},
|
||||
{label: '2F', calculation: '', name: '', upper_limit: 0},
|
||||
{label: '3F', calculation: '', name: '', upper_limit: 0},
|
||||
{label: '4F', calculation: '', name: '', upper_limit: 0},
|
||||
]
|
||||
},
|
||||
bottomBox: {
|
||||
name: '二号楼', label: '设计容量', value: 20000, label1: '已使用', calculation: '', name1: '', upper_limit: 0, floor: [
|
||||
{label: '1F', calculation: '', name: '', upper_limit: 0},
|
||||
{label: '2F', calculation: '', name: '', upper_limit: 0},
|
||||
{label: '3F', calculation: '', name: '', upper_limit: 0},
|
||||
{label: '4F', calculation: '', name: '', upper_limit: 0},
|
||||
{label: '5F', calculation: '', name: '', upper_limit: 0},
|
||||
]
|
||||
},
|
||||
showInterval: true,
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
constructor() {
|
||||
super();
|
||||
this.attr.w = 450
|
||||
this.attr.h = 300
|
||||
this.request.requestInterval = 15
|
||||
}
|
||||
public key = PowerCapacityConfig.key
|
||||
public chartConfig = cloneDeep(PowerCapacityConfig)
|
||||
public option = cloneDeep(option)
|
||||
public customData = cloneDeep(customData)
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<!-- <CollapseItem :name="`仪表盘`" :expanded="true">-->
|
||||
<!-- <SettingItemBox name="数据">-->
|
||||
<!-- <SettingItem>-->
|
||||
<!-- <n-space>-->
|
||||
<!-- <n-switch v-model:value="config.showUnit" size="small" />-->
|
||||
<!-- <n-text>展示单位</n-text>-->
|
||||
<!-- </n-space>-->
|
||||
<!-- </SettingItem>-->
|
||||
<!-- <SettingItem name="最大值">-->
|
||||
<!-- <n-input-number v-model:value="config.max" placeholder="请输入最大值" size="small" clearable/>-->
|
||||
<!-- </SettingItem>-->
|
||||
<!-- <SettingItem name="最小值">-->
|
||||
<!-- <n-input-number v-model:value="config.min" placeholder="请输入最小值" size="small" clearable/>-->
|
||||
<!-- </SettingItem>-->
|
||||
<!-- <SettingItem name="字体大小">-->
|
||||
<!-- <n-input-number v-model:value="config.titleFontSize" placeholder="请输入字体大小" size="small" clearable/>-->
|
||||
<!-- </SettingItem>-->
|
||||
<!-- <SettingItem name="颜色">-->
|
||||
<!-- <n-color-picker size="small" :modes="['hex']" v-model:value="config.titleColor"></n-color-picker>-->
|
||||
<!-- </SettingItem>-->
|
||||
<!-- </SettingItemBox>-->
|
||||
<!-- <SettingItemBox name="副标题">-->
|
||||
<!-- <SettingItem>-->
|
||||
<!-- <n-space>-->
|
||||
<!-- <n-switch v-model:value="config.showSubtext" size="small" />-->
|
||||
<!-- <n-text>展示副标题</n-text>-->
|
||||
<!-- </n-space>-->
|
||||
<!-- </SettingItem>-->
|
||||
<!-- <SettingItem>-->
|
||||
<!-- <n-space>-->
|
||||
<!-- <n-switch v-model:value="config.showSubtextUnit" size="small" />-->
|
||||
<!-- <n-text>展示单位</n-text>-->
|
||||
<!-- </n-space>-->
|
||||
<!-- </SettingItem>-->
|
||||
<!-- <SettingItem name="字体大小">-->
|
||||
<!-- <n-input-number v-model:value="config.subtextFontSize" placeholder="请输入字体大小" size="small" clearable/>-->
|
||||
<!-- </SettingItem>-->
|
||||
<!-- <SettingItem name="颜色">-->
|
||||
<!-- <n-color-picker size="small" :modes="['hex']" v-model:value="config.subtextColor"></n-color-picker>-->
|
||||
<!-- </SettingItem>-->
|
||||
<!-- </SettingItemBox>-->
|
||||
<!-- </CollapseItem>-->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import {computed, PropType} from "vue";
|
||||
import {GlobalThemeJsonType} from "@/settings/chartThemes";
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const config = computed(() => {
|
||||
return props.optionData
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<setting-item-box name="标题" :alone="true">
|
||||
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="启用数据">
|
||||
<n-space>
|
||||
<n-switch v-model:value="props.customData.enable" />
|
||||
</n-space>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="上半部分">
|
||||
<setting-item name="名称">
|
||||
<n-input v-model:value="props.customData.topBox.name" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="设计容量名称">
|
||||
<n-input v-model:value="props.customData.topBox.label" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="设计容量值">
|
||||
<n-input-number v-model:value="props.customData.topBox.value" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="总功率名称">
|
||||
<n-input v-model:value="props.customData.topBox.label1" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="总功率公式">
|
||||
<n-input v-model:value="props.customData.topBox.calculation" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="总功率公式名">
|
||||
<n-input v-model:value="props.customData.topBox.name1" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="总功率upper_limit 为0忽略">
|
||||
<n-input v-model:value="props.customData.topBox.upper_limit" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name=""/>
|
||||
<template v-for="(it, i) in props.customData.topBox.floor" :key="i">
|
||||
<setting-item :name="`楼层名字-${i + 1}`">
|
||||
<n-input v-model:value="it.label" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item :name="`计算公式-${i + 1}`">
|
||||
<n-input v-model:value="it.calculation" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item :name="`计算公式名-${i + 1}`">
|
||||
<n-input v-model:value="it.name" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item :name="`upper_limit-${i + 1} 为0忽略`">
|
||||
<n-input-number v-model:value="it.upper_limit" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
</template>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="下半部分">
|
||||
<setting-item name="名称">
|
||||
<n-input v-model:value="props.customData.bottomBox.name" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="设计容量名称">
|
||||
<n-input v-model:value="props.customData.bottomBox.label" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="设计容量值">
|
||||
<n-input-number v-model:value="props.customData.bottomBox.value" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="总功率名称">
|
||||
<n-input v-model:value="props.customData.bottomBox.label1" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="总功率公式">
|
||||
<n-input v-model:value="props.customData.bottomBox.calculation" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="总功率公式名">
|
||||
<n-input v-model:value="props.customData.bottomBox.name1" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="总功率upper_limit 为0忽略">
|
||||
<n-input v-model:value="props.customData.bottomBox.upper_limit" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name=""/>
|
||||
<template v-for="(it, i) in props.customData.bottomBox.floor" :key="i">
|
||||
<setting-item :name="`楼层名字-${i + 1}`">
|
||||
<n-input v-model:value="it.label" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item :name="`计算公式-${i + 1}`">
|
||||
<n-input v-model:value="it.calculation" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item :name="`计算公式名-${i + 1}`">
|
||||
<n-input v-model:value="it.name" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item :name="`upper_limit-${i + 1} 为0忽略`">
|
||||
<n-input-number v-model:value="it.upper_limit" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
</template>
|
||||
</setting-item-box>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps(['customData', 'request'])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -0,0 +1,16 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/CustomComponents/index.d'
|
||||
|
||||
export const PowerCapacityConfig: ConfigType = {
|
||||
key: 'PowerCapacity',
|
||||
chartKey: 'VPowerCapacity',
|
||||
conKey: 'VCPowerCapacity',
|
||||
// VCD开头
|
||||
conDataKey: 'VCDPowerCapacity',
|
||||
title: '功率容量',
|
||||
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
|
||||
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
|
||||
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'PowerCapacity.png'
|
||||
}
|
||||
@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<div style="overflow: visible;">
|
||||
<BorderBox :title="customData?.title">
|
||||
<div class="box">
|
||||
<div class="item" v-for="(it, i) in data" :key="i">
|
||||
<div class="row1">
|
||||
<div class="name">{{it.name}}</div>
|
||||
<div style="flex: 1;"></div>
|
||||
<div class="label">{{it.label}}</div>
|
||||
<div class="value">{{it.value}}</div>
|
||||
</div>
|
||||
<div class="row2">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect" :style="{width: toPercent(it.value1, it.value)}"></div>
|
||||
<div class="label">{{it.label1}}</div>
|
||||
<div class="value">{{toPercent(it.value1, it.value)}}({{typeof it.value1 === 'number' ? it.value1 : '--'}})</div>
|
||||
</div>
|
||||
<div class="row3">
|
||||
<div class="col" v-for="(c, ci) in it.floor" :key="ci">
|
||||
<div class="label">{{c.label}}</div>
|
||||
<div class="value">{{typeof c.value === 'number' ? c.value : '--'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BorderBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import BorderBox from '../components/BorderBox.vue'
|
||||
import {computed, PropType, Ref, onMounted, ref, watch, onUnmounted} from "vue";
|
||||
import { customData as customDataConfig } from './config'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { publicInterface } from '@/api/path/business.api'
|
||||
import {isPreview} from "@/utils";
|
||||
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const customData: Ref<typeof customDataConfig> = computed(() => {
|
||||
return props.chartConfig.customData as typeof customDataConfig
|
||||
})
|
||||
|
||||
let data: Ref<any[]> = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
data.value = resetData()
|
||||
if(customData.value.enable) getData()
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
let obj1 = cloneDeep(customData.value.topBox) as any
|
||||
obj1.value1 = null
|
||||
obj1.floor = obj1.floor.map((_: any) => ({..._, value: null}))
|
||||
|
||||
let obj2 = cloneDeep(customData.value.bottomBox) as any
|
||||
obj2.value1 = null
|
||||
obj2.floor = obj2.floor.map((_: any) => ({..._, value: null}))
|
||||
return [obj1, obj2]
|
||||
}
|
||||
|
||||
const getData = () => {
|
||||
let params: any = []
|
||||
let paramsMap: any = {}
|
||||
let obj = {
|
||||
time_out: 60,
|
||||
fmt: 2,
|
||||
abs: true
|
||||
}
|
||||
data.value.forEach((item, i) => {
|
||||
let o = {...obj} as any
|
||||
o.calculation = item.calculation
|
||||
if(item.name1) o.name = item.name1
|
||||
if(item.upper_limit !== 0) o.upper_limit = item.upper_limit
|
||||
paramsMap[params.length] = {dataIndex: i, floorIndex: null}
|
||||
params.push(o)
|
||||
|
||||
item.floor.forEach((cIt: any, ci: number) => {
|
||||
let a = {...obj} as any
|
||||
a.calculation = cIt.calculation
|
||||
if(cIt.name) a.name = cIt.name
|
||||
if(cIt.upper_limit !== 0) a.upper_limit = cIt.upper_limit
|
||||
paramsMap[params.length] = {dataIndex: i, floorIndex: ci}
|
||||
params.push(a)
|
||||
})
|
||||
})
|
||||
publicInterface('/dcim/dems/device_point', 'get_value_by_point_uid_calculation', params).then((res: any) => {
|
||||
params.forEach((it: any, i:number) => {
|
||||
let o = paramsMap[i]
|
||||
if(typeof o.floorIndex === 'number') {
|
||||
data.value[o.dataIndex].floor[o.floorIndex].value = Number(res.data[i])
|
||||
}
|
||||
else {
|
||||
data.value[o.dataIndex].value1 = Number(res.data[i])
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
watch([() => customData.value.topBox, () => customData.value.bottomBox, () => customData.value.enable], () => {
|
||||
data.value = resetData()
|
||||
if(customData.value.enable) getData()
|
||||
}, {
|
||||
deep: true
|
||||
})
|
||||
|
||||
|
||||
let toPercent = (a: number, b: number) => {
|
||||
if(typeof a !== 'number' || typeof b !== 'number') return ''
|
||||
return (a * 100 / b).toFixed(1) + '%'
|
||||
}
|
||||
|
||||
let timer:unknown
|
||||
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
|
||||
if(!isPreview()) return
|
||||
if(props.chartConfig.request.requestInterval) {
|
||||
if(timer) clearInterval(timer as number)
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
|
||||
const unit = obj.unit
|
||||
const number = unit * props.chartConfig.request.requestInterval
|
||||
timer = setInterval(() => {
|
||||
if(customData.value.enable) getData()
|
||||
}, number)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
if(!isPreview()) return
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
|
||||
const unit = obj.unit
|
||||
const number = unit * props.chartConfig.request.requestInterval!
|
||||
timer = setInterval(() => {
|
||||
if(customData.value.enable) getData()
|
||||
}, number)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
if(timer) clearInterval(timer as number)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.item{
|
||||
flex: none;
|
||||
min-height: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.row1{
|
||||
flex: none;
|
||||
display: flex;
|
||||
height: 16px;
|
||||
.name, .label, .value{
|
||||
font-size: 12px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
.label{
|
||||
color: #409eff;
|
||||
}
|
||||
.value{
|
||||
color: #409eff
|
||||
}
|
||||
}
|
||||
.row2{
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
.label, .value{
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.label{
|
||||
padding-left: 5px;
|
||||
}
|
||||
.rect1{
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #263d55;
|
||||
z-index: -2;
|
||||
}
|
||||
.rect{
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, transparent, #00fdfd);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.row3{
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
background: #142940;
|
||||
.col{
|
||||
padding: 0 5px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.label, .value{
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
.value{
|
||||
color: #00fdfd;
|
||||
}
|
||||
&::after{
|
||||
content: ' ';
|
||||
background: #27558E;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
}
|
||||
&:nth-last-child(1)::after{
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,7 @@
|
||||
// import { Theme1Config } from './Theme1/index'
|
||||
import { ComprehensivePUEConfig } from './ComprehensivePUE'
|
||||
import { ComprehensivePUEV3Config } from './ComprehensivePUEV3'
|
||||
import { ComprehensivePUEV4Config } from './ComprehensivePUEV4'
|
||||
import { RealTimeTrafficConfig } from './RealTimeTraffic'
|
||||
import { OverviewOfComputingNodesConfig } from './OverviewOfComputingNodes'
|
||||
import { GDMapConfig } from './GDMap'
|
||||
@ -11,11 +12,13 @@ import { SystemRuntimeConfig } from './SystemRuntime'
|
||||
import { VideoListConfig } from './VideoList'
|
||||
import { AirConditioningTableConfig } from './AirConditioningTable'
|
||||
import { SiteStatisticsConfig } from './SiteStatistics'
|
||||
import { PowerCapacityConfig } from './PowerCapacity'
|
||||
|
||||
export default [
|
||||
// Theme1Config,
|
||||
ComprehensivePUEConfig,
|
||||
ComprehensivePUEV3Config,
|
||||
ComprehensivePUEV4Config,
|
||||
RealTimeTrafficConfig,
|
||||
OverviewOfComputingNodesConfig,
|
||||
GDMapConfig,
|
||||
@ -26,4 +29,5 @@ export default [
|
||||
VideoListConfig,
|
||||
AirConditioningTableConfig,
|
||||
SiteStatisticsConfig,
|
||||
PowerCapacityConfig,
|
||||
]
|
||||
|
||||
@ -139,13 +139,13 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
|
||||
// 屏幕适配
|
||||
onMounted(fn)
|
||||
|
||||
watch(() => localStorageInfo.editCanvasConfig, (v) => {
|
||||
width.value = v.width
|
||||
height.value = v.height
|
||||
fn()
|
||||
}, {
|
||||
deep: true
|
||||
})
|
||||
// watch(() => localStorageInfo.editCanvasConfig, (v) => {
|
||||
// width.value = v.width
|
||||
// height.value = v.height
|
||||
// fn()
|
||||
// }, {
|
||||
// deep: true
|
||||
// })
|
||||
|
||||
return {
|
||||
entityRef,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user