smart_storage_app/uni_modules/luyj-tree/components/luyj-tree-item/luyj-tree-item.vue

<template>
	<view class="container-list-item" >
		<view class="content" @click="clickItem($event, item)" style="justify-content: space-between;">
			<!-- 复选框 -->
			<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>