312 lines
9.5 KiB
Vue
312 lines
9.5 KiB
Vue
|
<template>
|
|||
|
|
<view class="container-list-item" >
|
|||
|
|
<view class="content" @click="clickItem($event, item)">
|
|||
|
|
<!-- 复选框 -->
|
|||
|
|
<view class="checkbox" v-if="isCheckBox" @click.stop="clickBox($event , item)">
|
|||
|
|
<i v-if="curChecked " :style="{'color' :checkActiveColor}"
|
|||
|
|
class="iconfont icon-xuanzhong txt icon-selected" />
|
|||
|
|
<i v-else :style="{'color': checkNoneColor}" class="iconfont icon-weixuanzhong txt" />
|
|||
|
|
</view>
|
|||
|
|
<!-- 复选框 -->
|
|||
|
|
<!-- 单选框 -->
|
|||
|
|
<view class="checkbox" v-else-if="isRadio" @click.stop="clickBox($event, item)">
|
|||
|
|
<i v-if="curChecked" :style="{'color' :checkActiveColor}" class="txt iconfont icon-selected" />
|
|||
|
|
<i v-else :style="{'color': checkNoneColor}" class="txt iconfont icon-weixuanzhong1" />
|
|||
|
|
</view>
|
|||
|
|
<!-- 单选框 -->
|
|||
|
|
<!-- 自定义插槽body -->
|
|||
|
|
<view :style="isCheck ?'left: 56rpx':'left: 16rpx'" class="slot">
|
|||
|
|
<view v-if="item.name" class="value_box" style="height: 50rpx!important;display: flex;align-items: center;">
|
|||
|
|
<view class="index" style="height: 50rpx;">
|
|||
|
|
<image v-if="item.deviceType? item.deviceType.includes('pcs') : ''" :src="pcs" class="device-img"></image>
|
|||
|
|
<image v-else-if="item.deviceType? item.deviceType.includes('bms') : ''" :src="bms" class="device-img"></image>
|
|||
|
|
<image v-else-if="item.deviceType? item.deviceType.includes('stack') : ''" :src="cluster" class="device-img"></image>
|
|||
|
|
<image v-else-if="item.deviceType? item.deviceType.includes('storage_fire') : ''" :src="fire" class="device-img"></image>
|
|||
|
|
<image v-else-if="item.deviceType? item.deviceType.includes('pack') : ''" :src="pack" class="device-img"></image>
|
|||
|
|
<image v-else-if="item.deviceType? item.deviceType.includes('air_condition') : ''" :src="air" class="device-img"></image>
|
|||
|
|
<image v-else-if="item.deviceType? item.deviceType.includes('ele_meter') : ''" :src="unit" class="device-img"></image>
|
|||
|
|
<image v-else-if="item.deviceType? item.deviceType.includes('emu') : ''" :src="emu" class="device-img"></image>
|
|||
|
|
<image v-else :src="other" style="width: 50rpx;height: 50rpx;"></image>
|
|||
|
|
<!-- {{item.deviceType}} -->
|
|||
|
|
</view>
|
|||
|
|
<view class="value">
|
|||
|
|
{{item[sLabel]}}
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 自定义插槽body -->
|
|||
|
|
<view v-if="hasChildren" class="right" @click.stop="clickItemRight($event,item)"><i class="iconfont icon-z043" ></i></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import pcs from '@/static/aidex/device/pcs.png'
|
|||
|
|
import bms from '@/static/aidex/device/bms.png'
|
|||
|
|
import cluster from '@/static/aidex/device/cluster.png'
|
|||
|
|
import air from '@/static/aidex/device/air.png'
|
|||
|
|
import fire from '@/static/aidex/device/fire.png'
|
|||
|
|
import emu from '@/static/aidex/device/emu.png'
|
|||
|
|
import pack from '@/static/aidex/device/pack.png'
|
|||
|
|
import unit from '@/static/aidex/device/unit.png'
|
|||
|
|
import other from '@/static/aidex/device/other.png'
|
|||
|
|
/**
|
|||
|
|
* 无限极树的单项 item
|
|||
|
|
* @description无限级数的单项item
|
|||
|
|
* @property {Object} item 单项的值（默认{}）
|
|||
|
|
* @property {Boolean} isCheck 判断是否可选 (默认false)
|
|||
|
|
* @property {Boolean} 判断是否是否多选（默认false， isCheck为true时有效）。
|
|||
|
|
* @property {String} checkActiveColor 选中状态下单选框/复选框的颜色 (默认#00AAFF)
|
|||
|
|
* @property {String} checkNoneColor 未选中状态下单选框/复选框的颜色（默认#B8B8B8)
|
|||
|
|
* @property {Object} comparison 属性名称对照表
|
|||
|
|
* @param {String} value 选中值对应列名称(默认value)
|
|||
|
|
* @param {String} label 显示值对应列名称（默认label）
|
|||
|
|
* @param {String} children 子级列对应名称（默认children）
|
|||
|
|
* @return {Function} 点击当前项的执行方法
|
|||
|
|
* @param {Object} item 当前项的值
|
|||
|
|
* @return {Function} change 选中值变化时执行方法（event.detail = {value: 是否选中}）
|
|||
|
|
*/
|
|||
|
|
export default {
|
|||
|
|
name: 'luyj-tree-item',
|
|||
|
|
props: {
|
|||
|
|
// 传入的数值
|
|||
|
|
item: {
|
|||
|
|
type: Object,
|
|||
|
|
default: {}
|
|||
|
|
},
|
|||
|
|
index: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
// 判断是否可选
|
|||
|
|
isCheck: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 是否多选
|
|||
|
|
multiple: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 是否选中状态
|
|||
|
|
checked: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 是否只能选择叶子结点
|
|||
|
|
nodes: {
|
|||
|
|
type: false,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 选中状态下单选框/复选框的颜色
|
|||
|
|
checkActiveColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#00AAFF'
|
|||
|
|
},
|
|||
|
|
// 未选中状态下单选框的颜色
|
|||
|
|
checkNoneColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#B8B8B8'
|
|||
|
|
},
|
|||
|
|
// 列名称对照表
|
|||
|
|
comparison: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {
|
|||
|
|
return {
|
|||
|
|
value: 'value', // 选中值
|
|||
|
|
label: 'label', // 显示名称
|
|||
|
|
children: 'children', // 子级名称
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
sLabel: this.comparison.label ? this.comparison.label : 'label', // label值名称
|
|||
|
|
sChildren: this.comparison.children ? this.comparison.children : 'children', // children值名称
|
|||
|
|
curChecked: this.checked, //是否选中状态
|
|||
|
|
formModel: undefined,
|
|||
|
|
singleMinVolData: undefined,
|
|||
|
|
singleMaxVolData: undefined,
|
|||
|
|
pcs,
|
|||
|
|
bms,
|
|||
|
|
cluster,
|
|||
|
|
air,
|
|||
|
|
fire,emu,other,pack,unit
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
/**
|
|||
|
|
* 是否包含子级
|
|||
|
|
*/
|
|||
|
|
hasChildren: function() {
|
|||
|
|
return Boolean(this.item) ? (Boolean(this.item[this.sChildren]) ? this.item[this.sChildren].length >
|
|||
|
|
0 : false) : false;
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 是否单选
|
|||
|
|
*/
|
|||
|
|
isRadio: function() {
|
|||
|
|
return this.isCheck && !this.multiple && (!this.nodes || !this.hasChildren);
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 是否多选
|
|||
|
|
*/
|
|||
|
|
isCheckBox: function() {
|
|||
|
|
return this.isCheck && this.multiple && (!this.nodes || !this.hasChildren);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
// 监听列名对照表变化
|
|||
|
|
comparison: {
|
|||
|
|
handler: function(val) {
|
|||
|
|
this.sLabel = this.comparison.label ? this.comparison.label : 'label';
|
|||
|
|
this.sChildren = this.comparison.children ? this.comparison.children : 'children';
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
deep: true
|
|||
|
|
},
|
|||
|
|
// 是否选中状态
|
|||
|
|
checked: function(val) {
|
|||
|
|
this.curChecked = val;
|
|||
|
|
},
|
|||
|
|
item: {
|
|||
|
|
handler(val) {
|
|||
|
|
if (val) {
|
|||
|
|
// this.getStatus()
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
deep: true,
|
|||
|
|
immediate: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
// this.getStatus()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//获取状态
|
|||
|
|
getStatus() {
|
|||
|
|
if (this.item.deviceType) {
|
|||
|
|
let params = {
|
|||
|
|
colList: [],
|
|||
|
|
srcId: this.item.srcId,
|
|||
|
|
stationId: this.item.stationId
|
|||
|
|
}
|
|||
|
|
if (this.item.deviceType.includes('pcs')) { //舱
|
|||
|
|
params.colList = ['runState']
|
|||
|
|
} else if (this.item.deviceType.includes('emu')) {
|
|||
|
|
//emu 总有功功率 总无功功率
|
|||
|
|
params.colList = ['EMUPTotal', 'EMUQTotal']
|
|||
|
|
} else if (this.item.deviceType.includes('stack')) {
|
|||
|
|
// <!-- 簇 -->累计充电量，累计放电量
|
|||
|
|
params.colList = ['cTotalChargePower', 'cTotalDisChargePower']
|
|||
|
|
|
|||
|
|
} else if (this.item.deviceType.includes('bms')) {
|
|||
|
|
// 堆 累计充电量，累计放电量
|
|||
|
|
params.colList = ['totalCharge', 'totalDischarge']
|
|||
|
|
} else if (this.item.deviceType.includes('ele_meter')) {
|
|||
|
|
// 电表 正向有功总电量 反向有功总电量
|
|||
|
|
params.colList = ['totalCharge', 'totalDisCharge']
|
|||
|
|
} else if (this.item.deviceType.includes('air_condition')) {
|
|||
|
|
//空调 空调开关机：
|
|||
|
|
params.colList = ['airconditionSwitchYX']
|
|||
|
|
} else if (this.item.deviceType.includes('storage_fire')) {
|
|||
|
|
//消防
|
|||
|
|
} else if (this.item.deviceType.includes('pack')) { //组
|
|||
|
|
//组 最高电压 最低电压
|
|||
|
|
params.colList = ['singleMaxVolData', 'singleMinVolData']
|
|||
|
|
}
|
|||
|
|
if (params.colList.length > 0) {
|
|||
|
|
if (this.item.deviceType.includes('pack')) {
|
|||
|
|
this.GetPackTemperatureVoltageData(params)
|
|||
|
|
} else {
|
|||
|
|
this.GetNewValue(params)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
GetPackTemperatureVoltageData(params) {
|
|||
|
|
this.$u.api.deviceList.GetPackTemperatureVoltageData(params).then(res => {
|
|||
|
|
this.singleMaxVolData = res.data.packData.csingleMaxVolData
|
|||
|
|
this.singleMinVolData = res.data.packData.csingleMinVolData
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
GetNewValue(params) {
|
|||
|
|
this.$u.api.deviceList.GetNewValue(params).then(res => {
|
|||
|
|
this.formModel = res.data
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
/** 点击当前项右侧的执行方法
|
|||
|
|
* @param {Object} e
|
|||
|
|
* @param {Object} item
|
|||
|
|
*/
|
|||
|
|
clickItemRight: function(e, item) {
|
|||
|
|
this.$emit("clickItemRight", item, this.hasChildren);
|
|||
|
|
// 不包含下一级，修改check值事件
|
|||
|
|
if (!this.hasChildren && this.isCheck) {
|
|||
|
|
this.clickBox(e);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/** 点击当前项的执行方法
|
|||
|
|
* @param {Object} e
|
|||
|
|
* @param {Object} item
|
|||
|
|
*/
|
|||
|
|
clickItem: function(e, item) {
|
|||
|
|
this.$emit("clickItem", item);
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 点击单选框或复选框
|
|||
|
|
* @param {Object} e 当前选中值
|
|||
|
|
* @param {Object} item 当前选中的项
|
|||
|
|
*/
|
|||
|
|
clickBox: function(e, item) {
|
|||
|
|
this.curChecked = !this.curChecked;
|
|||
|
|
e.detail.value = this.curChecked;
|
|||
|
|
this.$emit("change", e); // 切换单选框或复选框
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
@import 'luyj-tree-item.scss';
|
|||
|
|
@import "../../lib/css/icon.css";
|
|||
|
|
|
|||
|
|
.device-box {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
.device-img {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
background: #f8f8f8;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.device-img{
|
|||
|
|
width: 50rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
}
|
|||
|
|
.runValue {
|
|||
|
|
flex: 1;
|
|||
|
|
color: #12ec0a;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stopValue {
|
|||
|
|
flex: 1;
|
|||
|
|
color: #FFB800;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|