大屏

liukangdong

2024-10-24 44dd2c7c73d5fead948902cad2695ae30d4620e2

大屏

 admin/package.json

@@ -4,6 +4,7 @@
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "dev": "vue-cli-service serve",
    "pro": "vue-cli-service serve --mode production",
    "test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build --mode production",

 admin/src/components/common/CommonHeader.vue

@@ -112,7 +112,7 @@
  mounted() {
    // console.log('userInfo',this.userInfo);
    if (!this.userInfo.needChangePwd || this.userInfo.needChangePwd == '0') {
      this.visible.changePwd = true
      // this.visible.changePwd = true
    }

  },

 admin/src/components/common/UploadAvatarImage.vue

@@ -1,16 +1,9 @@
<template>
  <div>
    <el-upload
      class="avatar-uploader"
      accept=".png,.jpg,.jpeg"
      :style="customStyle"
      :action="uploadImgUrl"
      :data="uploadData"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :on-error="uploadError"
    <el-upload class="avatar-uploader" accept=".png,.jpg,.jpeg" :style="customStyle" :action="uploadImgUrl"
      :data="uploadData" :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="uploadError"
      :before-upload="beforeAvatarUpload">
      <img v-if=" file.imgurlfull" style="width: 100%;" :src="file.imgurlfull" :style="customStyle" class="avatar">
      <img v-if="file.imgurlfull" style="width: 100%;" :src="file.imgurlfull" :style="customStyle" class="avatar">
      <div v-else :style="customStyle">
        <i class="el-icon-plus avatar-uploader-icon"></i>
        <div class="tips-style">{{ tipsLabel }}</div>
@@ -21,11 +14,12 @@
</template>

