feat: 首页改版

src/views/analyse/WaterView.vue

@@ -216,7 +216,6 @@ const handleOpenContent = async ({ id, category, reason:title }) => {
     warnKey: '报警值',
     statusVal: !!warningActive.value ? '系统关闭' : basic['状态']
   });
-  console.log( "csData", csData );
   jsTableData.value = [jsData];
   csTableData.value = [csData];
 

src/views/carbon/components/TheModalTable.vue

@@ -71,7 +71,6 @@ const formatTime = (timestamp) => {
 const handleQueryList = async() => {
   const [ timeBegin, timeEnd ] = formatTime(timeArr.value);
   const [ hsTimeBegin, hsTimeEnd ] = formatTime(hsTimeArr.value);
-  console.log( hsTimeArr.value );
 
   const { rows, total: allTotal } = await carbonApi.getTableList({ ...formData.value, timeBegin, timeEnd, hsTimeBegin, hsTimeEnd })
 

src/views/screen/ScreenView.vue

@@ -46,7 +46,6 @@ const getLeastShortReport = () => {
 // 获取大屏分析数据
 const getRealTimeData = () => {
   screenApi.realTimeData().then(res => {
-    console.log(res.data);
     screenData.value = res.data
     dataTime.value = `更新时间：${res.data.testHour}`
     time.value = dayjs(res.data.timestamp).format('HH:mm:ss')
@@ -83,12 +82,12 @@ changeSize();
 init()
 
 onMounted(() => {
-  // autofit.init({
-  //   dw: 1920,
-  //   dh: 1080,
-  //   el:"#screen-view",
-  //   resize: true,
-  // })
+  autofit.init({
+    dw: 1920,
+    dh: 1080,
+    el:"#screen-view",
+    resize: true,
+  })
 
   window.addEventListener('resize', changeSize, false);
 
@@ -115,7 +114,7 @@ onBeforeUnmount(() => {
         <span class="line"></span>
         <div class="date">
           <div>{{ dayjs(screenData.timestamp).format("dddd") }}</div>
-          <div class="text-[1.2rem]">{{ dayjs(screenData.timestamp).format('YYYY-MM-DD') }}</div>
+          <div class="text-[12px]">{{ dayjs(screenData.timestamp).format('YYYY-MM-DD') }}</div>
         </div>
       </div>
       <div class="chat-header flex items-center justify-end pr-[18px] space-x-[16px]">
@@ -133,16 +132,12 @@ onBeforeUnmount(() => {
         <div class="left">
           <WaterYield :screenData="screenData"></WaterYield>
           <WaterQuality :screenData="screenData"></WaterQuality>
-          <!-- <shuizhi :screenData="screenData"></shuizhi>
-          <EchartBar :screenData="screenData"></EchartBar>
-          <liuliang :screenData="screenData"></liuliang> -->
         </div>
         <div class="middle">
           <middleBox :dataTime="dataTime"></middleBox>
         </div>
         <div class="right">
           <ContinueData :screenData="screenData"></ContinueData>
-          <!-- <ControlHelper></ControlHelper> -->
           <dataBox :reportData="reportData"></dataBox>
           <gongyi :gongyiData="gongyiData"></gongyi>
         </div>
@@ -155,8 +150,7 @@ onBeforeUnmount(() => {
 .screen-view {
   position: relative;
   display: flex;
-  justify-content: center;
-  // justify-content: flex-start;
+  justify-content: space-around;
   flex-flow: column;
   width: 100vw;
   height: 100vh;
@@ -171,28 +165,29 @@ onBeforeUnmount(() => {
     display: flex;
     align-items: end;
     justify-content: space-between;
-    height: 9rem;
-    padding: 0 5rem;
+    height: 90px;
+    padding: 0 50px;
 
     .left {
       display: flex;
       align-items: center;
-      font-size: 1.6rem;
+      font-size: 16px;
     }
 
     .time {
-      width: 14rem;
-      font-size: 3.6rem;
+      width: 150px;
+      font-size: 36px;
       font-weight: bold;
+      text-align: left;
       color: #333;
     }
 
     .line {
-      margin: 0 1rem 0 1rem;
+      margin: 0 10px 0 10px;
       display: inline-block;
       background: #767C82;
-      height: 2.8rem;
-      width: 0.2rem;
+      height: 28px;
+      width: 2px;
     }
 
     .date {
@@ -206,12 +201,11 @@ onBeforeUnmount(() => {
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    height: 6.8rem;
-    margin: 4rem 0;
+    height: 68px;
 
     .item {
-      width: 21.8rem;
-      height: 5.2rem;
+      width: 218px;
+      height: 52px;
       display: inline-block;
       font-size: 0;
     }
@@ -257,9 +251,8 @@ onBeforeUnmount(() => {
     position: relative;
     display: flex;
     flex-flow: column;
-    padding: 0 6rem;
+    padding: 0 60px;
     z-index: 2;
-    // height: 80rem;
 
     &-main {
       position: relative;
@@ -292,8 +285,6 @@ onBeforeUnmount(() => {
 @media screen and (max-width: 1440px) {
   .screen-view {
     justify-content: center;
-    // background: url(@/assets/images/home/home_bg.png) center top no-repeat;
-    // background-size: contain;
   }
 }
 </style>
@@ -302,8 +293,6 @@ onBeforeUnmount(() => {
 .home-box {
   width: 54rem;
   border-radius: 0.8rem;
-  // border: 1px solid #fff;
-  // margin-bottom: 2rem;
 
   &-top {
     padding: 0.7rem 2.4rem 0.7rem 1.2rem;

src/views/screen/components/ContinueData.vue

@@ -86,7 +86,7 @@ const getLineOptions = ({xAxisData, seriesData}) => {
         itemWidth: 8,
         y: 'top',
         x: 'right',
-        textStyle: {fontSize: '1.2rem', color: '#415B73'},
+        textStyle: {fontSize: '12px', color: '#415B73'},
         data: ['1#好氧池硝酸盐', '1#缺氧氨氮', '二沉池正磷酸盐']  
       },
       {
@@ -96,7 +96,7 @@ const getLineOptions = ({xAxisData, seriesData}) => {
       itemWidth: 8,
       y: '8%',
       x: 'right',
-      textStyle: {fontSize: '1.2rem', color: '#415B73'},
+      textStyle: {fontSize: '12px', color: '#415B73'},
       data: ['2#好氧池硝酸盐', '2#缺氧氨氮',]  
     }
     ],
@@ -106,7 +106,7 @@ const getLineOptions = ({xAxisData, seriesData}) => {
       axisLabel: {
         interval: 'auto',
         show: true,
-        fontSize: '1.1rem',
+        fontSize: '11px',
         color: "#0A284E",
       },
       axisLine: {
@@ -128,7 +128,7 @@ const getLineOptions = ({xAxisData, seriesData}) => {
       type: "value",
       axisLabel: {
         show: true,
-        fontSize: '1.2rem',
+        fontSize: '12px',
         color: "#7395B3"
       },
       axisLine: {
@@ -190,20 +190,20 @@ onUnmounted(() => {
   <LayoutCard title="连续检测数据">
     <template #headerRight>
       <ul>
-        <li :class="['btn', activeIndex == 0 ? 'action' : '']" @click="onChangeTab(0)">进水</li>
-        <li :class="['btn', activeIndex == 1 ? 'action' : '']" @click="onChangeTab(1)">出水</li>
+        <li :class="['btn', activeIndex == 0 ? 'action' : '']" @click="onChangeTab(0)">当前</li>
+        <li :class="['btn', activeIndex == 1 ? 'action' : '']" @click="onChangeTab(1)">近7日</li>
       </ul>
     </template>
     <div class="main-container">
       <div class="echart-card">
         <div class="title" v-show="activeIndex == 0">
           <span></span>
-          <ul class="tabs space-x-[1.8rem]">
-            <li class="item space-x-[0.6rem]">
+          <ul class="tabs space-x-[18px]">
+            <li class="item space-x-[6px]">
               <span class="square-icon border-[#FF6737]"><i class="bg-[#FF6737]"></i></span>
               <span>当前值</span>
             </li>
-            <li class="item space-x-[0.6rem]">
+            <li class="item space-x-[6px]">
               <span class="square-icon border-[#00AB84]"><i class="bg-[#00AB84]"></i></span>
               <span>标准值</span>
             </li>
@@ -219,13 +219,14 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .main-container {
   width: 100%;
-  height: 22rem;
+  height: 236px;
+
   .echart-card {
     display: flex;
     flex-flow: column;
     height: 100%;
     color: #415B73;
-    font-size: 1.2rem;
+    font-size: 12px;
     font-weight: bold;
 
     .title {
@@ -233,7 +234,7 @@ onUnmounted(() => {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding:0rem 0 1.2rem 0;
+      padding: 0px 0 12px 0;
 
       .tabs {
         display: flex;
@@ -242,7 +243,7 @@ onUnmounted(() => {
           display: flex;
           align-items: center;
           justify-content: center;
-          font-size: 1.2rem;
+          font-size: 12px;
 
           .square-icon {
             display: inline-block;
@@ -253,8 +254,8 @@ onUnmounted(() => {
 
             i {
               display: block;
-              width: 0.8rem;
-              height: 0.8rem;
+              width: 8px;
+              height: 8px;
             }
           }
         }
@@ -267,34 +268,34 @@ onUnmounted(() => {
 }
 
 .btn {
-    width: 6.2rem;
-    height: 2.8rem;
-    background: rgba(238, 249, 255, 1);
-    border: 0.1rem solid rgba(122, 215, 249, 1);
-    float: left;
-    border-radius: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    color: rgba(84, 194, 248, 1);
-    font-size: 1.4rem;
-
-    &:first-child {
-      border-right: 0;
-      border-top-left-radius: 0.4rem;
-      border-bottom-left-radius: 0.4rem;
-    }
+  width: 62px;
+  height: 28px;
+  background: rgba(238, 249, 255, 1);
+  border: 1px solid rgba(122, 215, 249, 1);
+  float: left;
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: rgba(84, 194, 248, 1);
+  font-size: 14px;
 
-    &:last-child {
-      border-left: 0;
-      border-top-right-radius: 0.4rem;
-      border-bottom-right-radius: 0.4rem;
-    }
+  &:first-child {
+    border-right: 0;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
   }
-  .action, .btn:hover {
-    background: linear-gradient(270deg, #59CCFA 0%, #3C97F7 100%);
-    border: none;
-    color: #fff;
+
+  &:last-child {
+    border-left: 0;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
   }
+}
+.action, .btn:hover {
+  background: linear-gradient(270deg, #59CCFA 0%, #3C97F7 100%);
+  border: none;
+  color: #fff;
+}
 </style>

src/views/screen/components/LayoutCard.vue

@@ -23,43 +23,43 @@ defineProps({
 
 <style lang="scss" scoped>
 .layout-card {
-  width: 54rem;
+  width: 540px;
   .header {
-    padding: .7rem 2.4rem .7rem 1.2rem;
+    padding: 12px 12px 8px 12px;
     display: flex;
     justify-content: space-between;
     position: relative;
     align-items: center;
     &::after {
       content: '';
-      height: 0.2rem;
+      height: 2px;
       background: url('@/assets/images/home/line.png') no-repeat;
       background-size: 100% 100%;
       width: 100%;
       position: absolute;
-      left: 1.2rem;
+      left: 12px;
       bottom: 0;
     }
 
     .header-left {
-      font-size: 1.8rem;
+      font-size: 18px;
       display: flex;
       align-items: center;
       font-family: YouSheBiaoTiHei;
       color: #1A2029;
       &::before {
         content: '';
-        width: 2rem;
-        height: 2rem;
+        width: 20px;
+        height: 20px;
         background: url('@/assets/images/home/mark.png') no-repeat;
         background-size: cover;
-        margin-right: 0.8rem;
+        margin-right: 8px;
         display: inline-block;
       }
     }
   }
   .layout-main {
-    padding: 1.8rem 1rem 1.2rem 1.2rem;
+    padding: 18px 12px 12px 12px;
   }
 }
 </style>

src/views/screen/components/WaterQuality.vue

@@ -69,7 +69,7 @@ const createEchart = ({ xAxisData, seriesData, chart, title }) => {
       text: title,
       left: '0',
       textStyle: {
-        fontSize: '1.2rem',
+        fontSize: '12px',
         color: '#415B73'
       },
     },
@@ -79,14 +79,14 @@ const createEchart = ({ xAxisData, seriesData, chart, title }) => {
       itemWidth: 8,
       y: 'top',
       x: 'right',
-      textStyle: {fontSize: '1.2rem', color: '#415B73'}
+      textStyle: {fontSize: '12px', color: '#415B73'}
     },
     xAxis: {
       type: "category",
       data: xAxisData,
       axisLabel: {
         show: true,
-        fontSize: '1.2rem',
+        fontSize: '12px',
         color: "#0A284E",
 
       },
@@ -108,7 +108,7 @@ const createEchart = ({ xAxisData, seriesData, chart, title }) => {
       type: "value",
       axisLabel: {
         show: true,
-        fontSize: '1.2rem',
+        fontSize: '12px',
         color: "#7395B3"
       },
       axisLine: {
@@ -141,20 +141,20 @@ watchEffect(() => {
   } = props.screenData;
 
   inWater.value = [
-    { label: 'COD', standardValue: formatDecimals(jsCod), currentValue: formatDecimals(jscodSjz) },
-    { label: 'NH3-N', standardValue: formatDecimals(jsNh3), currentValue: formatDecimals(jsadSjz) },
-    { label: 'TN', standardValue: formatDecimals(jsTn), currentValue: formatDecimals(jszdSjz) },
-    { label: 'TP', standardValue: formatDecimals(jsTp), currentValue: formatDecimals(jszlSjz) },
-    { label: 'SS', standardValue: formatDecimals(jsSs), currentValue: formatDecimals(jsssSjz) },
-    { label: 'PH值', standardValue: '6-9', currentValue: formatDecimals(jsPh) }
+    { label: 'COD', standardValue: formatDecimals(jscodSjz), currentValue: formatDecimals(jsCod), isExceed: jsCod > jscodSjz },
+    { label: 'NH3-N', standardValue: formatDecimals(jsadSjz), currentValue: formatDecimals(jsNh3), isExceed: jsNh3 > jsadSjz },
+    { label: 'TN', standardValue: formatDecimals(jszdSjz), currentValue: formatDecimals(jsTn), isExceed: jsTn > jszdSjz },
+    { label: 'TP', standardValue: formatDecimals(jszlSjz), currentValue: formatDecimals(jsTp), isExceed: jsTp > jszlSjz },
+    { label: 'SS', standardValue: formatDecimals(jsssSjz), currentValue: formatDecimals(jsSs), isExceed: jsSs > jsssSjz },
+    { label: 'PH值', standardValue: '6-9', currentValue: formatDecimals(jsPh), isExceed: jsPh > 6 && jsPh < 9 }
   ],
   outWater.value = [
-    { label: 'COD', standardValue: formatDecimals(csCod), currentValue: formatDecimals(cscodBzz) },
-    { label: 'NH3-N', standardValue: formatDecimals(csNh3), currentValue: formatDecimals(csadBzz) },
-    { label: 'TN', standardValue: formatDecimals(csTn), currentValue: formatDecimals(cszzBzz) },
-    { label: 'TP', standardValue: formatDecimals(csTp), currentValue: formatDecimals(cszlBzz) },
-    { label: 'SS', standardValue: formatDecimals(csSs), currentValue: formatDecimals(csssBzz) },
-    { label: 'PH值', standardValue: '6-9', currentValue: formatDecimals(csPh) }
+    { label: 'COD', standardValue: formatDecimals(cscodBzz), currentValue: formatDecimals(csCod), isExceed: csCod > cscodBzz },
+    { label: 'NH3-N', standardValue: formatDecimals(csadBzz), currentValue: formatDecimals(csNh3), isExceed: csNh3 > csadBzz },
+    { label: 'TN', standardValue: formatDecimals(cszzBzz), currentValue: formatDecimals(csTn), isExceed: csTn > cszzBzz},
+    { label: 'TP', standardValue: formatDecimals(cszlBzz), currentValue: formatDecimals(csTp), isExceed: csTp > cszlBzz },
+    { label: 'SS', standardValue: formatDecimals(csssBzz), currentValue: formatDecimals(csSs), isExceed: csSs > csssBzz },
+    { label: 'PH值', standardValue: '6-9', currentValue: formatDecimals(csPh), isExceed: csPh < 6 || csPh > 9 }
   ]
 })
 
@@ -207,10 +207,10 @@ onUnmounted(() => {
 <template>
   <LayoutCard title="水质数据">
     <div class="main-container">
-      <div class="count-card mb-[1rem]">
+      <div class="count-card mb-[10px]">
         <div class="count-num_inner">
           <p class="title">今日<br>进水</p>
-          <ul class="num-group flex space-x-[0.4rem]">
+          <ul class="num-group flex space-x-[4px]">
             <template v-for="item, index in inWater" :key="item.label">
               <n-tooltip placement="top" trigger="hover">
                 <template #trigger>
@@ -219,7 +219,7 @@ onUnmounted(() => {
                     <span class="num">{{ item.currentValue }} <i v-if="index != inWater.length - 1">mg/L</i></span>
                   </li>
                 </template>
-                <ul class="text-bold text-[#fff] text-[1.2rem] leading-[1.8rem]">
+                <ul class="text-bold text-[#fff] text-[12px] leading-[18px]">
                   <li>当前值：{{ item.currentValue }} <i v-if="index != inWater.length - 1">mg/L</i></li>
                   <li>标准值：{{ item.standardValue }} <i v-if="index != inWater.length - 1">mg/L</i></li>
                 </ul>
@@ -231,7 +231,7 @@ onUnmounted(() => {
       <div class="count-card">
         <div class="count-num_inner">
           <p class="title">今日<br>出水</p>
-          <ul class="num-group flex space-x-[0.4rem]">
+          <ul class="num-group flex space-x-[4px]">
             <template v-for="item, index in outWater" :key="item.label">
               <n-tooltip placement="top" trigger="hover">
                 <template #trigger>
@@ -240,8 +240,8 @@ onUnmounted(() => {
                     <span class="num">{{ item.currentValue }} <i v-if="index != inWater.length - 1">mg/L</i></span>
                   </li>
                 </template>
-                <ul class="text-bold text-[#fff] text-[1.2rem] leading-[1.8rem]">
-                  <li>当前值：{{ item.currentValue }} <i v-if="index != inWater.length - 1">mg/L</i></li>
+                <ul class="text-bold text-[#fff] text-[12px] leading-[18px]">
+                  <li :style="{color: item.isExceed ? 'red' : '#fff'}">当前值：{{ item.currentValue }} <i v-if="index != inWater.length - 1">mg/L</i></li>
                   <li>标准值：{{ item.standardValue }} <i v-if="index != inWater.length - 1">mg/L</i></li>
                 </ul>
               </n-tooltip>
@@ -263,7 +263,7 @@ onUnmounted(() => {
             </li>
           </ul>
         </div> -->
-        <div class="echart-inner mb-[1.4rem]" ref="echartJsRef"></div>
+        <div class="echart-inner mb-[14px]" ref="echartJsRef"></div>
         <div class="echart-inner" ref="echartCsRef"></div>
       </div>
     </div>
@@ -276,7 +276,7 @@ onUnmounted(() => {
 
   .count-card {
     width: 100%;
-    height: 6.2rem;
+    height: 62px;
     padding: 4px;
     background: url('@/assets/images/workbench/bg-square-line.png') center center no-repeat;
     background-size: 100% 100%;
@@ -284,7 +284,7 @@ onUnmounted(() => {
     .count-num_inner {
       width: 100%;
       height: 100%;
-      padding: 0.6rem 0.6rem;
+      padding: 6px 6px;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -294,25 +294,25 @@ onUnmounted(() => {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 4.8rem;
+        width: 48px;
         height: 100%;
         color: #3C97F7;
         text-align: center;
         font-family: "DingTalk JinBuTi";
-        font-size: 1.2rem;
+        font-size: 12px;
         letter-spacing: 0.12px;
-        line-height: 1.6rem;
+        line-height: 16px;
         border-radius: 2px;
         background: linear-gradient(180deg, #99D7FF 0%, rgba(255, 255, 255, 0.00) 100%);
       }
 
       .num-group {
         display: grid;
-        grid-template-columns: repeat(6, minmax(5.8rem, 1fr));
-        gap: 1rem;
+        grid-template-columns: repeat(6, minmax(58px, 1fr));
+        gap: 10px;
         width: 100%;
         height: 100%;
-        padding-left: 0.9rem;
+        padding-left: 9px;
         cursor: pointer;
 
         .item {
@@ -321,16 +321,17 @@ onUnmounted(() => {
 
           .label {
             color: #0A284E;
-            font-size: 1.2rem;
+            font-size: 12px;
             font-weight: bold;
-            line-height: 1.6rem;
+            line-height: 16px;
           }
 
           .num {
+            height: 12px;
             color: #415B73;
             text-align: center;
-            font-size: 1.0rem;
-            line-height: 1.4rem;
+            font-size: 10px;
+            line-height: 14px;
           }
 
           &:hover {
@@ -344,7 +345,7 @@ onUnmounted(() => {
 
   .echart-card {
     color: #415B73;
-    font-size: 1.2rem;
+    font-size: 12px;
     font-weight: bold;
     padding-top: 1.4rem;
 
@@ -352,7 +353,7 @@ onUnmounted(() => {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 1.4rem 0 1.2rem 0;
+      padding: 14px 0 12px 0;
 
       .tabs {
         display: flex;
@@ -361,7 +362,7 @@ onUnmounted(() => {
           display: flex;
           align-items: center;
           justify-content: center;
-          font-size: 1.2rem;
+          font-size: 12px;
 
           .square-icon {
             display: inline-block;
@@ -372,8 +373,8 @@ onUnmounted(() => {
 
             i {
               display: block;
-              width: 0.8rem;
-              height: 0.8rem;
+              width: 8px;
+              height: 8px;
             }
           }
         }
@@ -381,7 +382,7 @@ onUnmounted(() => {
     }
 
     .echart-inner {
-      height: 14rem;
+      height: 160px;
     }
   }
 }

src/views/screen/components/WaterYield.vue

@@ -41,7 +41,7 @@ const initEchart = () => {
         axisLabel: {
           interval: 0,
           show: true,
-          fontSize: '1.2rem',
+          fontSize: '12px',
           color: "#0A284E",
         },
         axisLine: {
@@ -63,7 +63,7 @@ const initEchart = () => {
         type: "value",
         axisLabel: {
           show: true,
-          fontSize: '1.2rem',
+          fontSize: '12px',
           color: "#7395B3",
 
         },
@@ -177,7 +177,7 @@ onUnmounted(() => {
         <div class="count-num_inner">
           <span class="count-title">今日累计出水水量</span>
           <div class="count-value">
-            <ul class="num-group flex space-x-[0.4rem]">
+            <ul class="num-group flex space-x-[4px]">
               <li class="item" v-for="item, index in waterYield" :key="index"><span class="num">{{ item }}</span></li>
             </ul>
             <span class="unit">m³</span>
@@ -187,12 +187,12 @@ onUnmounted(() => {
       <div class="echart-card">
         <div class="title">
           <span>进出水·流量分析</span>
-          <ul class="tabs space-x-[1.8rem]">
-            <li class="item space-x-[0.6rem]">
+          <ul class="tabs space-x-[18px]">
+            <li class="item space-x-[6px]">
               <span class="square-icon border-[#9fcbf2]"><i class="bg-[#5faeeb]"></i></span>
               <span>出水</span>
             </li>
-            <li class="item space-x-[0.6rem]">
+            <li class="item space-x-[6px]">
               <span class="square-icon border-[#f4e28c]"><i class="bg-[#eed056]"></i></span>
               <span>出水</span>
             </li>
@@ -207,11 +207,11 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .main-container {
   width: 100%;
-  height: 22rem;
+  overflow: hidden;
 
   .count-card {
     width: 100%;
-    height: 6.2rem;
+    height: 62px;
     padding: 4px;
     background: url('@/assets/images/workbench/bg-square-line.png') center center no-repeat;
     background-size: 100% 100%;
@@ -219,7 +219,7 @@ onUnmounted(() => {
     .count-num_inner {
       width: 100%;
       height: 100%;
-      padding: 0 2rem;
+      padding: 0 20px;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -228,7 +228,7 @@ onUnmounted(() => {
       .count-title {
         color: #1A2029;
         text-align: center;
-        font-size: 1.4rem;
+        font-size: 14px;
         font-weight: bold;
         letter-spacing: 0.14px;
       }
@@ -243,7 +243,7 @@ onUnmounted(() => {
           color: #FFF;
           text-align: center;
           font-family: D-DIN-PRO-700-Bold;
-          font-size: 3rem;
+          font-size: 30px;
           font-weight: bold;
           letter-spacing: 0.3px;
 
@@ -252,14 +252,15 @@ onUnmounted(() => {
             display: flex;
             align-items: center;
             justify-content: center;
-            width: 2.8rem;
-            height: 3.8rem;
+            width: 28px;
+            height: 38px;
             border-radius: 4px 4px 4px 4px;
             background: #377BF8;
 
             .num {
               position: relative;
               z-index: 1;
+              line-height: normal;
             }
 
             &::before {
@@ -275,11 +276,11 @@ onUnmounted(() => {
         }
 
         .unit {
-          margin-left: 0.8rem;
+          margin-left: 8px;
           color: #4C8BFF;
           text-align: center;
           font-family: D-DIN-PRO;
-          font-size: 2rem;
+          font-size: 20px;
           font-weight: bold;
         }
       }
@@ -287,12 +288,8 @@ onUnmounted(() => {
   }
 
   .echart-card {
-    display: flex;
-    flex-direction: column;
-    // flex: 1;
-    height: calc(100% - 6.2rem);
     color: #415B73;
-    font-size: 1.2rem;
+    font-size: 12px;
     font-weight: bold;
 
     .title {
@@ -300,7 +297,8 @@ onUnmounted(() => {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 1.4rem 0 1.2rem 0;
+      padding: 14px 0 12px 0;
+      font-weight: bold;
 
       .tabs {
         display: flex;
@@ -309,7 +307,8 @@ onUnmounted(() => {
           display: flex;
           align-items: center;
           justify-content: center;
-          font-size: 1.2rem;
+          font-size: 12px;
+          font-weight: normal;
 
           .square-icon {
             display: inline-block;
@@ -320,15 +319,16 @@ onUnmounted(() => {
 
             i {
               display: block;
-              width: 0.8rem;
-              height: 0.8rem;
+              width: 8px;
+              height: 8px;
             }
           }
         }
       }
     }
     .echart-inner {
-      flex: 1;
+      height: 130px;
+      // flex: 1;
     }
   }
 }

src/views/screen/components/dataBox.vue

@@ -1,4 +1,5 @@
 <script setup>
+import LayoutCard from './LayoutCard.vue';
 import ChatText from '@/components/Chat/ChatText.vue';
 defineProps({
   reportData: {
@@ -6,32 +7,28 @@ defineProps({
     default: {}
   },
 })
-const content = '① 因房地产市场并不十分活跃和顺利运转，因此难以得到可靠的数据。 ② 需运用大量统计和计量经济学方法收集和处理大量数据。③ 环境变量可能难以度量。④ 价值评估的结果依赖于函数形式和估算技术，因此函数的界定很重要。 ⑤ 财产的价格可能会反映人们对未来房地产市场的期望。① 因房地产市场并不十分活跃和顺利运转，因此难以得到可靠的数据。 ② 需运用大量统计和计量经济学方法收集和处理大量数据。③ 环境变量可能难以度量。④ 价值评估的结果依赖于函数形式和估算技术，因此函数的界定很重要。 ⑤ 财产的价格可能会反映人们对未来房地产市场的期望。① 因房地产市场并不十分活跃和顺利运转，因此难以得到可靠的数据。 ② 需运用大量统计和计量经济学方法收集和处理大量数据。③ 环境变量可能难以度量。④ 价值评估的结果依赖于函数形式和估算技术，因此函数的界定很重要。 ⑤ 财产的价格可能会反映人们对未来房地产市场的期望。'
 </script>
 
 <template>
-  <div class="home-box data-box">
-    <div class="home-box-top">
-      <div class="title">数据分析</div>
-      <div class="flex items-center space-x-[0.4rem] text-[#333333]">
-        <RouterLink to="/work-order" class="flex items-center space-x-[0.4rem] text-[1.6rem]">
-          <span>更多</span>
-          <svg width="1.5rem" height="2rem" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd"
-              d="M14.5303 10L4.53033 0L2.84959 1.68074L11.1688 10L2.84959 18.3193L4.53033 20L14.5303 10ZM7.39954 10L2.1534 4.75386L0.472656 6.4346L4.03805 10L0.472656 13.5654L2.1534 15.2461L7.39954 10Z"
-              fill="url(#paint0_linear_1909_2940)" />
-            <defs>
-              <linearGradient id="paint0_linear_1909_2940" x1="14.5303" y1="10" x2="-0.817942" y2="10.5941"
-                gradientUnits="userSpaceOnUse">
-                <stop stop-color="#1872D8" />
-                <stop offset="0.43028" stop-color="#08AEF1" />
-                <stop offset="1" stop-color="white" />
-              </linearGradient>
-            </defs>
-          </svg>
-        </RouterLink>
-      </div>
-    </div>
+  <LayoutCard title="数据分析" class="data-box">
+    <template #headerRight>
+      <RouterLink to="/work-order" class="flex items-center space-x-[4px] text-[14px]">
+        <span>更多</span>
+        <svg width="1.5rem" height="2rem" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M14.5303 10L4.53033 0L2.84959 1.68074L11.1688 10L2.84959 18.3193L4.53033 20L14.5303 10ZM7.39954 10L2.1534 4.75386L0.472656 6.4346L4.03805 10L0.472656 13.5654L2.1534 15.2461L7.39954 10Z"
+            fill="url(#paint0_linear_1909_2940)" />
+          <defs>
+            <linearGradient id="paint0_linear_1909_2940" x1="14.5303" y1="10" x2="-0.817942" y2="10.5941"
+              gradientUnits="userSpaceOnUse">
+              <stop stop-color="#1872D8" />
+              <stop offset="0.43028" stop-color="#08AEF1" />
+              <stop offset="1" stop-color="white" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </RouterLink>
+    </template>
     <div class="data-box-main">
       <div class="content">
         <h5 class="title">{{ reportData.showVal }}</h5>
@@ -40,27 +37,22 @@ const content = '① 因房地产市场并不十分活跃和顺利运转，因
         </div>
       </div>
     </div>
-  </div>
+  </LayoutCard>
 </template>
 
 <style scoped lang="scss">
 .data-box {
-  .home-box-top {
-    .title {
-      font-weight: 400;
-      font-family: YouSheBiaoTiHei;
-      color: #1A2029;
-    }
-  }
   &-main {
-    padding: 1.8rem 2.5rem 1.6rem 4rem;
+    padding: 18px 25px 16px 40px;
     display: flex;
     align-items: center;
     flex-direction: column;
 
     .content {
+      width: 100%;
       .markdown-inner {
-        height: 16rem;
+        width: 100%;
+        height: 160px;
         overflow-y: scroll;
 
         &::-webkit-scrollbar-track {
@@ -68,21 +60,14 @@ const content = '① 因房地产市场并不十分活跃和顺利运转，因
         }
       }
 
-      // .markdown-body{
-      //   &::-webkit-scrollbar {
-      //     width: 0px !important;
-      //   }
-      // }
       .title {
-        margin-bottom: 1.6rem;
-        font-size: 1.6rem;
+        margin-bottom: 16px;
+        font-size: 16px;
         font-weight: bold;
       }
 
       .html-box {
-        // height: 22.6rem;
-        // overflow-y: auto;
-        font-size: 1.4rem;
+        font-size: 14px;
       }
 
       .markdown-body {
@@ -91,24 +76,24 @@ const content = '① 因房地产市场并不十分活跃和顺利运转，因
     }
 
     .btn {
-      width: 12.4rem;
-      height: 4.4rem;
+      width: 124px;
+      height: 44px;
       background: linear-gradient(270deg, #59CCFA 0%, #3C97F7 100%);
-      font-size: 1.6rem;
+      font-size: 16px;
       font-weight: 500;
       color: #fff;
-      border-radius: 0.4rem;
+      border-radius: 4px;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-top: 2rem;
+      margin-top: 20px;
     }
   }
 }
 </style>
 
-<style >
+<style>
 .data-box .data-box-main .content .markdown-body .custom-table-wrapper {
-  width: 45rem !important;
+  width: 450px !important;
 }
 </style>

src/views/screen/components/gongyi.vue

@@ -1,11 +1,14 @@
 <script setup>
 import { useRouter } from 'vue-router';
+import LayoutCard from './LayoutCard.vue';
+
 defineProps({
   gongyiData: {
     type: Array,
     default: []
-  },
+  }
 })
+
 const router = useRouter()
 const types = ['水质报警', '生化报警', '预测报警']
 const toGongyi = (item) => {
@@ -15,25 +18,25 @@ const toGongyi = (item) => {
 </script>
 
 <template>
-  <div class="home-box gongyi">
-    <div class="home-box-top">
-      <div class="title">工艺管控助手</div>
-      <div class="flex items-center space-x-[0.4rem] text-[#333333]">
-        <RouterLink to="/water-warn" class="flex items-center space-x-[0.4rem] text-[1.6rem]">
-          <span>更多</span>
-          <svg width="1.5rem" height="2rem" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 10L4.53033 0L2.84959 1.68074L11.1688 10L2.84959 18.3193L4.53033 20L14.5303 10ZM7.39954 10L2.1534 4.75386L0.472656 6.4346L4.03805 10L0.472656 13.5654L2.1534 15.2461L7.39954 10Z" fill="url(#paint0_linear_1909_2940)"/>
-            <defs>
-            <linearGradient id="paint0_linear_1909_2940" x1="14.5303" y1="10" x2="-0.817942" y2="10.5941" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#1872D8"/>
-            <stop offset="0.43028" stop-color="#08AEF1"/>
-            <stop offset="1" stop-color="white"/>
+  <LayoutCard title="工艺管控助手">
+    <template #headerRight>
+      <RouterLink to="/water-warn" class="flex items-center space-x-[0.4rem] text-[14px]">
+        <span>更多</span>
+        <svg width="1.5rem" height="2rem" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M14.5303 10L4.53033 0L2.84959 1.68074L11.1688 10L2.84959 18.3193L4.53033 20L14.5303 10ZM7.39954 10L2.1534 4.75386L0.472656 6.4346L4.03805 10L0.472656 13.5654L2.1534 15.2461L7.39954 10Z"
+            fill="url(#paint0_linear_1909_2940)" />
+          <defs>
+            <linearGradient id="paint0_linear_1909_2940" x1="14.5303" y1="10" x2="-0.817942" y2="10.5941"
+              gradientUnits="userSpaceOnUse">
+              <stop stop-color="#1872D8" />
+              <stop offset="0.43028" stop-color="#08AEF1" />
+              <stop offset="1" stop-color="white" />
             </linearGradient>
-            </defs>
-          </svg>
-        </RouterLink>
-      </div>
-    </div>
+          </defs>
+        </svg>
+      </RouterLink>
+    </template>
     <div class="gongyi-wrap">
       <div class="gongyi-wrap-top gongyi-wrap-item">
         <span>告警类型</span>
@@ -48,80 +51,68 @@ const toGongyi = (item) => {
         </li>
       </ul>
     </div>
-  </div>
+  </LayoutCard>
 </template>
 
 <style scoped lang="scss">
-.gongyi {
-  // height: 36.4rem;
-  // margin-top: 2rem;
-  
-  .home-box-top {
-    .title {
-      font-weight: 400;
-      font-family: YouSheBiaoTiHei;
-      color: #1A2029;
-    }
+.gongyi-wrap {
+  padding: 12px;
+
+  &-top {
+    background: rgba(10, 139, 207, 0.12);
+    font-size: 14px;
+    color: #1A2029;
+    font-weight: bold;
   }
-  .gongyi-wrap {
-    padding: 1.2rem;
 
-    &-top {
-      background: rgba(10, 139, 207, 0.12);
-      font-size: 1.4rem;
-      color: #1A2029;
-      font-weight: bold;
-    }
+  &-list {
+    height: 100px;
+    overflow-y: auto;
 
-    &-list {
-      height: 13rem;
-      overflow-y: auto;
-      
-      &::-webkit-scrollbar {
-          width: 0px !important;
-        }
+    &::-webkit-scrollbar {
+      width: 0px !important;
     }
+  }
 
-    &-item {
-      margin-bottom: 1rem;
-      padding: 1rem 1.2rem;
-      display: flex;
-      line-height: 1.4rem;
-      background: rgba(10, 139, 207, 0.06);
-      justify-content: space-between;
-      align-items: center;
-      color: rgba(65, 91, 115, 1);
-      cursor: pointer;
-      font-size: 1.4rem;
-
-      span {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        word-break: break-all;
-        white-space: nowrap;
-      }
-
-      >span {
-        flex: 1;
-      }
+  &-item {
+    margin-bottom: 10px;
+    padding: 10px 12px;
+    display: flex;
+    line-height: 14px;
+    background: rgba(10, 139, 207, 0.06);
+    justify-content: space-between;
+    align-items: center;
+    color: rgba(65, 91, 115, 1);
+    cursor: pointer;
+    font-size: 14px;
 
-      >span:nth-child(2) {
-        text-align: center;
-      }
+    span {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      word-break: break-all;
+      white-space: nowrap;
+    }
 
-      >span:last-child {
-        text-align: right;
-      }
+    >span {
+      flex: 1;
     }
 
-    .warning,
-    &-item:hover {
-      color: #F0727A;
+    >span:nth-child(2) {
+      text-align: center;
     }
 
-    &-top:hover {
-      color: #1A2029;
+    >span:last-child {
+      text-align: right;
     }
   }
+
+  .warning,
+  &-item:hover {
+    color: #F0727A;
+  }
+
+  &-top:hover {
+    color: #1A2029;
+  }
 }
 </style>

src/views/screen/components/middleBox.vue

@@ -32,24 +32,24 @@ onMounted(() => {
     left: 50%;
     transform: translate(-50%, -50%);
     width: 116rem;
-    height: calc(100% - 6rem);
+    height: calc(100% - 60px);
     z-index: 1;
   }
 
   &-button {
     position: absolute;
     width: 100%;
-    height: 6rem;
-    border-radius: 0.8rem;
-    box-shadow: 0 0.3rem 1.2rem 0 #97D3FF40;
+    height: 60px;
+    border-radius: 8px;
+    box-shadow: 0 3px 12px 0 #97D3FF40;
     background: #FFFFFF;
-    font-size: 1.5rem;
+    font-size: 15px;
     color: #9E9E9E99;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 1.7rem 0 3.4rem;
-    bottom: 2rem;
+    padding: 0 17px 0 34px;
+    bottom: 20px;
     z-index: 2;
 
     &::before {
@@ -57,17 +57,17 @@ onMounted(() => {
       display: block;
       position: absolute;
       right: 0;
-      bottom: 6.8rem;
+      bottom: 68px;
       color: #9E9E9E;
-      font-size: 1.2rem;
+      font-size: 12px;
     }
 
     &::after {
       content: '';
       background: url(@/assets/images/home/send.png) no-repeat;
       background-size: contain;
-      width: 5.6rem;
-      height: 3.6rem;
+      width: 56px;
+      height: 36px;
     }
   }
 }

src/views/screen/config/echartOption.js

@@ -27,7 +27,7 @@ export const getBarOptions = (currentData = []) => {
         axisLabel: {
           interval: 0,
           show: true,
-          fontSize: '1.2rem',
+          fontSize: '12px',
           color: "#0A284E",
         },
         axisLine: {
@@ -48,7 +48,7 @@ export const getBarOptions = (currentData = []) => {
         type: "value",
         axisLabel: {
           show: true,
-          fontSize: '1.2rem',
+          fontSize: '12px',
           color: "#7395B3"
         },
         axisLine: {