cmc-oa/oa-ui-app/pages/project/projectInfo.vue

<!--
 * @Author: ysh
 * @Date: 2025-05-26 10:44:29
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-30 15:05:07
-->
<template>
  <view class="container">
    <!-- 内容区域 -->
    <view class="content">
      <!-- 项目基本信息 -->
      <view class="section" id="section1">
        <view class="section-title">
          <view class="line"></view>
          <text>项目基本信息</text>
        </view>
        <view class="info-list">
          <view class="info-item">
            <text class="label">项目编号</text>
            <text class="value">{{ project.projectNumber }}</text>
          </view>
          <view class="info-item">
            <text class="label">项目名称</text>
            <text class="value">{{ project.projectName }}</text>
          </view>
          <view class="info-item">
            <text class="label">项目类型</text>
            <text class="value">{{ project.projectType }}</text>
          </view>
          <view class="info-item">
            <text class="label">项目来源</text>
            <text class="value">{{ project.projectSource == '0' ? '院内' : '院外' }}</text>
          </view>
          <view class="info-item">
            <text class="label">项目级别</text>
            <text class="value" :class="project.projectLevel === '0' ? 'normal' : 'important'">
              {{ project.projectLevel ? (project.projectLevel == '0' ? '一般项目' : '重大项目') : '一般项目' }}
            </text>
          </view>
          <view class="info-item">
            <text class="label">甲方单位</text>
            <text class="value">{{ project.partyA ? project.partyA.partyAName : '' }}</text>
          </view>
          <view class="info-item">
            <text class="label">联系人</text>
            <text class="value">{{ project.contactPerson }}</text>
          </view>
          <view class="info-item">
            <text class="label">联系电话</text>
            <text class="value">{{ project.telephone }}</text>
          </view>
          <view class="info-item">
            <text class="label">承担部门</text>
            <text class="value">{{ project.undertakingDeptName }}</text>
          </view>
          <view class="info-item">
            <text class="label">项目登记人</text>
            <text class="value">{{ getUserName(project.projectRegistrant) }}</text>
          </view>
          <view class="info-item">
            <text class="label">项目登记时间</text>
            <text class="value">{{ project.registerTime }}</text>
          </view>
          <view class="info-item">
            <text class="label">合同编码</text>
            <text class="value">{{ project.contractCode }}</text>
          </view>
          <view class="info-item">
            <text class="label">合同编号</text>
            <text class="value">{{ project.contractNumber }}</text>
          </view>
          <view class="info-item full-width">
            <text class="label">项目概况</text>
            <view class="value">
              <view class="card-container">
                <view class="card" v-for="(item, index) in workList" :key="index">
                  <view class="card-content">
                    <view class="card-left">
                      <text class="card-title">工作内容{{ index + 1 }}</text>
                    </view>
                    <view class="card-right">
                      <view class="card-item">
                        <text class="label">工作内容:</text>
                        <text class="value">{{ item.content }}</text>
                      </view>
                      <view class="card-item">
                        <text class="label">等级或比例尺:</text>
                        <text class="value">{{ item.scale }}</text>
                      </view>
                      <view class="card-item">
                        <text class="label">单位:</text>
                        <text class="value">{{ item.unit }}</text>
                      </view>
                      <view class="card-item">
                        <text class="label">工作量:</text>
                        <text class="value">{{ item.workload }}</text>
                      </view>
                      <view class="card-item">
                        <text class="label">要求完成时间:</text>
                        <text class="value">{{ item.deadline }}</text>
                      </view>
                      <view class="card-item">
                        <text class="label">备注:</text>
                        <text class="value">{{ item.remark }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="info-item full-width">
            <text class="label">资料提交要求</text>
            <text class="value">{{ project.projectRequest }}</text>
          </view>
          <view class="info-item">
            <text class="label">项目备注</text>
            <text class="value">{{ project.remark }}</text>
          </view>
        </view>
      </view>

      <!-- 项目安排 -->
      <view class="section" id="section2">
        <view class="section-title">
          <view class="line"></view>
          <text>项目安排</text>
        </view>
        <view class="info-list">
          <view class="info-item">
            <text class="label">承担部门</text>
            <view class="value">
              <text>{{ project.undertakingDeptName }}</text>
              <button class="btn-small" @click="deptOpen = true" v-if="hasPermi(['oa:project:edit'])">更换部门</button>
            </view>
          </view>
          <view class="info-item">
            <text class="label">部门负责人</text>
            <text class="value">{{ deptLeaderList.join(',') }}</text>
          </view>
          <view class="info-item">
            <text class="label">项目负责人</text>
            <view class="value">
              <text>{{ project.projectLeaderUser ? project.projectLeaderUser.nickName : "" }}</text>
              <button class="btn-small" @click="prLeaderOpen = true"
                v-if="hasPermi(['oa:project:edit'])">更换项目负责人</button>
            </view>
          </view>
          <view class="info-item">
            <text class="label">现场负责人</text>
            <text class="value">{{ getUserName(project.siteLeader) }}</text>
          </view>
          <view class="info-item full-width">
            <text class="label">项目预算编制</text>
            <view class="value">
              <text class="link" @click="openBudgetFn" v-if="isProjectLeader">项目预算表</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 技术安排 -->
      <view class="section" id="section3">
        <view class="section-title">
          <view class="line"></view>
          <text>技术安排</text>
        </view>
        <view class="info-list">
          <view class="info-item">
            <text class="label">技术负责人</text>
            <text class="value">{{ project.technicalDirectorUser ? project.technicalDirectorUser.nickName : '' }}</text>
          </view>
          <view class="info-item">
            <text class="label">技术设计人</text>
            <text class="value">{{ project.technicalDesignerUser ? project.technicalDesignerUser.nickName : '' }}</text>
          </view>
          <view class="info-item">
            <text class="label">质量检查员</text>
            <text class="value">{{ project.qualityInspectorName }}</text>
          </view>
          <!-- <view class="info-item">
            <text class="label">技术方案设计</text>
            <text class="value link" @click="openPlan = true">技术方案审批表</text>
          </view> -->
        </view>
      </view>

      <!-- 任务审核情况 -->
      <view class="section" id="section4">
        <view class="section-title">
          <view class="line"></view>
          <text>任务审核情况</text>
        </view>
        <view class="info-list">
          <view class="info-item full-width">
            <text class="label">经营副总审核</text>
            <view class="value">
              <textarea disabled v-model="projectComment.jyComment" class="textarea"></textarea>
              <view class="sign">
                <text>签名：
                  <text class="auditor">
                    {{ projectComment.jyUser ? projectComment.jyUser.nickName : '' }}
                  </text>
                </text>
                <text>审核时间：{{ projectComment.jyApprovalTime }}</text>
              </view>
            </view>
          </view>
          <view class="info-item full-width">
            <text class="label">分管领导批准</text>
            <view class="value">
              <textarea disabled v-model="projectComment.manageComment" class="textarea"></textarea>
              <view class="sign">
                <text>签名：
                  <text class="auditor">
                    {{ projectComment.managerUser ? projectComment.managerUser.nickName : '' }}
                  </text>
                </text>
                <text>审核时间：{{ projectComment.manageApprovalTime }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 项目生产情况 -->
      <view class="section" id="section5">
        <view class="section-title">
          <view class="line"></view>
          <text>项目生产情况</text>
        </view>
        <view class="info-list">
          <!-- <view class="info-item full-width">
            <text class="label" style="width:200rpx">安全交底记录表</text>
            <view class="value">
              <text class="link" @click="openSafe = true">安全交底记录表</text>
              <button class="btn-small" @click="handleUrge('1')" v-if="isSend">发送企业微信消息提醒相关人员</button>
            </view>
          </view>
          <view class="info-item full-width">
            <text class="label" style="width:200rpx">技术交底记录表</text>
            <view class="value">
              <text class="link" @click="openTech = true">技术交底记录表</text>
              <button class="btn-small" @click="handleUrge('2')" v-if="isSend">发送企业微信消息提醒相关人员</button>
            </view>
          </view> -->
          <view class="info-item full-width">
            <text class="label">申请设备</text>
            <view class="value">
              <view>
                <view class="device-item" v-for="(item, index) in devices" :key="index">
                  <text>{{ item }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="info-item full-width">
            <text class="label">使用车辆</text>
            <view class="value">
              <text>{{ cars.join(',') }}</text>
            </view>
          </view>
          <view class="info-item full-width">
            <text class="label">驾驶员</text>
            <view class="value">
              <text>{{ drivers.join(',') }}</text>
            </view>
          </view>
          <view class="info-item full-width">
            <text class="label">参与人员</text>
            <view class="value">
              <text class="participate-list">{{ participates.join(',') }}</text>
            </view>
          </view>
          <view class="info-item">
            <text class="label">进场时间</text>
            <text class="value">{{ project.entryTime }}</text>
          </view>
          <view class="info-item">
            <text class="label">撤场时间</text>
            <text class="value">{{ project.exitTime }}</text>
          </view>
          <view class="info-item full-width">
            <text class="label">项目进度</text>
            <view class="value">
              <view class="card-container">
                <view class="card" v-for="(item, index) in progressList" :key="index">
                  <view class="card-content">
                    <view class="card-left">
                      <text class="card-title">进度记录 {{ index + 1 }}</text>
                    </view>
                    <view class="card-right">
                      <view class="card-item">
                        <text class="label">截至日期:</text>
                        <text class="value">{{ item.date }}</text>
                      </view>
                      <view class="card-item">
                        <text class="label">累计总进度:</text>
                        <text class="value">{{ item.percentage }}%</text>
                      </view>
                      <view class="card-item">
                        <text class="label">情况说明:</text>
                        <text class="value">{{ item.situation }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="info-item full-width">
            <text class="label" style="width:200rpx">实际完成工作量</text>
            <view class="value">
              <view class="card-container">
                <view class="card" v-for="(item, index) in actualList" :key="index">
                  <view class="card-content">
                    <view class="card-left">
                      <text class="card-title">实际工作量记录 {{ index + 1 }}</text>
                    </view>
                    <view class="card-right">
                      <view class="card-item">
                        <text class="label">工作内容:</text>
                        <text class="value">{{ item.content }}</text>
                      </view>
                      <view class="card-item">
                        <text class="label">等级或比例尺:</text>
                        <text class="value">{{ item.scale }}</text>
                      </view>
                      <view class="card-item">
                        <text class="label">单位:</text>
                        <text class="value">{{ item.unit }}</text>
                      </view>
                      <view class="card-item">
                        <text class="label">工作量:</text>
                        <text class="value">{{ item.workload }}</text>
                      </view>
                      <view class="card-item">
                        <text class="label">实际完成时间:</text>
                        <text class="value">{{ parseTime(item.finishTime, '{y}-{m}-{d}') }}</text>
                      </view>
                      <view class="card-item">
                        <text class="label">备注:</text>
                        <text class="value">{{ item.remark }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 弹窗组件 -->
    <uni-popup ref="popup" type="center">
      <view class="popup-content">
        <!-- 这里可以添加弹窗内容 -->
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getDept } from "@/api/system/dept";
import { getUsersDeptLeaderByDept, getUserByPost, getUsersManageLeaderByDept } from '@/api/system/post'
import { listUser, getUser } from "@/api/system/user";
import { getProject, updateProject } from "@/api/oa/project/project";
import { listProjectWork, addProjectWork } from "@/api/oa/project/projectWork";
import { listProjectComment, getProjectComment } from "@/api/oa/project/projectComment";
import { listProjectProgress, getProjectProgress } from "@/api/oa/project/projectProgress";
import { listProjectWorkload } from '@/api/oa/project/projectWorkload'
import { listDevice, getDevice } from "@/api/oa/device/device";
import { listCar, getCar } from '@/api/oa/car/car';
import { listProjectChange } from "@/api/oa/project/projectChange";
import { flowXmlAndNodeByFormId } from "@/api/flowable/definition";
import { sendQyMessage } from "@/api/qywx/index"

export default {
  props: {
    needReturn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      project: {},
      userList: [],
      deviceList: [],
      carList: [],
      workList: [],
      deptLeaderList: [],
      progressList: [],
      actualList: [],
      openPlan: false,
      openSafe: false,
      openTech: false,
      prLeaderOpen: false,
      deptOpen: false,
      taskForm: {
        formId: ''
      },
      projectComment: {},
      devices: [],
      cars: [],
      drivers: [],
      participates: [],
      undertakingDept: [],
      projectChangeList: [],
      drawerOpen: false,
      flowData: {},
      recordOpen: false,
      clickRow: {
        procInsId: '',
        deployId: ''
      },
      isProjectLeader: false,
      printOpen: false,
      isSend: false,
    }
  },
  created() {
    // 初始化数据
    this.userList = [];
    this.deviceList = [];
    this.carList = [];
    this.workList = [];
    this.deptLeaderList = [];
    this.progressList = [];
    this.actualList = [];
    this.projectChangeList = [];

    // 获取基础数据
    this.getUserList();
    this.getDeviceList();
    this.getCarList();

    // 获取项目相关数据
    if (this.$route.query.projectId) {
      this.taskForm.formId = this.$route.query.projectId;
      let projectId = this.$route.query.projectId;
      this.getProjectInfo(projectId);
      this.getProjectWorkList(projectId);
      this.getProjectCommentList(projectId);
      this.getProjectProgressList(projectId);
      this.getActualList(projectId);
      this.getProjectChangeList(projectId);
    } else {
      this.goBack();
    }
  },
  methods: {
    // 获取项目信息
    async getProjectInfo(projectId) {
      const res = await getProject(projectId)
      if (res.data) {
        this.project = res.data;
        if (this.project.projectLeader == this.$store.getters.userId) {
          this.isProjectLeader = true;
        }
        let deptArr = [];
        if (this.project.undertakingDept && this.project.undertakingDept.trim() !== '') {
          deptArr = (this.project.undertakingDept.split(',')).map(Number)
        }
        for (let dept of deptArr) {
          const res = await getUsersDeptLeaderByDept({ deptId: Number(dept) })
          this.deptLeaderList.push(res.data.nickName);
        }
        if (this.project.devices && this.project.devices.trim() !== '') {
          this.devices = (this.project.devices.split(',')).map(Number)
          this.devices = await Promise.all(this.devices.map(async item => {
            const res = await getDevice(item)
            return res.data.name + '【' + res.data.code + '】' + '(' + res.data.brand + ')'
          }))
        }
        if (this.project.cars && this.project.cars.trim() !== '') {
          this.cars = (this.project.cars.split(',')).map(Number)
          this.cars = await Promise.all(this.cars.map(async item => {
            const res = await getCar(item)
            return res.data.licensePlate + '(' + res.data.brand + ')'
          }))
        }
        if (this.project.drivers && this.project.drivers.trim() !== '') {
          this.drivers = (this.project.drivers.split(',')).map(Number)
          this.drivers = await Promise.all(this.drivers.map(async item => {
            const res = await getUser(item)
            return res.data.nickName
          }))
        }
        if (this.project.participates && this.project.participates.trim() !== '') {
          this.participates = (this.project.participates.split(',')).map(Number);
          this.participates = await Promise.all(this.participates.map(async item => {
            const res = await getUser(item)
            return res.data.nickName
          }))
        }
        this.getManagerList();
      }
    },

    // 获取用户列表
    getUserList() {
      listUser({
        pageNum: 1,
        pageSize: 9999
      }).then(res => {
        if (res.code == 200) {
          this.userList = res.rows
        }
      })
    },

    // 获取设备列表
    getDeviceList() {
      listDevice({
        pageNum: 1,
        pageSize: 99999999,
        type: '仪器设备'
      }).then(res => {
        this.deviceList = res.rows
      })
    },

    // 获取车辆列表
    getCarList() {
      listCar({ pageSize: 9999, pageNum: 1 }).then(res => {
        this.carList = res.rows
      })
    },

    // 获取项目工作列表
    getProjectWorkList(projectId) {
      listProjectWork({ pageNum: 1, pageSize: 50, projectId }).then(res => {
        this.workList = res.rows;
      })
    },

    // 获取项目评论列表
    getProjectCommentList(projectId) {
      getProjectComment(projectId).then(res => {
        if (res.data) {
          this.projectComment = res.data
        }
      })
    },

    // 获取项目进度列表
    getProjectProgressList(projectId) {
      getProjectProgress(projectId).then(res => {
        if (res.data) {
          this.progressList = res.data;
        }
      });
    },

    // 获取实际工作量列表
    getActualList(projectId) {
      listProjectWorkload({ pageNum: 1, pageSize: 100, projectId: projectId }).then(res => {
        if (res.total > 0) {
          this.actualList = res.rows;
        }
      })
    },

    // 获取项目变更列表
    getProjectChangeList(projectId) {
      listProjectChange({ pageNum: 1, pageSize: 100, projectId }).then(response => {
        this.projectChangeList = response.rows;
      });
    },

    // 获取该项目的分管领导
    getManagerList() {
      let deptArr = [];
      if (this.project.undertakingDept && this.project.undertakingDept.trim() !== '') {
        deptArr = (this.project.undertakingDept.split(',')).map(Number)
      }
      for (let deptId of deptArr) {
        getUsersManageLeaderByDept({ deptId }).then(resopnse => {
          if (resopnse.data) {
            resopnse.data.forEach(element => {
              if (this.$store.getters.userId == element.userId) {
                this.isSend = true
              }
            });
          }
        })
      }
    },

    // 获取部门名称
    getDeptNames(deptIds) {
      if (!deptIds) return '';
      if (!this.$store.state.user || !this.$store.state.user.deptList) return deptIds;

      let names = [];
      let ids = deptIds.split(',');
      ids.forEach(id => {
        let dept = this.$store.state.user.deptList.find(d => d.deptId == id);
        if (dept) {
          names.push(dept.deptName);
        }
      });
      return names.length > 0 ? names.join(',') : deptIds;
    },

    // 获取用户名称
    getUserName(userId) {
      if (!userId || !this.userList) return '';
      let user = this.userList.find(u => u.userId == userId);
      return user ? user.nickName : '';
    },

    // 获取设备名称
    getDeviceNames(deviceIds) {
      if (!deviceIds || !deviceIds.length || !this.deviceList) return '';
      return deviceIds.map(id => {
        let device = this.deviceList.find(d => d.deviceId == id);
        return device ? device.name : '';
      }).join(',');
    },

    // 获取车辆名称
    getCarNames(carIds) {
      if (!carIds || !carIds.length || !this.carList) return '';
      return carIds.map(id => {
        let car = this.carList.find(c => c.carId == id);
        return car ? car.licensePlate : '';
      }).join(',');
    },

    // 获取用户名称列表
    getUserNames(userIds) {
      if (!userIds || !userIds.length || !this.userList) return '';
      return userIds.map(id => {
        let user = this.userList.find(u => u.userId == id);
        return user ? user.nickName : '';
      }).join(',');
    },

    // 获取文件名
    getFileName(name) {
      if (name != null) {
        let arr = name.split('/')
        return arr[arr.length - 1];
      }
    },

    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 处理设备选择变化
    onDeviceChange(e) {
      this.devices = e.detail.value;
    },

    // 处理车辆选择变化
    onCarChange(e) {
      this.cars = e.detail.value;
    },

    // 处理驾驶员选择变化
    onDriverChange(e) {
      this.drivers = e.detail.value;
    },

    // 处理参与人员选择变化
    onParticipateChange(e) {
      this.participates = e.detail.value;
    },

    // 处理催促消息
    async handleUrge(type) {
      if (!this.project.projectLeader) {
        uni.showToast({
          title: '项目负责人未选定',
          icon: 'none'
        });
        return;
      }
      let message = '';
      let user = [];
      let userStirngList = [];
      if (type == '1') {
        let { data } = await getUserByPost({ postName: "专职安全员" });
        user.push(data[0].userId);
        message = "<font color='warning'>请尽快进行安全交底：</font>  \n>" +
          "项目编号：" + this.project.projectNumber + "  \n>" +
          "项目名称：" + this.project.projectName + "  \n>";
      } else if (type == '2') {
        message = "<font color='warning'>请尽快进行技术交底：</font>   \n>" +
          "项目编号：" + this.project.projectNumber + "  \n>" +
          "项目名称：" + this.project.projectName + "  \n>";
      }
      let deptList = (this.project.undertakingDept.split(',')).map(Number);
      for (let d of deptList) {
        let { data } = await getUsersDeptLeaderByDept({ deptId: d });
        user.push(data.userId);
      }
      user.push(this.project.projectLeader);
      for (let u of user) {
        let { data } = await getUser(u);
        userStirngList.push(data.pinyin);
      }
      let userString = userStirngList.join('|');

      uni.showModal({
        title: '提示',
        content: '是否发送企业微信消息？',
        success: (res) => {
          if (res.confirm) {
            let formData = new FormData();
            formData.append('message', message);
            formData.append('userString', userString + '|YuSiHan|WangRongHua');
            sendQyMessage(formData).then(() => {
              uni.showToast({
                title: '消息已发送！',
                icon: 'success'
              });
            });
          }
        }
      });
    },

    // 检查权限
    hasPermi(permission) {
      return this.$store.getters.permissions.includes(permission);
    },

    // 格式化时间
    parseTime(time, pattern) {
      if (!time) return '';
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return pattern.replace('{y}', year)
        .replace('{m}', month.toString().padStart(2, '0'))
        .replace('{d}', day.toString().padStart(2, '0'));
    },
    openBudgetFn() {
      uni.navigateTo({
        url: '/pages/form/budget/budgetInfo?projectId=' + this.project.projectId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f3f5f7;
}

.header {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  position: relative;
  text-align: center;

  .header-btns {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }

  .title {
    font-size: 36rpx;
    font-weight: bold;
  }
}

.section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    position: relative;
    padding-left: 20rpx;

    .line {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8rpx;
      height: 32rpx;
      background-color: #303133;
      border-radius: 4rpx;
    }
  }
}

.info-list {
  .info-item {
    display: flex;
    margin-bottom: 20rpx;
    padding: 20rpx;
    background-color: #f8f9fa;
    border-radius: 8rpx;

    &.full-width {
      flex-direction: column;
    }

    .label {
      width: 175rpx;
      color: #5a5757;
      font-weight: bold;
    }

    .value {
      flex: 1;
      color: #333;
      padding-left: 10rpx;
    }
  }
}

.table {
  width: 100%;
  border: 1px solid #eee;

  .table-header {
    display: flex;
    background-color: #f5f7fa;

    .th {
      flex: 1;
      padding: 20rpx;
      text-align: center;
      font-weight: bold;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }
  }

  .table-body {
    .tr {
      display: flex;
      border-bottom: 1px solid #eee;

      .td {
        flex: 1;
        padding: 20rpx;
        text-align: center;
        border-right: 1px solid #eee;
      }
    }
  }
}

.btn {
  padding: 20rpx 40rpx;
  background-color: #409eff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  margin: 0 10rpx;

  &.btn-small {
    padding: 10rpx 20rpx;
    font-size: 24rpx;
  }
}

.link {
  color: #409eff;
  text-decoration: underline;
}

.textarea {
  width: 100%;
  height: 200rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.sign {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 24rpx;
}

.picker {
  padding: 20rpx;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 8rpx;
}

.normal {
  color: #909399;
}

.important {
  color: #f56c6c;
}

.card-container {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  width: 100%;
  margin-top: 20rpx;
}

.card {
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20rpx;
}

.card-content {
  display: flex;
  flex-direction: column;
  min-height: 200rpx;
}

.card-left {
  width: 100%;
  background-color: #f5f7fa;
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
}

.card-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #303133;
  letter-spacing: 4rpx;
}

.card-right {
  flex: 1;
  padding: 20rpx;
}

.card-item {
  display: flex;
  margin-bottom: 16rpx;
  line-height: 1.5;
}

.card-item .label {
  width: 180rpx;
  font-size: 26rpx;
  color: #5a5757;
  font-weight: bold;
  text-align: right;
}

.card-item .value {
  flex: 1;
  font-size: 26rpx;
  color: #333;
  word-break: break-all;
  padding-left: 10rpx;
}

.device-item {
  border-bottom: 1px solid #e2e2e2;
  padding: 10rpx;
}
</style>