Merge branch 'master' of https://codeup.aliyun.com/645deca397d94d909e439238/iotplatform_sourcecode/screenFront
This commit is contained in:
15133876896-BGG25
commit
c18fb8d84a
BIN
src/assets/indexImg/waterhouse.png
Normal file
BIN
src/assets/indexImg/waterhouse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
@ -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",
|
||||
|
||||
254
src/views/Waterhouse/index.vue
Normal file
254
src/views/Waterhouse/index.vue
Normal file
@ -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>
|
||||
@ -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){
|
||||
|
||||
@ -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, // 是否要开启代理
|
||||
|
||||
Loading…
Reference in New Issue
Block a user