<script>
import { Loading } from 'element-ui'
export default {
  props: {
    file: {
      type: Object,
      default: () => {}
      default: () => { }
    },
    tipsLabel: '',
    customStyle: {
@@ -36,6 +30,7 @@
  },
  data() {
    return {
      loading: null,
      uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/upload'
    }
  },
@@ -43,10 +38,13 @@
  methods: {
    // ä¸Šä¼ å›¾ç‰‡
    handleAvatarSuccess(res, file) {
      this.$nextTick(() => { // ä»¥æœåŠ¡çš„方式调用的 Loading éœ€è¦å¼‚步关闭
        this.loading.close()
      })
      if (res.code == 200) {
        let { data } = res
        this.file.imgurl = data.imgaddr;
        this.file.imgurlfull = data.url;
        this.file.imgurl = data.imgaddr
        this.file.imgurlfull = data.url
        this.$message.success('上传成功')
        this.$emit('uploadSuccess', { imgurl: data.imgaddr, imgurlfull: data.url, name: data.originname })
      } else {
@@ -56,10 +54,19 @@
    },
    uploadError() {
      this.$message.error('上传失败')
      this.$nextTick(() => { // ä»¥æœåŠ¡çš„方式调用的 Loading éœ€è¦å¼‚步关闭
        this.loading.close()
      })
      this.$emit('uploadEnd')
    },
    // // æ‹¦æˆª
    beforeAvatarUpload(file) {
      this.loading = Loading.service({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$emit('uploadBegin')
      return true
    }
@@ -69,10 +76,12 @@

<style lang="scss" scoped>
$image-width: 90px;

.avatar-uploader {
  width: $image-width;
  height: $image-width;
}

::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
@@ -80,9 +89,11 @@
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  line-height: 90px;
  font-size: 28px;
@@ -91,11 +102,13 @@
  height: $image-width;
  text-align: center;
}

.avatar {
  width: 90px;
  max-height: 90px;
  display: block;
}

.tips-style {
  height: 13px;
  font-size: 13px;
@@ -105,22 +118,24 @@
}
</style>
<style lang="scss" scoped>
::v-deep .el-upload--picture-card{
::v-deep .el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
}

::v-deep .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}

.icon {
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(0%, -85%);
}

::v-deep .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}
</style>


 admin/src/components/operation/HiddenDangerParam.vue

@@ -61,6 +61,7 @@
            :action="uploadImgUrl"
            :show-file-list="false"
            :on-success="uploadAvatarSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload"
          >
            <div class="upload_wrap">
@@ -104,6 +105,7 @@
import dayjs from 'dayjs'
import { allList, memberList } from '@/api/business/hiddenDangerParam'
import { create } from '@/api/business/hiddenDanger'
import { Loading } from 'element-ui'
export default {
  extends: BaseOpera,
  components: {
@@ -112,6 +114,7 @@
  data () {
    return {
      isShowModal: false,
      loadingInstance: false,
      param: {},
      userInfo: this.$store.state.userInfo,
      uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch',
@@ -169,12 +172,30 @@
      this.memberList = arr
    },
    beforeUpload (file) {
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'image/jpeg', 'image/png', 'image/gif'].indexOf(file.type) == -1) {
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'image/jpeg','image/jpg', 'image/png', 'image/gif'].indexOf(file.type) == -1) {
        this.$message.error('请上传正确的视频/图片格式')
        return false
      }
      this.loadingInstance = Loading.service({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    uploadError() {
      this.$nextTick(() => { // ä»¥æœåŠ¡çš„方式调用的 Loading éœ€è¦å¼‚步关闭
        if(this.loadingInstance){
          this.loadingInstance.close()
        }
      })
    },
    uploadAvatarSuccess (file) {
      this.$nextTick(() => { // ä»¥æœåŠ¡çš„方式调用的 Loading éœ€è¦å¼‚步关闭
        if(this.loadingInstance){
          this.loadingInstance.close()
        }
      })
      console.log('file', file)
      const item = file.data[0]
      if (['.mp4', '.avi', '.flv', '.wmv'].some(char => item.imgaddr.includes(char))) {

 admin/src/views/meeting/components/OperaBookingsWindow.vue

@@ -1,88 +1,51 @@
<template>
  <GlobalAlertWindow
    :title="title"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
    width="840px"
  >
  <GlobalAlertWindow :title="title" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm"
    width="840px">
    <el-form :model="form" ref="form" :rules="rules" label-width="120px" label-suffix="：">
      <el-form-item label="关联会议室" prop="roomId">
        <el-select
          v-model="form.roomId"
          filterable
          clearable
          :disabled="isEdit"
          placeholder="请选择关联会议室"
          @change="selectRoom"
        >
        <el-select v-model="form.roomId" filterable clearable :disabled="isEdit" placeholder="请选择关联会议室"
          @change="selectRoom">
          <el-option v-for="item in rooms()" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="预定日期" prop="date">
        <el-date-picker
          :disabled="isEdit"
          v-model="form.date"
          value-format="yyyy-MM-dd"
          placeholder="请选择预定日期"
          @change="selectDate"
        ></el-date-picker>
        <el-date-picker :disabled="isEdit" v-model="form.date" value-format="yyyy-MM-dd" placeholder="请选择预定日期"
          @change="selectDate"></el-date-picker>
      </el-form-item>
      <el-form-item label="预定时间" prop="times">
        <div class="time-style">
          <div
            class="time-item"
            v-for="(item, index) in timelist"
            :key="item.id"
            :class="{
              'time-item-sel': form.times.indexOf(index)!=-1,
              'time-item-disable': item.isUse,
              'disable': item.bookingTimeId
            }"
            @click="selectTimes(index, item)"
          >{{ `${item.startTime}-${item.endTime}` }}</div>
          <div class="time-item" v-for="(item, index) in timelist" :key="item.id" :class="{
            'time-item-sel': form.times.indexOf(index) != -1,
            'time-item-disable': item.isUse,
            'disable': item.bookingTimeId
          }" @click="selectTimes(index, item)">{{ `${item.startTime}-${item.endTime}` }}</div>
        </div>
      </el-form-item>
      <el-form-item label="会议主题" prop="name">
        <el-input v-model="form.name" placeholder="请输入会议主题" :maxlength="30" v-trim/>
        <el-input v-model="form.name" placeholder="请输入会议主题" :maxlength="30" v-trim />
      </el-form-item>

      <el-form-item label="参会人员">
        <!-- <el-input style="width:40%" disabled v-model="sysList" placeholder="选择参会人员" v-trim/> -->
        <el-select
          v-model="form.sysList"
          filterable
          clearable
          multiple
          placeholder="选择部门成员"
        >
          <el-option
            v-for="item in sysList"
            :key="item.id"
            :value="item.id"
            :label="item.department?`${item.department.name}-${item.realname}`:item.realname"
          ></el-option>
          <!-- <el-option :key="1" :value="1" label="禁用" /> -->
        </el-select>
      </el-form-item>
      <div class="df_ac">
        <el-form-item label="参会人员">
          <el-select v-model="form.sysList" filterable clearable multiple placeholder="选择部门成员">
            <el-option v-for="item in sysList" :key="item.id" :value="item.id"
              :label="item.department ? `${item.department.name}-${item.realname}` : item.realname"></el-option>
            <!-- <el-option :key="1" :value="1" label="禁用" /> -->
          </el-select>
        </el-form-item>
        <el-form-item class="ml10" label-width="140px" label="是否通知参会人员">
          <el-radio v-model="form.joinNotice" :label="1">不通知</el-radio>
          <el-radio v-model="form.joinNotice" :label="0">通知</el-radio>
        </el-form-item>
      </div>
      <el-form-item label="会议内容" prop="content">
        <el-input
          type="textarea"
          v-model="form.content"
          :maxlength="300"
          show-word-limit
          :autosize="{ minRows: 4, maxRows: 12}"
          placeholder="请输入会议内容"
          v-trim
        />
        <el-input type="textarea" v-model="form.content" :maxlength="300" show-word-limit
          :autosize="{ minRows: 4, maxRows: 12 }" placeholder="请输入会议内容" v-trim />
      </el-form-item>
      <el-form-item v-if="projectList.length" label="选择服务项目" prop="projectList">
        <el-checkbox-group v-model="form.projectList">
          <el-checkbox
            v-for="project in projectList"
            :label="project.id"
            :key="project.id"
          >{{project.name}}</el-checkbox>
          <el-checkbox v-for="project in projectList" :label="project.id"
            :key="project.id">{{ project.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="会议附件" prop="fileList">
@@ -90,24 +53,16 @@
          <el-button type="primary" icon="el-icon-upload" @click="$refs.upFile.click()">会议附件</el-button>
        </div>
        <div class="data-list">
          <FileLink
            :links="form.fileList"
            linkName="fileFullUrl"
          />
          <FileLink :links="form.fileList" linkName="fileFullUrl" />
        </div>
      </el-form-item>
      <el-form-item label="会议备注" prop="remark">
        <el-input type="textarea" v-model="form.remark" placeholder="请输入会议备注" v-trim/>
        <el-input type="textarea" v-model="form.remark" placeholder="请输入会议备注" v-trim />
      </el-form-item>
      <input type="file" @change="upFiles" ref="upFile" style="display: none;" />
    </el-form>

    <el-dialog
      title="会议室预约情况"
      :visible.sync="isShowDetail"
      append-to-body
      width="600px"
    >
    <el-dialog title="会议室预约情况" :visible.sync="isShowDetail" append-to-body width="600px">
      <div class="detail_modal">
        <div class="h1">{{ activeInfo.meetingName }}</div>
        <div class="line">
@@ -144,7 +99,7 @@
  name: 'OperaBookingsWindow',
  extends: BaseOpera,
  components: { GlobalAlertWindow, FileLink },
  data () {
  data() {
    return {
      // è¡¨å•æ•°æ®
      form: {
@@ -158,6 +113,7 @@
        startTime: '',
        endTime: '',
        times: [],
        joinNotice: 1,
        content: '',
        sysList: [],
        fileList: []
@@ -193,7 +149,7 @@
    }
  },
  inject: ['rooms'],
  created () {
  created() {
    this.config({
      api: '/meeting/bookings',
      'field.id': 'id'
@@ -214,7 +170,7 @@
     * @title çª—口标题
     * @target ç¼–辑的对象
     */
    open (title, target) {
    open(title, target) {
      this.title = title
      this.visible = true
      this.timelist = []
@@ -242,7 +198,7 @@
        this.selectRoom(this.form.roomId)
      })
    },
    selectRoom (objId) {
    selectRoom(objId) {
      this.getTimes()
      findListByObjId({
        objId: objId,
@@ -252,11 +208,11 @@
          this.projectList = res
        })
    },
    selectDate (v) {
    selectDate(v) {
      // console.log(v);
      this.getTimes()
    },
    getTimes (isInit = false) {
    getTimes(isInit = false) {
      this.form.times = []
      this.timelist = []

@@ -293,7 +249,7 @@
          })
      }
    },
    getDetail (id) {
    getDetail(id) {
      BookDetailById({
        id
      }).then(res => {
@@ -301,7 +257,7 @@
        this.isShowDetail = true
      })
    },
    selectTimes (index, item) {
    selectTimes(index, item) {
      if (item.bookingTimeId) {
        this.getDetail(item.bookingTimeId)
        return
@@ -331,7 +287,7 @@
      }
      // console.log(this.form.times);
    },
    upFiles (file) {
    upFiles(file) {
      const formdate = new FormData()
      this.isUploading = true
      formdate.append('file', file.target.files[0])
@@ -352,7 +308,7 @@
      this.$refs.upFile.value = null
    },
    // ç¡®è®¤æ–°å»º
    __confirmCreate () {
    __confirmCreate() {
      this.$refs.form.validate((valid) => {
        // debugger
        if (!valid) {
@@ -401,7 +357,7 @@
      })
    },
    // ç¡®è®¤ä¿®æ”¹
    __confirmEdit () {
    __confirmEdit() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
@@ -463,6 +419,7 @@
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;

  .time-item {
    margin-right: 8px;
    margin-bottom: 8px;
@@ -479,46 +436,54 @@
    border: #cccccc solid 1px;
    cursor: pointer;
  }

  .time-item-sel {
    border-color: $primary-color;
    background-color: #f6f9fe;
    color: $primary-color;
  }

  .time-item-disable {
    color: #fff;
    border-color: #cccccc;
    background-color: #cccccc;
  }
  .disable{

  .disable {
    border-color: #bed6f9;
    background-color: #bed6f9;
    color: #fff;
  }
}

.detail_modal {
  padding: 20px 16px;

  .title {
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 20px;
  }

  .h1 {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 15px;
  }

  .line {
    display: flex;
    margin-bottom: 10px;

    .label {
      width: 70px;
      color: #888888;
    }

    .value {
      color: #333333;
    }
  }
}

</style>

 admin/src/views/meeting/components/OperaRoomsWindow.vue

@@ -202,11 +202,13 @@
    },
    uploadAvatarSuccess(file) {
      console.log('file', file)
      this.form.multifileList.push({
      let temp = []
      temp.push({
        fileurl: file.imgurl,
        fileurlFull: file.imgurlfull,
        type: 1
      })
      this.form.multifileList = temp
      this.$set(this.form, 'videourl', file.imgurl)
      this.$set(this.form, 'videoFullUrl', file.imgurlfull)
    },

 admin/src/views/platform/LogisticsRecord/subscribe.vue

@@ -278,9 +278,13 @@
        const param = this.param
        param.inReason = this.reasonList.find(item => param.reasonId == item.id).reason
        if (valid) {
          this.subLoading = true
          platformBooksApply({ ...param }).then(res => {
            this.getList()
            this.subLoading = false
            this.isShowEdit = false
          }, () => {
            this.subLoading = false
          })
        }
      })

 admin/src/views/platform/index.vue

@@ -313,7 +313,7 @@
              if (item.newStartDate) {
                const timeNum = time.getTime() - new Date(item.newStartDate).getTime()
                if (timeNum > 3600000) {
                  item.startDateTemp = dayjs.duration(timeNum).format('H小时m分ss秒')
                  item.startDateTemp = dayjs.duration(timeNum).format('H小时m分s秒')
                } else {
                  item.startDateTemp = dayjs.duration(timeNum).format('m分s秒')
                }

 admin/src/views/task/dangetDetail.vue

@@ -258,6 +258,7 @@
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-error="uploadError"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
@@ -291,6 +292,7 @@
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAfterSuccess"
              :on-error="uploadError"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="param.url" :src="param.url" class="avatar" />
@@ -360,6 +362,7 @@
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleBackSuccess"
              :on-error="uploadError"
              :before-upload="beforeAvatarUpload"
            >
              <div class="upload_box">
@@ -406,6 +409,7 @@
<script>
import GlobalWindow from '@/components/common/GlobalWindow'
import { memberList } from '@/api/business/hiddenDangerParam'
import { Loading } from 'element-ui'
import {
  uploadFile,
  hiddenDangerDetail,
@@ -420,7 +424,7 @@
      id: '',
      type: '',
      uploadUrl: uploadFile,

      loadingInstance: false,
      title: '访客预约详情',
      isShowModal: false,
      info: {},
@@ -560,6 +564,11 @@
    },
    reject () { },
    handleAvatarSuccess (res) {
      this.$nextTick(() => { // ä»¥æœåŠ¡çš„方式调用的 Loading éœ€è¦å¼‚步关闭
        if(this.loadingInstance){
          this.loadingInstance.close()
        }
      })
      if (res.code === 200) {
        const str = res.data.url.indexOf('png') > 0 || res.data.url.indexOf('jpg') > 0
        const arr = this.handleParam.dealBeforeFileList || []
@@ -572,6 +581,11 @@
      }
    },
    handleAfterSuccess (res) {
      this.$nextTick(() => { // ä»¥æœåŠ¡çš„方式调用的 Loading éœ€è¦å¼‚步关闭
        if(this.loadingInstance){
          this.loadingInstance.close()
        }
      })
      if (res.code === 200) {
        const str = res.data.url.indexOf('png') > 0 || res.data.url.indexOf('jpg') > 0
        const arr = this.handleParam.dealAfterFileList || []
@@ -584,6 +598,11 @@
      }
    },
    handleBackSuccess (res) {
      this.$nextTick(() => { // ä»¥æœåŠ¡çš„方式调用的 Loading éœ€è¦å¼‚步关闭
        if(this.loadingInstance){
          this.loadingInstance.close()
        }
      })
      if (res.code === 200) {
        const str = res.data.url.indexOf('png') > 0 || res.data.url.indexOf('jpg') > 0
        const arr = this.backForm.dealBeforeFileList || []
@@ -595,7 +614,19 @@
        this.$set(this.backForm, 'dealBeforeFileList', arr)
      }
    },
    beforeAvatarUpload () { }
    beforeAvatarUpload () {
      this.loadingInstance = Loading.service({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    uploadError() {
      this.$nextTick(() => { // ä»¥æœåŠ¡çš„方式调用的 Loading éœ€è¦å¼‚步关闭
        this.loadingInstance.close()
      })
    },
  }
}
</script>

 h5/.gitignore

@@ -6,6 +6,7 @@
uview-ui

/dist
/unpackage


# local env files

 h5/manifest.json

@@ -125,14 +125,15 @@
            "historyApiFallback" : true,
            "disableHostCheck" : true,
            "proxy" : {
                "/admin_interface" : {
                "/gateway_interface" : {
                    // è¿™ä¸ªå­—段名需与你配置的basePrefixUrl一致，系统识别到带有/dev-api请求的地址时，会在前面拼接上代理服务器地址
                    // "target" : "http://172.20.10.7:10010", // ä»£ç†æœåŠ¡å™¨åŸŸåæˆ–IP地址
                    // "target" : "http://192.168.0.100:10010", // ä»£ç†æœåŠ¡å™¨åŸŸåæˆ–IP地址
                    "target" : "http://10.50.250.253:8088/gateway_interface", // ä»£ç†æœåŠ¡å™¨åŸŸåæˆ–IP地址
                    // "target" : "http://10.50.250.253:8088/gateway_interface", // ä»£ç†æœåŠ¡å™¨åŸŸåæˆ–IP地址
                    "target" : "http://192.168.0.173/gateway_interface", // ä»£ç†æœåŠ¡å™¨åŸŸåæˆ–IP地址
                    "changeOrigin" : true, // å…è®¸è·¨åŸŸ 
                    "pathRewrite" : {
                        "^/admin_interface" : ""
                        "^/gateway_interface" : ""
                    }
                }
            },

 h5/pages/driver/queueUp.vue

@@ -14,6 +14,7 @@
          <text v-if="activePlatform.signJobList">{{
            activePlatform.workJobList.length
          }}</text>
                    <text v-else>0</text>
          <text class="unit">辆</text>
        </view>
        <image
@@ -28,6 +29,7 @@
          <text v-if="activePlatform.workJobList">{{
            activePlatform.signJobList.length
          }}</text>
                    <text v-else>0</text>
          <text class="unit">辆</text>
        </view>
        <image

 h5/pages/driver/queueUpRecord.vue

@@ -6,11 +6,11 @@
        </view>
        <!--  -->
        <view class="main_list">
            <view class="item" :class="{ active: item.driverId == driverInfo.memberId }" v-for="item in dataList" :key="item.id">
            <view class="item" :class="{ active: item.drivierPhone == driverInfo.mobile }" v-for="item in dataList" :key="item.id">
                <view class="status padding" v-if="item.status == 2">排队中</view>
                <view class="status" v-else :class="{ padding: item.status != 5 }">{{ statusMap[item.status] }}</view>
                <view v-if="item.driverId == driverInfo.memberId" class="me">我</view>
                <image v-if="item.driverId == driverInfo.memberId" class="avatar" src="@/static/driver/ic_truck_mine@2x.png" mode=""></image>
                <view v-if="item.drivierPhone == driverInfo.mobile" class="me">我</view>
                <image v-if="item.drivierPhone == driverInfo.mobile" class="avatar" src="@/static/driver/ic_truck_mine@2x.png" mode=""></image>
                <image v-else class="avatar" src="@/static/driver/ic_truck@2x.png" mode=""></image>
                <view class="content">
                    <view class="id_card" v-if="item.carCodeFront">{{ item.carCodeFront.slice(0, 4) }}**{{ item.carCodeFront.slice(6) }}</view>
@@ -23,6 +23,7 @@
                    </view>
                </view>
            </view>
			
        </view>
    </view>
</template>

 h5/pages/staff/meetingSubOrder.vue

@@ -1,345 +1,361 @@
<template>
  <view class="main_app">
    <view class="module_list">
      <view class="item">
        <view class="name">会议时间</view>
        <view class="line" @click="handleBack">
          <view class="label">
            {{ param.activeDate || param.meetingDate }} 
            <text class="ml12" v-if="!param.id">{{ param.startTime }}-{{ param.endTime }}</text>
            <text class="ml12" v-if="param.id">{{ param.meetingTime }}</text>
          </view>
          <u-icon name="arrow-right" color="#999999" size="14" />
        </view>
      </view>
      <view class="item">
        <view class="name">会议室</view>
        <view class="line">
          <view class="label">{{ param.roomName }}(可容纳{{ param.limitNum }}人)</view>
        </view>
      </view>
      <view class="item">
        <view class="name">预约人</view>
        <view class="line">
          <view class="label">{{ userInfo.realname }}</view>
        </view>
      </view>
      <view class="empty"></view>
      <view class="item">
        <view class="name">
          <text>会议主题</text>
          <text class="star">*</text>
        </view>
        <view class="line">
          <input
            type="text"
            v-model="param.name"
            placeholder="请输入会议主题"
            placeholder-class="placeholder9"
            class="label"
          />
        </view>
      </view>
      <view class="item">
        <view class="name">
          <text>会议内容</text>
        </view>
        <view class="line">
          <u-textarea
            border="none"
            v-model="param.content"
            count
            :maxlength="300"
            placeholder="请输入会议内容"
            placeholder-class="placeholder9"
            class="label"
          />
        </view>
      </view>
      <view class="empty"></view>
      <view class="item">
        <view class="name">
          å‚会人员
           <text class="star"></text>
        </view>
        <view class="line" @click="selPeople">
          <view class="label">
            <text v-if="param.sysList && param.sysList.length > 0">
              {{ param.sysList.map((i) => i.realname).join(",") }}
            </text>
            <text
              v-else
              class="placeholder9"
              >请选择</text
            >
          </view>
          <u-icon
            name="arrow-right"
            color="#999999"
            size="14"
          />
        </view>
      </view>
      <view class="item" v-if="info.projectList && info.projectList.length > 0">
        <view class="name">选择服务项</view>
        <view class="line">
          <view class="label">
            <view
              class="service_item"
              :class="{ active: item.checked }"
              v-for="(item, index) in info.projectList"
              :key="index"
              @click="serviceClick(item)"
            >
              {{ item.projectName }}
            </view>
          </view>
        </view>
      </view>
      <view class="item">
        <view class="name">
          <text>备注</text>
        </view>
        <view class="line">
          <textarea
            v-model="param.remark"
            :maxlength="-1"
            placeholder="请输入"
            placeholder-class="placeholder9"
            class="label"
          />
        </view>
      </view>

      <view v-if="param.id" class="sub_btn" @click="onUpdate">确认修改</view>
      <view v-else class="sub_btn" @click="onSubmit"> ç¡®è®¤é¢„约 </view>
    </view>
  </view>
</template>

<script>
import {
  reservationMeeting,
  getRoomDetail,
  meetingDetail,
  updateById,
  getAppRoomDetail
} from '@/api'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      param: {},
      userInfo: uni.getStorageSync('userInfo'),
      info: {},
    }
  },
  onLoad(option) {
    if (option.id) {
      uni.setNavigationBarTitle({
        title: '会议详情'
      })
      this.getDetail(option.id)
    }
  },
  mounted() {
    this.$eventBus.$on('meetingPeo', (res) => {
      this.$set(this.param, 'sysList', res.map(i => {
        i.userId = i.id
        return i
      }))
      // this.$set(this.param, 'memberIds', res.map(i => i.id).join(','))
      // this.$set(this.param, 'memberNames', res.map(i => i.name).join(','))
    })
    this.$eventBus.$on('meetingSub', (res) => {
      this.param = { ...res }
      this.$set(this.param, 'activeDate', dayjs(res.yudingDate).format('YYYYå¹´M月D日'))
      const bookingTimeList = res.bookingTimeList.split(',').map(i => {
        return {
          timeId: Number(i)
        }
      })
      this.$set(this.param, 'bookingTimeList', bookingTimeList)
      this.initOption()
    })
  },
  methods: {
    getDetail(id) {
      meetingDetail({ id }).then(res => {
        this.param = { ...res.data,name: res.data.meetingName, content: res.data.meetingContent, sysList: res.data.userResponseList }
        // this.param = { ...res.data }
        if(this.param.sysList && this.param.sysList.length > 0){
          this.param.sysList.forEach(i => {
            i.userId = i.id
          })
        }
        getRoomDetail({ roomId: res.data.roomId }).then(ress => {
          this.info = ress.data
          if (this.info && this.info.projectList) {
            this.info.projectList.forEach(i => {
              i.checked = false
              if(res.data.projectsResponseList && res.data.projectsResponseList.length > 0){
                res.data.projectsResponseList.forEach(item2 => {
                  if(i.projectId === item2.id){
                    i.checked = true
                  }
                })
              }
            })
          }
        })
      })
    },
    onUpdate() {
      const { param, info } = this
      if (!param.name) return uni.showToast({
        title: '请输入会议主题',
        icon: 'none'
      })
      reservationMeeting({
        ...param,
        projectList: info.projectList.filter(i => i.checked),
      }).then(res => {
        if (res.code === 200) {
          setTimeout(() => {
            uni.showToast({
              title: '修改成功',
              icon: 'success',
              duration: 2000
            })
          })
          uni.redirectTo({
            url: '/pages/staff/index'
          })
        }
      })
    },
    handleBack() {
      if(this.param.id) return
      uni.navigateBack( )
    },
    onSubmit() {
      const { param, info } = this
      if (!param.name) return uni.showToast({
        title: '请输入会议主题',
        icon: 'none'
      })
      // if (!param.sysList || param.sysList.length == 0) return uni.showToast({
      //   title: '请选择参会人员',
      //   icon: 'none'
      // })
      reservationMeeting({
        ...param,
        startTime: `${param.yudingDate} ${param.startTime}:00`,
        endTime: `${param.yudingDate} ${param.endTime}:00`,
        projectList: info.projectList.filter(i => i.checked),
      }).then(res => {
        if (res.code === 200) {
          setTimeout(() => {
            uni.showToast({
              title: '预约成功',
              icon: 'success',
              duration: 2000
            })
          })
          uni.redirectTo({
            url: '/pages/staff/index'
          })
        }
      })
    },
    selPeople() {
      const { param } = this
      let startTime = new Date(param.yudingDate + ' ' + param.startTime).getTime()
      let endTime = new Date(param.yudingDate + ' ' + param.endTime).getTime()
      if(this.param.sysList && this.param.sysList.length > 0){
        setTimeout(() => {
          this.$eventBus.$emit('meetingPeoDetail', this.param.sysList || [])
        }, 500)
      }
      uni.navigateTo({
        url: `/pages/staff/meetingSel?startTime=${startTime}&endTime=${endTime}&limitNum=${this.param.limitNum}`
      })
    },
    serviceClick(item) {
      const { info } = this
      info.projectList.forEach(ite => {
        if (ite.projectId === item.projectId) {
          ite.checked = !ite.checked
        }
      })
      this.$forceUpdate()
    },
    initOption() {
      const roomId = Number(this.param.roomId)
      getRoomDetail({ roomId }).then(res => {
        this.info = res.data
        if (this.info && this.info.projectList) {
          this.info.projectList.forEach(i => {
            i.checked = false

          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.module_list {
  .item {
    border-bottom: 1rpx solid #e5e5e5;
    padding: 30rpx 0;
    .name {
      color: #666666;
      margin-bottom: 30rpx;
    }
    .line {
      display: flex;
      .label {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .service_item {
          height: 64rpx;
          line-height: 64rpx;
          background: #f7f7f7;
          border-radius: 4rpx;
          padding: 0 24rpx;
          margin-right: 20rpx;
          margin-bottom: 12rpx;
        }
        .active {
          background-color: #4d99a8;
          color: #fff;
        }
      }
    }
  }
  padding-bottom: 100rpx;
}
.empty {
  width: 750rpx;
  height: 20rpx;
  background-color: #f7f7f7;
  margin: 0 -30rpx;
}
.sub_btn {
  width: 690rpx;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  background: $uni-color-primary;
  box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
  border-radius: 36rpx;
  font-size: 30rpx;
  color: #ffffff;
  margin-top: 20rpx;
}
.star {
  margin-left: 4rpx;
  color: #e42d2d;
}
</style>
<template>

    <view class="main_app">

        <view class="module_list">

            <view class="item">

                <view class="name">会议时间</view>

                <view class="line" @click="handleBack">

                    <view class="label">

                        {{ param.activeDate || param.meetingDate }}

                        <text class="ml12" v-if="!param.id">{{ param.startTime }}-{{ param.endTime }}</text>

                        <text class="ml12" v-if="param.id">{{ param.meetingTime }}</text>

                    </view>

                    <u-icon name="arrow-right" color="#999999" size="14" />

                </view>

            </view>

            <view class="item">

                <view class="name">会议室</view>

                <view class="line">

                    <view class="label">{{ param.roomName }}(可容纳{{ param.limitNum }}人)</view>

                </view>

            </view>

            <view class="item">

                <view class="name">预约人</view>

                <view class="line">

                    <view class="label">{{ userInfo.realname }}</view>

                </view>

            </view>

            <view class="empty"></view>

            <view class="item">

                <view class="name">

                    <text>会议主题</text>

                    <text class="star">*</text>

                </view>

                <view class="line">

                    <input type="text" v-model="param.name" placeholder="请输入会议主题" placeholder-class="placeholder9"

                        class="label" />

                </view>

            </view>

            <view class="item">

                <view class="name">

                    <text>会议内容</text>

                </view>

                <view class="line">

                    <u-textarea border="none" v-model="param.content" count :maxlength="300" placeholder="请输入会议内容"

                        placeholder-class="placeholder9" class="label" />

                </view>

            </view>

            <view class="empty"></view>

            <view class="item">

                <view class="name">

                    å‚会人员

                    <text class="star"></text>

                </view>

                <view class="line" @click="selPeople">

                    <view class="label">

                        <text v-if="param.sysList && param.sysList.length > 0">

                            {{ param.sysList.map((i) => i.realname).join(",") }}

                        </text>

                        <text v-else class="placeholder9">请选择</text>

                    </view>

                    <u-icon name="arrow-right" color="#999999" size="14" />

                </view>

            </view>

            <view class="item">

                <view class="name">是否通知参会人员</view>

                <view class="line">

                    <view class="label">
                        <u-switch v-model="param.joinNotice" activeColor="#4d99a8" :activeValue="0" :inactiveValue="1"></u-switch>

                        <!-- <u-radio-group v-model="param.joinNotice">

                            <u-radio label="不通知" :name="1" activeColor="#4d99a8" class="mr24" />
                            <u-radio label="通知" :name="0" activeColor="#4d99a8" />

                        </u-radio-group> -->

                    </view>

                </view>

            </view>

            <view class="item" v-if="info.projectList && info.projectList.length > 0">

                <view class="name">选择服务项</view>

                <view class="line">

                    <view class="label">

                        <view class="service_item" :class="{ active: item.checked }" v-for="(item, index) in info.projectList"

                            :key="index" @click="serviceClick(item)">

                            {{ item.projectName }}

                        </view>

                    </view>

                </view>

            </view>

            <view class="item">

                <view class="name">

                    <text>备注</text>

                </view>

                <view class="line">

                    <textarea v-model="param.remark" :maxlength="-1" placeholder="请输入" placeholder-class="placeholder9"

                        class="label" />

                </view>

            </view>



            <view v-if="param.id" class="sub_btn" @click="onUpdate">确认修改</view>

            <view v-else class="sub_btn" @click="onSubmit"> ç¡®è®¤é¢„约 </view>

        </view>

    </view>

</template>



<script>

    import {

        reservationMeeting,

        getRoomDetail,

        meetingDetail,

        updateById,

        getAppRoomDetail

    } from '@/api'

    import dayjs from 'dayjs'

    export default {

        data() {

            return {

                param: {
                    joinNotice: 1
                },

                userInfo: uni.getStorageSync('userInfo'),

                info: {},

            }

        },

        onLoad(option) {

            if (option.id) {

                uni.setNavigationBarTitle({

                    title: '会议详情'

                })

                this.getDetail(option.id)

            }

        },

        mounted() {

            this.$eventBus.$on('meetingPeo', (res) => {

                this.$set(this.param, 'sysList', res.map(i => {

                    i.userId = i.id

                    return i

                }))

                // this.$set(this.param, 'memberIds', res.map(i => i.id).join(','))

                // this.$set(this.param, 'memberNames', res.map(i => i.name).join(','))

            })

            this.$eventBus.$on('meetingSub', (res) => {

                this.param = {

                    ...res

                }

                this.$set(this.param, 'activeDate', dayjs(res.yudingDate).format('YYYYå¹´M月D日'))

                const bookingTimeList = res.bookingTimeList.split(',').map(i => {

                    return {

                        timeId: Number(i)

                    }

                })

                this.$set(this.param, 'bookingTimeList', bookingTimeList)

                this.initOption()

            })

        },

        methods: {

            getDetail(id) {

                meetingDetail({

                    id

                }).then(res => {

                    this.param = {

                        ...res.data,

                        name: res.data.meetingName,

                        content: res.data.meetingContent,

                        sysList: res.data.userResponseList

                    }

                    // this.param = { ...res.data }

                    if (this.param.sysList && this.param.sysList.length > 0) {

                        this.param.sysList.forEach(i => {

                            i.userId = i.id

                        })

                    }

                    getRoomDetail({

                        roomId: res.data.roomId

                    }).then(ress => {

                        this.info = ress.data

                        if (this.info && this.info.projectList) {

                            this.info.projectList.forEach(i => {

                                i.checked = false

                                if (res.data.projectsResponseList && res.data.projectsResponseList.length > 0) {

                                    res.data.projectsResponseList.forEach(item2 => {

                                        if (i.projectId === item2.id) {

                                            i.checked = true

                                        }

                                    })

                                }

                            })

                        }

                    })

                })

            },

            onUpdate() {

                const {

                    param,

                    info

                } = this

                if (!param.name) return uni.showToast({

                    title: '请输入会议主题',

                    icon: 'none'

                })

                reservationMeeting({

                    ...param,

                    projectList: info.projectList.filter(i => i.checked),

                }).then(res => {

                    if (res.code === 200) {

                        setTimeout(() => {

                            uni.showToast({

                                title: '修改成功',

                                icon: 'success',

                                duration: 2000

                            })

                        })

                        uni.redirectTo({

                            url: '/pages/staff/index'

                        })

                    }

                })

            },

            handleBack() {

                if (this.param.id) return

                uni.navigateBack()

            },

            onSubmit() {

                const {

                    param,

                    info

                } = this

                if (!param.name) return uni.showToast({

                    title: '请输入会议主题',

                    icon: 'none'

                })

                // if (!param.sysList || param.sysList.length == 0) return uni.showToast({

                //   title: '请选择参会人员',

                //   icon: 'none'

                // })

                reservationMeeting({

                    ...param,

                    startTime: `${param.yudingDate} ${param.startTime}:00`,

                    endTime: `${param.yudingDate} ${param.endTime}:00`,

                    projectList: info.projectList.filter(i => i.checked),

                }).then(res => {

                    if (res.code === 200) {

                        setTimeout(() => {

                            uni.showToast({

                                title: '预约成功',

                                icon: 'success',

                                duration: 2000

                            })

                        })

                        uni.redirectTo({

                            url: '/pages/staff/index'

                        })

                    }

                })

            },

            selPeople() {

                const {

                    param

                } = this

                let startTime = new Date(param.yudingDate + ' ' + param.startTime).getTime()

                let endTime = new Date(param.yudingDate + ' ' + param.endTime).getTime()

                if (this.param.sysList && this.param.sysList.length > 0) {

                    setTimeout(() => {

                        this.$eventBus.$emit('meetingPeoDetail', this.param.sysList || [])

                    }, 500)

                }

                uni.navigateTo({

                    url: `/pages/staff/meetingSel?startTime=${startTime}&endTime=${endTime}&limitNum=${this.param.limitNum}`

                })

            },

            serviceClick(item) {

                const {

                    info

                } = this

                info.projectList.forEach(ite => {

                    if (ite.projectId === item.projectId) {

                        ite.checked = !ite.checked

                    }

                })

                this.$forceUpdate()

            },

            initOption() {

                const roomId = Number(this.param.roomId)

                getRoomDetail({

                    roomId

                }).then(res => {

                    this.info = res.data

                    if (this.info && this.info.projectList) {

                        this.info.projectList.forEach(i => {

                            i.checked = false



                        })

                    }

                })

            }

        }

    }

</script>



<style lang="scss">

    .module_list {

        .item {

            border-bottom: 1rpx solid #e5e5e5;

            padding: 30rpx 0;



            .name {

                color: #666666;

                margin-bottom: 30rpx;

            }



            .line {

                display: flex;



                .label {

                    flex: 1;

                    display: flex;

                    flex-wrap: wrap;

                    align-items: center;



                    .service_item {

                        height: 64rpx;

                        line-height: 64rpx;

                        background: #f7f7f7;

                        border-radius: 4rpx;

                        padding: 0 24rpx;

                        margin-right: 20rpx;

                        margin-bottom: 12rpx;

                    }



                    .active {

                        background-color: #4d99a8;

                        color: #fff;

                    }

                }

            }

        }



        padding-bottom: 100rpx;

    }



    .empty {

        width: 750rpx;

        height: 20rpx;

        background-color: #f7f7f7;

        margin: 0 -30rpx;

    }



    .sub_btn {

        width: 690rpx;

        height: 72rpx;

        line-height: 72rpx;

        text-align: center;

        background: $uni-color-primary;

        box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;

        border-radius: 36rpx;

        font-size: 30rpx;

        color: #ffffff;

        margin-top: 20rpx;

    }



    .star {

        margin-left: 4rpx;

        color: #e42d2d;

    }

</style>

 h5/utils/config.js

@@ -1,5 +1,5 @@

export const baseUrl = 'admin_interface/'
export const baseUrl = 'gateway_interface/'
// export const baseUrl = 'http://192.168.0.173/gateway_interface/'

export const uploadAvatar = `${baseUrl}visitsAdmin/cloudService/web/public/uploadFtp.do`

 h5_meeting/manifest.json

@@ -85,26 +85,28 @@
            }
        }
    },
    "h5": {
        "router": {
            "mode": "hash",
            "base": "./"
        },
        "devServer": {
            "port": 8091,
            "historyApiFallback": true,
            "disableHostCheck": true,
            "proxy": {
                "/gateway_interface": {
                    "target" : "http://10.50.250.253:8088/gateway_interface", // ä»£ç†æœåŠ¡å™¨åŸŸåæˆ–IP地址
                    "changeOrigin": true, // å…è®¸è·¨åŸŸ 
                    "pathRewrite": {
                        "^/gateway_interface": "" 
                    }
                }
            },
            "https": false
        }
    "h5" : {
        "router" : {
            "mode" : "hash",
            "base" : "./"
        },
        "devServer" : {
            "port" : 8091,
            "historyApiFallback" : true,
            "disableHostCheck" : true,
            "proxy" : {
                "/gateway_interface" : {
                    // "target" : "http://10.50.250.253:8088/gateway_interface", // ä»£ç†æœåŠ¡å™¨åŸŸåæˆ–IP地址
                    // "target" : "http://192.168.0.173/gateway_interface", // ä»£ç†æœåŠ¡å™¨åŸŸåæˆ–IP地址
                    "target" : "http://192.168.0.173/gateway_interface", // ä»£ç†æœåŠ¡å™¨åŸŸåæˆ–IP地址
                    "changeOrigin" : true, // å…è®¸è·¨åŸŸ 
                    "pathRewrite" : {
                        "^/gateway_interface" : ""
                    }
                }
            },
            "https" : false
        }
    },
    /* å¿«åº”用特有相关 */
    "quickapp" : {},
@@ -128,5 +130,5 @@
    "uniStatistics" : {
        "enable" : false
    },
    "vueVersion" : "3"
    "vueVersion" : "2"
}

 h5_meeting/pages/index/index.vue

@@ -131,7 +131,8 @@
                        })

                    } else {

                        this.showQrbg = false

                        this.meetingInfo = {}

                        this.meetingInfo = {}
                        this.$forceUpdate()

                    }

                })

            },


 h5_meeting/unpackage/release/apk/__UNI__EF8BAA7__20241008151948.apk

Binary files differ

 h5_meeting/unpackage/release/apk/»áÒéÊÒ.apk

Binary files differ

 h5_meeting/utils/config.js

@@ -1,7 +1,7 @@

// export const baseUrl = 'gateway_interface/'
// export const baseUrl = 'gateway_interface/'/
export const baseUrl = 'http://192.168.5.13/gateway_interface/'
// export const baseUrl = 'http://10.50.250.253:8088/gateway_interface/'
// export const baseUrl = 'http://192.168.0.173/gateway_interface/'

export const statusMap = {
    0: '待确认',

 pda/pages/index/center.vue

@@ -302,7 +302,7 @@
                        if (item.newStartDate) {

                            let timeNum = time.getTime() - new Date(item.newStartDate).getTime()

                            if (timeNum > 3600000) {

                                item.startDateTemp = dayjs.duration(timeNum).format('H小时m分ss秒')

                                item.startDateTemp = dayjs.duration(timeNum).format('H小时m分s秒')

                            } else {

                                item.startDateTemp = dayjs.duration(timeNum).format('m分s秒')

                            }


 screen/src/assets/images/FireFighting/468@2x.png

 screen/src/assets/images/FireFighting/bg@2x.png

 screen/src/assets/images/FireFighting/bg_wendu@2x.png

 screen/src/assets/images/FireFighting/ic_chuli@2x.png

 screen/src/assets/images/FireFighting/ic_gaojing_blue@2x.png

 screen/src/assets/images/FireFighting/ic_gaojing_red@2x.png

 screen/src/assets/images/FireFighting/ic_location@2x.png

 screen/src/assets/images/FireFighting/ic_shidu@2x.png

 screen/src/assets/images/FireFighting/ic_tibao@2x.png

 screen/src/assets/images/FireFighting/ic_title_green@2x.png

 screen/src/assets/images/FireFighting/ic_weixiu@2x.png

 screen/src/assets/images/FireFighting/ic_wendu@2x.png

 screen/src/assets/images/FireFighting/xiaofang_ar_left@2x.png

 screen/src/assets/images/FireFighting/xiaofang_ar_right@2x.png

 screen/src/assets/images/FireFighting/xiaofang_ic_baojing@2x.png

 screen/src/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png

 screen/src/assets/images/FireFighting/xiaofang_ic_lixian@2x.png

 screen/src/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png

 screen/src/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png

 screen/src/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png

 screen/src/assets/images/LogisticsCenter/bg@2x.png

 screen/src/assets/images/LogisticsCenter/bg_number@2x.png

 screen/src/assets/images/LogisticsCenter/bottom.png

 screen/src/assets/images/LogisticsCenter/ic_jinrichuku@2x.png

 screen/src/assets/images/LogisticsCenter/ic_jinrijihua@2x.png

 screen/src/assets/images/LogisticsCenter/ic_jinriweichu@2x.png

 screen/src/assets/images/LogisticsCenter/ic_search@2x.png

 screen/src/assets/images/LogisticsCenter/ic_title@2x.png

 screen/src/assets/images/LogisticsCenter/position.png

 screen/src/assets/images/ic_jindu@2x.png

 screen/src/router/index.js

@@ -6,28 +6,38 @@
  routes: [
    {
      path: '/',
      component: () => import('../views/SecurityControl.vue')
      component: () => import('../views/FireFighting.vue')
    },
    {
      path: '/PlatformCall',
      path: '/PlatformCall', // æœˆå°å«å·å¤§å±
      name: 'PlatformCall',
      component: () => import('../views/PlatformCall.vue')
    },
    {
      path: '/EnergyConsum',
      path: '/EnergyConsum', // èƒ½è€—看板 - ç»¿è‰²ä½Žç¢³è¿è¥
      name: 'EnergyConsum',
      component: () => import('../views/EnergyConsum.vue')
    },
    {
      path: '/LogisticsControl',
      name: 'LogisticsControl',
      path: '/LogisticsEfficiency', // ç‰©æµè¿è¡Œè°ƒåº¦çœ‹æ¿- è°ƒåº¦èƒ½æ•ˆ
      name: 'LogisticsEfficiency',
      component: () => import('../views/LogisticsEfficiency.vue')
    },
    {
      path: '/SecurityControl',
      path: '/SecurityControl',  // å®‰é˜²ç®¡æŽ§å¤§å± -
      name: 'SecurityControl',
      component: () => import('../views/SecurityControl.vue')
    },
    {
      path: '/LogisticsCenter', //库制管理看板-物流中心
      name: 'LogisticsCenter',
      component: () => import('../views/LogisticsCenter.vue')
    },
    {
      path: '/FireFighting', //消防监控
      name: 'FireFighting',
      component: () => import('../views/FireFighting.vue')
    },
  ]
})


 screen/src/views/EnergyConsum.vue

@@ -963,7 +963,7 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 92px;
  height: 90px;
  position: relative;
  padding: 0px 40px 16px;
  font-weight: 600;
@@ -993,15 +993,14 @@
    align-items: center;

    .time {
      width: 180px;
      width: 130px;
      display: flex;
      justify-content: flex-end;
      padding-bottom: 10px;
      font-size: 36px;
      font-size: 30px;
    }

    .week {
      margin-left: 36px;
      margin-left: 20px;
    }
  }


 screen/src/views/FireFighting.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1500 @@
<template>
  <v-scale-screen width="1920" height="960">
    <div class="main_app">
      <img src="@/assets/images/FireFighting/bg@2x.png" class="main_bg" alt="" />
      <div class="main_header">
        <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
        <div class="title">安泰智慧物流园区-消防态势监控</div>
        <div class="time_wrap">
          <span class="date">{{ date }}</span>
          <span class="week">{{ week }}</span>
          <span class="time">{{ time }}</span>
        </div>
      </div>
      <div class="main_content">
        <div class="left_box">
          <div class="left_box_one">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>今日各系统设备状态及告警数</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="list_wrap">
              <div class="list">
                <div class="header line">
                  <span class="item name">设备类型</span>
                  <span class="item">总数</span>
                  <span class="item">报警</span>
                  <span class="item">屏蔽</span>
                  <span class="item">故障</span>
                  <span class="item">离线</span>
                </div>
                <template v-for="i in 5">
                  <div class="line">
                    <span class="item name">火灶报警系统</span>
                    <span class="item">11</span>
                    <span class="item">11</span>
                    <span class="item">11</span>
                    <span class="item">11</span>
                    <span class="item">11</span>
                  </div>
                  <div class="separate"></div>
                </template>
              </div>
            </div>
          </div>
          <div class="left_box_two">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>报警信息</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="police_wrap">
              <div class="echart1" id="echart1"></div>
            </div>
          </div>
          <div class="left_box_three">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>告警处理分析</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="dispose_wrap">
              <div class="echart2" id="echart2"></div>
            </div>
          </div>
        </div>
        <div class="center_box">
          <div class="center_box_one">
            <div class="static_wrap">
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png" alt="">
                <div class="content">
                  <div class="name">在线</div>
                  <div class="num">1000</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_baojing@2x.png" alt="">
                <div class="content">
                  <div class="name">报警</div>
                  <div class="num">12</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png" alt="">
                <div class="content">
                  <div class="name">故障</div>
                  <div class="num">12</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_lixian@2x.png" alt="">
                <div class="content">
                  <div class="name">离线</div>
                  <div class="num">12</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png" alt="">
                <div class="content">
                  <div class="name">屏蔽</div>
                  <div class="num">12</div>
                </div>
              </div>
            </div>
          </div>
          <div class="center_box_two">
            <div class="content_wrap">
              <div class="header">
                <div class="left">
                  <img class="icon" src="@/assets/images/FireFighting/468@2x.png" alt="">
                  <span>温度/湿度传感器</span>
                </div>
                <div class="right">
                  <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png" alt="">
                  <div class="num">1/5</div>
                  <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png" alt="">
                </div>
              </div>
              <div class="list_wrap">
                <div class="title">
                  <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                  <span>卸货区1</span>
                </div>
                <div class="list">
                  <div class="item">
                    <img class="icon" src="@/assets/images/FireFighting/ic_wendu@2x.png" alt="">
                    <div class="content">
                      <div class="num">23<span>°C</span></div>
                      <div class="la">阈值 0～100°C</div>
                    </div>
                  </div>
                  <div class="item">
                    <img class="icon" src="@/assets/images/FireFighting/ic_shidu@2x.png" alt="">
                    <div class="content">
                      <div class="num">23<span>%</span></div>
                      <div class="la">阈值 0～100%</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="content_wrap">
              <div class="header">
                <div class="left">
                  <img class="icon" src="@/assets/images/FireFighting/468@2x.png" alt="">
                  <span>实时传感器检测</span>
                </div>
                <div class="right">
                  <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png" alt="">
                  <div class="num">1/5</div>
                  <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png" alt="">
                </div>
              </div>
              <div class="list_wrap">
                <div class="title_wrap">
                  <div class="title">
                    <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                    <span>1è·¯/水压</span>
                  </div>
                  <div class="title">
                    <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                    <span>2è·¯/液位</span>
                  </div>
                </div>
                <div class="list">
                  <div class="watergage_wrap">
                    <div class="watergage" id="watergage"></div>
                    <div class="unit">2.50 <span>Mpa</span></div>
                    <div class="place">阈值 0～2.5Mpa</div>
                  </div>
                  <div class="item">
                    <div class="liquidlevel_wrap">
                      <div class="liquidlevel" id="liquidlevel"></div>
                      <div class="unit">3.45 <span>M</span></div>
                      <div class="place">阈值 0～4.50M</div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right_box">
          <div class="right_box_one">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>本年消防设备/设施维保情况</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="content_wrap">
              <div class="list">
                <template v-for="i in 3">
                  <div class="item">
                    <div>已维保</div>
                    <div class="num active">500</div>
                  </div>
                  <div v-if="i < 3" class="separate"></div>
                </template>

              </div>
              <div class="footer">
                <img src="@/assets/images/FireFighting/ic_weixiu@2x.png" class="icon" alt="">
                <div class="content">
                  <div>本月新增维保</div>
                  <div class="num">40 <span>个</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="right_box_two">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>今日隐患/告警</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="su_title">
              <img class="icon" src="@/assets/images/FireFighting/ic_title_green@2x.png" alt="">
              <div class="name">隐患随手拍</div>
            </div>
            <div class="static_wrap">
              <div class="item">
                <img src="@/assets/images/FireFighting/ic_tibao@2x.png" alt="">
                <div class="content">
                  <div class="name">提报隐患数</div>
                  <div class="num"><span>10</span>个</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/ic_chuli@2x.png" alt="">
                <div class="content">
                  <div class="name">处理隐患数</div>
                  <div class="num"><span class="today">3</span>个</div>
                </div>
              </div>
            </div>
            <div class="su_title">
              <img class="icon" src="@/assets/images/FireFighting/ic_title_green@2x.png" alt="">
              <div class="name">告警信息</div>
            </div>
            <div class="list">
              <div class="item" v-for="i in 5">
                <div class="icon">
                  <div class="circle"></div>
                  <div class="line"></div>
                </div>
                <div class="content">
                  <div class="header">
                    <div class="time">
                      <span>123</span>
                      <span class="status">处理中</span>
                    </div>
                    <div class="have_time">已经发生<span>1</span>分钟</div>
                  </div>
                  <div class="wrap">
                    <div class="title">
                      <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
                      <span>消防警告</span>
                    </div>
                    <div class="title">
                      <img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt="">
                      <span>address</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </v-scale-screen>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import VScaleScreen from 'v-scale-screen'
import Percent from '@/components/percent.vue'
import dayjs from 'dayjs'

import * as echarts from 'echarts'
const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
const date = ref(dayjs().format('YYYY.MM.DD'))
const week = ref(weekMap[new Date().getDay()])
const time = ref(dayjs().format('HH:mm:ss'))
setInterval(() => {
  date.value = dayjs().format('YYYY-MM-DD')
  week.value = weekMap[new Date().getDay()]
  time.value = dayjs().format('HH:mm:ss')

}, 1000)

const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
const initEnergy = () => {
  var myChart = echarts.init(document.querySelector('.energyRef'))
  // ç»˜åˆ¶å›¾è¡¨
  const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
  myChart.setOption({
    grid: {
      top: '20%',
      left: '2%',
      right: '2%',
      bottom: '4%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
    },
    xAxis: {
      type: 'category',
      data: [1, 2, 3, 4, 4, 5]
    },
    yAxis: {
      type: 'value',
      name: 'kw·h',
      nameTextStyle: {
        padding: [0, 0, 4, -30]    // å››ä¸ªæ•°å­—分别为上右下左与原位置距离
      },
      splitLine: {
        show: true,
        lineStyle: {
          //这里输入线条的样式
          color: 'rgba(255,255,255,0.14)',
        }
      }
    },
    series: [
      {
        data: [1, 2, 3, 4, 5],
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: arr[1] },
                { offset: 1, color: '#080807' }
              ]
            ),
            barBorderRadius: [10, 10, 0, 0]
          }
        }
      }
    ]
  })
  window.addEventListener('resize', function () {//执行
    myChart.resize()
  })
}
const initEchart1 = () => {
  const myChart = echarts.init(document.getElementById('echart1'))
  const option = {
    series: [

      {
        type: 'pie',
        radius: ['86%', '100%'],
        label: {
          show: false,
          position: 'center'
        },
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        color: colors,
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}
const initWatergage = () => {
  const myChart = echarts.init(document.getElementById('watergage'))
  var data_value = 2
  const option = {
    barMaxWidth: 3,
    polar: {
      radius: '80%'
    },
    grid: {
      top: '0%',
      left: '0%',
      right: '%',
      bottom: '0%',
      containLabel: true
    },
    angleAxis: {
      show: false,
      max: (360 * 100) / 270,
      type: 'value',
      startAngle: 225,
    },
    radiusAxis: {
      show: false,
      type: 'category',
      z: 10
    },
    series: [
      {
        type: 'gauge',
        min: 0,
        max: 2.50,
        splitNumber: 5,
        radius: '100%',
        center: ['50%', '50%'],
        data: [data_value],
        detail: {
          formatter: (v) => v + '%',
          color: '#152435',
          fontSize: 1,

        },
        itemStyle: {
          color: '#3DE6FF'
        },
        pointer: {
          width: 2,
          length: '90%',
          offsetCenter: [0, '3%'],
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 0,
            color: [
              [0.05, '#1b6dff'],
              [0.10, '#2084ff'],
              [0.15, '#2596ff'],
              [0.20, '#2db0ff'],
              [0.25, '#31c0ff'],
              [0.30, '#36d3ff'],
              [0.35, '#4fe6ec'],
              [0.40, '#6ae7d2'],
              [0.45, '#84e8b9'],
              [0.50, '#a5e999'],
              [0.55, '#ccea75'],
              [0.60, '#f8eb4a'],
              [0.65, '#ffdd4f'],
              [0.70, '#ffcb5a'],
              [0.75, '#ffae6e'],
              [0.80, '#ff9c7b'],
              [0.85, '#ff8d87'],
              [0.90, '#ff7d91'],
              [0.95, '#ff6f9b'],
              [1, '#ff5ca9']
            ]

          }
        },
        axisTick: {
          show: true,
          length: 3,
          splitNumber: 12,
          lineStyle: {
            width: 1,
            color: 'auto',
          },
        },
        axisLabel: {
          distance: 12,
          fontSize: 8,
          color: 'auto',
        },
        splitLine: {
          show: true,
          length: -5,
          lineStyle: {
            width: 1,
            color: 'auto',
          }
        },
        z: 9,
      },
      {
        type: 'bar',
        barGap: '-100%',
        coordinateSystem: 'polar',
        roundCap: true,
        data: [
          {
            value: 100,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: '#0A5EFF' },
                { offset: 0.45, color: '#20DDFF' },
                { offset: 1, color: '#FC10CB' }
              ])
            }
          }
        ],
        z: 3,
      },
      {
        type: 'pie',
        radius: ['2%', '6%'],
        center: ['50%', '50%'],
        labelLine: {
          show: false
        },
        data: [
          {
            value: 100,
            itemStyle: {
              color: '#3DE6FF',
              opacity: 0.5
            }
          }
        ],
        z: 2,
      },
      {
        type: 'pie',
        radius: 4,
        labelLine: {
          show: false
        },
        data: [
          {
            value: 20,
            itemStyle: {
              color: '#3DE6FF'
            }
          }
        ],
        z: 1,
      },
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}
const initLiquidlevel = () => {
  const myChart = echarts.init(document.getElementById('liquidlevel'))
  var data = 65
  const option = {
    tooltip: {
      trigger: 'none',
    },
    xAxis: {
      data: ['百分比'],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: '#e54035',
        },
      },
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        name: '最上层立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
          normal: {
            color: 'rgba(8,44,110, 1)',
          },
        },
        data: [
          {
            value: 100,
            symbolPosition: 'end',
          },
        ],
      },
      {
        name: '中间立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
          normal: {
            color: () =>
              new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#03C7F9',
                },
                {
                  offset: 1,
                  // color: '#03C7F922',
                  color: 'rgb(8,44,110)',
                },
              ]),
            shadowColor: '#03C7F9',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 4,
          },
        },
        data: [
          {
            value: data,
            symbolPosition: 'end',
          },
        ],
      },
      {
        name: '最底部立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolOffset: [0, 20],
        z: 12,
        itemStyle: {
          normal: {
            color: () =>
              new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                {
                  offset: 0,
                  color: '#03C7F9',
                },
                {
                  offset: 0.9,
                  // color: '#03C7F922',
                  color: 'rgba(8,44,110, 0.85)',
                },
              ]),
            // shadowColor: '#03C7F9',
            // shadowBlur: 30,
            // shadowOffsetX: 0,
            // shadowOffsetY: -10,
          },
        },
        data: [100 - data],
      },
      {
        //底部立体柱
        stack: '1',
        type: 'bar',
        itemStyle: {
          normal: {
            // color: 'rgba(8,44,110, 0.94)',
            color: () =>
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(18,85,213,0.77)',
                },
                {
                  offset: 1,
                  color: 'rgba(8,44,110, 0.77)',
                },
              ]),
            opacity: 0.77,
          },
        },
        label: {
          distance: 15,
          show: true,
          position: data > 58 ? 'inside' : 'top',
          formatter: '{c}' + '%',
          fontSize: 80,
          color: '#1AFCFF',
          textShadowColor: '#03C7F9',
          textShadowBlur: 30,
          textShadowOffsetX: 5,
          textShadowOffsetY: 10,
        },

        silent: true,
        barWidth: 250,
        barGap: '-100%', // Make series be overlap
        data: [data],
      },
      {
        //上部立体柱
        stack: '1',
        type: 'bar',
        itemStyle: {
          normal: {
            color: () =>
              new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  offset: 0,
                  color: '#47C8FF77',
                },
                {
                  offset: 0.05,
                  color: '#47C8FF44',
                },
                {
                  offset: 0.15,
                  color: '#47C8FF00',
                },
                {
                  offset: 0.85,
                  color: '#47C8FF00',
                },
                {
                  offset: 0.95,
                  color: '#47C8FF44',
                },
                {
                  offset: 1,
                  color: '#47C8FF77',
                },
              ]),
          },
        },
        silent: true,
        barWidth: 300,
        barGap: '-100%', // Make series be overlap
        data: [100 - data],
      },
    ],
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}

