添加水房大屏

src/router/index.ts

@@ -231,6 +231,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: "/Mechanics/:id",

src/views/Waterhouse/index.vue

@@ -0,0 +1,110 @@
+<template>
+    <div :class="$style['container']">
+        <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="mainChart" ref="mainChart">
+
+            </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
+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 {
+    width: 100%;
+    height: 980px;
+}
+
+.mainChart {
+    width: 100%;
+    height: 580px;
+}
+</style>