vue 之动态切换components组件
2020-06-08 本文已影响0人
落花夕拾
1、判断引用动态组件
通过component标签 的is属性来进行组件的切换
is的属性值决定要显示的组件，所以将is的属性值设置为data中的值，以便于动态变化
//dialog.vue
<template>
<div class="qdDialog flex-center"
@click.self="hide"
v-if="showDeviceTypeDialog">
<div class="dialog-main">
<div class="fixed">
<!-- 标题 -->
<div class="dialog-title">
<div class="name">{{deviceInfo.device}}</div>
<div class="close"
@click.stop="hide" />
</div>
<!-- tab -->
<components
:is="cutTab"
:table-tab ="tableTab"
:changeTab="changeTab"/>
</div>
<!-- 内容 -->
<components :is="tableTab" />
</div>
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
import passTab from './component/tab/accessTab'
import videoTab from './component/tab/videoTab'
import lockerTab from './component/tab/lockerTab'
import otherTab from './component/tab/otherTab'
import waterWattTab from './component/tab/waterWattTab'
import liftTab from './component/tab/liftTab'
import parkTab from './component/tab/parkTab'
import qdPass from './component/pass.vue'
import qdRecord from './component/record.vue'
import qdEvent from './component/event.vue'
import MonIns from './component/MonIns.vue'
import AlarmLog from './component/AlarmLog.vue'
import videoManage from './component/videoManage.vue'
import ISCserver from './component/ISCserver.vue'
import MoniPoints from './component/MoniPoints.vue'
import qdManage from './component/manage.vue'
import qdOpen from './component/open.vue'
import qdRead from './component/read.vue'
import qdUse from './component/use.vue'
import qdLiftRecord from './component/liftRecord.vue'
import qdLiftUseDateConfig from './component/liftUseDateConfig.vue'
import qdParkPass from './component/parkPass.vue'
import qdParkSearch from './component/parkSearch.vue'
import qdParkRecord from './component/parkRecord.vue'
export default {
data() {
return {
pageNo: '1',
pageSize: '10',
totalCnt: '',
tableTab: 'qdPass', // qdPass qdRecord qdEvent qdManage qdOpen qdRead qdUse
}
},
components: {
passTab,
videoTab,
lockerTab,
otherTab,
waterWattTab,
liftTab,
parkTab,
qdPass,
qdRecord,
qdEvent,
MonIns,
ISCserver,
AlarmLog,
videoManage,
MoniPoints,
qdManage,
qdOpen,
qdRead,
qdUse,
qdLiftRecord,
qdLiftUseDateConfig,
qdParkPass,
qdParkSearch,
qdParkRecord,
},
computed: {
...mapState(['showDeviceTypeDialog', 'deviceInfo', 'rank']),
...mapGetters(['projectId']),
cutTab() {
/* eslint-disable no-unreachable */
switch(this.deviceInfo.deviceType) {
// 电梯
case 'lift':
return 'liftTab'
break
// 停车
case 'park':
return 'parkTab'
break
// 水电表
case 'water':
return 'waterWattTab'
break
case 'hotwater':
return 'waterWattTab'
break
case 'elec':
return 'waterWattTab'
break
// 门锁
case 'locker':
return 'lockerTab'
break
// 通行设备
case 'doorctl_v2':
return 'passTab'
break
case 'doorctl':
return 'passTab'
break
case 'facegate':
return 'passTab'
break
case 'facesentry':
return 'passTab'
break
case 'unitdoorwaymacchine':
return 'passTab'
break
case 'villadoorwaymacchine':
return 'passTab'
break
case 'fencingdoorwaymacchine':
return 'passTab'
break
case 'facedoorwaymachine':
return 'passTab'
break
case 'video':
return 'videoTab'
break
// 其他默认
default:
return 'otherTab'
}
}
},
mounted() {
},
methods: {
...mapMutations(['hide']),
changeTab(tab) {
this.tableTab = tab
},
},
watch: {
showDeviceTypeDialog(val) {
if (val) {
//
}
}
}
}
</script>
<style lang="less" scoped>
.qdDialog {
color: #fff;
.dialog-main {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100vh;
overflow: hidden;
// background:#02111d;
background:rgba(0, 16, 31, .8);
border-radius: 2px;
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
padding-top: 0;
// min-height: 1080px;
// &::after {
// background: url("~@assets/img/demo/bg-device-type.png") 0 / cover fixed;
// content: "";
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// filter: blur(20px);
// background-position: 332px -35px;
// }
.fixed{
// background:#02111d;
// position: fixed;
// top:0;
// left:0;
// width: 100%;
// z-index: 1;
}
.dialog-title {
.name {
font-size: 20px;
font-weight: 600;
text-align: center;
padding: 17px 0;
}
.close {
cursor: pointer;
position: absolute;
top: 24px;
right: 24px;
width: 14px;
height: 15px;
background: url("~@assets/img/demo/city/close.png");
background-size: 100% 100%;
}
}
/deep/ .dialog-tab {
font-size: 12px;
display: flex;
justify-content: center;
padding-bottom: 24px;
.item-tab {
cursor: pointer;
padding: 2px 10px;
border: 1px solid rgba(255, 255, 255, 1);
text-align: center;
color:rgba(255,255,255,0.8);
&.border-left {
border-radius: 2px 0px 0px 2px;
}
&.border-right {
border-radius: 0px 2px 2px 0px;
}
&.active {
color:#1F2E3B;
background: rgba(255, 255, 255, 1);
}
}
}
}
.dialog-content {
overflow: auto;
}
}
.wrap-page {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
text-align: center;
}
.page {
margin-top: 12px;
text-align: center;
/deep/ .ivu-page-next,
/deep/ .ivu-page-prev,
/deep/ .ivu-page-item {
background: transparent;
}
}
// 小屏幕适配
@media screen and (max-height: 800px) {
.qdDialog {
color: #fff;
.dialog-main {
// min-height: 768px;
}
}
}
</style>
2、tab标签
//waterWattTab.vue
<template>
<div class="dialog-tab">
<div :class="[{'active' : tableTab == 'qdRead' }, 'item-tab']"
@click="changeTab('qdRead')">读表数据</div>
<div :class="[{'active' : tableTab == 'qdUse' }, 'item-tab']"
@click="changeTab('qdUse')">用量数据</div>
<div :class="[{'active' : tableTab == 'qdEvent' }, 'item-tab']"
@click="changeTab('qdEvent')">事件记录</div>
<div :class="[{'active' : tableTab == 'qdManage' }, 'item-tab border-right']"
@click="changeTab('qdManage')">设备管理</div>
</div>
</template>
<script>
export default {
props: ['changeTab', 'tableTab'],
data() {
return {
}
},
mounted() {
console.log('waterWattTab mounted')
this.changeTab('qdRead')//子组件调用父组件的事件方法（调用了dialog.vue中的changeTab的方法）
},
}
</script>
<style lang="less" scoped>
</style>
3、内容区
//use.vue
<template>
<div class="dialog-content">
<div class="left">
<div class="title-people" @click.stop="togglePieChart">
<i />本月累计：<span class="yantramanav">{{totalUse}}{{unit}}</span>
</div>
<!-- 设备线图 -->
<div class="section">
<!-- 日 -->
<div class="chart-title">日度用{{name}}量</div>
<div class="lineChart"
ref="lineChart1" />
</div>
<!-- 月 -->
<div class="section">
<div class="chart-title">月度{{name}}用量</div>
<div class="lineChart lineChart2"
ref="lineChart2" />
</div>
</div>
<div class="right">
<div class="title-people" @click.stop="togglePieChart">
<i />用{{name}}量数据
</div>
<div class="section">
<div class="filter">
<div class="filter-item">
<div class="label">时间</div>
<div class="qd-el qd-filter-el">
<el-date-picker
popper-class="pwdType"
size="small"
v-model="time"
type="datetimerange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</div>
</div>
<div class="filter-item">
<div class="label">位置</div>
<div class="qd-el qd-filter-el">
<el-cascader
:clearable="true"
size="small"
popper-class="qd-cascader"
:props="props"
v-model="location">
</el-cascader>
</div>
</div>
<div class="filter-item">
<div class="label">设备编号</div>
<input v-model="other" type="text" placeholder="" />
</div>
<button class="search" @click="getUseList(0)">搜索</button>
</div>
<div class="list">
<!--列表内容-->
<div class="list-content">
<div class="list-table">
<table class="table">
<thead>
<tr>
<th>时间</th>
<th>设备编号</th>
<th>位置</th>
<th>当日用{{name}}量</th>
<th>当月累计</th>
</tr>
</thead>
<tbody>
<tr v-for="(it, idx) in deviceList"
:class="[{'active': idx == currentIdx}]"
@click="changeCurrentDetail(it,idx)"
:key="idx">
<td >{{it.readDate | formatTime}}</td>
<td >{{it.sn}}</td>
<td ></td>
<td >{{it.useRecord}}</td>
<td >{{it.monthRecord}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--分页-->
<div class="wrap-page">
<Page @on-change="pageNoChange"
:total="+totalCnt"
:current="+pageNo"
:page-size="+pageSize"
class-name="page" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
import echarts from 'echarts'
import { mapState, mapGetters, mapMutations } from 'vuex'
import { mixLocation } from '../../../mixins/location.js'
export default {
mixins: [mixLocation],
data() {
return {
pageNo: '1',
pageSize: '10',
totalCnt: '',
deviceStatus: '',
options: [{
value: '',
label: '全部'
},
{
value: '1',
label: '在线'
}, {
value: '2',
label: '离线'
}, {
value: '3',
label: '故障'
}
],
currentIdx: 0,
currentDetail: {},
deviceList: [],
totalUse: '--',
time: '',
other: '',
}
},
computed: {
...mapState(['deviceInfo', 'rank']),
...mapGetters(['projectId']),
name() {
return this.deviceInfo.deviceType == 'elec' ? '电': '水'
},
unit() {
return this.deviceInfo.deviceType == 'elec' ? 'kW‧h': 'm³'
},
},
mounted() {
this.getData()
},
methods: {
...mapMutations(['hide']),
getData() {
this.getUseList()
this.getLineChart()
this.getTotalUse()
},
getUseList(pageNo = this.pageNo) {
this.$http({
method:'post',
url:'/api/json/gyLogApi/getWaterElecRecord',
data:{
projectId: this.projectId,
devType: this.deviceInfo.deviceType,
beginDate: moment().subtract(2,'years').format('YYYY-MM-DD'),
endDate: moment().format('YYYY-MM-DD'),
pageNo: pageNo,
pageSize: this.pageSize,
}
})
.then((res) => {
this.totalCnt = this.getTotalCnt(res.data.totalCnt)
this.deviceList = res.data.list
})
},
getTotalUse() {
this.$http({
method:'post',
url:'/api/json/gyLogApi/getWaterElecCumulativeRecordCurrentMonth',
data:{
projectId: this.projectId,
devType: this.deviceInfo.deviceType,
}
})
.then((res) => {
this.totalUse = res.data.cumulativeRecord
})
},
getLineChart() {
this.$http({
method:'post',
url:'/api/json/ufoIndicesApi/waterElecRecordIndicesData',
data:{
projectId: this.projectId,
devType: this.deviceInfo.deviceType,
indicesNameEn: 'smartElectricMeterKWH',
}
})
.then((res) => {
let dataObj1 = this.dealData(res, 0)
let dataObj2 = this.dealData(res, 1)
this.initChart({
ref: 'lineChart1',
data: dataObj1,
})
this.initChart({
ref: 'lineChart2',
data: dataObj2,
})
})
},
dealData(res, idx) {
let list = res.data.list[idx].groupData[0].indicesData
let dataList = []
let labelList = []
if(list && list.length > 0) {
list.forEach(el => {
dataList.push(el.value)
labelList.push(el.key)
})
}
return {
dataList,
labelList
}
},
initChart(params) {
switch (params.ref) {
case 'lineChart1':
params.data && params.data.labelList && (params.data.labelList = params.data.labelList.map(val => moment(val, 'YYYY-MM-DD').format('MM-DD')))
break
case 'lineChart2':
params.data && params.data.labelList && (params.data.labelList = params.data.labelList.map(val => moment(val, 'YYYY-MM-DD').format('YYYY-MM')))
break
}
var myChart = echarts.init(this.$refs[params.ref])
var option = {
color: ['#00B7FF', '#F37D2C'],
tooltip: {
trigger: 'axis'
},
legend: {
align: 'left',
show: false,
left: 0,
padding: [10, 0],
textStyle: {
color: 'rgba(255, 255, 255, 0.8)',
fontSize: 12,
},
itemWidth: 8,
data: [{
name: '业主',
icon: 'circle',
}, {
name: '访客',
icon: 'circle',
}],
},
grid: {
top: '14',
left: '0',
right: '0',
bottom: '0',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: params.data.labelList,
// splitNumber: 24,
axisTick: {
show: true,
inside: true,
interval: 0,
},
axisLabel: {
showMinLabel: false,
showMaxLabel: false,
// interval:5,
color: 'rgba(255,255,255,0.3)',
},
axisLine:{
show: true,
lineStyle:{
color: 'rgba(255,255,255,0.1)', //坐标轴的颜色
},
},
splitLine: {
show: true,
lineStyle:{
color: 'rgba(255,255,255,0.1)',
}
},
},
yAxis: {
type: 'value',
axisLabel: {
show: false,
},
axisTick: {
show: true,
inside: true,
interval: 0,
},
splitLine: {
show: false
},
axisLine:{
show: true,
lineStyle:{
color: 'rgba(255,255,255,0.1)', //坐标轴的颜色
},
},
},
series: [
{
name: `用${this.name}量`,
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
symbolSize: 1,
lineStyle: {
width: 1,
type: 'solid',
shadowBlur: 10,
shadowColor: '#00B7FF',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
},
data: params.data.dataList,
valueType:"percent",
areaStyle: {
normal: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 183, 255, 0)'
},{
offset: 1,
color: 'rgba(0, 183, 255, 0.12)'
}]),
origin: 'end'
}
},
},
]
}
myChart.clear()
myChart.setOption(option)
},
pageNoChange(pageNo) {
this.getUseList(pageNo)
},
changeCurrentDetail(it, idx) {
this.currentIdx = idx
this.currentDetail = it
},
}
}
</script>
<style lang="less" scoped>
.dialog-content {
flex: 1;
display: flex;
justify-content: flex-start;
.left {
padding: 0 40px 44px 118px;
width: 344px;
box-sizing: content-box;
.title-people{
height: 30px;
line-height: 1;
font-size: 14px;
margin-bottom: 10px;
i {
vertical-align: sub;
display: inline-block;
width: 18px;
height: 18px;
margin-right: 3px;
background: url("~@assets/img/demo/icon-peo.png");
background-size: 100% 100%;
}
.yantramanav{
font-size:20px;
}
}
.pieChart{
width: 344px;
height: 150px;
position: relative;
.rate{
text-align: center;
position: absolute;
top: 12px;
left: 45px;
transform: translate(-50%, 0);
font-size: 12px;
width: 82px;
height: 82px;
background: rgba(0, 183, 255, 0.2);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.label-line{
position: absolute;
left: 120px;
top:0;
.line{
display: inline-block;
width: 10px;
height: 1px;
background: #00B7FF;
position: absolute;
}
.line1{
transform: rotate(-45deg);
left: -38px;
top: 41%;
&.yell{
transform: rotate(45deg);
left: -36px;
top: 82%;
background: #F37D2C;
}
}
.line2{
top: 36%;
left: -30px;
width: 20px;
&.yell{
top: 87%;
left: -29px;
width: 26px;
background: #F37D2C;
}
}
.item{
white-space: nowrap;
span{
font-size:20px;
color: #fff;
}
}
}
color:rgba(255,255,255,.5);
.num{
font-size: 20px;
color: #fff;
}
}
}
.lineChart {
width: 344px;
height: 120px;
}
.lineChart2 {
margin-top:10px;
}
.section{
margin-bottom: 32px;
.body{
display: flex;
padding: 8px 10px 0;
div {
position: relative;
box-sizing: border-box;
&.pieFault {
border-radius: 50%;
border: 1px solid rgba(0, 183, 255, 0.4);
.rate {
background: rgba(0, 183, 255, 0.2);
}
}
&.offLine {
margin: 0 45px;
border-radius: 50%;
border: 1px solid rgba(243, 125, 44, 0.4);
.rate {
background: rgba(243, 125, 44, 0.2);
}
}
&.over {
border-radius: 50%;
border: 1px solid rgba(255, 70, 70, 0.4);
.rate {
background: rgba(255, 70, 70, 0.2);
}
}
}
.rate {
width: 82px;
height: 82px;
text-align: center;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
border-radius: 50%;
flex-direction: column;
.num {
font-size: 18px;
color: #fff;
}
}
.chart {
width: 80px;
height: 80px;
}
.value{
margin-top: 4px;
font-size: 12px;
text-align: center;
color:rgba(255,255,255, .6);
}
}
.legend{
display: flex;
margin-top: 6px;
margin-bottom: 20px;
.legend-item{
margin-right: 16px;
font-size: 12px;
color:rgba(255,255,255,0.8);
span{
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right:5px;
}
.lable1{
background: #00B7FF;
}
.lable2{
background: #F37D2C;
}
}
}
.chart-title{
font-size: 12px;
color:rgba(255,255,255,0.8);
}
}
}
.right {
display: flex;
flex-direction: column;
font-size: 12px;
padding: 0 0 0 24px;
margin-right: 116px;
flex: 1;
.title-people{
height: 30px;
font-size: 14px;
margin-bottom: 10px;
i {
vertical-align: sub;
display: inline-block;
width: 18px;
height: 18px;
margin-right: 3px;
background: url("~@assets/img/demo/icon-peo.png");
background-size: 100% 100%;
}
}
.section{
display: flex;
flex-wrap: wrap;
.filter{
font-size: 14px;
display: flex;
justify-content: flex-start;
margin-bottom: 40px;
.filter-item{
height: auto;
display: flex;
margin-right: 40px;
.label{
color:rgba(255,255,255,0.6);
height: 32px;
line-height: 32px;
margin-right: 16px;
white-space: nowrap;
}
/deep/ input{
padding-left: 10px;
color:rgba(255,255,255,1);
outline: none;
background: transparent;
width:296px;
height:32px;
border-radius:2px;
border:1px solid rgba(255,255,255,0.12);
}
/deep/ .el-input__icon {
line-height:32px;
}
}
.search{
cursor: pointer;
background: transparent;
width:64px;
height:32px;
border-radius:2px;
border:1px solid rgba(0,183,255,1);
color: #00B7FF;
}
}
.list{
width: 100%;
.list-content{
font-size: 14px;
height: 700px;
display: flex;
border-bottom: 1px solid rgba(255,255,255,0.16);
.list-table{
opacity: .8;
color:rgba(255,255,255, 1);
flex: 1;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
.table{
width: 100%;
thead{
tr{
height: 24px;
color:rgba(255,255,255,0.4);
border-bottom: 1px solid rgba(255,255,255,0.16);
}
}
tbody{
tr{
height: 48px;
&.active {
background: rgba(255, 255, 255, 0.04);
}
}
}
.face-img{
width: 48px;
height: 48px;
border-radius: 50%;
}
}
.offLine{
color:#F37D2C;
}
.fault{
color: #FF4646;
}
.order{
cursor: pointer;
color: #00B7FF;
}
}
.list-info{
width: 354px;
.info-head{
box-sizing: content-box;
height: 24px;
border-bottom: 1px solid rgba(255,255,255,0.16);
.export{
cursor: pointer;
text-align: right;
color: #00B7FF;
display: flex;
align-items: center;
justify-content: flex-end;
i{
display: inline-block;
width: 15px;
height: 15px;
margin-right: 3px;
background: url('~@assets/img/demo/export.png');
background-size: 100% 100%;
}
}
}
.item-info{
height: 676px;
flex: 1;
color:rgba(255,255,255,0.4);
border-left: 8px solid rgba(255,255,255,0.08);
padding: 20px 30px 24px 24px;
.sn{
text-align: center;
.head-img{
width: 144px;
height: 190px;
}
margin-bottom: 12px;
}
.item {
padding: 3px 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
.label{
min-width: 100px;
}
.value{
text-align: right;
}
.sub-titile{
color: rgba(255,255,255,0.8);
}
}
}
}
}
}
}
}
.sub-title {
font-size: 14px;
color: #fff;
}
}
.wrap-page {
margin-top: 24px;
text-align: center;
}
/deep/ .page {
margin-top: 12px;
text-align: center;
.ivu-page-next,
.ivu-page-prev,
.ivu-page-item {
background: transparent;
border:1px solid rgba(255,255,255,0.16);
&:hover{
color: #fff;
}
a{
&:hover{
color: #fff;
}
}
}
.ivu-page-item-active {
background:#00B7FF;
a{
color: #fff;
}
}
}
// 小屏幕适配
@media screen and (max-height: 800px) {
.dialog-content {
.left {
padding: 20px;
}
.right {
margin-right: 20px;
.section{
.list{
.list-content{
height: 480px;
.list-table{
.table{
tbody{
tr{
height: 32px;
}
}
}
}
.list-info{
width: 280px;
.item-info{
height: 456px;
padding: 10px;
}
}
}
}
}
}
}
}
</style>
