<s:select/> 标签的默认值问题

本文介绍了一个用于迭代 sfcOperationList 的方法,并详细解释了如何设置默认值和选择器属性,如 listKey 和 listValue 等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<s:select name="aa" list="sfcOperationList" listKey="id" listValue="opName" headerKey="%{sfcProutingDetail.sfcOperation.id}"
headerValue="%{sfcProutingDetail.sfcOperation.opName}" label="工序"/>

sfcOperationList 迭代集合
sfcProutingDetail.sfcOperation.opName 默认值
<el-dialog :title="editingIndex === -1 ? '新增字段' : '编辑字段'" :visible.sync="fieldEditorVisible" width="600px"> <el-form label-width="100px"> <!-- 字段类型选择 --> <el-form-item label="字段类型"> <el-select v-model="tempField.type" @change="handleTypeChange"> <el-option label="输入框" value="el-input"/> <el-option label="下拉框" value="el-select"/> </el-select> </el-form-item> <!-- 基础属性 --> <el-form-item label="字段标签" required> <el-input v-model="tempField.label"/> </el-form-item> <el-form-item label="绑定模型" required> <el-input v-model="tempField.model" :disabled="editingIndex !== -1"> <template slot="append"> {{ tempField.model | camelCase }} </template> </el-input> </el-form-item> <!-- 下拉框选项(仅select类型显示) --> <template v-if="tempField.type === 'el-select'"> <el-divider>选项配置</el-divider> <draggable v-model="tempField.options"> <div v-for="(opt, index) in tempField.options" :key="index"> <el-input v-model="opt.label" placeholder="显示文本" style="width: 200px"/> <el-input v-model="opt.value" placeholder="存储值" style="width: 200px; margin-left: 10px"/> <el-button @click="removeOption(index)" icon="el-icon-delete" circle></el-button> </div> </draggable> <el-button @click="addOption">+ 添加选项</el-button> </template> </el-form> <div slot="footer"> <el-button @click="fieldEditorVisible = false">取消</el-button> <el-button type="primary" @click="saveField">保存</el-button> </div> </el-dialog>在修改字段的label时候会自动地把值同步给value且value不可被用户选中修改详细代码
03-14
<template> <el-dialog :title="!dataForm.id ? '新增电池信息' : '修改电池信息'" :close-on-click-modal="false" :visible.sync="visible" width="80%" top="5vh" custom-class="battery-form-dialog" > <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="180px" label-position="top" > <el-collapse v-model="activePanels" accordion> <!-- 电池基本信息 --> <el-collapse-item title="电池基本信息" name="1"> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="电池ID" prop="batteryId"> <el-input v-model="dataForm.batteryId" placeholder="请输入电池唯一标识"> <i slot="prefix" class="el-icon-files"></i> </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="电池电压(V)" prop="batteryVoltage"> <el-input v-model="dataForm.batteryVoltage" type="number"> <i slot="prefix" class="el-icon-data-line"></i> </el-input> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="电池电流(A)" prop="batteryCurrent"> <el-input v-model="dataForm.batteryCurrent" type="number"> <i slot="prefix" class="el-icon-sort"></i> </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="电池SOC(%)" prop="batterySoc"> <el-input v-model="dataForm.batterySoc" type="number" min="0" max="100"> <i slot="prefix" class="el-icon-pie-chart"></i> </el-input> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="硬件版本" prop="batteryHardVersion"> <el-input v-model="dataForm.batteryHardVersion"> <i slot="prefix" class="el-icon-cpu"></i> </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="软件版本" prop="batterySoftVersion"> <el-input v-model="dataForm.batterySoftVersion"> <i slot="prefix" class="el-icon-setting"></i> </el-input> </el-form-item> </el-col> </el-row> </el-collapse-item> <!-- 电池状态信息 --> <el-collapse-item title="电池状态信息" name="2"> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="工作模式" prop="batteryWorkMode"> <el-select v-model="dataForm.batteryWorkMode" placeholder="请选择工作模式"> <el-option label="放电模式 (0x01)" value="1"></el-option> <el-option label="充电模式 (0x10)" value="16"></el-option> <el-option label="保护模式 (0x21)" value="33"></el-option> <el-option label="待机无输出模式 (0x30)" value="48"></el-option> <el-option label="待机预放电模式 (0x31)" value="49"></el-option> <el-option label="故障需返厂 (0xFF)" value="255"></el-option> </el-select> </el-form-item> </el-col> <el-col span="12"> <el-form-item label="电池类型" prop="batteryKind"> <el-select v-model="dataForm.batteryKind" placeholder="请选择电池类型"> <el-option label="运营" value=0></el-option> <el-option label="售后" value=1></el-option> <el-option label="内测" value=2></el-option> <el-option label="报废" value=3></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-form-item label="保护状态码" prop="batteryProtectCode"> <el-tooltip effect="dark" placement="top"> <div slot="content"> bit0: 放电低温 | bit1: 放电高温 | bit2: 充电高温<br> bit3: 充电低温 | bit4: 放电过流 | bit5: 放电欠压<br> bit6: 充电过流 | bit7: 充电过压 | bit8: 短路<br> bit9: 温差过大 | bit10: 压差过大 | bit11: 智能充电通信超时<br> bit12: IC保护 | bit13: 预放电失败 | bit14: BMS与Tracker通讯超时<br> bit15: Gsensor故障 | bit16~31: 保留 </div> <el-input v-model="dataForm.batteryProtectCode" placeholder="请输入保护状态码"> <i slot="prefix" class="el-icon-warning"></i> </el-input> </el-tooltip> </el-form-item> <el-form-item label="错误状态码" prop="batteryErrorCode"> <el-tooltip effect="dark" placement="top"> <div slot="content"> 低8位故障状态码:<br> bit0: 保留 | bit1: 采样线故障 | bit2: 温度传感器损坏<br> bit3: IC损坏 | bit4: 充电MOS损坏 | bit5: 放电MOS损坏<br> bit6: 失衡 | bit7: 失效<br> 高8位工作状态:<br> bit8: G sensor损坏 | bit9: BMS与Tracker通讯故障 </div> <el-input v-model="dataForm.batteryErrorCode" placeholder="请输入错误状态码"> <i slot="prefix" class="el-icon-warning-outline"></i> </el-input> </el-tooltip> </el-form-item> </el-collapse-item> <!-- 温度电压信息 --> <el-collapse-item title="温度与电压信息" name="3"> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="最高温度(℃)" prop="batteryTemperatureMax"> <el-input v-model="dataForm.batteryTemperatureMax" type="number"> <i slot="prefix" class="el-icon-sunny"></i> </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="最低温度(℃)" prop="batteryTemperatureMin"> <el-input v-model="dataForm.batteryTemperatureMin" type="number"> <i slot="prefix" class="el-icon-cold-drink"></i> </el-input> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="最高电压(V)" prop="batteryVoltageMax"> <el-input v-model="dataForm.batteryVoltageMax" type="number"> <i slot="prefix" class="el-icon-top"></i> </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="最低电压(V)" prop="batteryVoltageMin"> <el-input v-model="dataForm.batteryVoltageMin" type="number"> <i slot="prefix" class="el-icon-bottom"></i> </el-input> </el-form-item> </el-col> </el-row> </el-collapse-item> <!-- 设备信息 --> <el-collapse-item title="设备信息" name="4"> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="设备型号" prop="model"> <el-input v-model="dataForm.model"> <i slot="prefix" class="el-icon-mobile"></i> </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="制造商" prop="manufacture"> <el-input v-model="dataForm.manufacture"> <i slot="prefix" class="el-icon-office-building"></i> </el-input> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="8"> <el-form-item label="IMEI" prop="imei"> <el-input v-model="dataForm.imei"> <i slot="prefix" class="el-icon-phone"></i> </el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="IMSI" prop="imsi"> <el-input v-model="dataForm.imsi"> <i slot="prefix" class="el-icon-sim-card"></i> </el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="ICCID" prop="iccid"> <el-input v-model="dataForm.iccid"> <i slot="prefix" class="el-icon-credit-card"></i> </el-input> </el-form-item> </el-col> </el-row> </el-collapse-item> <!-- GPS定位信息 --> <el-collapse-item title="GPS定位信息" name="5"> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="经度" prop="longitude"> <el-input v-model="dataForm.longitude" type="number"> <i slot="prefix" class="el-icon-place"></i> </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="经度方向" prop="longitudeDirection"> <el-select v-model="dataForm.longitudeDirection"> <el-option label="东经" value="E"></el-option> <el-option label="西经" value="W"></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="纬度" prop="latitude"> <el-input v-model="dataForm.latitude" type="number"> <i slot="prefix" class="el-icon-place"></i> </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="纬度方向" prop="latitudeDirection"> <el-select v-model="dataForm.latitudeDirection"> <el-option label="北纬" value="N"></el-option> <el-option label="南纬" value="S"></el-option> </el-select> </el-form-item> </el-col> </el-row> </el-collapse-item> <!-- 业务信息 --> <el-collapse-item title="业务信息" name="6"> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="业务模式" prop="businessmode"> <el-select v-model="dataForm.businessmode"> <el-option v-for="mode in businessModes" :key="mode.value" :label="mode.label" :value="mode.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="处理状态" prop="handled"> <el-select v-model="dataForm.handled"> <el-option label="已处理" :value="1"></el-option> <el-option label="待处理" :value="0"></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="执行方式" prop="todoNow"> <el-select v-model="dataForm.todoNow"> <el-option label="立即执行" :value="1"></el-option> <el-option label="等待执行" :value="0"></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="需要回复" prop="needack"> <el-select v-model="dataForm.needack"> <el-option label="是" :value="1"></el-option> <el-option label="否" :value="0"></el-option> </el-select> </el-form-item> </el-col> </el-row> <!-- 消息类型 --> <el-form-item label="消息类型" prop="flag"> <el-select v-model="dataForm.flag"> <el-option label="设备主动请求或上报" :value="1"></el-option> <el-option label="平台主动推送或下指令" :value="2"></el-option> <el-option label="平台指令反馈的结果" :value="3"></el-option> </el-select> </el-form-item> </el-collapse-item> <!-- 其他信息 --> <el-collapse-item title="其他信息" name="7"> <el-form-item label="原始数据" prop="payload"> <el-input v-model="dataForm.payload" type="textarea" :rows="3" placeholder="请输入原始数据" ></el-input> </el-form-item> </el-collapse-item> </el-collapse> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="visible = false">取消</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button> </span> </el-dialog> </template> <script> export default { data() { return { visible: false, activePanels: ['1'], dataForm: { id: 0, batteryId: '', batteryVoltage: '', batteryCurrent: '', batterySoc: '', batteryHardVersion: '', batterySoftVersion: '', batteryWorkMode: '', batteryKind: 0, batteryProtectCode: '', batteryErrorCode: '', batteryTemperatureMax: '', batteryTemperatureMin: '', batteryVoltageMax: '', batteryVoltageMin: '', mosStatus: '', mosTemp: '', batteryCycleTimes: '', steadyStatus: '', cellVoltage: '', model: '', manufacture: '', imei: '', imsi: '', iccid: '', trackerHardwareVersion: '', trackerSoftwareVersion: '', csq: '', networkType: '', locationMode: '', longitude: '', longitudeDirection: '', latitude: '', latitudeDirection: '', gpsSpeed: '', gpsSignal: '', satelliteNum: '', accuracy: '', flag: '', clientId: '', topic: '', productKey: '', handled: '', todoNow: '', needack: '', businessmode: '', uploadTime: '', createTime: '', updateTime: '', payload: '' }, businessModes: [ { value: 1, label: "关机模式" }, { value: 2, label: "运营模式" }, { value: 3, label: "运输模式" }, { value: 4, label: "通讯充电模式" }, { value: 5, label: "盲充模式" }, { value: 6, label: "存储模式" }, { value: 7, label: "搜寻模式" }, { value: 8, label: "返厂模式" } ], dataRule: { batteryId: [ { required: true, message: '不能为空', trigger: 'blur' } ], batteryVoltage: [ { required: true, message: '不能为空', trigger: 'blur' } ], batteryCurrent: [ { required: true, message: '不能为空', trigger: 'blur' } ], batterySoc: [ { required: true, message: '不能为空', trigger: 'blur' } ], batteryHardVersion: [ { required: true, message: '不能为空', trigger: 'blur' } ], batterySoftVersion: [ { required: true, message: '不能为空', trigger: 'blur' } ], batteryWorkMode: [ { required: true, message: '0x01(1):放电模式 0x10(16):充电模式 0x21(33):保护模式 0x30(48):待机无输出模式 0x31(49):待机预放电模式 0xFF(255):故障需返厂不能为空', trigger: 'blur' } ], batteryProtectCode: [ { required: true, message: '保护状态 bit16~bit 31 保留 bit15:Gsensor 故障 bit14:BMS 与 Tracker通讯超时 bit13: 预放电失败 bit12: IC保护 bit11: 智能充电通信超时 bit10:压差过大 bit9:温差过大 bit8:短路 bit7:充电过压 bit6:充电过流 bit5:放电欠压 bit4:放电过流 bit3:充电低温 bit2:充电高温 bit1:放电高温 bit0:放电低温不能为空', trigger: 'blur' } ], batteryErrorCode: [ { required: true, message: '转成2进制, 总共为16位,高8位为电池包工作状态,低8位为故障状态码 bit9BMS 与 Tracker通讯故障,bit8BMS 板 G sensor损坏,(8/9无效)bit7:失效,bit6:失衡,bit5:放电 MOS 损坏,bit4:充电 MOS 损坏,bit3IC 损坏,bit2:温度传感器损坏,bit1:采样线断线,虚焊等故障 保留,置 0,bit0:保留不能为空', trigger: 'blur' } ], batteryTemperatureMax: [ { required: true, message: '不能为空', trigger: 'blur' } ], batteryTemperatureMin: [ { required: true, message: '不能为空', trigger: 'blur' } ], batteryVoltageMax: [ { required: true, message: '不能为空', trigger: 'blur' } ], batteryVoltageMin: [ { required: true, message: '不能为空', trigger: 'blur' } ], mosStatus: [ { required: true, message: '不能为空', trigger: 'blur' } ], mosTemp: [ { required: true, message: '不能为空', trigger: 'blur' } ], batteryCycleTimes: [ { required: true, message: '不能为空', trigger: 'blur' } ], steadyStatus: [ { required: true, message: '不能为空', trigger: 'blur' } ], cellVoltage: [ { required: true, message: '不能为空', trigger: 'blur' } ], model: [ { required: true, message: '不能为空', trigger: 'blur' } ], manufacture: [ { required: true, message: '不能为空', trigger: 'blur' } ], imei: [ { required: true, message: '不能为空', trigger: 'blur' } ], imsi: [ { required: true, message: '不能为空', trigger: 'blur' } ], iccid: [ { required: true, message: '不能为空', trigger: 'blur' } ], trackerHardwareVersion: [ { required: true, message: '不能为空', trigger: 'blur' } ], trackerSoftwareVersion: [ { required: true, message: '不能为空', trigger: 'blur' } ], csq: [ { required: true, message: '不能为空', trigger: 'blur' } ], networkType: [ { required: true, message: '不能为空', trigger: 'blur' } ], locationMode: [ { required: true, message: '不能为空', trigger: 'blur' } ], longitude: [ { required: true, message: '不能为空', trigger: 'blur' } ], longitudeDirection: [ { required: true, message: '不能为空', trigger: 'blur' } ], latitude: [ { required: true, message: '不能为空', trigger: 'blur' } ], latitudeDirection: [ { required: true, message: '不能为空', trigger: 'blur' } ], gpsSpeed: [ { required: true, message: '不能为空', trigger: 'blur' } ], gpsSignal: [ { required: true, message: '不能为空', trigger: 'blur' } ], satelliteNum: [ { required: true, message: '不能为空', trigger: 'blur' } ], accuracy: [ { required: true, message: '不能为空', trigger: 'blur' } ], flag: [ { required: true, message: '1:设备主动请求或上报 2:平台主动推送或下指令 3:平台指令反馈的结果不能为空', trigger: 'blur' } ], clientId: [ { required: true, message: 'MQTT发布消息所需的clientId不能为空', trigger: 'blur' } ], topic: [ { required: true, message: 'MQTT主题不能为空', trigger: 'blur' } ], productKey: [ { required: true, message: '主题名称中需要的productKey不能为空', trigger: 'blur' } ], handled: [ { required: true, message: '配置是否处理 1:已处理 0:待处理不能为空', trigger: 'blur' } ], todoNow: [ { required: true, message: '是否立即执行 0:等待执行 1:立即执行不能为空', trigger: 'blur' } ], needack: [ { required: true, message: '是否回复不能为空', trigger: 'blur' } ], businessmode: [ { required: true, message: '业务模式 1:关机模式 2:运营模式 3:运输模式 4:通讯充电模式 5:盲充模式 6:存储模式 7:搜寻模式 8:返厂模式不能为空', trigger: 'blur' } ], uploadTime: [ { required: true, message: '不能为空', trigger: 'blur' } ], createTime: [ { required: true, message: '不能为空', trigger: 'blur' } ], updateTime: [ { required: true, message: '更新时间不能为空', trigger: 'blur' } ], payload: [ { required: true, message: '原始数据不能为空', trigger: 'blur' } ] } } }, computed: { // 处理状态标签 handledLabel() { return this.dataForm.handled === 1 ? "已处理" : this.dataForm.handled === 0 ? "待处理" : ""; }, // 执行方式标签 todoNowLabel() { return this.dataForm.todoNow === 1 ? "立即执行" : this.dataForm.todoNow === 0 ? "等待执行" : ""; }, // 需要回复标签 needackLabel() { return this.dataForm.needack === 1 ? "是" : this.dataForm.needack === 0 ? "否" : ""; }, // 业务模式标签 businessModeLabel() { const mode = this.businessModes.find(m => m.value == this.dataForm.businessmode); return mode ? mode.label : ""; }, // 消息类型标签 flagLabel() { switch (this.dataForm.flag) { case 1: return "设备主动请求或上报"; case 2: return "平台主动推送或下指令"; case 3: return "平台指令反馈的结果"; default: return ""; } } }, methods: { init (id) { this.dataForm.id = id || 0 this.visible = true this.$nextTick(() => { this.$refs['dataForm'].resetFields() if (this.dataForm.id) { this.$http({ url: this.$http.adornUrl(`/maya/mybatteryinfo/info/${this.dataForm.id}`), method: 'get', params: this.$http.adornParams() }).then(({data}) => { if (data && data.code === 0) { this.dataForm.batteryId = data.myBatteryInfo.batteryId this.dataForm.batteryVoltage = data.myBatteryInfo.batteryVoltage this.dataForm.batteryCurrent = data.myBatteryInfo.batteryCurrent this.dataForm.batterySoc = data.myBatteryInfo.batterySoc this.dataForm.batteryHardVersion = data.myBatteryInfo.batteryHardVersion this.dataForm.batterySoftVersion = data.myBatteryInfo.batterySoftVersion this.dataForm.batteryWorkMode = data.myBatteryInfo.batteryWorkMode this.dataForm.batteryKind = data.myBatteryInfo.batteryKind this.dataForm.batteryProtectCode = data.myBatteryInfo.batteryProtectCode this.dataForm.batteryErrorCode = data.myBatteryInfo.batteryErrorCode this.dataForm.batteryTemperatureMax = data.myBatteryInfo.batteryTemperatureMax this.dataForm.batteryTemperatureMin = data.myBatteryInfo.batteryTemperatureMin this.dataForm.batteryVoltageMax = data.myBatteryInfo.batteryVoltageMax this.dataForm.batteryVoltageMin = data.myBatteryInfo.batteryVoltageMin this.dataForm.mosStatus = data.myBatteryInfo.mosStatus this.dataForm.mosTemp = data.myBatteryInfo.mosTemp this.dataForm.batteryCycleTimes = data.myBatteryInfo.batteryCycleTimes this.dataForm.steadyStatus = data.myBatteryInfo.steadyStatus this.dataForm.cellVoltage = data.myBatteryInfo.cellVoltage this.dataForm.model = data.myBatteryInfo.model this.dataForm.manufacture = data.myBatteryInfo.manufacture this.dataForm.imei = data.myBatteryInfo.imei this.dataForm.imsi = data.myBatteryInfo.imsi this.dataForm.iccid = data.myBatteryInfo.iccid this.dataForm.trackerHardwareVersion = data.myBatteryInfo.trackerHardwareVersion this.dataForm.trackerSoftwareVersion = data.myBatteryInfo.trackerSoftwareVersion this.dataForm.csq = data.myBatteryInfo.csq this.dataForm.networkType = data.myBatteryInfo.networkType this.dataForm.locationMode = data.myBatteryInfo.locationMode this.dataForm.longitude = data.myBatteryInfo.longitude this.dataForm.longitudeDirection = data.myBatteryInfo.longitudeDirection this.dataForm.latitude = data.myBatteryInfo.latitude this.dataForm.latitudeDirection = data.myBatteryInfo.latitudeDirection this.dataForm.gpsSpeed = data.myBatteryInfo.gpsSpeed this.dataForm.gpsSignal = data.myBatteryInfo.gpsSignal this.dataForm.satelliteNum = data.myBatteryInfo.satelliteNum this.dataForm.accuracy = data.myBatteryInfo.accuracy this.dataForm.flag = data.myBatteryInfo.flag this.dataForm.clientId = data.myBatteryInfo.clientId this.dataForm.topic = data.myBatteryInfo.topic this.dataForm.productKey = data.myBatteryInfo.productKey this.dataForm.handled = data.myBatteryInfo.handled this.dataForm.todoNow = data.myBatteryInfo.todoNow this.dataForm.needack = data.myBatteryInfo.needack this.dataForm.businessmode = data.myBatteryInfo.businessmode this.dataForm.uploadTime = data.myBatteryInfo.uploadTime this.dataForm.createTime = data.myBatteryInfo.createTime this.dataForm.updateTime = data.myBatteryInfo.updateTime this.dataForm.payload = data.myBatteryInfo.payload } }) } }) }, // 表单提交 dataFormSubmit () { this.$refs['dataForm'].validate((valid) => { if (valid) { this.$http({ url: this.$http.adornUrl(`/maya/mybatteryinfo/${!this.dataForm.id ? 'save' : 'update'}`), method: 'post', data: this.$http.adornData({ 'id': this.dataForm.id || undefined, 'batteryId': this.dataForm.batteryId, 'batteryVoltage': this.dataForm.batteryVoltage, 'batteryCurrent': this.dataForm.batteryCurrent, 'batterySoc': this.dataForm.batterySoc, 'batteryHardVersion': this.dataForm.batteryHardVersion, 'batterySoftVersion': this.dataForm.batterySoftVersion, 'batteryWorkMode': this.dataForm.batteryWorkMode, 'batteryKind': this.dataForm.batteryKind, 'batteryProtectCode': this.dataForm.batteryProtectCode, 'batteryErrorCode': this.dataForm.batteryErrorCode, 'batteryTemperatureMax': this.dataForm.batteryTemperatureMax, 'batteryTemperatureMin': this.dataForm.batteryTemperatureMin, 'batteryVoltageMax': this.dataForm.batteryVoltageMax, 'batteryVoltageMin': this.dataForm.batteryVoltageMin, 'mosStatus': this.dataForm.mosStatus, 'mosTemp': this.dataForm.mosTemp, 'batteryCycleTimes': this.dataForm.batteryCycleTimes, 'steadyStatus': this.dataForm.steadyStatus, 'cellVoltage': this.dataForm.cellVoltage, 'model': this.dataForm.model, 'manufacture': this.dataForm.manufacture, 'imei': this.dataForm.imei, 'imsi': this.dataForm.imsi, 'iccid': this.dataForm.iccid, 'trackerHardwareVersion': this.dataForm.trackerHardwareVersion, 'trackerSoftwareVersion': this.dataForm.trackerSoftwareVersion, 'csq': this.dataForm.csq, 'networkType': this.dataForm.networkType, 'locationMode': this.dataForm.locationMode, 'longitude': this.dataForm.longitude, 'longitudeDirection': this.dataForm.longitudeDirection, 'latitude': this.dataForm.latitude, 'latitudeDirection': this.dataForm.latitudeDirection, 'gpsSpeed': this.dataForm.gpsSpeed, 'gpsSignal': this.dataForm.gpsSignal, 'satelliteNum': this.dataForm.satelliteNum, 'accuracy': this.dataForm.accuracy, 'flag': this.dataForm.flag, 'clientId': this.dataForm.clientId, 'topic': this.dataForm.topic, 'productKey': this.dataForm.productKey, 'handled': this.dataForm.handled, 'todoNow': this.dataForm.todoNow, 'needack': this.dataForm.needack, 'businessmode': this.dataForm.businessmode, 'uploadTime': this.dataForm.uploadTime, 'createTime': this.dataForm.createTime, 'updateTime': this.dataForm.updateTime, 'payload': this.dataForm.payload }) }).then(({data}) => { if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.visible = false this.$emit('refreshDataList') } }) } else { this.$message.error(data.msg) } }) } }) } } } </script> <style scoped> /* 添加状态显示样式 */ .status-display { margin-top: 8px; padding: 6px 12px; background-color: #f5f7fa; border-radius: 4px; border: 1px solid #dcdfe6; font-size: 14px; color: #606266; } /* 在查看模式下隐藏选择框,显示纯文本 */ .view-mode .el-select { display: none; } .view-mode .status-display { display: block; } </style> 为什么电池类型显示默认为数字,不对,帮我修复
07-16
<template> <div class="home-container"> <el-tabs @tab-click="handleTabChange"> <el-tab-pane label="总览"> <div class="tab-content"> <div class="stats-row"> <el-col :span="6"> <el-card class="stat-card danger"> <div class="stat-title">当前通话数</div> <div class="stat-value">0</div> <div class="stat-sub"> 较昨日: <span style="color: #f56c6c">0</span> </div> </el-card> </el-col> <el-col :span="6"> <el-card class="stat-card"> <div class="stat-title">今日通话数</div> <div class="stat-value">0</div> <div class="stat-sub"> 较昨日: <span style="color: #67c23a">0</span> </div> </el-card> </el-col> <el-col :span="6"> <el-card class="stat-card"> <div class="stat-title">历史通话数</div> <div class="stat-value">0</div> <div class="stat-sub"> 较昨日: <span style="color: #67c23a">0</span> </div> </el-card> </el-col> <el-col :span="6"> <el-card class="stat-card"> <div class="stat-title">当前线路数</div> <div class="stat-value">0</div> <div class="stat-sub"> 较昨日: <span style="color: #67c23a">0</span> </div> </el-card> </el-col> </div> <div class="table-card"> <el-table :data="summaryTable" border> <el-table-column prop="label" label="指标"></el-table-column> <el-table-column prop="value" label="数值"></el-table-column> </el-table> </div> </div> </el-tab-pane> <el-tab-pane label="省份统计"> <div class="tab-content"> <el-table :data="provinceTable" border> <el-table-column prop="province" label="省份"></el-table-column> <el-table-column prop="currentCall" label="当前通话数" ></el-table-column> <el-table-column prop="todayCall" label="今日通话数" ></el-table-column> <el-table-column prop="historyCall" label="历史通话数" ></el-table-column> <el-table-column prop="currentLine" label="当前线路数" ></el-table-column> <el-table-column prop="circuit" label="电路线路数" ></el-table-column> <el-table-column prop="network" label="网络线路数" ></el-table-column> <el-table-column prop="todayLine" label="今日线路数" ></el-table-column> <el-table-column prop="todayCircuit" label="今日电路线路数" ></el-table-column> <el-table-column prop="todayNetwork" label="今日网络线路数" ></el-table-column> <el-table-column prop="historyLine" label="历史线路数" ></el-table-column> <el-table-column prop="historyCircuit" label="历史电路线路数" ></el-table-column> <el-table-column prop="historyNetwork" label="历史网络线路数" ></el-table-column> </el-table> </div> </el-tab-pane> <el-tab-pane label="趋势分析"> <div class="tab-content"> <div class="chart-placeholder"> <div class="mock-chart"> <div class="chart-line-container"> <div class="chart-line通话"></div> <div class="chart-line线路"></div> </div> <div class="chart-legend"> <span style="color: teal">通话数</span> | <span style="color: purple">线路数</span> </div> <div class="chart-buttons"> <el-button size="mini">近7天</el-button> <el-button size="mini">近30天</el-button> </div> </div> </div> </div> </el-tab-pane> </el-tabs> </div> </template> <script> import { userlist, getsuperes } from "@/utils/https.js"; export default { name: "HomeView", data() { return { summaryTable: [], provinceTable: [ { province: "江苏", currentCall: 0, todayCall: 0, historyCall: 0, currentLine: 0, circuit: 0, network: 0, todayLine: 0, todayCircuit: 0, todayNetwork: 0, historyLine: 0, historyCircuit: 0, historyNetwork: 0, }, { province: "上海", currentCall: 0, todayCall: 0, historyCall: 0, currentLine: 0, circuit: 0, network: 0, todayLine: 0, todayCircuit: 0, todayNetwork: 0, historyLine: 0, historyCircuit: 0, historyNetwork: 0, }, { province: "浙江", currentCall: 0, todayCall: 0, historyCall: 0, currentLine: 0, circuit: 0, network: 0, todayLine: 0, todayCircuit: 0, todayNetwork: 0, historyLine: 0, historyCircuit: 0, historyNetwork: 0, }, { province: "安徽", currentCall: 0, todayCall: 0, historyCall: 0, currentLine: 0, circuit: 0, network: 0, todayLine: 0, todayCircuit: 0, todayNetwork: 0, historyLine: 0, historyCircuit: 0, historyNetwork: 0, }, ], superEnterpriseList: [], // 新增的超级企业列表数据 }; }, mounted() { this.loadHomeData(); this.loadSuperEnterpriseList(); // 调用获取超级企业列表的方法 }, methods: { loadHomeData() { userlist() .then(data => { this.summaryTable = data.summary || []; this.provinceTable = data.provinces || this.provinceTable; }) .catch(error => { console.error("加载首页数据失败:", error); this.$message.error("加载数据失败"); }); }, loadSuperEnterpriseList() { getsuperes() .then(response => { this.superEnterpriseList = response.data || []; console.log('超级企业列表:', this.superEnterpriseList); }) .catch(error => { console.error('获取超级企业列表失败:', error); this.$message.error('获取超级企业列表失败'); }); }, handleTabChange(tab) { console.log("切换到:", tab.name); }, handleSizeChange(val) { this.pageSize = val; }, handleCurrentChange(val) { this.currentPage = val; }, }, }; </script> <style scoped> :root { --main-bg-color: #f5f7fa; --tab-bg-color: #ffffff; --stat-border-color: #f56c6c; } .home-container { padding: 20px; background: var(--main-bg-color); min-height: calc(100vh - 64px); } .tab-wrapper { background: var(--tab-bg-color); border: 1px solid #ebeef5; border-radius: 4px; } .tab-content { padding: 20px; border-top: none; } .stats-row { margin-top: 10px; } .stat-card { height: 160px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .stat-card.danger { border-left: 4px solid var(--stat-border-color); } .stat-title { font-size: 16px; font-weight: 500; margin-bottom: 10px; } .stat-value { font-size: 24px; color: #303133; margin-bottom: 10px; } .stat-sub { font-size: 14px; color: #909399; } .table-card { padding: 20px; } .chart-placeholder { text-align: center; padding: 40px 0; } .mock-chart { position: relative; height: 300px; width: 100%; } .chart-line-container { position: absolute; bottom: 40px; left: 10%; width: 80%; height: 200px; border-bottom: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; } .chart-line通话 { position: absolute; bottom: 0; width: 100%; height: 30%; background: linear-gradient(to top, rgba(0, 128, 128, 0.2) 0%, teal 100%); clip-path: polygon( 0% 100%, 5% 80%, 10% 60%, 15% 70%, 20% 50%, 25% 60%, 30% 40%, 35% 50%, 40% 30%, 45% 40%, 50% 20%, 55% 30%, 60% 10%, 65% 20%, 70% 0%, 75% 10%, 80% 30%, 85% 20%, 90% 40%, 95% 30%, 100% 50%, 100% 100% ); } .chart-line线路 { position: absolute; bottom: 0; width: 100%; height: 60%; background: linear-gradient(to top, rgba(128, 0, 128, 0.2) 0%, purple 100%); clip-path: polygon( 0% 100%, 5% 90%, 10% 70%, 15% 80%, 20% 60%, 25% 70%, 30% 50%, 35% 60%, 40% 40%, 45% 50%, 50% 30%, 55% 40%, 60% 20%, 65% 30%, 70% 10%, 75% 20%, 80% 40%, 85% 30%, 90% 50%, 95% 40%, 100% 60%, 100% 100% ); } .chart-legend { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .chart-buttons { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); } .server-select, .province-select { width: 160px; margin-bottom: 20px; } </style>纠错
最新发布
08-01
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值