初次提交
This commit is contained in:
182
src/views/dashboardtest/components/center-right/common.vue
Normal file
182
src/views/dashboardtest/components/center-right/common.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="huankong-wrap">
|
||||
<ItemBox :title="$t('dashboard.environmentalData')">
|
||||
<div v-if="airArr.length" v-loading="loading" class="box">
|
||||
<template v-for="(item,index) in airArr">
|
||||
<div :key="index" class="air-box">
|
||||
<div class="value">{{ item.value }}</div>
|
||||
<div class="label">
|
||||
<span class="air-left-jt " />
|
||||
<span class="air-icon left" />
|
||||
<span />
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="air-icon right" />
|
||||
<span class="air-right-jt " />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<div v-else class="box">
|
||||
<div class="empty">{{ $t("dashboard.noData") }}</div>
|
||||
</div>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetAirConfig } from '@/api/home-page/index'
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hkList: [],
|
||||
statusData: {
|
||||
dischargCapacity: '',
|
||||
rechargeCapacity: '',
|
||||
grid: '',
|
||||
loading: false
|
||||
|
||||
},
|
||||
airArr: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() { },
|
||||
methods: {
|
||||
async getData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await GetAirConfig({ stationId: this.stationId })
|
||||
this.airArr = res.data
|
||||
// console.log(this.airArr)
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async GetStatusMonitor() {
|
||||
// this.loading = true
|
||||
// const params = {
|
||||
// stationId: this.stationId
|
||||
// }
|
||||
// try {
|
||||
// const { data } = await GetCircleCtr(params)
|
||||
// this.hkList = data
|
||||
// } catch (error) {
|
||||
// // console.log(error);
|
||||
// } finally {
|
||||
// this.loading = false
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.huankong-wrap {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px;
|
||||
height: 302px;
|
||||
overflow: auto;
|
||||
.empty {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 16px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
}
|
||||
.air-box {
|
||||
min-width: 120px;
|
||||
width: 47%;
|
||||
height: 60px;
|
||||
margin: 10px 0 0 0;
|
||||
background: url(../../../../assets/images/air-bg.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.label {
|
||||
min-width: 86px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.name{
|
||||
text-align: center;
|
||||
// min-width: 88px;
|
||||
}
|
||||
.air-icon {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: url(../../../../assets/images/air-icon.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.air-left-jt {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
line-height: 0px;
|
||||
background: url(../../../../assets/images/air-left.png);
|
||||
background-size: 100% 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.air-right-jt {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
line-height: 0px;
|
||||
background: url(../../../../assets/images/air-right.png);
|
||||
background-size: 100% 100%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.left {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.right {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
font-family: DIN;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0px 0px 10px 0px #0094ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
179
src/views/dashboardtest/components/center-right/disposition.vue
Normal file
179
src/views/dashboardtest/components/center-right/disposition.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div class="huankong-wrap">
|
||||
<ItemBox :title="$t('dashboard.environmentalData')" :show-point-setting="true" @handleSetting="handleSetting">
|
||||
<div v-if="airArr.length" v-loading="loading" class="box">
|
||||
<div v-for="(item,index) in airArr" :key="index" class="air-box">
|
||||
<div class="value">{{ item.value }}</div>
|
||||
<div class="label">
|
||||
<span class="air-left-jt " />
|
||||
<span class="air-icon left" />
|
||||
<span />
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="air-icon right" />
|
||||
<span class="air-right-jt " />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else class="box">
|
||||
<div class="empty">{{ $t("dashboard.noData") }}</div>
|
||||
</div>
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DynamicConfigPoint } from '@/api/home-page/index'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
permissionId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hkList: [],
|
||||
statusData: {
|
||||
dischargCapacity: '',
|
||||
rechargeCapacity: '',
|
||||
grid: '',
|
||||
loading: false,
|
||||
permissionId: null
|
||||
|
||||
},
|
||||
airArr: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() { },
|
||||
methods: {
|
||||
handleSetting() {
|
||||
this.$emit('handleSetting')
|
||||
},
|
||||
async getData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await DynamicConfigPoint({
|
||||
pageLocation: 'airData',
|
||||
permissionId: this.permissionId,
|
||||
stationId: this.stationId })
|
||||
this.airArr = res.data
|
||||
// console.log(this.airArr)
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.huankong-wrap {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px;
|
||||
height: 302px;
|
||||
overflow: auto;
|
||||
.empty {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 16px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
}
|
||||
.air-box {
|
||||
min-width: 120px;
|
||||
width: 47%;
|
||||
height: 60px;
|
||||
margin: 10px 0 0 0;
|
||||
background: url(../../../../assets/images/air-bg.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.label {
|
||||
min-width: 86px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.name{
|
||||
text-align: center;
|
||||
// min-width: 88px;
|
||||
}
|
||||
.air-icon {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: url(../../../../assets/images/air-icon.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.air-left-jt {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
line-height: 0px;
|
||||
background: url(../../../../assets/images/air-left.png);
|
||||
background-size: 100% 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.air-right-jt {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
line-height: 0px;
|
||||
background: url(../../../../assets/images/air-right.png);
|
||||
background-size: 100% 100%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.left {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.right {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
font-family: DIN;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0px 0px 10px 0px #0094ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
334
src/views/dashboardtest/components/center-right/standard-215.vue
Normal file
334
src/views/dashboardtest/components/center-right/standard-215.vue
Normal file
@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="huankong-wrap">
|
||||
<ItemBox :title="$t('dashboard.environmentalData')">
|
||||
<div v-loading="loading" class="box">
|
||||
<div class="zhengxiang">
|
||||
<div class="left">
|
||||
<el-tooltip :content="$t('dashboard.indoorTem') + '(℃)'" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.indoorTem') }}(℃)</div>
|
||||
</el-tooltip>
|
||||
<div class="value">{{ toFix(formModel.airconditionInnerTemperature) }}</div>
|
||||
|
||||
<el-tooltip :content="$t('dashboard.heatBackLash') + '(℃)'" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.heatBackLash') }}(℃)</div>
|
||||
</el-tooltip>
|
||||
<div class="value">{{ toFix(formModel.airconditionReturnHot) }}</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="label">{{ $t('dashboard.air') }}</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-tooltip :content="$t('dashboard.condensation') + '(℃)'" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.condensation') }}(℃)</div>
|
||||
</el-tooltip>
|
||||
<div class="value">{{ toFix(formModel.airconditionCondensation) }}</div>
|
||||
|
||||
<el-tooltip :content="$t('dashboard.coolBackLash') + '(℃)'" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.coolBackLash') }}(℃)</div>
|
||||
</el-tooltip>
|
||||
<div class="value">{{ toFix(formModel.airconditionReturnCold) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zhengxiang">
|
||||
<div class="left">
|
||||
<el-tooltip :content="$t('dashboard.indoorHum') + '(%)'" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.indoorHum') }}(%)</div>
|
||||
</el-tooltip>
|
||||
<div class="value">{{ toFix(formModel.airconditionInnerHumidity) }}</div>
|
||||
|
||||
<el-tooltip :content="$t('dashboard.shutPoint')" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.shutPoint') }}</div>
|
||||
</el-tooltip>
|
||||
<div class="value">{{ toFix(formModel.airconditionFanStopPoint) }}</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<!-- <div class="value">1</div> -->
|
||||
<div class="label">{{ $t('dashboard.air') }}</div>
|
||||
<!-- <div class="label">(kWh)</div> -->
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-tooltip :content="$t('dashboard.refSetting') + '(℃)'" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.refSetting') }}(℃)</div>
|
||||
</el-tooltip>
|
||||
|
||||
<div class="value">{{ toFix(formModel.airconditionSetCold) }}</div>
|
||||
<el-tooltip :content="$t('dashboard.heatSetting') + '(℃)'" placement="top" effect="dark">
|
||||
<div class="label">{{ $t('dashboard.heatSetting') }}(℃)</div>
|
||||
</el-tooltip>
|
||||
<div class="value">{{ toFix(formModel.airconditionSetHot) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <div v-else class="box">
|
||||
<div class="empty">暂无数据</div>
|
||||
</div> -->
|
||||
</ItemBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetShanghaiKJYAirData } from '@/api/homePage-integrated/index'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
props: {
|
||||
stationId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hkList: [],
|
||||
formModel: {},
|
||||
loading: false,
|
||||
colList: ['airconditionInnerTemperature', 'airconditionReturnHot', 'airconditionCondensation', 'airconditionReturnCold', 'airconditionInnerHumidity', 'airconditionFanStopPoint', 'airconditionSetCold', 'airconditionSetHot']
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
toFix(val) {
|
||||
if (val) {
|
||||
const result = Number(val).toFixed(2)
|
||||
return result
|
||||
} else if (val === 0) {
|
||||
return 0
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
async getData() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
stationId: this.stationId,
|
||||
colList: this.colList
|
||||
}
|
||||
try {
|
||||
const { data } = await GetShanghaiKJYAirData(params)
|
||||
this.formModel = data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.huankong-wrap{
|
||||
width: 100%;
|
||||
}
|
||||
.box {
|
||||
|
||||
.empty{
|
||||
width: 100%;
|
||||
height: 302px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 16px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
|
||||
}
|
||||
// padding-top: 25px;
|
||||
// padding-bottom: 20px;
|
||||
.zhengxiang {
|
||||
width: 100%;
|
||||
// min-width: 362px;
|
||||
height: 135px;
|
||||
// background: url(../../../../../assets/images/dianbiao-zxdn-bg.png) no-repeat;
|
||||
// background:url(../../../../assets/images/dianbiao-zxdn-bg.png);
|
||||
// background-size: 100% 100%;
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background:url(../../../../assets/images/yuan-left.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// padding-left: 10%;
|
||||
.label {
|
||||
margin-left: 10px;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 86px;
|
||||
// width: 100%;
|
||||
// flex: 1;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
// display: flex;
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
line-height: 40px;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
font-family: DIN;
|
||||
font-size: 22px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 0px 10px 0px #0094FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
background:url(../../../../assets/images/yuan-center.png);
|
||||
background-size: 100% 100%;
|
||||
width: 220px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 100%;
|
||||
font-family: DIN;
|
||||
font-size: 30px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
text-shadow: 0px 0px 10px 0px #0094FF;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
// padding-right: 10%;
|
||||
height: 100%;
|
||||
background:url(../../../../assets/images/yuan-right.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: right;
|
||||
.label {
|
||||
margin-right: 10px;
|
||||
max-width: 113px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 86px;
|
||||
// width: 100%;
|
||||
// flex: 1;
|
||||
font-family: Source Han Sans CN;
|
||||
font-size: 14px;
|
||||
color: rgba(206, 235, 255, 0.7);
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
line-height: 40px;
|
||||
// justify-content: center;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
font-family: DIN;
|
||||
font-size: 22px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 0px 10px 0px #0094FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.yougonglv-wrap {
|
||||
width: 100%;
|
||||
min-width: 367px;
|
||||
min-height: 67px;
|
||||
background: url(../../../../assets/images/zongyougong-bg.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
margin: 10px 0;
|
||||
|
||||
.top {
|
||||
height: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 20%;
|
||||
width: 100%;
|
||||
|
||||
.name {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.top-value {
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
padding-right: 20px;
|
||||
color: #fff;
|
||||
|
||||
.value {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
color: #CEEBFF;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
height: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20%;
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
color: #CEEBFF
|
||||
}
|
||||
|
||||
.value {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
min-width: 35px;
|
||||
background: url(../../../../assets/images/jb.png) no-repeat;
|
||||
background-size: cover;
|
||||
color: #CEEBFF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user