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> |