Merge branch 'master' of https://codeup.aliyun.com/645deca397d94d909e439238/iotplatform_sourcecode/screenFront

src/router/index.ts

@@ -242,6 +242,12 @@ const routes: Array<RouteRecordRaw> = [
         name: "OffsiteDevList",
         component: () => import("../views/Temp/OffsiteDevList/index.vue"),
       },
+      {
+        path: "/waterhousedata",
+        name: "waterhousedata",
+        component: () => import("../views/Waterhouse/index.vue"),
+      },
+
       {
         path: "/TrendChart",
         name: "TrendChart",

src/views/Waterhouse/index.vue

@@ -0,0 +1,254 @@
+<template>
+    <div :class="$style['container']">
+        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="`南门水房物联监测系统`" :titleTip="[]" :typeFun="['time']"
+            :alarmType="['']"></header2>
+        <div class="main">
+            <div class="left-title">数据监测</div>
+            <div class="lt-data item">
+                <div class="left">进水</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>
+
+<script setup lang='ts'>
+import { onMounted, onUnmounted, reactive, ref, getCurrentInstance } from "vue";
+import header2 from "@/components/headerBox/header2.vue";
+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');
+    let option = {
+        // title: {
+        //     text: '水房数据大屏',
+        // },
+        color: colors,
+        tooltip: {
+            trigger: 'axis'
+        },
+        legend: {
+            data: ['进水量', '出水量', '用电量']
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: '水量',
+            },
+            {
+                type: 'value',
+                name: '电量',
+                position: 'right',
+                alignTicks: true,
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: colors[2]
+                    }
+                },
+            }
+        ],
+        series: [
+            {
+                name: '进水量',
+                type: 'line',
+                data: [120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+                name: '出水量',
+                type: 'line',
+                yAxisIndex: 0,
+                data: [220, 182, 191, 234, 290, 330, 310]
+            },
+            {
+                name: '用电量',
+                type: 'line',
+                yAxisIndex: 1,
+                data: [150, 232, 201, 154, 190, 330, 1000]
+            }
+        ]
+    };
+    chart.setOption(option);
+}
+onMounted(() => {
+    init()
+})
+</script>
+<style module>
+.container {
+    height: 1080px;
+    width: 1920px;
+    color: #20aec5;
+    background-color: #100c2a;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+</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 {
+    position: absolute;
+    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>

src/views/index.vue

@@ -280,6 +280,12 @@ let routerList = [
     title: t("messages.mechanical_noise"),
     url: require("../assets/indexImg/mechanical_noise.png"),
   },
+  {
+    id: 31,
+    path: "/waterhousedata",
+    title: '南门水房物联大屏',
+    url: require("../assets/indexImg/waterhouse.png"),
+  },
 ];
 let lang=ref(getStoredLanguage()||'简体中文')
 function changelang(val){

vue.config.js

@@ -1,5 +1,5 @@
 /*
- * @FilePath: \screenFront\vue.config.js
+ * @FilePath: \daping\vue.config.js
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-01-29 15:16:36
@@ -14,7 +14,7 @@ module.exports = defineConfig(
     devServer: {
       proxy: {
         [process.env.VUE_APP_BASE_API]: {
-          // target: 'http://192.168.3.175:9015',          // 想要请求的url地址
+          // target: 'http://192.168.2.125:2222',          // 想要请求的url地址
           target: 'http://8.130.165.100:9015',
           // target: 'http://192.168.110.238:9015',
           ws: true,                 // 是否要开启代理