压缩的图片

psdc-ui/src/assets/font/stylesheet.css

@@ -0,0 +1,60 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on June 4, 2023 */
+
+
+
+@font-face {
+    font-family: 'ds-digitalnormal';
+    src: url('ds-digi-webfont.woff2') format('woff2'),
+         url('ds-digi-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'ds-digitalbold';
+    src: url('ds-digib-webfont.woff2') format('woff2'),
+         url('ds-digib-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'ds-digitalitalic';
+    src: url('ds-digii-webfont.woff2') format('woff2'),
+         url('ds-digii-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'ds-digitalbold_italic';
+    src: url('ds-digit-webfont.woff2') format('woff2'),
+         url('ds-digit-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'ds-digitalnormal';
+    src: url('ds-digi-webfont.woff2') format('woff2'),
+         url('ds-digi-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}

psdc-ui/src/views/bigview/index.vue

@@ -44,15 +44,15 @@
       <div class="middle">
         <div class="middle_top">
           <div class="now_power">
-              <div class="data">{{ nowPower }}kW</div>
+            <div class="data"><span class="screenNumber">{{ nowPower }}</span>kW</div>
               <div class="bg_img"></div>
               <div class="txt">当前功率</div>
             </div>
           <div class="my3D_img">
-            <img src="../../assets/images/3Dimg.png" alt="">
+            <img src="../../assets/images/3Dimg1.png" alt="">
           </div>
           <div class="now_ele">
-              <div class="data">{{ nowEle }}kWh</div>
+            <div class="data"><span class="screenNumber">{{ nowEle }}</span>kWh</div>
               <div class="bg_img"></div>
               <div class="txt">总用电量</div>
             </div>
@@ -66,7 +66,7 @@
             <div class="item" v-for="item in wdcgqArr" :key="item.deviceId">
               <div class="dev_name">{{ item.deviceName }}</div>
               <div class="line"></div>
-              <div class="data">{{ item.deviceTemp}}℃</div>
+              <div class="data"><span class="screenNumber">{{ item.deviceTemp}}</span>℃</div>
             </div>
           </div>
         </div>
@@ -258,12 +258,27 @@ function dcglChartFun(){
       data: ["进水温度","出水温度"],
       // selectedMode: 'single',
       textStyle: {
-        color: "#f3ffff"
+        color: "#b6bee7"
       }
     },
     tooltip: {
       trigger: "axis",
-      // formatter: "{b0}： {c0}℃",
+      formatter: function(params) {
+        var result = params[0].name + '<br>';  // 获取横轴数据项名称
+        for (var i = 0; i < params.length; i++) {
+          var seriesName = params[i].seriesName;  // 获取系列名称
+          var value = params[i].value;  // 获取数据值
+          // result += seriesName + ': ' + '<strong>'+value+'</strong>' + '℃<br>';  // 拼接字符串
+          if (i === 0) {  // 第一个系列名称设置为蓝色
+            result += '<span>' + '<span style="color: #128dff">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
+          } else if (i === 1) {  // 第二个系列名称设置为黄色
+            result += '<span>' + '<span style="color: #F5901A">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
+          } else {  // 其他系列名称使用默认颜色
+            result += seriesName + ': ' + value + ' m/s<br>';
+          }
+        }
+        return result;
+      },
       // borderColor: '#00fcff',
       borderWidth: 1
     },
@@ -273,7 +288,7 @@ function dcglChartFun(){
       bottom:'15%',
       left:'10%',
       right:'3%',
-      borderWidth: 1,
+      borderWidth: 0,
       borderColor: '#767da1',
     },
     xAxis: {
@@ -281,7 +296,7 @@ function dcglChartFun(){
       data: dcglTimeList.value,
       axisLabel: {
         textStyle: {
-          color: "#f3ffff"
+          color: "#b6bee7"
         }
       },
       axisLine: {
@@ -290,10 +305,10 @@ function dcglChartFun(){
         }
       },
       axisTick: {
-        show: false // 去掉x轴刻度
+        show: true // 去掉x轴刻度
       },
       splitArea: {
-        show: true,
+        show: false,
         interval:0,
         areaStyle: {
           color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
@@ -305,17 +320,17 @@ function dcglChartFun(){
       type: 'value',
       name:'℃',
       nameTextStyle: {
-        color: "#f3ffff",
+        color: "#b6bee7",
         nameLocation: "start"
       },
       axisLabel: {
         textStyle: {
-          color: "#f3ffff"
+          color: "#b6bee7"
         }
       },
       splitLine: {
         show: true,
-        lineStyle: {color: "#767da1", type: "solid"} //dashed
+        lineStyle: {color: "#767da1", type: "dashed"} //dashed
       } //s是否显示为虚线的条纹背景
     },
     series: [
@@ -351,12 +366,27 @@ function xrglChartFun(){
       data: ["进水温度","出水温度"],
       // selectedMode: 'single',
       textStyle: {
-        color: "#f3ffff"
+        color: "#b6bee7"
       }
     },
     tooltip: {
       trigger: "axis",
-      // formatter: "{b0}： {c0}℃",
+      formatter: function(params) {
+        var result = params[0].name + '<br>';  // 获取横轴数据项名称
+        for (var i = 0; i < params.length; i++) {
+          var seriesName = params[i].seriesName;  // 获取系列名称
+          var value = params[i].value;  // 获取数据值
+          // result += seriesName + ': ' + '<strong>'+value+'</strong>' + '℃<br>';  // 拼接字符串
+          if (i === 0) {  // 第一个系列名称设置为蓝色
+            result += '<span>' + '<span style="color: #128dff">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
+          } else if (i === 1) {  // 第二个系列名称设置为黄色
+            result += '<span>' + '<span style="color: #F5901A">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
+          } else {  // 其他系列名称使用默认颜色
+            result += seriesName + ': ' + value + ' m/s<br>';
+          }
+        }
+        return result;
+      },
       // borderColor: '#00fcff',
       borderWidth: 1
     },
@@ -366,7 +396,7 @@ function xrglChartFun(){
       bottom:'15%',
       left:'10%',
       right:'3%',
-      borderWidth: 1,
+      borderWidth: 0,
       borderColor: '#767da1',
     },
     xAxis: {
@@ -374,7 +404,7 @@ function xrglChartFun(){
       data: xrglTimeList.value,
       axisLabel: {
         textStyle: {
-          color: "#f3ffff"
+          color: "#b6bee7"
         }
       },
       axisLine: {
@@ -383,10 +413,10 @@ function xrglChartFun(){
         }
       },
       axisTick: {
-        show: false // 去掉x轴刻度
+        show: true // 去掉x轴刻度
       },
       splitArea: {
-        show: true,
+        show: false,
         interval:0,
         areaStyle: {
           color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
@@ -398,17 +428,17 @@ function xrglChartFun(){
       type: 'value',
       name:'℃',
       nameTextStyle: {
-        color: "#f3ffff",
+        color: "#b6bee7",
         nameLocation: "start"
       },
       axisLabel: {
         textStyle: {
-          color: "#f3ffff"
+          color: "#b6bee7"
         }
       },
       splitLine: {
         show: true,
-        lineStyle: {color: "#767da1", type: "solid"} //dashed
+        lineStyle: {color: "#767da1", type: "dashed"} //dashed
       } //s是否显示为虚线的条纹背景
     },
     series: [
@@ -444,12 +474,27 @@ function kqyrbChartFun(){
       data: ["进水温度","出水温度"],
       // selectedMode: 'single',
       textStyle: {
-        color: "#f3ffff"
+        color: "#b6bee7"
       }
     },
     tooltip: {
       trigger: "axis",
-      // formatter: "{b0}： {c0}℃",
+      formatter: function(params) {
+        var result = params[0].name + '<br>';  // 获取横轴数据项名称
+        for (var i = 0; i < params.length; i++) {
+          var seriesName = params[i].seriesName;  // 获取系列名称
+          var value = params[i].value;  // 获取数据值
+          // result += seriesName + ': ' + '<strong>'+value+'</strong>' + '℃<br>';  // 拼接字符串
+          if (i === 0) {  // 第一个系列名称设置为蓝色
+            result += '<span>' + '<span style="color: #128dff">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
+          } else if (i === 1) {  // 第二个系列名称设置为黄色
+            result += '<span>' + '<span style="color: #F5901A">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
+          } else {  // 其他系列名称使用默认颜色
+            result += seriesName + ': ' + value + ' m/s<br>';
+          }
+        }
+        return result;
+      },
       // borderColor: '#00fcff',
       borderWidth: 1
     },
@@ -459,7 +504,7 @@ function kqyrbChartFun(){
       bottom:'15%',
       left:'10%',
       right:'3%',
-      borderWidth: 1,
+      borderWidth: 0,
       borderColor: '#767da1',
     },
     xAxis: {
@@ -467,7 +512,7 @@ function kqyrbChartFun(){
       data: kqyrbTimeList.value,
       axisLabel: {
         textStyle: {
-          color: "#f3ffff"
+          color: "#b6bee7"
         }
       },
       axisLine: {
@@ -476,10 +521,10 @@ function kqyrbChartFun(){
         }
       },
       axisTick: {
-        show: false // 去掉x轴刻度
+        show: true // 去掉x轴刻度
       },
       splitArea: {
-        show: true,
+        show: false,
         interval:0,
         areaStyle: {
           color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
@@ -491,17 +536,17 @@ function kqyrbChartFun(){
       type: 'value',
       name:'℃',
       nameTextStyle: {
-        color: "#f3ffff",
+        color: "#b6bee7",
         nameLocation: "start"
       },
       axisLabel: {
         textStyle: {
-          color: "#f3ffff"
+          color: "#b6bee7"
         }
       },
       splitLine: {
         show: true,
-        lineStyle: {color: "#767da1", type: "solid"} //dashed
+        lineStyle: {color: "#767da1", type: "dashed"} //dashed
       } //s是否显示为虚线的条纹背景
     },
     series: [
@@ -537,12 +582,27 @@ function frdlChartFun(){
       data: ["当前温度"],
       // selectedMode: 'single',
       textStyle: {
-        color: "#f3ffff"
+        color: "#b6bee7"
       }
     },
     tooltip: {
       trigger: "axis",
-      // formatter: "{b0}： {c0}℃",
+      formatter: function(params) {
+        var result = params[0].name + '<br>';  // 获取横轴数据项名称
+        for (var i = 0; i < params.length; i++) {
+          var seriesName = params[i].seriesName;  // 获取系列名称
+          var value = params[i].value;  // 获取数据值
+          // result += seriesName + ': ' + '<strong>'+value+'</strong>' + '℃<br>';  // 拼接字符串
+          if (i === 0) {  // 第一个系列名称设置为蓝色
+            result += '<span>' + '<span style="color: #128dff">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
+          } else if (i === 1) {  // 第二个系列名称设置为黄色
+            result += '<span>' + '<span style="color: #F5901A">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>℃<br>';
+          } else {  // 其他系列名称使用默认颜色
+            result += seriesName + ': ' + value + ' m/s<br>';
+          }
+        }
+        return result;
+      },
       // borderColor: '#00fcff',
       borderWidth: 1
     },
@@ -552,7 +612,7 @@ function frdlChartFun(){
       bottom:'15%',
       left:'10%',
       right:'3%',
-      borderWidth: 1,
+      borderWidth: 0,
       borderColor: '#767da1',
     },
     xAxis: {
@@ -560,7 +620,7 @@ function frdlChartFun(){
       data: frdlTimeList.value,
       axisLabel: {
         textStyle: {
-          color: "#f3ffff"
+          color: "#b6bee7"
         }
       },
       axisLine: {
@@ -569,10 +629,10 @@ function frdlChartFun(){
         }
       },
       axisTick: {
-        show: false // 去掉x轴刻度
+        show: true // 去掉x轴刻度
       },
       splitArea: {
-        show: true,
+        show: false,
         interval:0,
         areaStyle: {
           color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
@@ -584,17 +644,17 @@ function frdlChartFun(){
       type: 'value',
       name:'℃',
       nameTextStyle: {
-        color: "#f3ffff",
+        color: "#b6bee7",
         nameLocation: "start"
       },
       axisLabel: {
         textStyle: {
-          color: "#f3ffff"
+          color: "#b6bee7"
         }
       },
       splitLine: {
         show: true,
-        lineStyle: {color: "#767da1", type: "solid"} //dashed
+        lineStyle: {color: "#767da1", type: "dashed"} //dashed
       } //s是否显示为虚线的条纹背景
     },
     series: [
@@ -640,12 +700,21 @@ function dqglChartFun(){
       data: ["当前功率"],
       // selectedMode: 'single',
       textStyle: {
-        color: "#f3ffff"
+        color: "#b6bee7"
       }
     },
     tooltip: {
       trigger: "axis",
-      formatter: "{b0}： {c0}kW",
+      // formatter: "{b0}： {c0}kW",
+      formatter: function(params) {
+        var result = params[0].name + '<br>';  // 获取横轴数据项名称
+        for (var i = 0; i < params.length; i++) {
+          var seriesName = params[i].seriesName;  // 获取系列名称
+          var value = params[i].value;  // 获取数据值
+          result += '<span>' + '<span style="color: #128dff">'+seriesName+'</span>' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<strong>'+value+'</strong>' + '</span>kW<br>';
+        }
+        return result;
+      },
       // borderColor: '#00fcff',
       borderWidth: 1
     },
@@ -655,7 +724,7 @@ function dqglChartFun(){
       bottom:'15%',
       left:'10%',
       right:'3%',
-      borderWidth: 1,
+      borderWidth: 0,
       borderColor: '#767da1',
     },
     xAxis: {
@@ -687,7 +756,7 @@ function dqglChartFun(){
         "23:15", "23:30", "23:45",],
       axisLabel: {
         textStyle: {
-          color: "#f3ffff"
+          color: "#b6bee7"
         }
       },
       axisLine: {
@@ -696,10 +765,10 @@ function dqglChartFun(){
         }
       },
       axisTick: {
-        show: false // 去掉x轴刻度
+        show: true // 去掉x轴刻度
       },
       splitArea: {
-        show: true,
+        show: false,
         interval:0,
         areaStyle: {
           color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
@@ -711,17 +780,17 @@ function dqglChartFun(){
       type: 'value',
       name:'kW',
       nameTextStyle: {
-        color: "#f3ffff",
+        color: "#b6bee7",
         nameLocation: "start"
       },
       axisLabel: {
         textStyle: {
-          color: "#f3ffff"
+          color: "#b6bee7"
         }
       },
       splitLine: {
         show: true,
-        lineStyle: {color: "#767da1", type: "solid"} //dashed
+        lineStyle: {color: "#767da1", type: "dashed"} //dashed
       } //是否显示为虚线的条纹
     },
     series: [
@@ -764,6 +833,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="scss">
+@import "@/assets/font/stylesheet.css";
 .home{
   height: 100%;
   background-image: url("../../assets/images/bg.png");
@@ -995,6 +1065,7 @@ onBeforeUnmount(() => {
     p{
       font-size: 16px;
       line-height: 40px;
+      color: #f3ffff;
     }
     .green{
       color: #14FF00;
@@ -1029,6 +1100,10 @@ onBeforeUnmount(() => {
 .bgimg{
   background-image: url("../../assets/images/wrapperbox.png");
   background-size: 100% 100%;
+  //background-color: rgba(32,237,255,.1);
+}
+.screenNumber{
+  font-family: 'ds-digitalnormal';
 }
 </style>