南门水房大屏页面

src/views/Waterhouse/index.vue

@@ -3,10 +3,46 @@
         <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="`南门水房物联监测系统`" :titleTip="[]" :typeFun="['time']"
             :alarmType="['']"></header2>
         <div class="main">
-            <!-- <el-image style="height: 400px" :src="imgUrl" fit="scale-down" />
+            <div class="left-title">数据监测</div>
-            <div class="mainChart" ref="mainChart">
+            <div class="lt-data item">
-
+                <div class="left">进水</div>
-            </div> -->
+                <div class="center">20</div>
+            </div>
+            <div class="rt-data item">
+                <div class="left">出水</div>
+                <div class="center">20</div>
+            </div>
+            <div class="lb-data item">
+                <div class="left">消耗</div>
+                <div class="center">20</div>
+            </div>
+            <div class="rb-data item">
+                <div class="left">用电</div>
+                <div class="center">20</div>
+            </div>
+            <!-- 总体趋势图 -->
+            <div class="rt-title">总体趋势图</div>
+            <div class="rt-radio">
+                <el-radio-group v-model="date" size="small">
+                    <el-radio-button label="1" >本月</el-radio-button>
+                    <el-radio-button label="2" >近三月</el-radio-button>
+                    <el-radio-button label="3" >近一年</el-radio-button>
+                </el-radio-group>
+            </div>
+            <div class="mainChart" ref="mainChart"></div>
+            <div class="math-content"></div>
+            <!-- 效益&效率 -->
+            <div class="rb-title">效益&效率</div>
+            <div class="rb-content">
+                <div class="progress">
+                    <el-progress type="circle" width="150" :percentage="25" />
+                    <div class="progress-text">效益</div>
+                </div>
+                <div class="progress">
+                    <el-progress type="circle" width="150" :percentage="25" />
+                    <div class="progress-text">效率</div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -18,13 +54,14 @@ let imgUrl = require('@/assets/img/water_room.png')
 const { proxy } = getCurrentInstance() as any
 const mainChart = ref(null)
 let chart = null
+let date = ref('1')
 const colors = ['#5470C6', '#91CC75', '#EE6666'];
 function init() {
-    chart = proxy.$echarts.init(mainChart.value,'dark');
+    chart = proxy.$echarts.init(mainChart.value, 'dark');
     let option = {
-        title: {
+        // title: {
-            text: '水房数据大屏',
+        //     text: '水房数据大屏',
-        },
+        // },
         color: colors,
         tooltip: {
             trigger: 'axis'
@@ -84,7 +121,7 @@ function init() {
     chart.setOption(option);
 }
 onMounted(() => {
-    //init()
+    init()
 })
 </script>
 <style module>
@@ -99,13 +136,119 @@ onMounted(() => {
 </style>
 <style scoped>
 .main {
+    position: relative;
     width: 100%;
     height: 980px;
     background: url('/src/assets/img/water_house_bg.jpg') no-repeat;
 }
 
+.left-title {
+    position: absolute;
+    top: 94px;
+    left: 129px;
+    font-size: 28px;
+    color: #fff;
+    /* font-weight: bold; */
+}
+
+.lt-data {
+    position: absolute;
+    top: 513px;
+    left: 176px;
+}
+
+.rt-data {
+    position: absolute;
+    top: 508px;
+    left: 581px;
+}
+
+.lb-data {
+    position: absolute;
+    top: 743px;
+    left: 176px;
+}
+
+.rb-data {
+    position: absolute;
+    top: 726px;
+    left: 581px;
+}
+
+.item {
+    width: 200px;
+    height: 86px;
+    font-size: 24px;
+    color: #fff;
+}
+
+.left {
+    padding-left: 10px;
+    text-align: left;
+    line-height: 50px;
+}
+
+.center {
+    line-height: 36px;
+}
+
+.rt-title {
+    position: absolute;
+    top: 47px;
+    right: 536px;
+    font-size: 28px;
+    color: #fff;
+}
+.rt-radio {
+    position: absolute;
+    top: 96px;
+    right: 78px;
+    background: #110C2C;
+}
+
 .mainChart {
-    width: 100%;
+    position: absolute;
-    height: 580px;
+    width: 650px;
+    height: 270px;
+    top: 136px;
+    left: 1227px;
+}
+.math-content {
+    position: absolute;
+    width: 555px;
+    height: 100px;
+    top: 418px;
+    left: 1271px;
+    background: rgba(255, 255, 255, 0.4);
+}
+
+.rb-title {
+    position: absolute;
+    bottom: 399px;
+    right: 551px;
+    font-size: 28px;
+    color: #fff;
+}
+.rb-content {
+    position: absolute;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    bottom: 120px;
+    right: 64px;
+    width: 650px;
+    height: 270px;
+    font-size: 16px;
+}
+
+:deep(.progress .el-progress__text) {
+  font-weight: bold;
+  font-size: 30px !important;
+}
+.progress-text {
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 5px;
+    color: #fff;
 }
 </style>