mirror of
https://gitee.com/dromara/go-view.git
synced 2025-10-13 22:12:11 +08:00
feat: 增加自定义组件和主题
This commit is contained in:
huanghao1412
parent
72c56f7848
commit
8e38d1c84d
@ -21,6 +21,8 @@
|
|||||||
"@types/crypto-js": "^4.1.1",
|
"@types/crypto-js": "^4.1.1",
|
||||||
"@types/keymaster": "^1.6.30",
|
"@types/keymaster": "^1.6.30",
|
||||||
"@types/lodash": "^4.14.184",
|
"@types/lodash": "^4.14.184",
|
||||||
|
"@vicons/fluent": "^0.12.0",
|
||||||
|
"@vicons/tabler": "^0.12.0",
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"color": "^4.2.3",
|
"color": "^4.2.3",
|
||||||
|
|||||||
@ -185,7 +185,6 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
|
|||||||
const res = fn(global)
|
const res = fn(global)
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
data = JSON.stringify(res, null, 2)
|
data = JSON.stringify(res, null, 2)
|
||||||
console.log(data)
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
data = translateStr(targetRequestParams.Body['json'])
|
data = translateStr(targetRequestParams.Body['json'])
|
||||||
|
|||||||
@ -25,10 +25,10 @@ export function getToken() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const publicInterface = async (paramType:string, interfaceType:string, paramData:any) =>{
|
export const publicInterface = async (paramType:string, interfaceType:string, paramData:unknown) =>{
|
||||||
try {
|
try {
|
||||||
const access_token = getToken()
|
const access_token = getToken()
|
||||||
const res = await http(RequestHttpEnum.POST)<any>(paramType, {
|
const res = await http(RequestHttpEnum.POST)<unknown>(paramType, {
|
||||||
access_token,
|
access_token,
|
||||||
type: interfaceType,
|
type: interfaceType,
|
||||||
data: paramData
|
data: paramData
|
||||||
|
|||||||
BIN
src/assets/images/chart/themesandlayouts/theme1.png
Normal file
BIN
src/assets/images/chart/themesandlayouts/theme1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@ -50,7 +50,9 @@ export const excludeParseEventKeyList = [
|
|||||||
BaseEvent.ON_MOUSE_ENTER,
|
BaseEvent.ON_MOUSE_ENTER,
|
||||||
BaseEvent.ON_MOUSE_LEAVE,
|
BaseEvent.ON_MOUSE_LEAVE,
|
||||||
//过滤器
|
//过滤器
|
||||||
'filter'
|
'filter',
|
||||||
|
//body-json处理
|
||||||
|
'handler',
|
||||||
]
|
]
|
||||||
// 内置字符串函数键值列表
|
// 内置字符串函数键值列表
|
||||||
export const excludeParseEventValueList = [
|
export const excludeParseEventValueList = [
|
||||||
|
|||||||
@ -72,8 +72,6 @@ export const useChartDataFetch = (
|
|||||||
clearInterval(fetchInterval)
|
clearInterval(fetchInterval)
|
||||||
|
|
||||||
const fetchFn = async () => {
|
const fetchFn = async () => {
|
||||||
console.log(1234, JSON.parse(JSON.stringify(toRaw(targetComponent.request))))
|
|
||||||
console.log(1234, JSON.parse(JSON.stringify(toRaw(chartEditStore.getRequestGlobalConfig))))
|
|
||||||
const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig))
|
const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig))
|
||||||
if (res) {
|
if (res) {
|
||||||
try {
|
try {
|
||||||
|
|||||||
@ -92,7 +92,7 @@ export const requestConfig = {
|
|||||||
"requestDataType": 1,
|
"requestDataType": 1,
|
||||||
"requestHttpType": RequestHttpEnum.POST,
|
"requestHttpType": RequestHttpEnum.POST,
|
||||||
"requestUrl": "/api/goview/dcim/dems/statistic",
|
"requestUrl": "/api/goview/dcim/dems/statistic",
|
||||||
"requestInterval": 5,
|
"requestInterval": 15,
|
||||||
"requestIntervalUnit": RequestHttpIntervalEnum.SECOND,
|
"requestIntervalUnit": RequestHttpIntervalEnum.SECOND,
|
||||||
"requestContentType": 0,
|
"requestContentType": 0,
|
||||||
"requestParamsBodyType": RequestBodyEnum.JSON,
|
"requestParamsBodyType": RequestBodyEnum.JSON,
|
||||||
|
|||||||
@ -183,7 +183,7 @@ export const option = {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
dataset: {...dataJson},
|
dataset: {...dataJson},
|
||||||
series: [seriesItem]
|
series: Array(8).fill({}).map(_ => cloneDeep(seriesItem))
|
||||||
}
|
}
|
||||||
|
|
||||||
// setInterval(async() => {
|
// setInterval(async() => {
|
||||||
|
|||||||
@ -0,0 +1,287 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="230px" height="162px" viewBox="0 0 204 223.81" 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="内容">
|
||||||
|
<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>
|
||||||
|
</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, data) => {
|
||||||
|
// 传入指针水平位置，计算指针角度，水平位置即为指针角度为0时，两端点的纵坐标
|
||||||
|
const pue = parseFloat(data) // 当前指针值
|
||||||
|
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>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { ComprehensivePUEConfig } from './index'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import logo from '@/assets/logo.png'
|
||||||
|
|
||||||
|
export const option = {
|
||||||
|
// 图片路径
|
||||||
|
dataset: logo,
|
||||||
|
// 适应方式
|
||||||
|
fit: 'contain',
|
||||||
|
// 圆角
|
||||||
|
borderRadius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType
|
||||||
|
{
|
||||||
|
public key = ComprehensivePUEConfig.key
|
||||||
|
public chartConfig = cloneDeep(ComprehensivePUEConfig)
|
||||||
|
public option = cloneDeep(option)
|
||||||
|
}
|
||||||
@ -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,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/CustomComponents/index.d'
|
||||||
|
|
||||||
|
export const ComprehensivePUEConfig: ConfigType = {
|
||||||
|
key: 'ComprehensivePUE',
|
||||||
|
chartKey: 'VComprehensivePUE',
|
||||||
|
conKey: 'VCComprehensivePUE',
|
||||||
|
title: '综合PUE',
|
||||||
|
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
|
||||||
|
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
|
||||||
|
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
|
||||||
|
chartFrame: ChartFrameEnum.COMMON,
|
||||||
|
image: 'photo.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,100 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="getStyle(borderRadius)" style="overflow: visible">
|
||||||
|
<BorderBox title="综合PUE">
|
||||||
|
<div class="box">
|
||||||
|
<div class="left">
|
||||||
|
<VCircle :value="value"/>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="item" v-for="(item, i) in 3" :key="i">
|
||||||
|
<div class="leftBox"></div>
|
||||||
|
<div class="rightBox">
|
||||||
|
<div>总市电负载</div>
|
||||||
|
<div>(kWh)</div>
|
||||||
|
<div>0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BorderBox>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, shallowReactive, watch, toRefs, reactive, onMounted, onUnmounted, nextTick, ref } from 'vue'
|
||||||
|
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'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<CreateComponentType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
Object.assign(props.chartConfig.attr, { w: 380, h: 250 })
|
||||||
|
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 value = reactive([
|
||||||
|
{label: '实时PUE', value: '0.000'},
|
||||||
|
{label: '昨日PUE', value: '0.000'},
|
||||||
|
{label: '上周PUE', value: '0.000'},
|
||||||
|
{label: '上月PUE', value: '0.000'},
|
||||||
|
])
|
||||||
|
|
||||||
|
// const option = shallowReactive({
|
||||||
|
// dataset: ''
|
||||||
|
// })
|
||||||
|
// // 预览更新
|
||||||
|
// useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
// option.dataset = newData
|
||||||
|
// })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box{
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 40px);
|
||||||
|
display: flex;
|
||||||
|
.left{
|
||||||
|
flex: 6;
|
||||||
|
.circle{
|
||||||
|
|
||||||
|
}
|
||||||
|
.bottomBox{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
flex: 4;
|
||||||
|
.item{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.leftBox{
|
||||||
|
|
||||||
|
}
|
||||||
|
.rightBox{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { DeviceAlarmOverviewConfig } from './index'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import logo from '@/assets/logo.png'
|
||||||
|
|
||||||
|
export const option = {
|
||||||
|
// 图片路径
|
||||||
|
dataset: logo,
|
||||||
|
// 适应方式
|
||||||
|
fit: 'contain',
|
||||||
|
// 圆角
|
||||||
|
borderRadius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType
|
||||||
|
{
|
||||||
|
public key = DeviceAlarmOverviewConfig.key
|
||||||
|
public chartConfig = cloneDeep(DeviceAlarmOverviewConfig)
|
||||||
|
public option = cloneDeep(option)
|
||||||
|
}
|
||||||
@ -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,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/CustomComponents/index.d'
|
||||||
|
|
||||||
|
export const DeviceAlarmOverviewConfig: ConfigType = {
|
||||||
|
key: 'DeviceAlarmOverview',
|
||||||
|
chartKey: 'VDeviceAlarmOverview',
|
||||||
|
conKey: 'VCDeviceAlarmOverview',
|
||||||
|
title: '当前设备告警概况',
|
||||||
|
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
|
||||||
|
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
|
||||||
|
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
|
||||||
|
chartFrame: ChartFrameEnum.COMMON,
|
||||||
|
image: 'photo.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,163 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="getStyle(borderRadius)">
|
||||||
|
<BorderBox title="当前设备告警概况">
|
||||||
|
<div class="item">
|
||||||
|
<BareMetalServerIcon class="left"/>
|
||||||
|
<div class="right">
|
||||||
|
<div class="label">设备总数</div>
|
||||||
|
<div class="value">{{obj.data1}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<BareMetalServerIcon class="left leftRed"/>
|
||||||
|
<div class="right rightRed">
|
||||||
|
<div class="label">设备告警数</div>
|
||||||
|
<div class="value">{{obj.data2}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<SteeringWheelIcon class="left"/>
|
||||||
|
<div class="right">
|
||||||
|
<div class="label">测点总数</div>
|
||||||
|
<div class="value">{{obj.data3}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<SteeringWheelIcon class="left leftRed"/>
|
||||||
|
<div class="right rightRed">
|
||||||
|
<div class="label">测点告警数</div>
|
||||||
|
<div class="value">{{obj.data4}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BorderBox>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, shallowReactive, watch, toRefs, reactive, onMounted, onUnmounted } from 'vue'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { BareMetalServer as BareMetalServerIcon } from '@vicons/carbon'
|
||||||
|
import { SteeringWheel as SteeringWheelIcon } from '@vicons/tabler'
|
||||||
|
import { publicInterface } from '@/api/path/business.api'
|
||||||
|
import BorderBox from '../components/BorderBox.vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<CreateComponentType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
Object.assign(props.chartConfig.attr, { w: 380, h: 250 })
|
||||||
|
const { w, h } = toRefs(props.chartConfig.attr)
|
||||||
|
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
|
||||||
|
|
||||||
|
const option = shallowReactive({
|
||||||
|
dataset: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const getStyle = (radius: number) => {
|
||||||
|
return {
|
||||||
|
borderRadius: `${radius}px`,
|
||||||
|
overflow: 'hidden'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
type objType = number|null
|
||||||
|
const obj = reactive({
|
||||||
|
data1: null as objType,
|
||||||
|
data2: null as objType,
|
||||||
|
data3: null as objType,
|
||||||
|
data4: null as objType
|
||||||
|
})
|
||||||
|
const getData = () => {
|
||||||
|
publicInterface('/dcim/dems/statistic', 'count_device_all', {}).then(res => {
|
||||||
|
if (res && res.data) {
|
||||||
|
let data = res.data as {
|
||||||
|
active_device_count:number
|
||||||
|
active_device_alarm:number
|
||||||
|
active_device_offline:number
|
||||||
|
}
|
||||||
|
obj.data1 = data.active_device_count
|
||||||
|
obj.data2 = data.active_device_alarm + data.active_device_offline
|
||||||
|
}
|
||||||
|
})
|
||||||
|
publicInterface('/dcim/dems/statistic', 'count_point_all', {}).then(res => {
|
||||||
|
if (res && res.data) {
|
||||||
|
let data = res.data as {
|
||||||
|
active_point_count:number
|
||||||
|
active_point_alarm:number
|
||||||
|
}
|
||||||
|
obj.data3 = data.active_point_count
|
||||||
|
obj.data4 = data.active_point_alarm
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let timer:unknown
|
||||||
|
onMounted(() => {
|
||||||
|
getData()
|
||||||
|
timer = setInterval(() => {
|
||||||
|
getData()
|
||||||
|
}, 15000)
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer as number)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 编辑更新
|
||||||
|
watch(
|
||||||
|
() => props.chartConfig.option.dataset,
|
||||||
|
(newData: any) => {
|
||||||
|
option.dataset = newData
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 预览更新
|
||||||
|
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
option.dataset = newData
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.item{
|
||||||
|
background: rgba(65,150,255,.08);
|
||||||
|
width: calc(50% - 7px);
|
||||||
|
height: calc(50% - 7px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.left{
|
||||||
|
color: #0ff;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
margin-left: 10px;
|
||||||
|
.label{
|
||||||
|
color: #fff;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.value{
|
||||||
|
color: #0ff;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.leftRed{
|
||||||
|
color: #f43b42;
|
||||||
|
}
|
||||||
|
.rightRed{
|
||||||
|
.value{
|
||||||
|
color: #f43b42;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { RealTimeTrafficConfig } from './index'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import logo from '@/assets/logo.png'
|
||||||
|
|
||||||
|
export const option = {
|
||||||
|
// 图片路径
|
||||||
|
dataset: logo,
|
||||||
|
// 适应方式
|
||||||
|
fit: 'contain',
|
||||||
|
// 圆角
|
||||||
|
borderRadius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType
|
||||||
|
{
|
||||||
|
public key = RealTimeTrafficConfig.key
|
||||||
|
public chartConfig = cloneDeep(RealTimeTrafficConfig)
|
||||||
|
public option = cloneDeep(option)
|
||||||
|
}
|
||||||
@ -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,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/CustomComponents/index.d'
|
||||||
|
|
||||||
|
export const RealTimeTrafficConfig: ConfigType = {
|
||||||
|
key: 'RealTimeTraffic',
|
||||||
|
chartKey: 'VRealTimeTraffic',
|
||||||
|
conKey: 'VCRealTimeTraffic',
|
||||||
|
title: '采集流量实时监测',
|
||||||
|
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
|
||||||
|
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
|
||||||
|
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
|
||||||
|
chartFrame: ChartFrameEnum.COMMON,
|
||||||
|
image: 'photo.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,322 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="getStyle(borderRadius)" style="overflow: visible">
|
||||||
|
<BorderBox title="采集流量实时监测">
|
||||||
|
<v-chart
|
||||||
|
ref="vChartRef"
|
||||||
|
:option="option"
|
||||||
|
:manual-update="false"
|
||||||
|
:update-options="{
|
||||||
|
notMerge: true,
|
||||||
|
replaceMerge: ['series', 'xAxis']
|
||||||
|
}"
|
||||||
|
autoresize
|
||||||
|
style="overflow: visible"
|
||||||
|
/>
|
||||||
|
</BorderBox>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, shallowReactive, watch, toRefs, reactive, onMounted, onUnmounted, nextTick, ref } from 'vue'
|
||||||
|
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"
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<CreateComponentType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
Object.assign(props.chartConfig.attr, { w: 380, h: 250 })
|
||||||
|
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 seriesItem = {
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
smooth: true,
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#4196ff',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#4196ff',
|
||||||
|
borderColor: '#4196ff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(65,150,255,0.5)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(65,150,255,0)'
|
||||||
|
}
|
||||||
|
], false),
|
||||||
|
shadowColor: 'rgba(65,150,255,0.3)',
|
||||||
|
shadowBlur: 20
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
}
|
||||||
|
const option = reactive({
|
||||||
|
animation: false,
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#ccc',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#999'
|
||||||
|
},
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
color: '#ccc',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
color: 'rgba(65, 150, 255, 0.2)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '16px',
|
||||||
|
left: '16px',
|
||||||
|
right: '16px',
|
||||||
|
bottom: '32px',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: null as null | string
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
show: true,
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
height: 20,
|
||||||
|
bottom: 10,
|
||||||
|
textStyle: {
|
||||||
|
color: '#ccc'
|
||||||
|
},
|
||||||
|
dataBackground: {
|
||||||
|
areaStyle: {
|
||||||
|
color: '#353549',
|
||||||
|
borderColor: '#34424f'
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: '#364e68'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
backgroundColor: '#222b35',
|
||||||
|
borderColor: '#34424f',
|
||||||
|
handleStyle: {
|
||||||
|
color: '#222b35',
|
||||||
|
borderColor: '#27558e'
|
||||||
|
},
|
||||||
|
moveHandleStyle: {
|
||||||
|
color: '#1b2e46',
|
||||||
|
borderColor: '#364e68'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
moveHandleStyle: {
|
||||||
|
color: '#2c5a92',
|
||||||
|
borderColor: '#364e68'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
start: 0,
|
||||||
|
end: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: true,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
filterMode: 'empty',
|
||||||
|
width: 20,
|
||||||
|
height: '80%',
|
||||||
|
showDataShadow: false,
|
||||||
|
right: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: '#ccc'
|
||||||
|
},
|
||||||
|
dataBackground: {
|
||||||
|
areaStyle: {
|
||||||
|
color: '#353549',
|
||||||
|
// color: '#ff0000',
|
||||||
|
borderColor: '#34424f'
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: '#364e68'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
backgroundColor: '#222b35',
|
||||||
|
borderColor: '#34424f',
|
||||||
|
handleStyle: {
|
||||||
|
color: '#222b35',
|
||||||
|
borderColor: '#27558e'
|
||||||
|
},
|
||||||
|
moveHandleStyle: {
|
||||||
|
color: '#1b2e46',
|
||||||
|
borderColor: '#364e68'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
moveHandleStyle: {
|
||||||
|
color: '#2c5a92',
|
||||||
|
borderColor: '#364e68'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [seriesItem]
|
||||||
|
})
|
||||||
|
|
||||||
|
const query = {
|
||||||
|
types: ['rec'],
|
||||||
|
start_time: moment().subtract(10, 'm').format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
end_time: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
duration: 15,
|
||||||
|
query_type: ''
|
||||||
|
}
|
||||||
|
const vChartRef = ref()
|
||||||
|
const getData = () => {
|
||||||
|
const methodArr = 'handle'.split('_')
|
||||||
|
query.types = [methodArr[0]]
|
||||||
|
query.query_type = methodArr[1] || ''
|
||||||
|
option.xAxis['data'] = []
|
||||||
|
option.series[0]['data'] = []
|
||||||
|
|
||||||
|
publicInterface('/dcim/dems/statistic', 'get_point_realtime_data_echarts', query).then((res:any) => {
|
||||||
|
if (res && res.data && res.data['current']) {
|
||||||
|
const data = res.data
|
||||||
|
option.xAxis['data'] = data['echarts'] && data['echarts']['xAxis'] && data['echarts']['xAxis']['data'] ? data['echarts']['xAxis']['data'].map((item:any) => {
|
||||||
|
const time = query.query_type === '' ? moment(item).format('YYYY-MM-DD HH:mm:ss') : query.query_type === 'day' ? moment(item).format('YYYY-MM-DD') : moment(item).format('YYYY-MM')
|
||||||
|
return time
|
||||||
|
}) : []
|
||||||
|
option.series[0]['data'] = data['echarts'] && data['echarts']['series'] && data['echarts']['series'][0] && data['echarts']['series'][0]['data'] ? data['echarts']['series'][0] && data['echarts']['series'][0]['data'] : []
|
||||||
|
if (query.query_type === '') {
|
||||||
|
option.tooltip.formatter = '{b}<br/>' + '速率(测点/s)' + ' ' + '{c}'
|
||||||
|
} else {
|
||||||
|
option.tooltip.formatter = '{b}<br/>' + '测点总数' + ' ' + '{c}'
|
||||||
|
}
|
||||||
|
vChartRef.value.forceUpdate()
|
||||||
|
console.log(option, vChartRef.value)
|
||||||
|
}
|
||||||
|
}).catch((e:unknown) => {
|
||||||
|
console.log(e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let timer:unknown
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
getData()
|
||||||
|
})
|
||||||
|
timer = setInterval(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
getData()
|
||||||
|
})
|
||||||
|
}, 15000)
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer as number)
|
||||||
|
})
|
||||||
|
|
||||||
|
// const option = shallowReactive({
|
||||||
|
// dataset: ''
|
||||||
|
// })
|
||||||
|
// // 预览更新
|
||||||
|
// useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
// option.dataset = newData
|
||||||
|
// })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.item{
|
||||||
|
background: rgba(65,150,255,.08);
|
||||||
|
width: calc(50% - 7px);
|
||||||
|
height: calc(50% - 7px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.left{
|
||||||
|
color: #0ff;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
margin-left: 10px;
|
||||||
|
.label{
|
||||||
|
color: #fff;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.value{
|
||||||
|
color: #0ff;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.leftRed{
|
||||||
|
color: #f43b42;
|
||||||
|
}
|
||||||
|
.rightRed{
|
||||||
|
.value{
|
||||||
|
color: #f43b42;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">
|
||||||
|
<slot name="title">{{ title }}</slot>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
const { title } = defineProps(['title'])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(65,150,255,.04);
|
||||||
|
.title{
|
||||||
|
position: relative;
|
||||||
|
padding-left: 20px;
|
||||||
|
height: 38px;
|
||||||
|
line-height: 38px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
border-top: 1px solid rgba(65,150,255,.5);
|
||||||
|
border-bottom: 1px solid rgba(65,150,255,.2);
|
||||||
|
background: linear-gradient(90deg,rgba(65,150,255,.1) 0,rgba(65,150,255,0));
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
height: 1px;
|
||||||
|
width: 20px;
|
||||||
|
background: linear-gradient(90deg,rgba(65,150,255,0) 0,#4196ff);
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
height: calc(100% - 40px);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import { ComprehensivePUEConfig } from './ComprehensivePUE'
|
||||||
|
import { DeviceAlarmOverviewConfig } from './DeviceAlarmOverview'
|
||||||
|
import { RealTimeTrafficConfig } from './RealTimeTraffic'
|
||||||
|
|
||||||
|
export default [ ComprehensivePUEConfig, DeviceAlarmOverviewConfig, RealTimeTrafficConfig ]
|
||||||
7
src/packages/components/CustomComponents/index.d.ts
vendored
Normal file
7
src/packages/components/CustomComponents/index.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export enum ChatCategoryEnum {
|
||||||
|
CUSTOMCOMPONENTS = 'CustomComponents',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ChatCategoryEnumName {
|
||||||
|
CUSTOMCOMPONENTS = '自定义组件',
|
||||||
|
}
|
||||||
3
src/packages/components/CustomComponents/index.ts
Normal file
3
src/packages/components/CustomComponents/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import CustomComponents from './CustomComponents'
|
||||||
|
|
||||||
|
export const CustomComponentsList = [...CustomComponents]
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { Theme1Config } from './index'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import bakground from '@/assets/customComponents/theme1/backgrond.jpg'
|
||||||
|
|
||||||
|
export const option = {
|
||||||
|
// 图片路径
|
||||||
|
dataset: bakground,
|
||||||
|
// 适应方式
|
||||||
|
fit: 'contain',
|
||||||
|
// 圆角
|
||||||
|
borderRadius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType
|
||||||
|
{
|
||||||
|
public key = Theme1Config.key
|
||||||
|
public chartConfig = cloneDeep(Theme1Config)
|
||||||
|
public option = cloneDeep(option)
|
||||||
|
}
|
||||||
@ -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,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum,ChatCategoryEnumName } from '@/packages/components/ThemesAndLayouts/index.d'
|
||||||
|
|
||||||
|
export const Theme1Config: ConfigType = {
|
||||||
|
key: 'Theme1',
|
||||||
|
chartKey: 'VTheme1',
|
||||||
|
conKey: 'VCTheme1',
|
||||||
|
title: '主题1',
|
||||||
|
category: ChatCategoryEnum.THEMES,
|
||||||
|
categoryName: ChatCategoryEnumName.THEMES,
|
||||||
|
package: PackagesCategoryEnum.THEMESANDLAYOUTS,
|
||||||
|
chartFrame: ChartFrameEnum.COMMON,
|
||||||
|
image: 'theme1.png'
|
||||||
|
}
|
||||||
208
src/packages/components/ThemesAndLayouts/Themes/Theme1/index.vue
Normal file
208
src/packages/components/ThemesAndLayouts/Themes/Theme1/index.vue
Normal file
@ -0,0 +1,208 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="getStyle(borderRadius)" class="Theme1">
|
||||||
|
<div class="full-screen-btn" @click="toggleFullscreen">
|
||||||
|
<i class="iconfont icon-quanping full-screen" :title="showMoreMenuBts ? '全屏' : '退出全屏'"></i>
|
||||||
|
{{ showMoreMenuBts ? '全屏' : '退出全屏' }}
|
||||||
|
</div>
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 60" style="enable-background:new 0 0 1920 60;" xml:space="preserve">
|
||||||
|
<g id="顶栏">
|
||||||
|
<g>
|
||||||
|
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="960" y1="60" x2="960" y2="0">
|
||||||
|
<stop offset="0" style="stop-color:#0D2952;stop-opacity:0.1" />
|
||||||
|
<stop offset="1" style="stop-color:#0D2952;stop-opacity:0.8" />
|
||||||
|
</linearGradient>
|
||||||
|
<rect style="fill:url(#SVGID_1_);" width="1920" height="60" />
|
||||||
|
<g id="系统抬头">
|
||||||
|
<!-- <image v-if="systemConfig.system_logo_url" width="240" height="40" :xlink:href="systemConfig.system_logo_url" /> -->
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="960" y1="-729.2512" x2="960" y2="-789.2512" gradientTransform="matrix(1 0 0 -1 0 -729.2512)">
|
||||||
|
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
|
||||||
|
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
|
||||||
|
</linearGradient>
|
||||||
|
<path style="fill:url(#SVGID_2_);" d="M600,0l54.3,54.3c3.1,3.1,9.3,5.7,13.7,5.7h584c4.4,0,10.5-2.5,13.7-5.7L1320,0" />
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<text transform="matrix(1 0 0 1 697.4991 43)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:30px;"></text>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="770" y1="58" x2="1150" y2="58">
|
||||||
|
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
|
||||||
|
<stop offset="0.5" style="stop-color:#4196FF" />
|
||||||
|
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0" />
|
||||||
|
</linearGradient>
|
||||||
|
<path style="fill:url(#SVGID_3_);" d="M770,56c0,0,0.9,0.9,2,2s3.8,2,6,2h364c2.2,0,4.9-0.9,6-2s2-2,2-2" />
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="3591" y1="5" x2="4188.75" y2="5" gradientTransform="matrix(1 0 0 1 -3584 0)">
|
||||||
|
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
|
||||||
|
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
|
||||||
|
</linearGradient>
|
||||||
|
<polygon style="opacity:0.4;fill:url(#SVGID_4_);" points="604.8,8 7,8 13,2 598.8,2" />
|
||||||
|
|
||||||
|
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-6698.249" y1="4" x2="-6592.999" y2="4" gradientTransform="matrix(-1 0 0 1 -6094.999 0)">
|
||||||
|
<stop offset="0" style="stop-color:#00FFFF" />
|
||||||
|
<stop offset="1" style="stop-color:#00FFFF;stop-opacity:0" />
|
||||||
|
</linearGradient>
|
||||||
|
<path style="fill:url(#SVGID_5_);" d="M563,0l8.3,8h2L565,0H563z M553,0l8.3,8h2L555,0H553z M568,0l8.3,8h2L570,0H568z M548,0 l8.3,8h2L550,0H548z M558,0l8.3,8h2L560,0H558z M588,0l8.3,8h2L590,0H588z M593,0l8.3,8h2L595,0H593z M578,0l8.3,8h2L580,0H578z M573,0l8.3,8h2L575,0H573z M583,0l8.3,8h2L585,0H583z M528,0l8.3,8h2L530,0H528z M508,0l8.3,8h2L510,0H508z M503,0l8.3,8h2 L505,0H503z M498,0l8.3,8h2L500,0H498z M543,0l8.3,8h2L545,0H543z M513,0l8.3,8h2L515,0H513z M533,0l8.3,8h2L535,0H533z M538,0 l8.3,8h2L540,0H538z M518,0l8.3,8h2L520,0H518z M523,0l8.3,8h2L525,0H523z" />
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-4423.999" y1="5" x2="-3826.2493" y2="5" gradientTransform="matrix(-1 0 0 1 -2510.9993 0)">
|
||||||
|
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
|
||||||
|
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
|
||||||
|
</linearGradient>
|
||||||
|
<polygon style="opacity:0.4;fill:url(#SVGID_6_);" points="1315.3,8 1913,8 1907,2 1321.3,2 " />
|
||||||
|
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="1316.75" y1="4" x2="1422" y2="4">
|
||||||
|
<stop offset="0" style="stop-color:#00FFFF" />
|
||||||
|
<stop offset="1" style="stop-color:#00FFFF;stop-opacity:0" />
|
||||||
|
</linearGradient>
|
||||||
|
<path style="fill:url(#SVGID_7_);" d="M1355,0l-8.3,8h2l8.3-8H1355z M1365,0l-8.3,8h2l8.3-8H1365z M1350,0l-8.3,8h2l8.3-8H1350z M1370,0l-8.3,8h2l8.3-8H1370z M1360,0l-8.3,8h2l8.3-8H1360z M1330,0l-8.3,8h2l8.3-8H1330z M1325,0l-8.3,8h2l8.3-8H1325z M1340,0 l-8.3,8h2l8.3-8H1340z M1345,0l-8.3,8h2l8.3-8H1345z M1335,0l-8.3,8h2l8.3-8H1335z M1390,0l-8.3,8h2l8.3-8H1390z M1410,0l-8.3,8 h2l8.3-8H1410z M1415,0l-8.3,8h2l8.3-8H1415z M1420,0l-8.3,8h2l8.3-8H1420z M1375,0l-8.3,8h2l8.3-8H1375z M1405,0l-8.3,8h2l8.3-8 H1405z M1385,0l-8.3,8h2l8.3-8H1385z M1380,0l-8.3,8h2l8.3-8H1380z M1400,0l-8.3,8h2l8.3-8H1400z M1395,0l-8.3,8h2l8.3-8H1395z" />
|
||||||
|
</g>
|
||||||
|
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="760.5" y1="59" x2="1159.5" y2="59">
|
||||||
|
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0" />
|
||||||
|
<stop offset="0.5" style="stop-color:#FFFFFF" />
|
||||||
|
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0" />
|
||||||
|
</linearGradient>
|
||||||
|
<rect x="760.5" y="58" style="fill:url(#SVGID_8_);" width="399" height="2" />
|
||||||
|
<rect x="1760" style="opacity:0;fill:#091C38;" width="160" height="60" />
|
||||||
|
<g>
|
||||||
|
<text transform="matrix(1 0 0 1 1808.9991 45)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:14px;">{{ time }}</text>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<text transform="matrix(1 0 0 1 1808.9991 27)" style="fill:#9CA4AF; font-family:'PingFang-SC-Regular'; font-size:14px;">{{ date }}</text>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path style="fill:#234B9B;" d="M1780,17c7.2,0,13,5.8,13,13s-5.8,13-13,13s-13-5.8-13-13S1772.8,17,1780,17 M1780,16 c-7.7,0-14,6.3-14,14s6.3,14,14,14s14-6.3,14-14S1787.7,16,1780,16L1780,16z" />
|
||||||
|
</g>
|
||||||
|
<polyline style="fill:none;stroke:#234B9B;stroke-miterlimit:10;" points="1780,21 1780,31 1785,36" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-3831.3499" y1="-785.323" x2="-3110.6487" y2="-785.323" gradientTransform="matrix(-1 0 0 -1 -2510.9993 -755.2512)">
|
||||||
|
<stop offset="0" style="stop-color:#4196FF;stop-opacity:0.8" />
|
||||||
|
<stop offset="0.4462" style="stop-color:#4196FF;stop-opacity:0" />
|
||||||
|
<stop offset="1" style="stop-color:#4196FF;stop-opacity:0.8" />
|
||||||
|
</linearGradient>
|
||||||
|
<path style="fill:none;stroke:url(#SVGID_9_);stroke-miterlimit:10;" d="M1320,0.5l-54.3,53.4c-3.1,3.1-9.3,5.6-13.7,5.6H668 c-4.4,0-10.6-2.5-13.7-5.6L600,0.5" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<n-image
|
||||||
|
:object-fit="fit"
|
||||||
|
preview-disabled
|
||||||
|
:src="option.dataset"
|
||||||
|
:fallback-src="requireErrorImg()"
|
||||||
|
:width="w"
|
||||||
|
:height="h"
|
||||||
|
lazy
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, shallowReactive, watch, toRefs, onMounted, onUnmounted, ref } from 'vue'
|
||||||
|
import { requireErrorImg } from '@/utils'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import moment from 'moment'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<CreateComponentType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
props.chartConfig.attr.w = 1920
|
||||||
|
props.chartConfig.attr.h = 1080
|
||||||
|
Object.assign(props.chartConfig.attr, {w: 1920, h: 1080, x: 0, y: 0})
|
||||||
|
console.log(props.chartConfig)
|
||||||
|
|
||||||
|
const { w, h } = toRefs(props.chartConfig.attr)
|
||||||
|
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
|
||||||
|
|
||||||
|
let date = ref(moment().format('yyyy-MM-DD'))
|
||||||
|
const weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
|
||||||
|
let time = ref(moment().format('HH:mm:ss ') + weeks[Number(moment().format('e'))])
|
||||||
|
let timer: unknown
|
||||||
|
onMounted(() => {
|
||||||
|
timer = setInterval(() => {
|
||||||
|
date.value = moment().format('yyyy-MM-DD')
|
||||||
|
time.value = moment().format('HH:mm:ss ') + weeks[Number(moment().format('e'))]
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer as number)
|
||||||
|
})
|
||||||
|
|
||||||
|
const showMoreMenuBts = ref(true)
|
||||||
|
// 切换全屏函数
|
||||||
|
function toggleFullscreen() {
|
||||||
|
showMoreMenuBts.value = !showMoreMenuBts.value
|
||||||
|
if (document.fullscreenElement) {
|
||||||
|
// 如果当前已经是全屏状态，则退出全屏
|
||||||
|
document.exitFullscreen();
|
||||||
|
} else {
|
||||||
|
// 否则，进入全屏
|
||||||
|
document.documentElement.requestFullscreen()
|
||||||
|
.catch(err => {
|
||||||
|
console.error('Error attempting to enable full-screen mode:', err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const option = shallowReactive({
|
||||||
|
dataset: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const getStyle = (radius: number) => {
|
||||||
|
return {
|
||||||
|
borderRadius: `${radius}px`,
|
||||||
|
overflow: 'hidden'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑更新
|
||||||
|
watch(
|
||||||
|
() => props.chartConfig.option.dataset,
|
||||||
|
(newData: any) => {
|
||||||
|
option.dataset = newData
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 预览更新
|
||||||
|
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
option.dataset = newData
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.Theme1{
|
||||||
|
position: relative;
|
||||||
|
.full-screen-btn {
|
||||||
|
border: #4396fd 1px solid;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 3px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
right: 9.6%;
|
||||||
|
color: #4396fd;
|
||||||
|
font-size: 14px;
|
||||||
|
.full-screen {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
3
src/packages/components/ThemesAndLayouts/Themes/index.ts
Normal file
3
src/packages/components/ThemesAndLayouts/Themes/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { Theme1Config } from './Theme1/index'
|
||||||
|
|
||||||
|
export default [Theme1Config]
|
||||||
3
src/packages/components/ThemesAndLayouts/index.ts
Normal file
3
src/packages/components/ThemesAndLayouts/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import Themes from './Themes'
|
||||||
|
|
||||||
|
export const ThemesAndLayoutsList = [...Themes]
|
||||||
11
src/packages/index.d.ts
vendored
11
src/packages/index.d.ts
vendored
@ -1,6 +1,7 @@
|
|||||||
import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
|
import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
|
||||||
import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||||
import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||||
|
import {CustomComponentsList} from "@/packages/components/CustomComponents/index";
|
||||||
|
|
||||||
export enum ChartFrameEnum {
|
export enum ChartFrameEnum {
|
||||||
// 支持 dataset 的 echarts 框架
|
// 支持 dataset 的 echarts 框架
|
||||||
@ -177,7 +178,9 @@ export enum PackagesCategoryEnum {
|
|||||||
INFORMATIONS = 'Informations',
|
INFORMATIONS = 'Informations',
|
||||||
PHOTOS = 'Photos',
|
PHOTOS = 'Photos',
|
||||||
ICONS = 'Icons',
|
ICONS = 'Icons',
|
||||||
DECORATES = 'Decorates'
|
DECORATES = 'Decorates',
|
||||||
|
THEMESANDLAYOUTS = 'ThemesAndLayouts',
|
||||||
|
CUSTOMCOMPONENTS = 'CustomComponents',
|
||||||
}
|
}
|
||||||
|
|
||||||
// 包分类名称
|
// 包分类名称
|
||||||
@ -187,7 +190,9 @@ export enum PackagesCategoryName {
|
|||||||
INFORMATIONS = '信息',
|
INFORMATIONS = '信息',
|
||||||
PHOTOS = '图片',
|
PHOTOS = '图片',
|
||||||
ICONS = '图标',
|
ICONS = '图标',
|
||||||
DECORATES = '小组件'
|
DECORATES = '小组件',
|
||||||
|
THEMESANDLAYOUTS = '主题',
|
||||||
|
CUSTOMCOMPONENTS = '自定义组件',
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取组件
|
// 获取组件
|
||||||
@ -204,4 +209,6 @@ export type PackagesType = {
|
|||||||
[PackagesCategoryEnum.PHOTOS]: ConfigType[]
|
[PackagesCategoryEnum.PHOTOS]: ConfigType[]
|
||||||
[PackagesCategoryEnum.ICONS]: ConfigType[]
|
[PackagesCategoryEnum.ICONS]: ConfigType[]
|
||||||
[PackagesCategoryEnum.DECORATES]: ConfigType[]
|
[PackagesCategoryEnum.DECORATES]: ConfigType[]
|
||||||
|
[PackagesCategoryEnum.THEMESANDLAYOUTS]: ConfigType[]
|
||||||
|
[PackagesCategoryEnum.CUSTOMCOMPONENTS]: ConfigType[]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,6 +4,8 @@ import { InformationList } from '@/packages/components/Informations/index'
|
|||||||
import { TableList } from '@/packages/components/Tables/index'
|
import { TableList } from '@/packages/components/Tables/index'
|
||||||
import { PhotoList } from '@/packages/components/Photos/index'
|
import { PhotoList } from '@/packages/components/Photos/index'
|
||||||
import { IconList } from '@/packages/components/Icons/index'
|
import { IconList } from '@/packages/components/Icons/index'
|
||||||
|
import { ThemesAndLayoutsList } from '@/packages/components/ThemesAndLayouts/index'
|
||||||
|
import { CustomComponentsList } from '@/packages/components/CustomComponents/index'
|
||||||
import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
|
import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
|
||||||
|
|
||||||
const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
|
const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
|
||||||
@ -23,7 +25,9 @@ export let packagesList: PackagesType = {
|
|||||||
[PackagesCategoryEnum.TABLES]: TableList,
|
[PackagesCategoryEnum.TABLES]: TableList,
|
||||||
[PackagesCategoryEnum.DECORATES]: DecorateList,
|
[PackagesCategoryEnum.DECORATES]: DecorateList,
|
||||||
[PackagesCategoryEnum.PHOTOS]: PhotoList,
|
[PackagesCategoryEnum.PHOTOS]: PhotoList,
|
||||||
[PackagesCategoryEnum.ICONS]: IconList
|
[PackagesCategoryEnum.ICONS]: IconList,
|
||||||
|
[PackagesCategoryEnum.THEMESANDLAYOUTS]: ThemesAndLayoutsList,
|
||||||
|
[PackagesCategoryEnum.CUSTOMCOMPONENTS]: CustomComponentsList,
|
||||||
}
|
}
|
||||||
|
|
||||||
// 组件缓存, 可以大幅度提升组件加载速度
|
// 组件缓存, 可以大幅度提升组件加载速度
|
||||||
|
|||||||
@ -103,9 +103,14 @@ import {
|
|||||||
Carbon3DSoftware as Carbon3DSoftwareIcon,
|
Carbon3DSoftware as Carbon3DSoftwareIcon,
|
||||||
Filter as FilterIcon,
|
Filter as FilterIcon,
|
||||||
FilterEdit as FilterEditIcon,
|
FilterEdit as FilterEditIcon,
|
||||||
Laptop as LaptopIcon
|
Laptop as LaptopIcon,
|
||||||
|
AreaCustom as AreaCustomIcon,
|
||||||
} from '@vicons/carbon'
|
} from '@vicons/carbon'
|
||||||
|
|
||||||
|
import {
|
||||||
|
Apps20Regular as Apps20RegularIcon
|
||||||
|
} from '@vicons/fluent'
|
||||||
|
|
||||||
const ionicons5 = {
|
const ionicons5 = {
|
||||||
// 新增
|
// 新增
|
||||||
AddIcon,
|
AddIcon,
|
||||||
@ -303,12 +308,20 @@ const carbon = {
|
|||||||
FilterIcon,
|
FilterIcon,
|
||||||
FilterEditIcon,
|
FilterEditIcon,
|
||||||
// 图层
|
// 图层
|
||||||
LaptopIcon
|
LaptopIcon,
|
||||||
|
// 自定义
|
||||||
|
AreaCustomIcon,
|
||||||
|
}
|
||||||
|
|
||||||
|
const fluent = {
|
||||||
|
// 主题
|
||||||
|
Apps20RegularIcon
|
||||||
}
|
}
|
||||||
|
|
||||||
// https://www.xicons.org/#/ 还有很多
|
// https://www.xicons.org/#/ 还有很多
|
||||||
|
|
||||||
export const icon = {
|
export const icon = {
|
||||||
ionicons5,
|
ionicons5,
|
||||||
carbon
|
carbon,
|
||||||
|
fluent
|
||||||
}
|
}
|
||||||
|
|||||||
@ -293,6 +293,7 @@ export const JSONStringify = <T>(data: T) => {
|
|||||||
|
|
||||||
export const evalFn = (fn: string) => {
|
export const evalFn = (fn: string) => {
|
||||||
var Fun = Function // 一个变量指向Function，防止前端编译工具报错
|
var Fun = Function // 一个变量指向Function，防止前端编译工具报错
|
||||||
|
console.log(fn)
|
||||||
return new Fun('return ' + fn)()
|
return new Fun('return ' + fn)()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -311,8 +312,10 @@ export const JSONParse = (data: string) => {
|
|||||||
}
|
}
|
||||||
// 还原函数值
|
// 还原函数值
|
||||||
if (typeof v === 'string' && v.indexOf && (v.indexOf('function') > -1 || v.indexOf('=>') > -1)) {
|
if (typeof v === 'string' && v.indexOf && (v.indexOf('function') > -1 || v.indexOf('=>') > -1)) {
|
||||||
|
console.log(k, v)
|
||||||
return evalFn(`(function(){return ${v}})()`)
|
return evalFn(`(function(){return ${v}})()`)
|
||||||
} else if (typeof v === 'string' && v.indexOf && v.indexOf('return ') > -1) {
|
} else if (typeof v === 'string' && v.indexOf && v.indexOf('return ') > -1) {
|
||||||
|
console.log(k, v)
|
||||||
const baseLeftIndex = v.indexOf('(')
|
const baseLeftIndex = v.indexOf('(')
|
||||||
if (baseLeftIndex > -1) {
|
if (baseLeftIndex > -1) {
|
||||||
const newFn = `function ${v.substring(baseLeftIndex)}`
|
const newFn = `function ${v.substring(baseLeftIndex)}`
|
||||||
@ -349,4 +352,4 @@ export const addWindowUnload = () => {
|
|||||||
return () => {
|
return () => {
|
||||||
window.onbeforeunload = null
|
window.onbeforeunload = null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -131,6 +131,7 @@ const dblclickHandle = async (item: ConfigType) => {
|
|||||||
chartEditStore.setTargetSelectChart(newComponent.id)
|
chartEditStore.setTargetSelectChart(newComponent.id)
|
||||||
loadingFinish()
|
loadingFinish()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
loadingError()
|
loadingError()
|
||||||
window['$message'].warning(`图表正在研发中, 敬请期待...`)
|
window['$message'].warning(`图表正在研发中, 敬请期待...`)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,7 +7,8 @@ import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
|
|||||||
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||||
// 图标
|
// 图标
|
||||||
const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon } = icon.ionicons5
|
const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon } = icon.ionicons5
|
||||||
const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
|
const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon, AreaCustomIcon } = icon.carbon
|
||||||
|
const { Apps20RegularIcon } = icon.fluent
|
||||||
|
|
||||||
// 图表
|
// 图表
|
||||||
export type MenuOptionsType = {
|
export type MenuOptionsType = {
|
||||||
@ -41,6 +42,14 @@ const packagesListObj = {
|
|||||||
[PackagesCategoryEnum.ICONS]: {
|
[PackagesCategoryEnum.ICONS]: {
|
||||||
icon: renderIcon(AirPlaneOutlineIcon),
|
icon: renderIcon(AirPlaneOutlineIcon),
|
||||||
label: PackagesCategoryName.ICONS
|
label: PackagesCategoryName.ICONS
|
||||||
|
},
|
||||||
|
[PackagesCategoryEnum.THEMESANDLAYOUTS]: {
|
||||||
|
icon: renderIcon(Apps20RegularIcon),
|
||||||
|
label: PackagesCategoryName.THEMESANDLAYOUTS
|
||||||
|
},
|
||||||
|
[PackagesCategoryEnum.CUSTOMCOMPONENTS]: {
|
||||||
|
icon: renderIcon(AreaCustomIcon),
|
||||||
|
label: PackagesCategoryName.CUSTOMCOMPONENTS
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -61,6 +70,13 @@ export const useAsideHook = () => {
|
|||||||
list: packagesStore.getPackagesList[val]
|
list: packagesStore.getPackagesList[val]
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
menuOptions.sort((a, b) => {
|
||||||
|
if(a.key === 'ThemesAndLayouts') return -1
|
||||||
|
else if(b.key === 'ThemesAndLayouts') return 1
|
||||||
|
if(a.key === 'CustomComponents') return -1
|
||||||
|
else if(b.key === 'CustomComponents') return 1
|
||||||
|
else return 0
|
||||||
|
})
|
||||||
}
|
}
|
||||||
handlePackagesList()
|
handlePackagesList()
|
||||||
|
|
||||||
|
|||||||
@ -92,7 +92,7 @@ $topHeight: 40px;
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 6px 12px !important;
|
padding: 6px 12px !important;
|
||||||
font-size: 14px !important;
|
font-size: 12px !important;
|
||||||
}
|
}
|
||||||
.n-menu-item-content__icon {
|
.n-menu-item-content__icon {
|
||||||
font-size: 18px !important;
|
font-size: 18px !important;
|
||||||
|
|||||||
@ -190,6 +190,8 @@ const rangeStyle = computed(() => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
console.log(chartEditStore.getComponentList)
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 键盘事件
|
// 键盘事件
|
||||||
useAddKeyboard()
|
useAddKeyboard()
|
||||||
|
|||||||
@ -26,6 +26,7 @@ export const getSessionStorageInfo = async () => {
|
|||||||
// 跳转未发布页
|
// 跳转未发布页
|
||||||
return { isRelease: false }
|
return { isRelease: false }
|
||||||
}
|
}
|
||||||
|
console.log(content)
|
||||||
const parseData = { ...JSONParse(content), id }
|
const parseData = { ...JSONParse(content), id }
|
||||||
const { editCanvasConfig, requestGlobalConfig, componentList } = parseData
|
const { editCanvasConfig, requestGlobalConfig, componentList } = parseData
|
||||||
chartEditStore.editCanvasConfig = editCanvasConfig
|
chartEditStore.editCanvasConfig = editCanvasConfig
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user