onMounted(() => {
  // initEnergy()
  // initEchart1()
  initWatergage()
  initLiquidlevel()
})


</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}

.main_content {
  display: flex;
  padding: 20px 25px 0;

  .left_box {
    width: 450px;

    .left_box_one {
      width: 100%;
      margin-bottom: 20px;
      border: 1px solid;

      .list_wrap {
        padding: 10px 0;
        height: 227px;
        overflow: auto;

        .list {
          .line {
            display: flex;
            height: 32px;
            align-items: center;
            font-size: 14px;

            .item {
              flex: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .name {
              flex: 2;
            }

            .warnning {
              color: #FEAF01;
            }
          }

          .header {
            background: rgba(134, 156, 201, 0.1);
            font-weight: 500;

            .item {
              border-right: 1px solid rgba(255, 255, 255, 0.2);

              &:nth-last-child(1) {
                border: none;
              }
            }
          }

          .separate {
            width: 100%;
            height: 2px;
            background-color: rgba(255, 255, 255, 0.2);
            /* background-color: red; */
            border-right: 4px solid #00F2F3;
            border-left: 4px solid #00F2F3;
          }
        }
      }
    }

    .left_box_two {
      margin-bottom: 20px;

      .police_wrap {
        height: 225px;

        border: 1px solid;

        .echart1 {
          width: 100%;
          height: 100%;
        }
      }
    }

    .left_box_three {
      .dispose_wrap {
        border: 1px solid;
        height: 210px;
        width: 100%;

        .echart2 {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .center_box {
    flex: 1;
    padding: 16px 60px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .center_box_one {
      .static_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px 0 54px;

        .item {
          display: flex;

          img {
            width: 61px;
            height: 63px;
            margin-right: 15px;
          }

          .content {
            font-size: 15px;

            .num {
              font-size: 12px;
              color: #D2E0FF;

              span {
                font-weight: bold;
                font-size: 30px;
                margin-right: 5px;
                font-weight: 600;
                background-image: -webkit-linear-gradient(top,
                    #01D9FE 0%,
                    #01D9FE 60%,
                    #fff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }

              .today {
                background-image: -webkit-linear-gradient(top,
                    #fff 0%,
                    #20FFC5 50%,
                    #20FFC5 100%);
              }

              .finish {
                background-image: -webkit-linear-gradient(top,
                    #fff 0%,
                    #FFB120 50%,
                    #FFB120 100%);
              }
            }
          }
        }
      }
    }

    .center_box_two {
      width: 100%;
      display: flex;

      .content_wrap {
        flex: 1;
        margin-right: 20px;

        .title_wrap {
          display: flex;

          .title {
            flex: 1;
          }
        }

        &:nth-last-child(1) {
          margin-right: 0;
        }

        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: bold;
          font-size: 16px;
          text-shadow: 0px 2px 8px #01ABFE;
          margin-bottom: 20px;

          .left {
            display: flex;
            align-items: center;

            .icon {
              width: 14px;
              height: 28px;
              margin-right: 10px;
            }
          }

          .right {
            display: flex;
            align-items: center;

            .num {
              margin: 0 40px;
            }

            .icon {
              width: 13px;
              height: 16px;
            }
          }
        }

        .list_wrap {
          height: 206px;
          background-image: url('@/assets/images/FireFighting/bg_wendu@2x.png');
          background-size: cover;

          .title {
            height: 46px;
            display: flex;
            align-items: center;
            color: #D2E0FF;
            padding-left: 20px;

            .icon {
              width: 16px;
              margin-right: 8px;
            }
          }

          .list {
            height: 160px;
            display: flex;
            justify-content: space-evenly;

            .item {
              display: flex;
              align-items: center;

              .icon {
                width: 70px;
                height: 70px;
                margin-right: 10px;
              }

              .content {
                .num {
                  font-size: 28px;
                  font-weight: 500;

                  span {
                    font-style: 14px;
                    font-weight: 400;
                  }
                }

                .la {
                  font-size: 13px;
                  color: #869CC9;
                }
              }
            }
          }

          .watergage_wrap {
            text-align: center;

            .watergage {
              width: 130px;
              height: 112px;
            }

            .unit {
              font-weight: 500;
              font-size: 18px;
              position: relative;
              bottom: 16px;
              left: 4px;

              span {
                font-size: 12px;
                font-weight: 400;
              }
            }

            .place {
              position: relative;
              bottom: 16px;
              left: 4px;
              font-size: 13px;
              color: #869CC9;
            }
          }

          .liquidlevel_wrap {
            transform: scale(0.24);
            color: #fff;
            text-align: center;
            position: relative;
            left: 20px;
            bottom: 10px;
            .unit {
              font-weight: 500;
              font-size: 80px;
              position: relative;
              bottom: 24px;
              left: 4px;

              span {
                font-size: 52px;
                font-weight: 400;
              }
            }

            .place {
              position: relative;
              bottom: 10px;
              left: 4px;
              font-size:44px;
              color: #869CC9;
            }

            .liquidlevel {
              width: 320px;
              height: 420px;

            }
          }


        }
      }

    }
  }

  .right_box {
    width: 450px;

    .right_box_one {
      .content_wrap {
        height: 176px;

        .list {
          display: flex;
          align-items: center;

          .item {
            height: 116px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .num {
              margin-top: 12px;
              font-weight: bold;
              font-size: 32px;
            }

            .active {
              color: #00F2F3;
            }
          }

          .separate {
            width: 1px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.21);
          }
        }

        .footer {
          display: flex;

          .icon {
            width: 40px;
            height: 41px;
            margin-right: 2px;
          }

          .content {
            flex: 1;
            font-size: 16px;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            background: linear-gradient(270deg, rgba(1, 217, 254, 0) 0%, rgba(1, 217, 254, 0.19) 100%);
            border: 1px solid;
            border-image: linear-gradient(270deg, rgba(1, 217, 254, 0), rgba(1, 217, 254, 0.6)) 1 1;

            .num {
              font-size: 20px;
              font-weight: bold;

              span {
                font-size: 13px;
                color: #869CC9;
              }
            }
          }
        }
      }
    }

    .right_box_two {
      .su_title {
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 16px;
        margin: 20px;

        .icon {
          width: 17px;
          height: 17px;
          margin-right: 7px;
        }
      }

      .static_wrap {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 110px;

        .item {
          display: flex;
          align-items: center;

          img {
            width: 80px;
            height: 80px;
            margin-right: 8px;
          }

          .content {
            font-size: 14px;

            .num {
              font-size: 12px;
              color: #D2E0FF;
              margin-top: 8px;

              span {
                font-weight: bold;
                font-size: 24px;
                margin-right: 4px;
                font-weight: 600;
                background-image: -webkit-linear-gradient(top,
                    #01D9FE 0%,
                    #01D9FE 60%,
                    #fff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }

              .today {
                background-image: -webkit-linear-gradient(top,
                    #fff 0%,
                    #FFB120 50%,
                    #FFB120 100%);
              }
            }
          }
        }
      }

      .list {
        height: 330px;
        overflow: auto;
        margin-top: 15px;
        scrollbar-width: none;

        .item {
          display: flex;
          font-size: 13px;
          color: #D2E0FF;

          .icon {
            width: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 10px;

            .circle {
              width: 7px;
              height: 7px;
              border-radius: 50%;
              background: #01D9FE;
              box-shadow: 0px 0px 1px 4px #34788f;
              /* opacity: 0.52; */
            }

            .line {
              margin-top: 3px;
              width: 1px;
              flex: 1;
              background-color: #153947;
            }
          }

          .content {
            flex: 1;

            .header {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .time {
                display: flex;
                align-items: center;

                .status {
                  height: 18px;
                  line-height: 18px;
                  border-radius: 2px;
                  padding: 2px 4px;
                  border: 1px solid #869CC9;
                  font-size: 12px;
                  margin-left: 8px;
                }
              }

              .have_time {
                font-size: 12px;
                color: #D2E0FF;

                span {
                  color: #FEAF01;
                }
              }
            }

            .wrap {
              height: 40px;
              background: linear-gradient(270deg, rgba(254, 85, 1, 0) 0%, rgba(254, 85, 1, 0.19) 100%);
              border-radius: 2px 0px 0px 2px;
              display: flex;
              align-items: center;
              border: 1px solid;
              margin-bottom: 20px;
              margin-top: 8px;
              padding: 0 10px;
              border-image: linear-gradient(270deg, rgba(254, 85, 1, 0), rgba(254, 85, 1, 0.6)) 1 1;

              .title {
                flex: 4;
                font-weight: bold;
                font-size: 15px;
                color: #FFFFFF;
                display: flex;
                align-items: center;

                span {
                  margin-left: 4px;
                }

                .xf {
                  width: 14px;
                  height: 14px;
                }

                .addr {
                  width: 12px;
                  height: 12px;
                }
              }

              .address {
                flex: 6;
              }
            }
          }
        }
      }
    }
  }
}

.main_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  position: relative;
  padding: 0px 40px 16px;
  font-weight: 600;
  font-size: 36px;

  .title {
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 70%,
        #85b4ff 80%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .time_wrap {
    font-size: 26px;
    font-weight: 600;
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 50%,
        #85b4ff 80%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;

    .time {
      width: 130px;
      display: flex;
      justify-content: flex-end;
      font-size: 30px;
    }

    .week {
      margin-left: 20px;
    }
  }

  .main_header_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.com_header {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px 0 13px;
  position: relative;

  .title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 66%,
        #85b4ff 72%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    .icon {
      width: 16px;
      height: 16px;
      margin-right: 14px;
    }
  }

  .tabs {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #d2e0ff;

    .separate {
      width: 1px;
      height: 14px;
      background-color: #d2e0ff;
      margin: 0 6px;
    }

    .active {
      color: #0094eb;
    }
  }
}

.main_app {
  width: 1920px;
  height: 960px;
  /* width: 100%;
  height: 100vh; */
  background: #0b2539;
  color: #FFFFFF;
  position: relative;
  z-index: -2;
  font-size: 14px;

  .main_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
</style>

 screen/src/views/LogisticsCenter.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1312 @@
<template>
  <v-scale-screen width="1920" height="960">
    <div class="main_app">
      <img src="@/assets/images/LogisticsCenter/bg@2x.png" class="main_bg" alt="" />
      <div class="main_header">
        <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
        <div class="title">安徽中烟物流中心运行大屏</div>
        <div class="time_wrap">
          <span class="date">{{ date }}</span>
          <span class="week">{{ week }}</span>
          <span class="time">{{ time }}</span>
        </div>
      </div>
      <div class="main_content">
        <div class="left_box">
          <div class="com_header">
            <div class="title">
              <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
              <div>订单在途跟踪</div>
            </div>
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
          </div>
          <div class="left_box_one">
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
                <div>本年累计出库量</div>
              </div>
            </div>
            <div class="content_wrap">
              <div class="num_wrap">
                <div class="num_list">
                  <div class="num" v-for="i in '200000'">
                    {{ i }}
                    <img class="bg" src="@/assets/images/LogisticsCenter/bg_number@2x.png" alt="">
                  </div>
                </div>
                <div class="content">
                  <div class="unit_wrap">
                    <span class="la">同比</span>
                    <img src="@/assets/images/ic_up.png" class="icon" alt="">
                    <span>10.2%</span>
                    <span class="la" style="margin-left: 30px;margin-right: 10px;">累计出库车次</span>
                    <span>3900</span>
                  </div>

                </div>
              </div>
              <div class="echart_wrap">
                <div class="echart1" id="echart1"></div>
                <div class="list">
                  <div class="item" v-for="item, i in StockOutData" :key="i">
                    <div :style="{ background: colors[i] }" class="icon"></div>
                    <div class="text">{{ item.name }}</div>
                    <div class="num">{{ item.value }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="left_box_two">
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
                <div>近7日到货情况</div>
              </div>
            </div>
            <div class="energy_wrap">
              <div class="energyRef"></div>
            </div>
          </div>
          <div class="left_box_three">
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
                <div>当前运输任务</div>
              </div>
              <div class="search_wrap">
                <img src="@/assets/images/LogisticsCenter/ic_search@2x.png" alt="">
                <span>订单查询</span>
              </div>
            </div>
            <div class="list_wrap">
              <div class="header line">
                <span class="item">运输车辆</span>
                <span class="item">状态</span>
                <span class="item">位置</span>
                <span class="item">任务下达时间</span>
              </div>
              <div class="line" v-for="i in 5">
                <span class="item">皖A23bbb</span>
                <span class="item">11</span>
                <span class="item">11</span>
                <span class="item">11</span>
              </div>
            </div>
          </div>
        </div>
        <div class="center_box">
          <div class="center_box_one">
            <div class="header_wrap">
              <div class="left">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <span>出库能力</span>
              </div>
              <div class="right">
                <img src="@/assets/images/LogisticsCenter/position.png" class="posi" alt="">
                <span>全省</span>
                <img src="@/assets/images/LogisticsCenter/bottom.png" class="icon" alt="">
              </div>
            </div>
            <div class="static_wrap">
              <div class="item">
                <img src="@/assets/images/LogisticsCenter/ic_jinrijihua@2x.png" alt="">
                <div class="content">
                  <div class="name">今日计划量</div>
                  <div class="num"><span>1000</span>万支</div>
                  <div class="unit">车次：10</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/LogisticsCenter/ic_jinrichuku@2x.png" alt="">
                <div class="content">
                  <div class="name">今日出库量</div>
                  <div class="num"><span class="today">1000</span>万支</div>
                  <div class="unit">车次：10</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/LogisticsCenter/ic_jinriweichu@2x.png" alt="">
                <div class="content">
                  <div class="name">今日未出库量</div>
                  <div class="num"><span class="finish">1000</span>万支</div>
                  <div class="unit">车次：10</div>
                </div>
              </div>
            </div>
            <div class="footer">
              <span>占出库能力</span>
              <span class="num">80%</span>
            </div>
          </div>
          <div class="center_box_two"></div>
        </div>
        <div class="right_box">
          <div class="com_header">
            <div class="title">
              <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
              <div>仓储一库制</div>
            </div>
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
          </div>
          <div class="right_box_one">
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
                <div>本年累计入库量</div>
              </div>
            </div>
            <div class="content_wrap">
              <div class="num_wrap">
                <div class="num_list">
                  <div class="num" v-for="i in '200000'">
                    {{ i }}
                    <img class="bg" src="@/assets/images/LogisticsCenter/bg_number@2x.png" alt="">
                  </div>
                </div>
                <div class="content">
                  <div class="unit_wrap">
                    <span class="la">同比</span>
                    <img src="@/assets/images/ic_up.png" class="icon" alt="">
                    <span>10.2%</span>
                    <span class="la" style="margin-left: 30px;margin-right: 10px;">累计出库车次</span>
                    <span>3900</span>
                  </div>

                </div>
              </div>
              <div class="static_wrap">
                <div class="echart_wrap">
                  <div class="echart3" id="echart3"></div>
                  <div class="pie_text">
                    <div class="fs30">30%</div>
                  </div>
                </div>
                <div class="text">计划完成量</div>
              </div>
            </div>
          </div>
          <div class="right_box_two">
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
                <div>进销存运营</div>
              </div>
              <div class="tabs">
                <div class="tab active">7天</div>
                <div class="separate"></div>
                <div class="tab">30天</div>
                <div class="separate"></div>
                <div class="tab">1å¹´</div>
              </div>
            </div>
            <div class="echart4_wrap">
              <div class="echart4" id="echart4"></div>
            </div>
          </div>
          <div class="right_box_three">
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
                <div>库存利用率</div>
              </div>
            </div>
            <div class="echart5_wrap">
              <div class="echart5" id="echart5"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </v-scale-screen>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import VScaleScreen from 'v-scale-screen'
import Percent from '@/components/percent.vue'
import dayjs from 'dayjs'

import * as echarts from 'echarts'
const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
const date = ref(dayjs().format('YYYY.MM.DD'))
const week = ref(weekMap[new Date().getDay()])
const time = ref(dayjs().format('HH:mm:ss'))
setInterval(() => {
  date.value = dayjs().format('YYYY-MM-DD')
  week.value = weekMap[new Date().getDay()]
  time.value = dayjs().format('HH:mm:ss')

}, 1000)

const colors = ['#0193FE', '#FFB642', '#5fc6d5']
const StockOutData = ref([])
const getStockOut = () => {
  let arr = []
  arr.push({ name: '访客', value: 20 })
  arr.push({ name: '关方', value: 30 })
  arr.sort((a, b) => b.value - a.value)
  StockOutData.value = arr
  initEchart1()
}
const initEchart1 = () => {
  const myChart = echarts.init(document.getElementById('echart1'))
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: ['72%', '96%'],
        label: {
          show: false,
          position: 'center'
        },
        color: colors,
        labelLine: {
          show: false
        },
        data: StockOutData.value
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}
const initEchart3 = () => {
  const myChart = echarts.init(document.getElementById('echart3'))
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: ['80%', '96%'],
        label: {
          show: false,
          position: 'center'
        },
        color: ['#72ecc5', '#19373a'],
        labelLine: {
          show: false
        },
        data: StockOutData.value
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}
const initEchart4 = () => {
  // åŸºäºŽå‡†å¤‡å¥½çš„dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('echart4'))
  // ç»˜åˆ¶å›¾è¡¨
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
      formatter: function (params) {
        setTimeout(() => {
          console.log('params', params)
        })
        return `
          <div style="background-color: #091123;margin: -12px;padding: 14px;border: 2px solid rgba(1,217,254,0.5);color: #fff;">
            <div>${params[0].name}总销售额(万元)</div>
            <div style="display: flex;align-items: center;">
              <div style="width: 10px;height: 10px;border-radius: 50%;background-color: #ebbf40;"></div>
              <div style="margin: 0 4px 0 6px;">总销售</div>
              <span style="color: #ebbf40;">${params[0].value}</span>
            </div>
          </div>
        `
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [1, 2, 3, 4, 5, 5]
    },
    yAxis: {
      type: 'value',
      name: '万支',
      nameTextStyle: {
        padding: [0, 0, 0, -16]    // å››ä¸ªæ•°å­—分别为上右下左与原位置距离
      },
      splitLine: {
        show: true,
        lineStyle: {
          //这里输入线条的样式
          color: 'rgba(255,255,255,0.14)',
          type: 'dashed',
        },
        splitNumber: 4
      }
    },
    grid: {
      top: '18%',
      left: '0%',
      right: '2%',
      bottom: '2%',
      containLabel: true
    },
    legend: {
      data: ['总入库量', '总出库量']
    },
    series: [
      {
        name: '总入库量',
        data: [10, 2, 30, 4, 4, 30].map(i => {
          return {
            name: i,
            value: i,
          }
        }),
        type: 'line',
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#4191f6" // 0% å¤„的颜色
                },
                {
                  offset: .4,
                  color: "#203d79" // 0% å¤„的颜色
                },
                {
                  offset: 1,
                  color: "#1b1b12" // 100% å¤„的颜色
                }],
              globalCoord: false // ç¼ºçœä¸º false
            }
          }
        },
        lineStyle: { // çº¿æ¡æ ·å¼
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#4191f6' // 0% å¤„的颜色
            }, {
              offset: 1, color: '#4191f6' // 100% å¤„的颜色
            }],
          },
          width: 1.5, // çº¿æ¡ç²—细
        },
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          normal: {
            color: '#4191f6', //折线点的颜色
          },
        },
        smooth: true
      },
      {
        name: '总出库量',
        data: [30, 2, 10, 4, 4, 20].map(i => {
          return {
            name: i,
            value: i,
          }
        }),
        type: 'line',
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: "rgba(192, 156, 53,.7)" // 0% å¤„的颜色
              }, {
                offset: 1,
                color: "#1b1b12" // 100% å¤„的颜色
              }],
              globalCoord: false // ç¼ºçœä¸º false
            }
          }
        },
        lineStyle: { // çº¿æ¡æ ·å¼
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#F3BD00' // 0% å¤„的颜色
            }, {
              offset: 1, color: '#F3BD00' // 100% å¤„的颜色
            }],
          },
          width: 2, // çº¿æ¡ç²—细
        },
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          normal: {
            color: '#F3BD00', //折线点的颜色
          },
        },
        smooth: true
      }
    ]
  })

  window.addEventListener('resize', function () {//执行
    myChart.resize()
  })
}
const initEchart5 = () => {
  // åŸºäºŽå‡†å¤‡å¥½çš„dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('echart5'))
  // ç»˜åˆ¶å›¾è¡¨
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: 'Precipitation',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} ml'
        }
      },
      {
        type: 'value',
        name: 'Temperature',
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: '{value} Â°C'
        }
      }
    ],
    series: [
      {
        name: 'Evaporation',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml'
          }
        },
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ]
      },
      {
        name: 'Precipitation',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml'
          }
        },
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
        ]
      },
      {
        name: 'Temperature',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' Â°C'
          }
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  })

  window.addEventListener('resize', function () {//执行
    myChart.resize()
  })
}

