完善项目概览样式及增加暗色系配置

src/assets/project/project-icon2.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extra-Large备份-8" transform="translate(-1011, -404)">
+            <g id="编组" transform="translate(1011, 404)">
+                <circle id="椭圆形" fill="#8097B1" opacity="0.100000001" cx="16.5" cy="16.5" r="16.5"></circle>
+                <g id="项目信息" transform="translate(10, 10)" fill="#8C54FF" fill-rule="nonzero">
+                    <path d="M12.0891516,8.54637454 L8.32009605,8.54637454 C8.11440042,8.54592619 7.93337783,8.68019296 7.87667775,8.87526575 C7.6964334,9.50247419 7.11597804,9.93534846 6.45517793,9.93534846 C5.79437783,9.93534846 5.21392246,9.50247419 5.03367812,8.87526575 C4.97693753,8.68005181 4.79570347,8.5457494 4.58985962,8.54637454 L0.910848418,8.54637454 C0.407800727,8.54637454 0,8.94870312 0,9.44499787 L0,12.1013788 C0,12.5976736 0.407800727,13 0.910848418,13 L12.0891516,13 C12.5921993,13 13,12.5976736 13,12.1013788 L13,9.44499787 C13,8.94870312 12.5921993,8.54637454 12.0891516,8.54637454 L12.0891516,8.54637454 Z M8.55196097,1.12431817 L8.55196097,1.17431817 C8.41862763,1.14423687 8.41862763,1.13407427 8.55196097,1.12431817 C8.41862763,1.10439947 8.55196097,1.09423687 8.55196097,1.07431817 L8.55196097,1.12431817 Z" id="形状"></path>
+                    <path d="M11.4320281,0 L3.9355375,0 C3.66060214,0 3.43409063,0.251503371 3.43409063,0.551570188 L3.43409063,7.8412197 L5.42707179,7.8412197 C5.42707179,8.46069975 5.87849403,8.96370649 6.42796454,8.96370649 C6.98743997,8.96370649 7.42845709,8.46069975 7.42845709,7.8412197 L11.9322744,7.8412197 L11.9322744,0.551570188 C11.9322744,0.242027577 11.7065632,0 11.4320281,0 L11.4320281,0 Z M5.55073267,2.4479135 L9.8176333,2.4479135 C10.0217338,2.4479135 10.1734084,2.61295025 10.1818126,2.80720403 C10.1910171,3.00224746 10.0081271,3.16728421 9.8176333,3.16728421 L5.55113287,3.16728421 C5.34703239,3.16728421 5.19575791,3.00224746 5.18695358,2.80759886 C5.17814924,2.61255543 5.36063908,2.44830833 5.55113287,2.44830833 L5.55073267,2.4479135 Z M9.82203546,5.67836968 L5.55593523,5.67836968 C5.35143455,5.67836968 5.19975988,5.51372775 5.19135574,5.31907915 C5.18255141,5.12403572 5.36504125,4.95978862 5.55553503,4.95978862 L9.82203546,4.95978862 C10.0261359,4.95978862 10.1778106,5.12443054 10.1862148,5.31907915 C10.1954193,5.51372775 10.0129294,5.67836968 9.82203546,5.67836968 Z M1.81809506,1.12288161 L2.43479867,1.12288161 L2.43479867,7.84082488 L0.933659648,7.84082488 L0.933659648,1.9950495 C0.933659648,1.5133633 1.3298547,1.12248679 1.81809506,1.12248679 L1.81809506,1.12288161 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/project/project-icon3.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 5</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extra-Large备份-8" transform="translate(-87, -742)">
+            <g id="编组-5" transform="translate(87, 742)">
+                <g id="锅炉" transform="translate(9, 9)" fill="#EC4737" fill-rule="nonzero">
+                    <path d="M8,0 C3.58172,0 0,3.58172 0,8 C0,12.41828 3.58172,16 8,16 C12.41828,16 16,12.41828 16,8 C16,3.58172 12.41828,0 8,0 L8,0 Z M9.8214,13.7579 C10.98896,11.48324 10.1223,8.4146 8.09454,6.99728 C8.23056,7.60696 8.0607,9.19854 7.16376,10.19692 C7.3675,9.16396 6.85926,8.50388 6.85926,8.50388 C6.85926,8.50388 6.69226,9.43824 6.04658,10.38264 C5.45708,11.245 5.04822,12.1599 5.81552,13.75718 L5.8148,13.7586 C3.37174,12.38158 2.7282,11.07798 3.09602,9.29786 C3.36814,7.98342 4.37086,6.91378 4.4558,5.60152 C4.83516,6.29258 4.8805,6.7914 4.92296,7.51336 C6.13084,6.03344 7.38334,4.05246 7.11268,2.24138 C7.11268,2.24138 9.40244,2.9612 10.32888,6.47324 C10.87668,5.98592 10.82486,4.98318 10.5542,4.39076 C11.3669,4.9832 16.03422,10.24298 9.8214,13.7579 Z" id="形状"></path>
+                </g>
+                <circle id="椭圆形" fill="#8097B1" opacity="0.100000001" cx="16.5" cy="16.5" r="16.5"></circle>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/project/project-icon5.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="39px" height="39px" viewBox="0 0 39 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Base</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.100000001">
+        <g id="Extra-Large备份-8" transform="translate(-1040, -478)" fill="#8097B1">
+            <g id="编组-15" transform="translate(1012, 467)">
+                <circle id="Base" cx="47.1804788" cy="30.1804788" r="19"></circle>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/project/project-icon8.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Oval</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#4776E6" offset="0%"></stop>
+            <stop stop-color="#8E54E9" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-2" cx="24" cy="24" r="24"></circle>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extra-Large备份-8" transform="translate(-1319, -172)">
+            <g id="编组-8备份" transform="translate(1316, 169)">
+                <g id="Oval" transform="translate(3, 3)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                    <g id="Furnace-temperature-control" mask="url(#mask-3)" fill="#FFFFFF" fill-rule="nonzero">
+                        <g transform="translate(14, 14)">
+                            <path d="M19.9374218,10.979483 C19.9687109,11.0814188 19.9883187,11.1862319 19.9958281,11.2922781 L20,11.3987353 L20,18.3558567 C20,19.2319301 19.3027682,19.9541245 18.414685,19.9979281 L18.3312474,19.9999917 L7.9015436,19.9999917 C7.45146884,20.0019677 7.08090817,19.6518976 7.06402097,19.2087725 C7.04713377,18.7656473 7.39000681,18.3891853 7.83896537,18.3579119 L7.9015436,18.3558567 L18.3312474,18.3558567 L18.3308302,11.6137048 L18.2770129,11.6120607 C17.9543363,11.5889879 17.674245,11.3843018 17.5581977,11.0867622 L17.5381727,11.0283957 C17.4744866,10.8195825 17.497607,10.5943954 17.6024472,10.4023782 C17.7072874,10.210361 17.8852585,10.0672445 18.0972048,10.0045159 C18.8784836,9.77349026 19.7019879,10.2098908 19.9370046,10.979483 L19.9374218,10.979483 Z M9.96453901,12.4189158 C10.0660584,12.8372929 9.8230393,13.2620352 9.40717564,13.3930608 L9.34710054,13.409502 L7.67834793,13.8032703 C7.24225567,13.9053621 6.80221077,13.6497431 6.68176948,13.224365 C6.56132818,12.7989869 6.8035296,12.3558564 7.23028786,12.2207985 L7.29036295,12.2043573 L8.95911556,11.810589 C9.40724914,11.7050764 9.85736206,11.9774152 9.96453901,12.4189158 L9.96453901,12.4189158 Z" id="形状"></path>
+                            <path d="M7.40342094,3.96974945 C7.62437766,3.96974945 7.80695924,4.13961169 7.81977472,4.35694125 L8.71047142,19.5651118 C8.72376061,19.7916388 8.54822608,19.985925 8.31831456,19.9991612 L8.29370046,19.9999833 L0.416770964,19.9999833 C0.205267072,19.9999833 0.0272490827,19.8439939 0.00250312891,19.6370423 L0,19.5766207 L0.891113892,4.35653022 C0.904141373,4.13936275 1.08666279,3.96974945 1.30746767,3.96974945 L7.40342094,3.96974945 Z M6.2219441,5.613876 L2.48852733,5.613876 L1.74259491,18.3558567 L6.96787651,18.3558567 L6.2219441,5.613876 Z M8.52190238,0.00576034347 C8.81876538,-0.0290087619 9.11182253,0.095358696 9.29012515,0.331778363 C9.46842778,0.568198031 9.50472427,0.880535765 9.38527313,1.15054343 C9.26582199,1.42055109 9.00888,1.60696098 8.71172299,1.63920007 C8.27325824,1.68852386 8.06841886,1.81183336 7.97914059,2.00296307 C7.47642887,3.08151008 6.1656237,3.62160565 5.26241135,3.07986595 C4.87830944,2.85127807 4.7464995,2.36431823 4.96406252,1.9776433 C5.18162554,1.59096837 5.67063391,1.44307914 6.07092199,1.64289935 C6.09038449,1.64092509 6.10955793,1.63678849 6.12807676,1.6305684 L6.15978306,1.61864849 C6.28285357,1.56809159 6.3942428,1.46368956 6.46266166,1.31695126 C6.81935753,0.551610357 7.54526491,0.115916822 8.52190238,0.00576034347 L8.52190238,0.00576034347 Z" id="形状"></path>
+                            <path d="M4.76720901,0.00576034347 C5.06407201,-0.0290087619 5.35712916,0.095358696 5.53543179,0.331778363 C5.71373441,0.568198031 5.75003091,0.880535765 5.63057976,1.15054343 C5.51112862,1.42055109 5.25418663,1.60696098 4.95702962,1.63920007 C4.51856487,1.68852386 4.31372549,1.81183336 4.22444723,2.00296307 C3.7217355,3.08151008 2.41093033,3.62160565 1.50771798,3.07986595 C1.12361607,2.85127807 0.991806137,2.36431823 1.20936916,1.9776433 C1.42693217,1.59096837 1.91594055,1.44307914 2.31622862,1.64289935 C2.33569112,1.64092509 2.35486456,1.63678849 2.3733834,1.6305684 L2.4050897,1.61864849 C2.5281602,1.56809159 2.63954944,1.46368956 2.70796829,1.31695126 C3.06466416,0.551610357 3.79057155,0.115916822 4.76720901,0.00576034347 Z" id="路径"></path>
+                            <polygon id="路径" points="1.64372132 6.43593927 7.48435544 6.43593927 7.48435544 8.08006582 1.64372132 8.08006582"></polygon>
+                            <path d="M13.7421777,3.14768617 C14.894211,3.14768617 15.8281185,4.06781184 15.8281185,5.20284436 L15.8281185,9.62348961 C16.9343889,10.496144 17.3606774,11.9619739 16.8913263,13.2794219 C16.4219753,14.5968699 15.1593381,15.4786345 13.7421777,15.4786345 C12.3250174,15.4786345 11.0623802,14.5968699 10.5930291,13.2794219 C10.123678,11.9619739 10.5499665,10.496144 11.656237,9.62348961 L11.656237,5.20284436 C11.656237,4.06781184 12.5901445,3.14768617 13.7421777,3.14768617 L13.7421777,3.14768617 Z M13.7421777,4.38078108 C13.2813644,4.38078108 12.9078014,4.74883135 12.9078014,5.20284436 L12.9078014,10.3062132 C12.0022436,10.695506 11.497993,11.6572277 11.6998102,12.61013 C11.9016273,13.5630323 12.7541708,14.2458144 13.7421777,14.2458144 C14.7301847,14.2458144 15.5827281,13.5630323 15.7845453,12.61013 C15.9863624,11.6572277 15.4821118,10.695506 14.576554,10.3062132 L14.576554,5.20284436 C14.576554,4.74883135 14.202991,4.38078108 13.7421777,4.38078108 Z" id="形状"></path>
+                            <path d="M12.4906133,6.43593927 L13.7421777,6.43593927 C14.0203032,6.43593927 14.1593659,6.57294981 14.1593659,6.84697091 L14.1593659,6.84697091 C14.1593659,7.120992 14.0203032,7.25800254 13.7421777,7.25800254 L12.4906133,7.25800254 C12.2124878,7.25800254 12.0734251,7.120992 12.0734251,6.84697091 L12.0734251,6.84697091 C12.0734251,6.57294981 12.2124878,6.43593927 12.4906133,6.43593927 L12.4906133,6.43593927 Z" id="路径"></path>
+                            <path d="M12.4906133,8.08006582 L13.7421777,8.08006582 C14.0203032,8.08006582 14.1593659,8.21707636 14.1593659,8.49109745 L14.1593659,8.49109745 C14.1593659,8.76511854 14.0203032,8.90212909 13.7421777,8.90212909 L12.4906133,8.90212909 C12.2124878,8.90212909 12.0734251,8.76511854 12.0734251,8.49109745 L12.0734251,8.49109745 C12.0734251,8.21707636 12.2124878,8.08006582 12.4906133,8.08006582 L12.4906133,8.08006582 Z" id="路径"></path>
+                            <path d="M13.7421777,10.9572873 C14.4333977,10.9572873 14.9937422,11.5093627 14.9937422,12.1903822 C14.9937422,12.8714017 14.4333977,13.4234771 13.7421777,13.4234771 C13.0509578,13.4234771 12.4906133,12.8714017 12.4906133,12.1903822 C12.4906133,11.5093627 13.0509578,10.9572873 13.7421777,10.9572873 L13.7421777,10.9572873 Z M13.7421777,11.7793505 C13.5117711,11.7793505 13.3249896,11.9633757 13.3249896,12.1903822 C13.3249896,12.4173887 13.5117711,12.6014138 13.7421777,12.6014138 C13.9725844,12.6014138 14.1593659,12.4173887 14.1593659,12.1903822 C14.1593659,11.9633757 13.9725844,11.7793505 13.7421777,11.7793505 Z M11.8126825,15.9891366 C11.8990839,15.9209728 12.0094377,15.8894322 12.1194502,15.9014583 C12.2294626,15.9134843 12.3301149,15.9680912 12.3992491,16.0532575 C12.6837714,16.4038675 12.8894451,16.4683995 13.126408,16.3422127 L13.372549,16.2106826 L13.5352524,16.1272432 C13.6846058,16.0540796 13.8010013,16.008044 13.9328327,15.9706401 C14.114534,15.9212819 14.301756,15.8943586 14.4901961,15.890489 L14.6654151,15.8876118 L14.8635795,15.890489 L15.0876095,15.8995317 C15.2391436,15.9029848 15.3768547,15.987143 15.4473234,16.1193604 C15.5177921,16.2515777 15.5099301,16.4110498 15.4267871,16.535916 C15.3436441,16.6607821 15.1983027,16.7313944 15.0471423,16.7203619 L14.8585732,16.7129633 L14.7747184,16.7109081 L14.6241135,16.709675 L14.4947851,16.7133743 C14.3824439,16.7164346 14.270852,16.7324367 14.1622862,16.761054 C14.1207644,16.7727264 14.0799526,16.7867242 14.0400501,16.8029792 L13.9465999,16.8440824 L13.8335419,16.9003937 L13.5235711,17.0648064 C12.893617,17.4010302 12.2640801,17.202913 11.7476012,16.566636 C11.6038103,16.3894294 11.6329396,16.1309507 11.8126825,15.9891366 L11.8126825,15.9891366 Z" id="形状"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/chart/options.ts

@@ -1,5 +1,3 @@
-import { title } from "process";
-
 const fontFamily = 'CenturyGothic';
 
 function getPx(px: number) {
@@ -483,31 +481,12 @@ export function getBarRowOption({
   };
 }
 
-const defaultTooltip = {
-  trigger: 'axis',
-  appendToBody: true,
-  backgroundColor: '#082046',
-  borderColor: '#26689F',
-  textStyle: {
-    color: '#fff'
-  }
-}
-
-const defaultLegend = {
-  left: 'center',
-  top: 0,
-  appendToBody: true,
-  textStyle: {
-    color: '#fff',
-    fontSize: getPx(12)
-  },
-}
-
 export function getLineMultiOption({
   datas = [[12, 14, 0]] as any[],
   xAxis = ['4', '5', '6'] as any[],
   legend = [] as string[],
   dataZoom = [] as object[],
+  theme = 'light'
 }) {
 
   const series = datas.map((data, i) => {
@@ -515,56 +494,62 @@ export function getLineMultiOption({
       data,
       type: 'line',
       symbol: 'circle',
+      lineStyle: {
+        width: 1
+      },
       name: legend[i],
       smooth: true
     }
   })
 
   return {
-    tooltip: defaultTooltip,
+    tooltip: {
+      trigger: 'axis',
+    },
     legend: {
       data: legend,
-      ...defaultLegend
+      textStyle: {
+        color: theme === 'dark' ? '#9AAB99' : '#9EA5BD',
+      },
     },
-    grid: { top: getPx(30), bottom: 0, left: getPx(45), right: getPx(30), containLabel: true },
+    grid: { top: 25, bottom: 0, left: 30, right: 20, containLabel: true },
     xAxis: {
       type: 'category',
       data: xAxis,
       boundaryGap: false,
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: '#353E4E',
-          type: 'dashed',
-        }
-      },
       axisLine: {
         show: true,
         lineStyle: {
-          color: '#5D6771',
+          color: theme === 'dark' ? '#3D3D3D' : '#DDE1EE',
         }
       },
       axisTick: { show: false },
       axisLabel: {
         show: true,
-        fontSize: getPx(15),
-        color: '#CCE2F1'
+        fontSize: 12,
+        color: theme === 'dark' ? '#9AAB99' : '#9EA5BD'
       },
     },
     yAxis: {
       type: 'value',
-      splitLine: { show: false },
       axisLine: {
+        show: false,
+        lineStyle: {
+          color: theme === 'dark' ? '#3D3D3D' : '#9EA5BD',
+        }
+      },
+      splitLine: {
         show: true,
         lineStyle: {
-          color: '#5D6771'
+          color: theme === 'dark' ? '#3D3D3D' : '#DDE1EE',
+          type: 'dashed',
         }
       },
       axisTick: { show: false },
       axisLabel: {
         show: true,
-        fontSize: getPx(15),
-        color: '#CCE2F1'
+        fontSize: 12,
+        color: theme === 'dark' ? '#9AAB99' : '#9EA5BD'
       },
     },
     series,

src/views/iot/projects/screen/BaseinfoVue.vue

@@ -1,22 +1,29 @@
 <template>
-	<div class="select-device">
-		选择设备：
-		<el-select style="width: 15vw" v-model="deviceKey" @change="deviceChnage" placeholder="">
-			<el-option v-for="row in deviceList" :key="row.key" :label="row.name" :value="row.key"></el-option>
-		</el-select>
-	</div>
-	<section class="baseinfo" v-loading="loading">
-		<div class="flex-item" v-for="row in propertiyList" :key="row.devicePropertiyKey">
-			<div class="label">{{ row.devicePropertiyName }}</div>
-			<div class="val">
-				{{ row.devicePropertiyValue }}
-				<span class="unit" v-if="row.devicePropertiyUnit">{{ row.devicePropertiyUnit }}</span>
+	<div class="project-card">
+		<div class="select-device title flex-row">
+			<div class="flex">
+				<img src="/@/assets/project/project-icon2.svg" class="icon" />
+				基本信息
 			</div>
+			<el-select style="width: 15vw" v-model="deviceKey" @change="deviceChnage" placeholder="请选择">
+				<el-option v-for="row in deviceList" :key="row.key" :label="row.name" :value="row.key"></el-option>
+			</el-select>
+		</div>
+		<div class="baseinfo-wrapper" v-loading="loading">
+			<section class="baseinfo">
+				<div class="flex-item" v-for="row in propertiyList" :key="row.devicePropertiyKey">
+					<div class="label">{{ row.devicePropertiyName }}</div>
+					<div class="val">
+						{{ row.devicePropertiyValue }}
+						<span class="unit" v-if="row.devicePropertiyUnit">{{ row.devicePropertiyUnit }}</span>
+					</div>
+				</div>
+				<template v-if="propertiyList.length % 3">
+					<div class="flex-item space" v-for="i in 3 - (propertiyList.length % 3)" :key="i"></div>
+				</template>
+			</section>
 		</div>
-		<template v-if="propertiyList.length % 3">
-			<div class="flex-item space" v-for="i in 3 - (propertiyList.length % 3)" :key="i"></div>
-		</template>
-	</section>
+	</div>
 </template>
 <script setup lang="ts">
 import { ref, inject, watch, Ref } from 'vue'
@@ -78,54 +85,73 @@ function deviceChnage() {
 </script>
 
 <style lang="scss" scoped>
+.project-card {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
 .select-device {
 	display: flex;
 	align-items: center;
-	font-size: 1.5vh;
-	font-weight: 500;
 }
-
+.baseinfo-wrapper {
+	flex: 1;
+	overflow-y: auto;
+}
 .baseinfo {
-	background-size: 100% 100%;
-	margin-top: 1.5vh;
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
-	gap: 2vh;
-	height: 20vh;
-	overflow-y: auto;
+	gap: 10px;
 
 	.flex-item {
-		background-size: 100% 100%;
 		display: flex;
 		align-items: center;
+		justify-content: space-between;
 		flex: 1;
-		height: 3.5vh;
+		height: 40px;
 		max-width: 33%;
 		min-width: 30%;
-		text-indent: 1.1em;
-		font-size: 1.55vh;
+		font-size: 12px;
 		white-space: nowrap;
 		overflow: hidden;
+		border-radius: 4px;
+		border: 1px solid #e0e7ff;
+		font-weight: 500;
+		padding: 0 3%;
 
 		&.space {
 			background: none;
 		}
 
 		.label {
-			flex: 1;
+			color: #2e384d;
 		}
 
 		.val {
-			font-size: 2.2vh;
+			font-size: 15px;
 			font-weight: bold;
-			flex: 1;
+			color: #8798ad;
 
 			.unit {
 				font-weight: normal;
-				font-size: 1.4vh;
+				font-size: 12px;
 			}
 		}
 	}
 }
+[data-theme='dark'] {
+	.flex-item {
+		border: 1px solid #717171;
+	}
+	.label {
+		color: #a4a6ad !important;
+	}
+
+	.val {
+		color: #4285f5 !important;
+	}
+}
 </style>

src/views/iot/projects/screen/InfoVue.vue

@@ -1,38 +1,44 @@
 <template>
-	<div class="title">
-		选择项目：
-		<el-select style="width: 15vw" v-model="project" @change="projectChange" placeholder="">
-			<el-option v-for="row in projectList" :key="row.id" :label="row.name" :value="row.code"></el-option>
-		</el-select>
-	</div>
-	<section class="info">
-		<div class="info-content" v-if="projectData?.name">
-			<div class="flex-row">
-				<div class="flex-item">
-					<div class="label">项目名称：</div>
-					<div class="val">{{ projectData.name }}</div>
-				</div>
-				<div class="flex-item">
-					<div class="label">项目地址：</div>
-					<div class="val">{{ projectData.addressDetail }}</div>
-				</div>
+	<div class="project-card">
+		<div class="title flex-row">
+			<div class="flex">
+				<img src="/@/assets/project/project-icon1.svg" class="icon" />
+				项目信息
+			</div>
+			<el-select style="width: 15vw" v-model="project" @change="projectChange" placeholder="请选择">
+				<el-option v-for="row in projectList" :key="row.id" :label="row.name" :value="row.code"></el-option>
+			</el-select>
+		</div>
+		<div class="flex-row">
+			<div class="flex">
+				<div class="label">项目名称：</div>
+				<div class="val">{{ projectData?.name }}</div>
+			</div>
+			<div class="flex">
+				<div class="label">项目地址：</div>
+				<div class="val">{{ projectData?.addressDetail }}</div>
 			</div>
-			<div class="flex-row">
-				<div class="flex-item">
-					<div class="label">供热面积：</div>
-					<div class="val">{{ projectData.heatingArea }} ㎡</div>
+		</div>
+		<section class="info">
+			<div class="info-content">
+				<div class="count-card">
+					<img src="/@/assets/project/project-icon7.svg" class="icon" />
+					<div class="count">{{ projectData?.heatingArea }} <span class="unit">m²</span></div>
+					<div class="text">供热面积</div>
 				</div>
-				<div class="flex-item">
-					<div class="label">设备台数：</div>
-					<div class="val">{{ projectData.deviceCount }} 台</div>
+				<div class="count-card">
+					<img src="/@/assets/project/project-icon8.svg" class="icon" />
+					<div class="count">{{ projectData?.deviceCount }} <span class="unit">台</span></div>
+					<div class="text">设备台数</div>
 				</div>
-				<div class="flex-item">
-					<div class="label">维保电话：</div>
-					<div class="val">{{ projectData.repairMobile }}</div>
+				<div class="count-card">
+					<img src="/@/assets/project/project-icon9.svg" class="icon" />
+					<div class="count">{{ projectData?.repairMobile || '-' }}</div>
+					<div class="text">维保电话</div>
 				</div>
 			</div>
-		</div>
-	</section>
+		</section>
+	</div>
 </template>
 <script setup lang="ts">
 import { reactive, ref, inject, watch, Ref } from 'vue'
@@ -55,41 +61,67 @@ function projectChange(code: string) {
 </script>
 
 <style lang="scss" scoped>
-.title {
+.label {
 	color: var(--primary-color);
-	font-size: 1.5vh;
-	height: 4.2vh;
-	display: flex;
-	align-items: center;
-	font-weight: 500;
 }
 
-.info {
-	height: 11.2vh;
-	display: flex;
-	align-items: center;
+.val {
+	color: #8798ad;
+}
 
+.info {
+	margin-top: 10px;
 	.info-content {
-		flex: 1;
-		height: 9vh;
 		display: flex;
-		flex-flow: column nowrap;
-		justify-content: space-around;
-		font-size: 1.45vh;
+		justify-content: space-between;
+		gap: 20px;
 
-		.flex-item {
-			display: flex;
-			align-items: center;
+		.count-card {
+			padding: 2vh;
+			flex: 1;
+			.icon {
+				height: 5vh;
+			}
 
 			.label {
 				color: var(--primary-color);
 			}
 
-			.val {
-				font-size: 1.65vh;
-				font-weight: 500;
+			.count {
+				color: #2e384d;
+				font-size: 22px;
+				margin: 4px 0;
+			}
+			.text {
+				color: #8798ad;
+				font-size: 12px;
+			}
+			.unit {
+				font-size: 12px;
 			}
 		}
 	}
 }
+.count-card {
+	background: #ffffff;
+	border-radius: 1px;
+	border: 1px solid rgba(46, 91, 255, 0.08);
+	box-shadow: 0px 10px 20px 0px rgba(46, 91, 255, 0.07);
+}
+[data-theme='dark'] {
+	.count-card {
+		background: #1f1f1f;
+		border: 1px solid rgba(255, 255, 255, 0.02);
+	}
+	.count {
+		color: #3d7ade !important;
+	}
+	.label {
+		color: #8B8D92;
+	}
+
+	.val {
+		color: #4285F5;
+	}
+}
 </style>

src/views/iot/projects/screen/LineChart.vue

@@ -1,29 +1,36 @@
 <template>
-	<div class="select-device">
-		选择时间：
-		<el-date-picker
-			class="date-picker-wrap"
-			v-model="params.timeRange"
-			:clearable="false"
-			type="datetimerange"
-			range-separator="至"
-			start-placeholder="开始时间"
-			end-placeholder="结束时间"
-			format="MM-DD HH:mm"
-			value-format="YYYY-MM-DD HH:mm:00"
-			date-format="YYYY/MM/DD"
-			time-format="hh:mm"
-			@change="getChartData"
-			style="width: 12.5vw; margin-right: 1vw"
-		/>
-		选择参数：
-		<el-select style="width: 12vw" v-model="params.properties" multiple collapse-tags @change="getChartData" placeholder="">
-			<el-option v-for="row in options" :key="row.key" :label="row.name" :value="row.key"></el-option>
-		</el-select>
+	<div class="project-card">
+		<div class="select-device title">
+			<div class="flex">
+				<img src="/@/assets/project/project-icon4.svg" v-if="index" class="icon" />
+				<img src="/@/assets/project/project-icon3.svg" v-else class="icon" />
+				设备状态
+			</div>
+			<div class="flex">
+				<el-date-picker
+					class="date-picker-wrap"
+					v-model="params.timeRange"
+					:clearable="false"
+					type="datetimerange"
+					range-separator="至"
+					start-placeholder="开始时间"
+					end-placeholder="结束时间"
+					format="MM-DD HH:mm"
+					value-format="YYYY-MM-DD HH:mm:00"
+					date-format="YYYY/MM/DD"
+					time-format="hh:mm"
+					@change="getChartData"
+					style="width: 230px; margin-right: 10px"
+				/>
+				<el-select style="width: 150px" v-model="params.properties" multiple collapse-tags @change="getChartData" placeholder="请选择">
+					<el-option v-for="row in options" :key="row.key" :label="row.name" :value="row.key"></el-option>
+				</el-select>
+			</div>
+		</div>
+		<section class="line">
+			<Chart height="22.5vh" ref="chartRef"></Chart>
+		</section>
 	</div>
-	<section class="line">
-		<Chart height="22.5vh" ref="chartRef"></Chart>
-	</section>
 </template>
 <script setup lang="ts">
 import { onMounted, reactive, ref, watch } from 'vue'
@@ -31,6 +38,8 @@ import { getLineMultiOption } from '/@/components/chart/options'
 import Chart from '/@/components/chart/index.vue'
 import api from '/@/api/projects'
 import { dayjs } from 'element-plus'
+import { useStore } from '/@/store/index'
+const store = useStore()
 
 const props = defineProps({
 	index: {
@@ -45,12 +54,24 @@ const props = defineProps({
 
 let deviceCode = ''
 const chartRef = ref()
+const theme = ref('light')
 const options = ref<any[]>([])
 const params = reactive({
 	timeRange: [dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:00'), dayjs().format('YYYY-MM-DD HH:mm:00')],
 	properties: [] as string[],
 })
 
+watch(
+	() => store.state.themeConfig.themeConfig.isIsDark,
+	(isIsDark) => {
+		theme.value = isIsDark ? 'dark' : 'light'
+		if (params.properties.length) getChartData()
+	},
+	{
+		immediate: true,
+	}
+)
+
 watch(() => props.deviceKey!, getData)
 
 onMounted(() => {
@@ -104,6 +125,7 @@ function getChartData() {
 					datas: values.map((arr: any) => (arr || []).map((item: any) => item.dataValue)),
 					legend,
 					xAxis: (values[0] || []).map((item: any) => item.dataTime),
+					theme: theme.value,
 				})
 			)
 		})
@@ -116,8 +138,7 @@ function getChartData() {
 	display: flex;
 	align-items: center;
 	white-space: nowrap;
-	font-size: 1.5vh;
-	font-weight: 500;
+	justify-content: space-between;
 }
 
 .line {

src/views/iot/projects/screen/VideoVue.vue

@@ -10,7 +10,8 @@
 				<el-option label="组态" value="2"></el-option>
 			</el-select> -->
 				<div class="full-screent-icon" @click="fullScreen = true">
-					<el-icon color="#409eff"><ele-FullScreen /></el-icon>
+					<el-icon color="#409eff" size="18px"><ele-FullScreen /></el-icon>
+					<!-- <img src="/@/assets//project/full-screen.svg" style="height: 32px;" /> -->
 				</div>
 			</div>
 			<div class="video-content">
@@ -19,7 +20,7 @@
 				</template>
 			</div>
 			<el-dialog v-model="fullScreen" class="video-screen-dialog" fullscreen append-to-body>
-				<iframe v-if="fullScreen" :src="topoSrc" frameborder="0"></iframe>
+				<iframe v-if="fullScreen" :src="topoSrc" frameborder="0" style="height: calc(100vh - 75px)"></iframe>
 			</el-dialog>
 		</section>
 	</div>
@@ -67,41 +68,36 @@ iframe {
 	padding: 0;
 	overflow: hidden;
 }
+.project-card {
+	flex: 1;
+}
 
 .video {
-	height: 48.5vh;
+	height: 100%;
 	pointer-events: all;
 	background-size: 100% 100%;
 	background-repeat: no-repeat;
 	background-position: center;
+	display: flex;
+	flex-direction: column;
 
 	.video-content {
 		width: 100%;
-		height: 43vh;
+		flex: 1;
 		padding: 0 2px;
-		border-radius: 2vh;
-		margin-top: 1vh;
 		position: relative;
-
-		.full-screent-icon {
-			position: absolute;
-			right: 1.5vh;
-			top: -2.5vh;
-			width: 2vh;
-			height: 2vh;
-			color: var(--primary-color);
-			cursor: pointer;
-		}
 	}
 
 	.title {
 		color: var(--primary-color);
-		font-size: 1.7vh;
-		height: 4.2vh;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 
+		.full-screent-icon {
+			color: var(--primary-color);
+			cursor: pointer;
+		}
 		.label {
 			font-weight: 500;
 		}

src/views/iot/projects/screen/index.vue

@@ -3,7 +3,7 @@ import LineChart from './LineChart.vue'
 import VideoVue from './VideoVue.vue'
 import InfoVue from './InfoVue.vue'
 import BaseinfoVue from './BaseinfoVue.vue'
-import { provide, ref, nextTick } from 'vue'
+import { provide, ref } from 'vue'
 import api from '/@/api/projects'
 
 const projectCode = ref('')
@@ -29,17 +29,17 @@ api.screen
 </script>
 
 <template>
-	<section class="container">
+	<el-form class="container" size="small">
 		<div class="part">
 			<VideoVue :projectList="projectList" @change="projectCode = $event"></VideoVue>
-			<LineChart :deviceKey="deviceKey" index="0"></LineChart>
+			<LineChart :deviceKey="deviceKey" :index="0"></LineChart>
 		</div>
 		<div class="part">
 			<InfoVue :projectList="projectList" @change="projectCode = $event"></InfoVue>
 			<BaseinfoVue @change="deviceKey = $event"></BaseinfoVue>
-			<LineChart :deviceKey="deviceKey" index="1"></LineChart>
+			<LineChart :deviceKey="deviceKey" :index="1"></LineChart>
 		</div>
-	</section>
+	</el-form>
 </template>
 
 <style lang="scss" scoped>
@@ -49,24 +49,30 @@ api.screen
 	justify-content: space-between;
 	height: 100%;
 	overflow: hidden;
-	gap: 1.3vw;
-	margin-top: 1.7vh;
-  ::v-deep(.project-card) {
-    background-color: #fff;
-    padding: 15px 20px;
-    border-radius: 10px;
-  }
+	gap: 15px;
+	::v-deep(.project-card) {
+		background-color: var(--el-color-white) !important;
+		padding: 15px 20px;
+		border-radius: 6px;
+		.title {
+			font-size: 14px;
+			font-weight: 500;
+			margin-bottom: 12px;
+			.icon {
+				height: 28px;
+				margin-right: 8px;
+			}
+		}
+	}
 
 	.part {
 		flex: 1;
 		display: flex;
 		flex-flow: column nowrap;
 		justify-content: space-between;
-		gap: var(--gap);
 		z-index: 10;
 		overflow: hidden;
-		margin-bottom: 8.5vh;
-		overflow: hidden;
+		gap: 15px;
 	}
 }
 </style>