|
|
@@ -11,43 +11,101 @@
|
|
|
<div class="securityDeviceItem-line">
|
|
|
<span class="securityDeviceItem-line-label">设备状态：</span>
|
|
|
<span v-if="item.online">
|
|
|
- <span style="width: 10px;height: 10px;display: inline-block;background-color: #3CC2AC;border-radius: 5px;margin-left: 5px"></span>
|
|
|
+ <span
|
|
|
+ style="width: 10px;height: 10px;display: inline-block;background-color: #3CC2AC;border-radius: 5px;margin-left: 5px"></span>
|
|
|
在线
|
|
|
</span>
|
|
|
<span v-if="!item.online">
|
|
|
- <span style="width: 10px;height: 10px;display: inline-block;background-color: gray;border-radius: 5px;margin-left: 5px"></span>
|
|
|
+ <span
|
|
|
+ style="width: 10px;height: 10px;display: inline-block;background-color: gray;border-radius: 5px;margin-left: 5px"></span>
|
|
|
离线
|
|
|
</span>
|
|
|
</div>
|
|
|
- <div class="securityDeviceItem-line">
|
|
|
+ <div class="securityDeviceItem-line" :style="item.online?{color: '#3cc2ac'}:{}">
|
|
|
<span class="securityDeviceItem-line-label">功能交互：</span>
|
|
|
<div style="">
|
|
|
- <a-switch :style="{backgroundColor: item.online?'#3CC2AC':'#b9bcbf'}" class="anticon" size="small" v-model="item.online" @change="changeStatus"/>
|
|
|
- <a-tooltip placement="bottom" title="实时摄像" v-if="item.type!='air'">
|
|
|
- <span class="anticon"><a-icon type="camera" /></span>
|
|
|
+ <a-switch :style="{backgroundColor: item.online?'#3CC2AC':'#b9bcbf'}" class="anticon" size="small"
|
|
|
+ :defaultChecked="item.online" v-model="item.online" @change="changeStatus"/>
|
|
|
+ <a-tooltip placement="top" title="实时摄像" v-if="item.type!='air'">
|
|
|
+ <span class="anticon"><a-icon type="camera"/></span>
|
|
|
</a-tooltip>
|
|
|
- <a-tooltip placement="bottom" title="录像" v-if="item.type!='air'">
|
|
|
- <span class="anticon"><a-icon type="video-camera" /></span>
|
|
|
+ <a-tooltip placement="top" title="录像" v-if="item.type!='air'">
|
|
|
+ <span class="anticon"><a-icon type="video-camera"/></span>
|
|
|
</a-tooltip>
|
|
|
- <a-tooltip placement="bottom" title="安全" v-if="item.type=='door'">
|
|
|
- <span class="anticon"><a-icon type="security-scan" /></span>
|
|
|
+ <a-tooltip placement="top" title="安全" v-if="item.type=='door'">
|
|
|
+ <span class="anticon"><a-icon type="security-scan"/></span>
|
|
|
</a-tooltip>
|
|
|
- <a-tooltip placement="bottom" title="电量" v-if="item.type=='door'">
|
|
|
- <span class="anticon" style="vertical-align: text-top"><i-icon-park-outline-battery-working-one /></span>
|
|
|
+ <a-tooltip placement="top" title="电量" v-if="item.type=='door'">
|
|
|
+ <span class="anticon" style="vertical-align: text-top"><i-icon-park-outline-battery-working-one/></span>
|
|
|
</a-tooltip>
|
|
|
|
|
|
- <a-tooltip placement="bottom" title="吹风" v-if="item.type=='air'">
|
|
|
- <span class="anticon" style="vertical-align: middle;margin: 0 3px"><i-icon-park-outline-air-conditioning /></span>
|
|
|
- </a-tooltip>
|
|
|
- <a-tooltip placement="bottom" title="模式" v-if="item.type=='air'">
|
|
|
- <span class="anticon" style="vertical-align: middle;margin: 0 3px"><i-icon-park-outline-sun-one /></span>
|
|
|
- </a-tooltip>
|
|
|
- <a-tooltip placement="bottom" title="风速" v-if="item.type=='air'">
|
|
|
- <span class="anticon" style=";margin: 0 3px"><a-avatar shape="square" :size="20" :src="requireImg('security/icon/fengsu.png')"></a-avatar></span>
|
|
|
+ <!--空调模式-->
|
|
|
+ <a-dropdown v-if="item.type=='air'">
|
|
|
+ <span class="anticon" v-if="item.mode=='hot'"><i-icon-park-outline-sun-one/></span>
|
|
|
+ <span class="anticon" v-else-if="item.mode=='cold'"><i-icon-park-outline-snowflake/></span>
|
|
|
+ <span class="anticon" v-else-if="item.mode=='wind'"><i-icon-park-outline-windmill-two/></span>
|
|
|
+ <span class="anticon" v-else-if="item.mode=='wet'"><i-uil-water-drop-slash/></span>
|
|
|
+ <span class="anticon" v-else><i-material-symbols-brightness-auto-outline/></span>
|
|
|
+
|
|
|
+ <a-menu slot="overlay" @click="handleModeClick">
|
|
|
+ <a-menu-item key="A">
|
|
|
+ <span class="anticon"><i-material-symbols-brightness-auto-outline/></span>
|
|
|
+ 模式: AUTO
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key="hot">
|
|
|
+ <span class="anticon"><i-icon-park-outline-sun-one/></span>
|
|
|
+ 模式: 制热
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key="cold">
|
|
|
+ <span class="anticon"><i-icon-park-outline-snowflake/></span>
|
|
|
+ 模式: 制冷
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key="wind">
|
|
|
+ <span class="anticon"><i-icon-park-outline-windmill-two/></span>
|
|
|
+ 模式: 送风
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key="wet">
|
|
|
+ <span class="anticon"><i-uil-water-drop-slash/></span>
|
|
|
+ 模式: 除湿
|
|
|
+ </a-menu-item>
|
|
|
+ </a-menu>
|
|
|
+ </a-dropdown>
|
|
|
+ <!--空调风速-->
|
|
|
+ <a-dropdown v-if="item.type=='air'">
|
|
|
+ <span class="anticon" v-if="item.fengsu=='1'"><i-carbon-windy/></span>
|
|
|
+ <span class="anticon" v-else-if="item.fengsu=='2'"><i-carbon-windy-strong/></span>
|
|
|
+ <span class="anticon" v-else-if="item.fengsu=='3'"><i-carbon-windy-snow/></span>
|
|
|
+ <span class="anticon" v-else><i-material-symbols-flash-auto-outline/></span>
|
|
|
+
|
|
|
+ <a-menu slot="overlay" @click="handleWindClick">
|
|
|
+ <a-menu-item key="A">
|
|
|
+ <span class="anticon"><i-material-symbols-flash-auto-outline/></span>
|
|
|
+ 风速: AUTO
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key="1">
|
|
|
+ <span class="anticon"><i-carbon-windy/></span>
|
|
|
+ 风速: Ⅰ级
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key="2">
|
|
|
+ <span class="anticon"><i-carbon-windy-strong/></span>
|
|
|
+ 风速: Ⅱ级
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key="3">
|
|
|
+ <span class="anticon"><i-carbon-windy-snow/></span>
|
|
|
+ 风速: Ⅲ级
|
|
|
+ </a-menu-item>
|
|
|
+ </a-menu>
|
|
|
+ </a-dropdown>
|
|
|
+ <!--扫风-->
|
|
|
+ <a-tooltip placement="top" title="风向" v-if="item.type=='air'" style="cursor: pointer">
|
|
|
+ <span class="anticon"><i-icon-park-outline-air-conditioning/></span>
|
|
|
</a-tooltip>
|
|
|
- <a-tooltip placement="bottom" title="温度" v-if="item.type=='air'">
|
|
|
- <span class="anticon" style="margin-right: 0"><img width="12px" :src="requireImg('security/icon/wenduji.png')" /></span>
|
|
|
- <a-input-number size="small" style="width: 65px;background-color: transparent;border: none" v-model="item.tm" :min="18" :max="30" :formatter="value => `${value}°C`"></a-input-number>
|
|
|
+
|
|
|
+ <a-tooltip placement="top" title="温度" v-if="item.type=='air'">
|
|
|
+ <span class="anticon" style="margin-right: 0"><i-icon-park-outline-thermometer/></span>
|
|
|
+ <a-input-number size="small" style="width: 60px;background-color: transparent;border: none;"
|
|
|
+ v-model="item.tm" :min="18" :max="30" :formatter="value => `${value}°C`">
|
|
|
+ </a-input-number>
|
|
|
</a-tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -72,12 +130,45 @@ import {requireImg} from "@/utils/requireImg";
|
|
|
|
|
|
export default {
|
|
|
props: {
|
|
|
- item: Object
|
|
|
+ device: Object
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ item: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.item = this.device;
|
|
|
+ },
|
|
|
+ emits: ['update:device'],
|
|
|
+ setup(props, context) {
|
|
|
+ const methods = {
|
|
|
+ updateItem(item) {
|
|
|
+ context.emit("update:device", item);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return methods;
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ item: {
|
|
|
+ handler: function (val) {
|
|
|
+ this.updateItem(val);
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
requireImg,
|
|
|
changeStatus(val) {
|
|
|
|
|
|
+ },
|
|
|
+ handleWindClick(e) {
|
|
|
+ this.item.fengsu = e.key
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ handleModeClick(e) {
|
|
|
+ this.item.mode = e.key;
|
|
|
+ this.$forceUpdate();
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -100,9 +191,14 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.anticon {
|
|
|
display: inline-block;
|
|
|
margin: 0 2px;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
+
|
|
|
+/deep/ .ant-input-number-sm input {
|
|
|
+ padding: 0 !important;
|
|
|
+}
|
|
|
</style>
|
tianyabing