740 lines
20 KiB
Vue
740 lines
20 KiB
Vue
<template>
|
||
<view class="status-variable">
|
||
<view class="nav-bar">
|
||
<view v-if="!isSearch" style="margin-right: 20rpx;">
|
||
<u-icon name="search" size="27" @click="isSearch = true"></u-icon>
|
||
</view>
|
||
<view v-else style="width: 100%;">
|
||
<!-- #ifndef APP-NVUE -->
|
||
<u-input :customStyle="{ padding: '17rpx 36rpx', background: '#FFFFFF' }"
|
||
v-model="queryParams.modelName" :placeholder="$tt('group.inputContent')" shape="circle"
|
||
@clear="handleClearSearch" clearable>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
<u--input :customStyle="{ padding: '17rpx 36rpx', background: '#FFFFFF' }"
|
||
v-model="queryParams.modelName" :placeholder="$tt('group.inputContent')" shape="circle"
|
||
@clear="handleClearSearch" clearable>
|
||
<!-- #endif -->
|
||
<template slot="prefix">
|
||
<u-icon name="search" color="rgb(192, 196, 204)" size="26"
|
||
@click="isSearch = false"></u-icon>
|
||
</template>
|
||
<template slot="suffix">
|
||
<view style="display: flex; flex-direction: row; align-items: center;">
|
||
<span style="width: 0px; height: 14px; border: 1px solid #000000; opacity: 0.1;"></span>
|
||
<span style="font-size: 14px; font-weight: 400; color: #3378FE; margin-left: 24rpx;"
|
||
@click="handleSearch">{{$tt('common.search')}}</span>
|
||
</view>
|
||
</template>
|
||
<!-- #ifndef APP-NVUE -->
|
||
</u-input>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
</u--input>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="right-wrap"
|
||
v-if="device.protocolCode === 'MODBUS-TCP' || device.protocolCode === 'MODBUS-RTU'">
|
||
<u-icon name="/static/common/refresh_blue.png" color="#3378FE" size="28"
|
||
@click="handleCollectionAll"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="event-wrap">
|
||
<view class="item" v-for="(item, index) in datas" :key="index">
|
||
<view class="status"
|
||
:style="{ background: item.type === 1 ? '#486ff2' : item.type === 2 ? '#13ce66' : '#ffba00' }">
|
||
<text v-if="item.type === 3">{{$tt('variable.041-1')}}</text>
|
||
<text v-if="item.type === 1">{{$tt('variable.041-2')}}</text>
|
||
<text v-if="item.type === 2">{{$tt('variable.041-3')}}</text>
|
||
</view>
|
||
<view class="left">
|
||
<view class="name">{{item.modelName}}</view>
|
||
<view class="time">{{item.ts || '--'}}</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="data">
|
||
<text v-if="item.dataTypeName === 'bool' || item.dataTypeName === 'enum'">
|
||
{{item.valueName || '--'}}
|
||
</text>
|
||
<text v-else>
|
||
{{item.value || '--'}}
|
||
</text>
|
||
<text v-if="!!item.unit" style="margin-left: 5px;">{{item.unit}}</text>
|
||
</view>
|
||
<view class="icon">
|
||
<u-icon v-if="device.protocolCode === 'MODBUS-TCP' || device.protocolCode === 'MODBUS-RTU'"
|
||
name="/static/common/refresh.png" size="22" @click="handleActiveCollect(item)"></u-icon>
|
||
<u-icon v-if="item.isReadonly === 0" name="edit-pen" size="22"
|
||
@click="handleIssueInstruction(item)"></u-icon>
|
||
<!-- 站位符 -->
|
||
<view v-else style="width: 22px; height: 22px;"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-loadmore v-if="total > queryParams.pageSize" :status="loadmoreStatus"
|
||
:loading-text="$tt('variable.041-5')" :loadmoreText="$tt('variable.041-6')"
|
||
:nomoreText="$tt('variable.041-7')" marginTop="20" @loadmore="loadMoreLogs" />
|
||
<u-empty mode="data" :show="total === 0" marginTop="60" :text="$tt('scene.emptyData')"></u-empty>
|
||
</view>
|
||
<!-- 下发数据弹窗 -->
|
||
<view class="other">
|
||
<!-- 数据采集提示框 -->
|
||
<u-modal :show="isCollect" :content="$tt('variable.041-4')" @confirm="handleCollectConfirm"
|
||
@cancel="isCollect = false" showCancelButton></u-modal>
|
||
<!-- 下发数据 -->
|
||
<u-popup :show="isIssue" :round="5" mode="bottom" bgColor="#eef3f7" @close="isIssue = false">
|
||
<view class="issue-popup">
|
||
<view class="nav">
|
||
<text @click="isIssue = false">{{$tt('common.cancel')}}</text>
|
||
<text @click="handleSendService">{{$tt('common.confirm')}}</text>
|
||
</view>
|
||
<u--form labelPosition="left" label-width="100px">
|
||
<u-form-item v-for="(item, index) in issueOpations" :label="`${item.label}：`" :key="index">
|
||
<!-- 字符串 -->
|
||
<view style="width: 100%;"
|
||
v-if="item.dataTypeName === 'string'||(item.dataTypeName === 'array' && item.arrayType === 'string')">
|
||
<u--input :placeholder="$tt('common.PleaseIpt')" border="none" inputAlign="right"
|
||
v-model="funVal[item.key]"></u--input>
|
||
</view>
|
||
<!-- 整数，小数 -->
|
||
<view class="with-range"
|
||
v-if="item.dataTypeName == 'integer' || item.dataTypeName == 'decimal'||item.dataTypeName == 'array'||(item.dataTypeName == 'array'&&item.arrayType=='integer')||(item.dataTypeName == 'array'&&item.arrayType=='decimal')">
|
||
<u--input v-model="funVal[item.key]" inputAlign="right"
|
||
:placeholder="$tt('common.PleaseIpt')" @input="justNumber(item, $event)"
|
||
type="number" border="none"></u--input>
|
||
<text v-if="item.unit && item.unit != 'un' && item.unit != '/'">
|
||
{{item.unit}}
|
||
</text>
|
||
<text> ({{ item.min }} ~ {{ item.max }})</text>
|
||
</view>
|
||
<!-- 枚举，布尔型 -->
|
||
<view style="width: 100%;"
|
||
v-if="item.dataTypeName === 'enum' || item.dataTypeName === 'bool'"
|
||
@click="handleOpenModel">
|
||
<u--input v-model="models.label" disabled disabledColor="#ffffff"
|
||
:placeholder="$tt('common.PleaseSelect')" border="none"
|
||
suffixIcon="arrow-right"></u--input>
|
||
</view>
|
||
<!--枚举，布尔型，弹出选择框 -->
|
||
<u-popup :show="isShowModel" :round="5" mode="bottom" @close="isShowModel = false">
|
||
<view class="model-popup">
|
||
<view class="cell-group-wrap">
|
||
<u-cell-group :border="false">
|
||
<view class="cell-wrap" v-for="(item1,index1) in item.options"
|
||
:key="index1">
|
||
<u-cell :title="item1.label" :name="item1.value" :border="false"
|
||
@click="handleConfirmOperator(item1)"></u-cell>
|
||
</view>
|
||
<view class="cell-wrap">
|
||
<u-cell :title="$tt('common.cancel')" name="cancel" :border="false"
|
||
@click="isShowModel = false"></u-cell>
|
||
</view>
|
||
</u-cell-group>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
</u-popup>
|
||
<u-loading-page :loading="loading" bg-color="#eef3f7" loadingText="iot-xcwl.cn"></u-loading-page>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
listThingsModel,
|
||
getOrderControl,
|
||
propGet,
|
||
serviceInvokeReply,
|
||
serviceInvoke,
|
||
} from '@/apis/modules/device.js';
|
||
|
||
export default {
|
||
name: "DeviceVariable",
|
||
options: {
|
||
styleIsolation: 'shared'
|
||
},
|
||
props: {
|
||
device: {
|
||
type: Object,
|
||
default: null,
|
||
required: true
|
||
}
|
||
},
|
||
watch: {
|
||
// 兼容小程序
|
||
device: function(newVal, oldVal) {
|
||
this.deviceInfo = newVal;
|
||
if (newVal.deviceId && newVal.deviceId !== oldVal.deviceId) {
|
||
this.queryParams.deviceId = newVal.deviceId;
|
||
this.getVariableList();
|
||
}
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
isSearch: true,
|
||
loading: false,
|
||
queryParams: {
|
||
deviceId: '',
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
},
|
||
datas: [],
|
||
loadmoreStatus: 'loadmore', // 加载更多
|
||
total: 0, // 总条数
|
||
isCollect: false, // 是否开始采集
|
||
collectParams: {}, // 采集参数
|
||
isIssue: false, // 下发弹窗
|
||
issueOpations: [], // 下发数据
|
||
chooseFun: {}, // 选中项
|
||
funVal: {}, // 数据对象
|
||
isCanSend: true, // 是否可以下发，主要判断数值在不在范围
|
||
models: {}, // 下发数据弹框类型存储选择数据
|
||
isShowModel: false,
|
||
serialNumber: '', // 下发的设备
|
||
deviceInfo: {},
|
||
};
|
||
},
|
||
mounted() {
|
||
const {
|
||
deviceId,
|
||
serialNumber
|
||
} = this.device;
|
||
if (deviceId) {
|
||
this.queryParams.deviceId = deviceId;
|
||
this.serialNumber = serialNumber;
|
||
this.getVariableList();
|
||
}
|
||
},
|
||
created() {
|
||
// 回调处理
|
||
this.mqttCallback();
|
||
},
|
||
methods: {
|
||
/* Mqtt回调处理 */
|
||
mqttCallback() {
|
||
this.$mqttTool.client.on('message', (topic, message, buffer) => {
|
||
let topics = topic.split('/');
|
||
let productId = topics[1];
|
||
let deviceNum = topics[2];
|
||
message = JSON.parse(message.toString());
|
||
if (topics[3] == 'status') {
|
||
console.log('接收到【设备状态-运行】主题：', topic);
|
||
console.log('接收到【设备状态-运行】内容：', message);
|
||
// 更新列表中设备的状态
|
||
if (this.deviceInfo.serialNumber == deviceNum) {
|
||
this.deviceInfo.status = message.status;
|
||
this.deviceInfo.isShadow = message.isShadow;
|
||
this.deviceInfo.rssi = message.rssi;
|
||
}
|
||
}
|
||
//兼容设备回复
|
||
if (topics[4] == 'reply') {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: message,
|
||
})
|
||
}
|
||
if (topics[3] == 'property' || topics[3] == 'function' || topic.endsWith(
|
||
'ws/service')) {
|
||
console.log('接收到【物模型】主题：', topic);
|
||
console.log('接收到【物模型】内容：', message);
|
||
// 更新列表中设备的属性
|
||
if (this.deviceInfo.serialNumber == deviceNum) {
|
||
for (let j = 0; j < message.message.length; j++) {
|
||
let isComplete = false;
|
||
// 设备状态
|
||
for (let k = 0; k < this.datas.length && !
|
||
isComplete; k++) {
|
||
if (this.datas[k].identifier == message.message[j].id) {
|
||
// 普通类型
|
||
this.datas[k].value = message.message[j].value;
|
||
this.datas[k].valueName = this.getValueName(this.datas[k]);
|
||
this.datas[k].ts = message.message[j].ts;
|
||
isComplete = true;
|
||
break;
|
||
}
|
||
if (isComplete) {
|
||
break;
|
||
}
|
||
};
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//查询物模型列表
|
||
getVariableList() {
|
||
listThingsModel(this.queryParams).then((res) => {
|
||
if (res.code === 200) {
|
||
if (this.queryParams.pageNum == 1) {
|
||
this.datas = res.rows.map((item) => {
|
||
return {
|
||
...item,
|
||
valueName: this.getValueName(item) || '',
|
||
dataTypeName: item.datatype.type || '',
|
||
showWay: item.datatype.showWay,
|
||
};
|
||
});
|
||
} else {
|
||
this.datas = this.datas.concat(res.rows.map((item) => {
|
||
return {
|
||
...item,
|
||
valueName: this.getValueName(item) || '',
|
||
dataTypeName: item.datatype.type || '',
|
||
showWay: item.datatype.showWay,
|
||
};
|
||
}));
|
||
}
|
||
this.total = res.total;
|
||
setTimeout(() => {
|
||
if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize >= this.total) {
|
||
this.loadmoreStatus = 'nomore';
|
||
} else {
|
||
this.loadmoreStatus = 'loadmore';
|
||
}
|
||
}, 1000);
|
||
}
|
||
});
|
||
},
|
||
handleConfirmOperator(item) {
|
||
this.models = item;
|
||
for (let key in this.funVal) {
|
||
this.funVal[key] = this.models.value;
|
||
}
|
||
this.isShowModel = false;
|
||
},
|
||
|
||
//搜索
|
||
handleSearch() {
|
||
this.datas = [];
|
||
this.queryParams.pageNum = 1;
|
||
this.getVariableList();
|
||
},
|
||
handleClearSearch() {
|
||
this.handleSearch();
|
||
},
|
||
// 判断输入是否超过范围
|
||
justNumber(item, val) {
|
||
if (item.max < val || item.min > val) {
|
||
this.isCanSend = false
|
||
} else {
|
||
this.isCanSend = true
|
||
}
|
||
this.$forceUpdate()
|
||
},
|
||
// 采集所有数据
|
||
handleCollectionAll() {
|
||
const {
|
||
status,
|
||
serialNumber
|
||
} = this.device;
|
||
if (status !== 3) {
|
||
let title = '';
|
||
if (status === 1) {
|
||
title = this.$tt('variable.041-8');
|
||
} else if (status === 2) {
|
||
title = this.$tt('variable.041-9');
|
||
} else if (status === 4) {
|
||
title = this.$tt('variable.041-10');
|
||
}
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: title
|
||
});
|
||
return;
|
||
}
|
||
this.isCollect = true;
|
||
const params = {
|
||
type: 2,
|
||
serialNumber: serialNumber,
|
||
};
|
||
this.collectParams = {
|
||
...params
|
||
};
|
||
},
|
||
// 主动采集数据
|
||
handleActiveCollect(item) {
|
||
const {
|
||
status,
|
||
serialNumber
|
||
} = this.device;
|
||
if (status !== 3) {
|
||
let title = '';
|
||
if (status === 1) {
|
||
title = this.$tt('variable.041-8');
|
||
} else if (status === 2) {
|
||
title = this.$tt('variable.041-9');
|
||
} else if (status === 4) {
|
||
title = this.$tt('variable.041-10');
|
||
}
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: title
|
||
});
|
||
return;
|
||
}
|
||
this.isCollect = true;
|
||
const params = {
|
||
type: 1,
|
||
serialNumber: item.serialNumber,
|
||
identifier: item.identifier,
|
||
};
|
||
this.collectParams = {
|
||
...params
|
||
};
|
||
},
|
||
//确认采集
|
||
handleCollectConfirm() {
|
||
propGet(this.collectParams).then(res => {
|
||
let title = '';
|
||
if (res.code === 200) {
|
||
title = this.$tt('variable.041-11');
|
||
} else {
|
||
title = res.msg;
|
||
}
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.msg
|
||
});
|
||
this.isCollect = false;
|
||
})
|
||
},
|
||
//指令下发
|
||
async handleIssueInstruction(item) {
|
||
const params = {
|
||
deviceId: this.device.deviceId,
|
||
modelId: item.modelId
|
||
}
|
||
//判断是否有权限
|
||
const response = await getOrderControl(params);
|
||
if (response.code != 200) {
|
||
uni.$u.toast(response.msg);
|
||
return;
|
||
}
|
||
//这里兼容子设备的下发，在网关设备下发的时候选择实际子设备的编号
|
||
this.serialNumber = item.serialNumber;
|
||
let title = '';
|
||
if (this.device.status !== 3 && this.device.isShadow !== 1) {
|
||
if (this.device.status === 1) {
|
||
title = this.$tt('variable.041-8');
|
||
} else if (this.device.status === 2) {
|
||
title = this.$tt('variable.041-9');
|
||
} else {
|
||
title = this.$tt('variable.041-10');
|
||
}
|
||
uni.$u.toast(title);
|
||
return;
|
||
}
|
||
this.isIssue = true;
|
||
this.models = {};
|
||
this.isCanSend = true;
|
||
this.chooseFun = item;
|
||
this.getIssueOpations(item);
|
||
},
|
||
// 封装操作列表
|
||
getIssueOpations(item) {
|
||
this.issueOpations = [];
|
||
let options = [];
|
||
this.funVal = {};
|
||
const datatype = item.datatype;
|
||
if (datatype.type == 'enum') {
|
||
options = datatype.enumList?.map(option => {
|
||
return {
|
||
label: option.text,
|
||
value: option.value + ''
|
||
}
|
||
}) || []
|
||
}
|
||
if (datatype.type == 'bool') {
|
||
options = [{
|
||
label: datatype.falseText || '',
|
||
value: '0'
|
||
}, {
|
||
label: datatype.trueText || '',
|
||
value: '1'
|
||
}]
|
||
}
|
||
this.issueOpations.push({
|
||
dataTypeName: datatype.type,
|
||
arrayType: datatype.arrayType,
|
||
label: item.modelName,
|
||
key: item.identifier,
|
||
max: parseInt(datatype?.max || 100),
|
||
min: parseInt(datatype?.min || -100),
|
||
options: options,
|
||
value: item.value
|
||
})
|
||
this.issueOpations.forEach(item => {
|
||
let value = item.value
|
||
if (item.datatype == 'integer' || item.datatype == 'decimal' || (item.dataTypeName ==
|
||
'array' && item.arrayType == 'integer') || (item.dataTypeName == 'array' && item
|
||
.arrayType == 'decimal')) {
|
||
value = parseInt(value)
|
||
}
|
||
this.funVal[item.key] = value;
|
||
})
|
||
},
|
||
// 发送指令
|
||
async handleSendService() {
|
||
const params = this.funVal;
|
||
const key = Object.keys(params)[0];
|
||
if (this.isCanSend && !!params[key]) {
|
||
try {
|
||
const pas = {
|
||
serialNumber: this.serialNumber,
|
||
identifier: this.chooseFun.identifier,
|
||
remoteCommand: params
|
||
}
|
||
this.isIssue = true;
|
||
if (this.deviceInfo.protocolCode === 'MODBUS-RTU' || this.deviceInfo.protocolCode ===
|
||
'MODBUS-TCP') {
|
||
const res = await serviceInvokeReply(pas);
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
icon: 'success',
|
||
title: this.$tt('variable.041-11')
|
||
});
|
||
this.matchParams();
|
||
this.isIssue = false;
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.data
|
||
});
|
||
this.isIssue = false;
|
||
}
|
||
} else {
|
||
const res = await serviceInvoke(pas);
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
icon: 'success',
|
||
title: this.$tt('variable.041-11')
|
||
});
|
||
this.matchParams();
|
||
this.isIssue = false;
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.data
|
||
});
|
||
this.isIssue = false;
|
||
}
|
||
}
|
||
|
||
} finally {}
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: this.$tt('variable.041-12')
|
||
});
|
||
}
|
||
},
|
||
// 下发后匹配
|
||
matchParams() {
|
||
for (let i = 0; i < this.datas.length; i++) {
|
||
if (this.datas[i].identifier == this.chooseFun.identifier) {
|
||
const variable = Object.values(this.funVal)[0];
|
||
if (this.device.isShadow == 1 && this.device.status != 3) {
|
||
this.datas[i].shadow = variable;
|
||
this.datas[i].valueName = this.getValueName(this.datas[i]);
|
||
} else {
|
||
this.datas[i].value = variable;
|
||
this.datas[i].valueName = this.getValueName(this.datas[i]);
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
getValueName(item) {
|
||
//返回的数据
|
||
let res = item.value || '';
|
||
//需要解析的类型
|
||
const optionsType = ['bool', 'enum'];
|
||
//如果有datatype并且需要解析就遍历解析
|
||
if (item.datatype) {
|
||
switch (item.datatype.type) {
|
||
case 'bool':
|
||
if (0 == item.value) res = item.datatype.falseText;
|
||
if (1 == item.value) res = item.datatype.trueText;
|
||
break;
|
||
case 'enum':
|
||
item.datatype.enumList?.some((enumOpt) => {
|
||
if (enumOpt.value == item.value) {
|
||
res = enumOpt.text;
|
||
return true;
|
||
}
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
return res;
|
||
},
|
||
// 属性弹框
|
||
handleOpenModel() {
|
||
this.isShowModel = true;
|
||
},
|
||
// 上拉加载
|
||
loadMoreLogs() {
|
||
this.loadmoreStatus = 'loading';
|
||
this.queryParams.pageNum = ++this.queryParams.pageNum;
|
||
// 模拟网络请求
|
||
setTimeout(() => {
|
||
if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize >= this.total) {
|
||
this.loadmoreStatus = 'nomore';
|
||
} else {
|
||
this.loadmoreStatus = 'loading';
|
||
this.getVariableList();
|
||
}
|
||
}, 1000);
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.datas = [];
|
||
this.queryParams.pageNum = 1;
|
||
// 模拟网络请求
|
||
setTimeout(x => {
|
||
this.type === 1 && this.getList();
|
||
uni.stopPullDownRefresh();
|
||
}, 1000);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.status-variable {
|
||
width: 100%;
|
||
|
||
.nav-bar {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 84rpx;
|
||
|
||
.right-wrap {
|
||
margin-left: 16rpx;
|
||
|
||
::v-deep .u-icon__icon {
|
||
top: -0.5px !important;
|
||
margin-right: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.event-wrap {
|
||
width: 100%;
|
||
margin-top: 22rpx;
|
||
|
||
.item {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
border-radius: 10px;
|
||
padding: 50rpx 30rpx 30rpx;
|
||
background-color: #ffffff;
|
||
|
||
&:not(:last-child) {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.status {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 20rpx 0 20rpx 0;
|
||
}
|
||
|
||
.left {
|
||
flex: 1;
|
||
|
||
.name {
|
||
font-size: 30rpx;
|
||
line-height: 44rpx;
|
||
}
|
||
|
||
.time {
|
||
font-size: 24rpx;
|
||
line-height: 40rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
flex-direction: row;
|
||
|
||
.data {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
width: 220rpx;
|
||
}
|
||
|
||
.icon {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.other {
|
||
.issue-popup {
|
||
padding: 20rpx;
|
||
margin-bottom: 100rpx;
|
||
|
||
.nav {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
margin-bottom: 34rpx;
|
||
}
|
||
|
||
.with-range {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
::v-deep .u-form {
|
||
background: #ffffff;
|
||
padding: 0 20rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.model-popup {
|
||
margin-bottom: 100rpx;
|
||
padding: 10rpx 0;
|
||
|
||
.cell-group-wrap {
|
||
background: #eef3f7;
|
||
|
||
.cell-wrap {
|
||
text-align: center;
|
||
background: #fff;
|
||
padding: 5rpx 0;
|
||
border-bottom: 1rpx solid #f8f8f8;
|
||
|
||
&:last-child {
|
||
margin-top: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |