From 44dd2c7c73d5fead948902cad2695ae30d4620e2 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期四, 24 十月 2024 09:50:29 +0800
Subject: [PATCH] 大屏
---
screen/src/assets/images/LogisticsCenter/bg_number@2x.png | 0
h5_meeting/utils/config.js | 4
screen/src/assets/images/LogisticsCenter/position.png | 0
screen/src/assets/images/FireFighting/xiaofang_ic_baojing@2x.png | 0
screen/src/assets/images/FireFighting/xiaofang_ar_left@2x.png | 0
h5_meeting/pages/index/index.vue | 3
screen/src/views/LogisticsCenter.vue | 1312 ++++++++++++++++++++
screen/src/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png | 0
admin/src/components/common/CommonHeader.vue | 2
pda/pages/index/center.vue | 2
admin/src/components/operation/HiddenDangerParam.vue | 23
admin/src/views/meeting/components/OperaRoomsWindow.vue | 4
h5/manifest.json | 7
screen/src/views/EnergyConsum.vue | 9
h5/pages/staff/meetingSubOrder.vue | 706 +++++-----
h5/utils/config.js | 2
screen/src/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png | 0
screen/src/assets/images/LogisticsCenter/ic_jinriweichu@2x.png | 0
screen/src/views/LogisticsEfficiency.vue | 7
screen/src/assets/images/FireFighting/xiaofang_ic_lixian@2x.png | 0
screen/src/router/index.js | 22
admin/package.json | 1
screen/src/assets/images/ic_jindu@2x.png | 0
screen/src/assets/images/LogisticsCenter/bottom.png | 0
screen/src/assets/images/FireFighting/ic_tibao@2x.png | 0
admin/src/views/platform/LogisticsRecord/subscribe.vue | 4
admin/src/views/platform/index.vue | 2
screen/src/assets/images/FireFighting/bg_wendu@2x.png | 0
screen/src/assets/images/FireFighting/ic_location@2x.png | 0
screen/src/assets/images/FireFighting/ic_shidu@2x.png | 0
screen/src/assets/images/FireFighting/ic_chuli@2x.png | 0
admin/src/views/task/dangetDetail.vue | 35
h5/.gitignore | 1
screen/src/assets/images/FireFighting/ic_weixiu@2x.png | 0
screen/src/views/SecurityControl.vue | 7
screen/src/assets/images/LogisticsCenter/ic_search@2x.png | 0
screen/src/assets/images/FireFighting/bg@2x.png | 0
screen/src/assets/images/LogisticsCenter/ic_title@2x.png | 0
screen/src/assets/images/FireFighting/ic_wendu@2x.png | 0
screen/src/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png | 0
screen/src/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png | 0
h5_meeting/manifest.json | 44
admin/src/components/common/UploadAvatarImage.vue | 49
screen/src/assets/images/LogisticsCenter/bg@2x.png | 0
screen/src/assets/images/LogisticsCenter/ic_jinrichuku@2x.png | 0
screen/src/assets/images/FireFighting/ic_title_green@2x.png | 0
screen/src/assets/images/LogisticsCenter/ic_jinrijihua@2x.png | 0
h5/pages/driver/queueUp.vue | 2
/dev/null | 0
h5/pages/driver/queueUpRecord.vue | 7
screen/src/assets/images/FireFighting/ic_gaojing_blue@2x.png | 0
screen/src/assets/images/FireFighting/xiaofang_ar_right@2x.png | 0
screen/src/assets/images/FireFighting/ic_gaojing_red@2x.png | 0
screen/src/assets/images/FireFighting/468@2x.png | 0
admin/src/views/meeting/components/OperaBookingsWindow.vue | 145 -
screen/src/views/FireFighting.vue | 1500 +++++++++++++++++++++++
56 files changed, 3,391 insertions(+), 509 deletions(-)
diff --git a/admin/package.json b/admin/package.json
index 0d777f2..78ce443 100644
--- a/admin/package.json
+++ b/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",
diff --git a/admin/src/components/common/CommonHeader.vue b/admin/src/components/common/CommonHeader.vue
index 05c8f4c..19c4196 100644
--- a/admin/src/components/common/CommonHeader.vue
+++ b/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
}
},
diff --git a/admin/src/components/common/UploadAvatarImage.vue b/admin/src/components/common/UploadAvatarImage.vue
index 72f91b9..dfd5d22 100644
--- a/admin/src/components/common/UploadAvatarImage.vue
+++ b/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>
-
diff --git a/admin/src/components/operation/HiddenDangerParam.vue b/admin/src/components/operation/HiddenDangerParam.vue
index 0205647..18cc589 100644
--- a/admin/src/components/operation/HiddenDangerParam.vue
+++ b/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))) {
diff --git a/admin/src/views/meeting/components/OperaBookingsWindow.vue b/admin/src/views/meeting/components/OperaBookingsWindow.vue
index 3f5b2c7..39adf61 100644
--- a/admin/src/views/meeting/components/OperaBookingsWindow.vue
+++ b/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>
diff --git a/admin/src/views/meeting/components/OperaRoomsWindow.vue b/admin/src/views/meeting/components/OperaRoomsWindow.vue
index 46e53f5..798bb36 100644
--- a/admin/src/views/meeting/components/OperaRoomsWindow.vue
+++ b/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)
},
diff --git a/admin/src/views/platform/LogisticsRecord/subscribe.vue b/admin/src/views/platform/LogisticsRecord/subscribe.vue
index 4c2a070..3673592 100644
--- a/admin/src/views/platform/LogisticsRecord/subscribe.vue
+++ b/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
})
}
})
diff --git a/admin/src/views/platform/index.vue b/admin/src/views/platform/index.vue
index 7b3ed4a..6c7401a 100644
--- a/admin/src/views/platform/index.vue
+++ b/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鍒唖s绉�')
+ item.startDateTemp = dayjs.duration(timeNum).format('H灏忔椂m鍒唖绉�')
} else {
item.startDateTemp = dayjs.duration(timeNum).format('m鍒唖绉�')
}
diff --git a/admin/src/views/task/dangetDetail.vue b/admin/src/views/task/dangetDetail.vue
index 35c7845..2651ddb 100644
--- a/admin/src/views/task/dangetDetail.vue
+++ b/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>
diff --git a/h5/.gitignore b/h5/.gitignore
index 951e49c..ee6dfa3 100644
--- a/h5/.gitignore
+++ b/h5/.gitignore
@@ -6,6 +6,7 @@
uview-ui
/dist
+/unpackage
# local env files
diff --git a/h5/manifest.json b/h5/manifest.json
index aa547f7..cd8f8b1 100644
--- a/h5/manifest.json
+++ b/h5/manifest.json
@@ -125,14 +125,15 @@
"historyApiFallback" : true,
"disableHostCheck" : true,
"proxy" : {
- "/admin_interface" : {
+ "/gateway_interface" : {
// 杩欎釜瀛楁鍚嶉渶涓庝綘閰嶇疆鐨刡asePrefixUrl涓�鑷达紝绯荤粺璇嗗埆鍒板甫鏈�/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" : ""
}
}
},
diff --git a/h5/pages/driver/queueUp.vue b/h5/pages/driver/queueUp.vue
index b0cb1a9..d6bbd89 100644
--- a/h5/pages/driver/queueUp.vue
+++ b/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
diff --git a/h5/pages/driver/queueUpRecord.vue b/h5/pages/driver/queueUpRecord.vue
index de92b96..c8f63d1 100644
--- a/h5/pages/driver/queueUpRecord.vue
+++ b/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>
diff --git a/h5/pages/staff/meetingSubOrder.vue b/h5/pages/staff/meetingSubOrder.vue
index a99b6a1..f8807b0 100644
--- a/h5/pages/staff/meetingSubOrder.vue
+++ b/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骞碝鏈圖鏃�'))
- 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骞碝鏈圖鏃�'))
+ 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>
\ No newline at end of file
diff --git a/h5/utils/config.js b/h5/utils/config.js
index fc2d158..e4c0895 100644
--- a/h5/utils/config.js
+++ b/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`
diff --git a/h5_meeting/manifest.json b/h5_meeting/manifest.json
index 376b116..8c272f0 100644
--- a/h5_meeting/manifest.json
+++ b/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"
}
diff --git a/h5_meeting/pages/index/index.vue b/h5_meeting/pages/index/index.vue
index fded8ae..26e91b2 100644
--- a/h5_meeting/pages/index/index.vue
+++ b/h5_meeting/pages/index/index.vue
@@ -131,7 +131,8 @@
})
} else {
this.showQrbg = false
- this.meetingInfo = {}
+ this.meetingInfo = {}
+ this.$forceUpdate()
}
})
},
diff --git a/h5_meeting/unpackage/release/apk/__UNI__EF8BAA7__20241008151948.apk b/h5_meeting/unpackage/release/apk/__UNI__EF8BAA7__20241008151948.apk
deleted file mode 100644
index eff3492..0000000
--- a/h5_meeting/unpackage/release/apk/__UNI__EF8BAA7__20241008151948.apk
+++ /dev/null
Binary files differ
diff --git "a/h5_meeting/unpackage/release/apk/\344\274\232\350\256\256\345\256\244.apk" "b/h5_meeting/unpackage/release/apk/\344\274\232\350\256\256\345\256\244.apk"
deleted file mode 100644
index eff3492..0000000
--- "a/h5_meeting/unpackage/release/apk/\344\274\232\350\256\256\345\256\244.apk"
+++ /dev/null
Binary files differ
diff --git a/h5_meeting/utils/config.js b/h5_meeting/utils/config.js
index dda51c1..1d8ad8b 100644
--- a/h5_meeting/utils/config.js
+++ b/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: '寰呯‘璁�',
diff --git a/pda/pages/index/center.vue b/pda/pages/index/center.vue
index cba71b9..a852ade 100644
--- a/pda/pages/index/center.vue
+++ b/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鍒唖s绉�')
+ item.startDateTemp = dayjs.duration(timeNum).format('H灏忔椂m鍒唖绉�')
} else {
item.startDateTemp = dayjs.duration(timeNum).format('m鍒唖绉�')
}
diff --git a/screen/src/assets/images/FireFighting/468@2x.png b/screen/src/assets/images/FireFighting/468@2x.png
new file mode 100644
index 0000000..53d5eb6
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/468@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/bg@2x.png b/screen/src/assets/images/FireFighting/bg@2x.png
new file mode 100644
index 0000000..fdbbddf
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/bg@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/bg_wendu@2x.png b/screen/src/assets/images/FireFighting/bg_wendu@2x.png
new file mode 100644
index 0000000..9932766
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/bg_wendu@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/ic_chuli@2x.png b/screen/src/assets/images/FireFighting/ic_chuli@2x.png
new file mode 100644
index 0000000..a4b4ffd
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/ic_chuli@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/ic_gaojing_blue@2x.png b/screen/src/assets/images/FireFighting/ic_gaojing_blue@2x.png
new file mode 100644
index 0000000..646cf85
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/ic_gaojing_blue@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/ic_gaojing_red@2x.png b/screen/src/assets/images/FireFighting/ic_gaojing_red@2x.png
new file mode 100644
index 0000000..7237b9d
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/ic_gaojing_red@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/ic_location@2x.png b/screen/src/assets/images/FireFighting/ic_location@2x.png
new file mode 100644
index 0000000..8fb0996
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/ic_location@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/ic_shidu@2x.png b/screen/src/assets/images/FireFighting/ic_shidu@2x.png
new file mode 100644
index 0000000..d358a33
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/ic_shidu@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/ic_tibao@2x.png b/screen/src/assets/images/FireFighting/ic_tibao@2x.png
new file mode 100644
index 0000000..25bd1be
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/ic_tibao@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/ic_title_green@2x.png b/screen/src/assets/images/FireFighting/ic_title_green@2x.png
new file mode 100644
index 0000000..a173111
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/ic_title_green@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/ic_weixiu@2x.png b/screen/src/assets/images/FireFighting/ic_weixiu@2x.png
new file mode 100644
index 0000000..873e249
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/ic_weixiu@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/ic_wendu@2x.png b/screen/src/assets/images/FireFighting/ic_wendu@2x.png
new file mode 100644
index 0000000..9a9bfae
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/ic_wendu@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/xiaofang_ar_left@2x.png b/screen/src/assets/images/FireFighting/xiaofang_ar_left@2x.png
new file mode 100644
index 0000000..a3b8d32
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/xiaofang_ar_left@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/xiaofang_ar_right@2x.png b/screen/src/assets/images/FireFighting/xiaofang_ar_right@2x.png
new file mode 100644
index 0000000..260e9dd
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/xiaofang_ar_right@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/xiaofang_ic_baojing@2x.png b/screen/src/assets/images/FireFighting/xiaofang_ic_baojing@2x.png
new file mode 100644
index 0000000..ec7f77f
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/xiaofang_ic_baojing@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png b/screen/src/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png
new file mode 100644
index 0000000..befea8e
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/xiaofang_ic_lixian@2x.png b/screen/src/assets/images/FireFighting/xiaofang_ic_lixian@2x.png
new file mode 100644
index 0000000..bb71625
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/xiaofang_ic_lixian@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png b/screen/src/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png
new file mode 100644
index 0000000..bb89c83
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png b/screen/src/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png
new file mode 100644
index 0000000..2a0dfb4
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png
Binary files differ
diff --git a/screen/src/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png b/screen/src/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png
new file mode 100644
index 0000000..06261c9
--- /dev/null
+++ b/screen/src/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png
Binary files differ
diff --git a/screen/src/assets/images/LogisticsCenter/bg@2x.png b/screen/src/assets/images/LogisticsCenter/bg@2x.png
new file mode 100644
index 0000000..70f4243
--- /dev/null
+++ b/screen/src/assets/images/LogisticsCenter/bg@2x.png
Binary files differ
diff --git a/screen/src/assets/images/LogisticsCenter/bg_number@2x.png b/screen/src/assets/images/LogisticsCenter/bg_number@2x.png
new file mode 100644
index 0000000..b6d2078
--- /dev/null
+++ b/screen/src/assets/images/LogisticsCenter/bg_number@2x.png
Binary files differ
diff --git a/screen/src/assets/images/LogisticsCenter/bottom.png b/screen/src/assets/images/LogisticsCenter/bottom.png
new file mode 100644
index 0000000..d9777b5
--- /dev/null
+++ b/screen/src/assets/images/LogisticsCenter/bottom.png
Binary files differ
diff --git a/screen/src/assets/images/LogisticsCenter/ic_jinrichuku@2x.png b/screen/src/assets/images/LogisticsCenter/ic_jinrichuku@2x.png
new file mode 100644
index 0000000..40937cf
--- /dev/null
+++ b/screen/src/assets/images/LogisticsCenter/ic_jinrichuku@2x.png
Binary files differ
diff --git a/screen/src/assets/images/LogisticsCenter/ic_jinrijihua@2x.png b/screen/src/assets/images/LogisticsCenter/ic_jinrijihua@2x.png
new file mode 100644
index 0000000..4f73ceb
--- /dev/null
+++ b/screen/src/assets/images/LogisticsCenter/ic_jinrijihua@2x.png
Binary files differ
diff --git a/screen/src/assets/images/LogisticsCenter/ic_jinriweichu@2x.png b/screen/src/assets/images/LogisticsCenter/ic_jinriweichu@2x.png
new file mode 100644
index 0000000..8d1288b
--- /dev/null
+++ b/screen/src/assets/images/LogisticsCenter/ic_jinriweichu@2x.png
Binary files differ
diff --git a/screen/src/assets/images/LogisticsCenter/ic_search@2x.png b/screen/src/assets/images/LogisticsCenter/ic_search@2x.png
new file mode 100644
index 0000000..2fbea92
--- /dev/null
+++ b/screen/src/assets/images/LogisticsCenter/ic_search@2x.png
Binary files differ
diff --git a/screen/src/assets/images/LogisticsCenter/ic_title@2x.png b/screen/src/assets/images/LogisticsCenter/ic_title@2x.png
new file mode 100644
index 0000000..fff0940
--- /dev/null
+++ b/screen/src/assets/images/LogisticsCenter/ic_title@2x.png
Binary files differ
diff --git a/screen/src/assets/images/LogisticsCenter/position.png b/screen/src/assets/images/LogisticsCenter/position.png
new file mode 100644
index 0000000..78379de
--- /dev/null
+++ b/screen/src/assets/images/LogisticsCenter/position.png
Binary files differ
diff --git a/screen/src/assets/images/ic_jindu@2x.png b/screen/src/assets/images/ic_jindu@2x.png
new file mode 100644
index 0000000..61fabcb
--- /dev/null
+++ b/screen/src/assets/images/ic_jindu@2x.png
Binary files differ
diff --git a/screen/src/router/index.js b/screen/src/router/index.js
index 8f104fe..367a3d5 100644
--- a/screen/src/router/index.js
+++ b/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')
+ },
]
})
diff --git a/screen/src/views/EnergyConsum.vue b/screen/src/views/EnergyConsum.vue
index d408457..c745f28 100644
--- a/screen/src/views/EnergyConsum.vue
+++ b/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;
}
}
diff --git a/screen/src/views/FireFighting.vue b/screen/src/views/FireFighting.vue
new file mode 100644
index 0000000..3f6231d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/screen/src/views/LogisticsCenter.vue b/screen/src/views/LogisticsCenter.vue
new file mode 100644
index 0000000..096746a
--- /dev/null
+++ b/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">鐨朅23bbb</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>
\ No newline at end of file
diff --git a/screen/src/views/LogisticsEfficiency.vue b/screen/src/views/LogisticsEfficiency.vue
index ea14ba6..77c7610 100644
--- a/screen/src/views/LogisticsEfficiency.vue
+++ b/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;
}
}
diff --git a/screen/src/views/SecurityControl.vue b/screen/src/views/SecurityControl.vue
index 33bdaad..8c78854 100644
--- a/screen/src/views/SecurityControl.vue
+++ b/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;
}
}
--
Gitblit v1.9.3