const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
const initEnergy = () => {
  var myChart = echarts.init(document.querySelector('.energyRef'))
  // ç»˜åˆ¶å›¾è¡¨
  const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
  myChart.setOption({
    grid: {
      top: '20%',
      left: '2%',
      right: '2%',
      bottom: '4%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
    },
    xAxis: {
      type: 'category',
      data: [1, 2, 3, 4, 4, 5]
    },
    yAxis: {
      type: 'value',
      name: 'kw·h',
      nameTextStyle: {
        padding: [0, 0, 4, -30]    // å››ä¸ªæ•°å­—分别为上右下左与原位置距离
      },
      splitLine: {
        show: true,
        lineStyle: {
          //这里输入线条的样式
          color: 'rgba(255,255,255,0.14)',
        }
      }
    },
    series: [
      {
        data: [1, 2, 3, 4, 5],
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: arr[1] },
                { offset: 1, color: '#080807' }
              ]
            ),
            barBorderRadius: [10, 10, 0, 0]
          }
        }
      }
    ]
  })
  window.addEventListener('resize', function () {//执行
    myChart.resize()
  })
}
const initEchart2 = () => {
  const myChart = echarts.init(document.getElementById('echart1'))
  const option = {
    series: [
      {
        type: 'pie',
        radius: ['86%', '100%'],
        label: {
          show: false,
          position: 'center'
        },
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        color: colors,
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}

onMounted(() => {
  initEnergy()
  getStockOut()
  initEchart2()
  initEchart3()
  initEchart4()
  initEchart5()
})


</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}

.main_content {
  display: flex;
  padding: 20px 25px 0;

  .left_box {
    width: 440px;

    .left_box_one {
      margin-top: 20px;
      padding: 0px 10px 30px 20px;
      border: 1px solid;

      .content_wrap {
        display: flex;
        justify-content: space-between;

        .num_wrap {
          width: 272px;

          .num_list {
            display: flex;
            margin-bottom: 20px;

            .num {
              width: 30px;
              height: 46px;
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
              font-weight: 600;
              font-size: 32px;
              margin-right: 5px;
            }
          }

          .content {
            display: flex;
            color: #D2E0FF;

            .la {
              color: #869CC9;
            }

            .unit_wrap {
              display: flex;
              align-items: center;
            }

            .icon {
              width: 10px;
              height: 12px;
              margin-right: 6px;
              margin-left: 4px;
            }
          }
        }

        .echart_wrap {
          flex: 1;
          display: flex;
          align-items: center;
          height: 48px;

          .echart1 {
            width: 46px;
            height: 46px;
            margin-right: 8px;
          }

          .list {
            flex: 1;
            font-size: 13px;

            .item {
              display: flex;
              align-items: center;
              margin: 8px 0;

              .icon {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                margin-right: 4px;
                background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
              }

              .text {
                margin-right: 6px;
              }
            }
          }
        }
      }
    }

    .left_box_two {
      margin-bottom: 20px;
      border: 1px solid;

      .energy_wrap {
        width: 100%;
        height: 250px;

        .energyRef {
          width: 100%;
          height: 100%;
        }
      }
    }

    .left_box_three {
      width: 440px;
      padding: 0 15px;
      border: 1px solid;

      .second_title {
        margin-bottom: 10px;
      }

      .list_wrap {
        .line {
          display: flex;
          height: 40px;
          align-items: center;
          font-size: 14px;
          color: #D2E0FF;

          &:nth-of-type(2n) {
            background: rgba(134, 156, 201, 0.05);
          }

          .item {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .header {
          font-weight: 500;
          color: #01D9FE;
        }
      }
    }
  }

  .center_box {
    flex: 1;
    padding: 0 20px;
    margin: 0 40px;

    .center_box_one {
      background: rgba(255, 255, 255, 0.02);
      height: 230px;
      border-top: 2px solid #306ba1;
      padding-top: 20px;

      .header_wrap {
        display: flex;
        justify-content: space-between;
        margin-bottom: 28px;
        font-weight: bold;
        font-size: 18px;
        background-image: -webkit-linear-gradient(top,
            #ffffff 0%,
            #c8ddff 66%,
            #85b4ff 72%,
            #74a9ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        .left {
          display: flex;
          align-items: center;

          img {
            width: 16px;
            margin-right: 6px;
          }
        }

        .right {
          display: flex;
          align-items: center;
          cursor: pointer;

          .posi {
            width: 16px;
            margin-right: 8px;
          }

          .icon {
            width: 14px;
            margin-left: 2px;
          }
        }
      }

      .static_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px 0 14px;

        .item {
          display: flex;

          img {
            width: 68px;
            height: 71px;
            margin-right: 15px;
          }

          .content {
            font-size: 15px;

            .num {
              font-size: 12px;
              color: #D2E0FF;

              span {
                font-weight: bold;
                font-size: 30px;
                margin-right: 5px;
                font-weight: 600;
                background-image: -webkit-linear-gradient(top,
                    #01D9FE 0%,
                    #01D9FE 60%,
                    #fff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }

              .today {
                background-image: -webkit-linear-gradient(top,
                    #fff 0%,
                    #20FFC5 50%,
                    #20FFC5 100%);
              }

              .finish {
                background-image: -webkit-linear-gradient(top,
                    #fff 0%,
                    #FFB120 50%,
                    #FFB120 100%);
              }
            }

            .unit {
              font-size: 13px;
              color: #D2E0FF;
              margin-top: 2px;
            }
          }
        }
      }

      .footer {
        font-weight: 500;
        font-size: 16px;
        display: flex;
        align-items: center;

        .num {
          font-weight: bold;
          font-size: 24px;
          color: #01D9FE;
          margin-left: 8px;
        }
      }
    }

    .center_box_two {
      width: 100%;
      border: 1px solid;
    }
  }

  .right_box {
    width: 440px;

    .right_box_one {
      margin-top: 20px;
      padding: 0px 10px 30px 20px;
      border: 1px solid;

      .content_wrap {
        display: flex;
        justify-content: space-between;

        .num_wrap {
          width: 280px;

          .num_list {
            display: flex;
            margin-bottom: 20px;

            .num {
              width: 30px;
              height: 46px;
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
              font-weight: 600;
              font-size: 32px;
              margin-right: 5px;
            }
          }

          .content {
            display: flex;
            color: #D2E0FF;

            .la {
              color: #869CC9;
            }

            .unit_wrap {
              display: flex;
              align-items: center;
            }

            .icon {
              width: 10px;
              height: 12px;
              margin-right: 6px;
              margin-left: 4px;
            }
          }
        }

        .static_wrap {
          flex: 1;

          .echart_wrap {
            width: 54px;
            height: 54px;
            position: relative;
            margin-bottom: 12px;

            .echart3 {
              width: 54px;
              height: 54px;
            }

            .pie_text {
              width: 38px;
              height: 38px;
              border: 1px dashed rgba(210, 224, 255, 0.48);
              border-radius: 50%;
              position: absolute;

              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              z-index: 999;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 12px;

              .fs30 {
                font-weight: 600;
                font-size: 14px;
                color: #28F0C4;
              }
            }

          }

          .text {
            font-size: 13px;
            color: #869CC9;
          }
        }
      }
    }

    .right_box_two {
      border: 1px solid;
      padding: 10px 15px;

      .echart4_wrap {
        width: 410px;
        height: 216px;

        .echart4 {
          width: 410px;
          height: 216px;
        }
      }
    }

    .right_box_three {
      border: 1px solid;

      .echart5_wrap {
        height: 240px;
        width: 410px;

        .echart5 {
          height: 240px;
          width: 410px;
        }
      }
    }
  }
}

.main_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  position: relative;
  padding: 0px 40px 16px;
  font-weight: 600;
  font-size: 36px;

  .title {
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 70%,
        #85b4ff 80%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .time_wrap {
    font-size: 26px;
    font-weight: 600;
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 50%,
        #85b4ff 80%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;

    .time {
      width: 130px;
      display: flex;
      justify-content: flex-end;
      font-size: 30px;
    }

    .week {
      margin-left: 20px;
    }
  }

  .main_header_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.com_header {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px 0 13px;
  position: relative;

  .title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 66%,
        #85b4ff 72%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    .icon {
      width: 16px;
      height: 16px;
      margin-right: 14px;
    }
  }

  .tabs {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #d2e0ff;

    .separate {
      width: 1px;
      height: 14px;
      background-color: #d2e0ff;
      margin: 0 6px;
    }

    .active {
      color: #0094eb;
    }
  }
}

.second_title {
  height: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  font-size: 16px;
  margin-bottom: 20px;

  .title {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;

    .icon {
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
  }

  .num_wrap {
    font-weight: 400;
    font-size: 14px;
    color: #D2E0FF;
    display: flex;
    align-items: center;

    .val {
      font-weight: bold;
      font-size: 16px;
      color: #FFFFFF;
    }
  }

  .search_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #869CC9;
    width: 96px;
    height: 28px;
    border-radius: 14px;
    border: 1px solid #869CC9;

    img {
      width: 14px;
      height: 14px;
      margin-right: 3px;
    }
  }

  .tabs {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #d2e0ff;

    .separate {
      width: 1px;
      height: 14px;
      background-color: #d2e0ff;
      margin: 0 6px;
    }

    .active {
      color: #0094eb;
    }
  }
}

.main_app {
  width: 1920px;
  height: 960px;
  /* width: 100%;
  height: 100vh; */
  background: #0b2539;
  color: #FFFFFF;
  position: relative;
  z-index: -2;
  font-size: 14px;

  .main_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
</style>

 screen/src/views/LogisticsEfficiency.vue

@@ -836,15 +836,14 @@
    align-items: center;

    .time {
      width: 180px;
      width: 130px;
      display: flex;
      justify-content: flex-end;
      padding-bottom: 10px;
      font-size: 36px;
      font-size: 30px;
    }

    .week {
      margin-left: 36px;
      margin-left: 20px;
    }
  }


 screen/src/views/SecurityControl.vue

@@ -915,15 +915,14 @@
    align-items: center;

    .time {
      width: 180px;
      width: 130px;
      display: flex;
      justify-content: flex-end;
      padding-bottom: 10px;
      font-size: 36px;
      font-size: 30px;
    }

    .week {
      margin-left: 36px;
      margin-left: 20px;
    }
  }