| | |
| | | <template> |
| | | <div class="main_home"> |
| | | <div style="position: fixed;z-index: 99999"><video style="height: 100px;width: 500px" src="rtsp://10.50.250.253:554/openUrl/K2y2vE4" controls></video></div> |
| | | <!-- <div style="position: fixed;z-index: 99999"><video style="height: 100px;width: 500px" src="rtsp://10.50.250.253:554/openUrl/K2y2vE4" controls></video></div> --> |
| | | <div class="home_header"> |
| | | <div class="mb10 fs17">下午好,{{ userInfo.realname }}</div> |
| | | <div class="fs13"> |
| | |
| | | <el-table class="mb20" v-loading="loading" :data="list" stripe> |
| | | <el-table-column prop="contractNum" label="合同号" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column prop="reason" label="入园原因" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column prop="totalNum" label="总作业量(万支)" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column prop="totalNum" label="总作业量(万支)" min-width="120" show-overflow-tooltip /> |
| | | <el-table-column prop="carCodeFront" label="车牌前照号" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column prop="carCodeBack" label="车牌后照号" min-width="100" show-overflow-tooltip /> |
| | | <!-- <el-table-column prop="taskOrigin" label="任务来源" min-width="100" show-overflow-tooltip /> |
| | |
| | | background: #ffffff;
|
| | | box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(39, 155, 170, 0.32);
|
| | | border-radius: 16rpx;
|
| | | height: 280rpx;
|
| | | height: 260rpx;
|
| | | width: 98%;
|
| | | margin-left: 1%;
|
| | |
|
| | |
| | | </view> |
| | | <view class="line"> |
| | | <view class="label">数量:</view> |
| | | <view class="value">{{ line.ioQty }}</view> |
| | | <view class="value">{{ line.ioQty }}万支</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | <view class="name" v-if="param.status == 4">请入园停靠{{param.platformName}}作业</view>
|
| | | <view class="name" v-if="param.status == 5">月台作业中</view>
|
| | | <view class="name" v-if="param.status == 6">作业已完成</view>
|
| | | <view class="name" v-if="param.status == 7">转移中</view> |
| | | <view class="name red" v-if="param.status == 8">异常挂起</view>
|
| | | <view class="id_card">{{ param.carCodeFront }}</view>
|
| | | <view class="status">{{statusMap[param.status]}}</view>
|
| | | </view>
|
| | |
| | | <view class="time">{{nowTime}}</view>
|
| | | </view>
|
| | | </view>
|
| | | <view class="space"></view>
|
| | | <!-- 等待叫号 -->
|
| | | <view v-if="param.status == 2" class="padding_wrap">
|
| | | <view class="btn check" @click="handleQueue">查看排队情况</view>
|
| | |
| | | </view>
|
| | | <view class="line">
|
| | | <view class="label">数量:</view>
|
| | | <view class="value">{{ line.ioQty }}</view>
|
| | | <view class="value">{{ line.ioQty }}万支</view>
|
| | | </view>
|
| | | </view>
|
| | | </view>
|
| | |
| | | status: '0'
|
| | | },
|
| | | jobId: '',
|
| | | lat: '',
|
| | | lnt: '',
|
| | | // lat: '31.783205',
|
| | | // lnt: '117.262635',
|
| | | // lat: '',
|
| | | // lnt: '',
|
| | | lat: '31.783205',
|
| | | lnt: '117.262635',
|
| | | nowTime: '',
|
| | | wmsInfo: {},
|
| | | signDistance: uni.getStorageSync('driverGuide').signDistance,
|
| | |
| | | // 'openLocation'
|
| | | // ] // 必填,需要使用的JS接口列表
|
| | | // })
|
| | | this.getLocation()
|
| | | // this.getLocation() |
| | | this.getDetail()
|
| | | } else {
|
| | | this.getDetail()
|
| | | }
|
| | |
| | | handleOpen() {
|
| | | this.isShowHandle = true;
|
| | | const submitFileList = this.info.submitFileList || []
|
| | | this.dealBeforeFileList = [...submitFileList]
|
| | | this.submitFileList = [...submitFileList];
|
| | | this.$set(this.handleParam, 'dealTime', dayjs().format('YYYY-MM-DD HH:mm:ss'));
|
| | | },
|
| | |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | page{ |
| | | background-color: #f7f7f7; |
| | | } |
| | | .main_wrap { |
| | | .line { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | border-bottom: 1rpx solid #e5e5e5; |
| | | padding: 30rpx 0; |
| | | padding: 30rpx; |
| | | background-color: #fff; |
| | | width: 750rpx; |
| | | margin: 0 -30rpx; |
| | | .label { |
| | | font-size: 30rpx; |
| | | font-weight: 400; |
| | |
| | | } |
| | | } |
| | | .upload_line { |
| | | padding: 30rpx 0; |
| | | padding: 30rpx; |
| | | width: 750rpx; |
| | | margin: 0 -30rpx; |
| | | background-color: #fff; |
| | | textarea { |
| | | margin-top: 12rpx; |
| | | width: 100%; |
| | | height: 180rpx; |
| | | height: 120rpx; |
| | | font-size: 28rpx; |
| | | font-weight: 400; |
| | | color: #222222; |
| | |
| | | } |
| | | .tip { |
| | | background: #f7f7f7; |
| | | padding: 30rpx 30rpx 180rpx; |
| | | padding: 30rpx 30rpx 10rpx; |
| | | margin: 0 -30rpx; |
| | | .title { |
| | | line-height: 40rpx; |
| | |
| | | // if (dayjs().format('YYYY-MM-DD') == param.queryDate) {
|
| | | // let endTime = new Date(i.endTime).getTime()
|
| | | // let nowTime = new Date().getTime()
|
| | | i.pastFlag = new Date().getTime() > new Date(i.startTime).getTime()
|
| | | i.pastFlag = new Date().getTime() > new Date(i.endTime).getTime()
|
| | | // if (endTime < nowTime) {
|
| | | // i.isUse = 1
|
| | | // }
|
| | |
| | | <view class="cell"> |
| | | <view class="title"><b>*</b>姓名</view> |
| | | <view class="content"> |
| | | <input class="input" @focus="showKeyboard = true" @blur="showKeyboard = false" placeholder-style="color: #999999;" maxlength="30" v-model="visitorData.name" placeholder="请输入您的真实姓名" /> |
| | | <input class="input" @focus="showKeyboard = true" @blur="showKeyboard = false"
|
| | | placeholder-style="color: #999999;" maxlength="30" v-model="visitorData.name" placeholder="请输入您的真实姓名" />
|
| | | </view> |
| | | </view> |
| | | <view class="cell"> |
| | | <view class="title"><b>*</b>手机号</view> |
| | | <view class="content"> |
| | | <input type="number" @focus="showKeyboard = true" @blur="showKeyboard = false" class="input" maxlength="11" placeholder-style="color: #999999;" v-model="visitorData.phone" placeholder="请输入您的手机号" /> |
| | | <input type="number" @focus="showKeyboard = true" @blur="showKeyboard = false" class="input" maxlength="11"
|
| | | placeholder-style="color: #999999;" v-model="visitorData.phone" placeholder="请输入您的手机号" />
|
| | | </view> |
| | | </view> |
| | | <view class="cell"> |
| | | <view class="title"><b>*</b>证件类型</view> |
| | | <view class="content" @click="show = true"> |
| | | <text :style="{color: visitorData.idcardTypeName ? '#000000' : ''}">{{visitorData.idcardTypeName ? visitorData.idcardTypeName : '请选择'}}</text> |
| | | <text
|
| | | :style="{color: visitorData.idcardTypeName ? '#000000' : ''}">{{visitorData.idcardTypeName ? visitorData.idcardTypeName : '请选择'}}</text>
|
| | | <u-icon name="arrow-right" color="#CCCCCC" size="16" class="ml6"></u-icon> |
| | | </view> |
| | | </view> |
| | | <view class="cell"> |
| | | <view class="title"><b>*</b>证件号码</view> |
| | | <view class="content"> |
| | | <input class="input" maxlength="18" @focus="showKeyboard = true" @blur="showKeyboard = false" placeholder-style="color: #999999;" v-model="visitorData.idcardNo" placeholder="请输入您的证件号码" /> |
| | | <input class="input" maxlength="18" @focus="showKeyboard = true" @blur="showKeyboard = false"
|
| | | placeholder-style="color: #999999;" v-model="visitorData.idcardNo" placeholder="请输入您的证件号码" />
|
| | | </view> |
| | | </view> |
| | | <view class="empty"></view> |
| | | <view class="cell"> |
| | | <view class="title"><b>*</b>公司名称</view> |
| | | <view class="content"> |
| | | <input class="input" maxlength="50" @focus="showKeyboard = true" @blur="showKeyboard = false" placeholder-style="color: #999999;" v-model="visitorData.companyName" placeholder="请输入您的公司名称" /> |
| | | <input class="input" maxlength="50" @focus="showKeyboard = true" @blur="showKeyboard = false"
|
| | | placeholder-style="color: #999999;" v-model="visitorData.companyName" placeholder="请输入您的公司名称" />
|
| | | </view> |
| | | </view> |
| | | <view class="cell"> |
| | |
| | | </view> |
| | | <!-- <tly-picture-cut ref="tlyPictureCut" :pictureSrc="photoSrc" @createImg="uploadImg"></tly-picture-cut> --> |
| | | <u-picker :show="show" :columns="columns" keyName="name" @cancel="show = false" @confirm="confirm"></u-picker> |
| | | <qf-image-cropper ref="cropper" :width="280" :height="280" :radius="0" fileType="jpg" @crop="uploadImg"></qf-image-cropper> |
| | | <qf-image-cropper ref="cropper" :width="280" :height="280" :radius="0" fileType="jpg"
|
| | | @crop="uploadImg"></qf-image-cropper>
|
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import tlyPictureCut from "@/components/tly-picture-cut/tlyPictureCut.vue"; |
| | | import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue'; |
| | | import { mapState } from 'vuex' |
| | | import { uploadAvatar } from "@/utils/config" |
| | | import { getSystemDictData, visitorSub } from '@/api' |
| | | import {
|
| | | mapState
|
| | | } from 'vuex'
|
| | | import {
|
| | | uploadAvatar
|
| | | } from "@/utils/config"
|
| | | import {
|
| | | getSystemDictData,
|
| | | visitorSub
|
| | | } from '@/api'
|
| | | export default { |
| | | data() { |
| | | return { |
| | |
| | | showKeyboard: false, |
| | | visit: '', |
| | | type: '', |
| | | columns: [[{name: '身份证', id: 0}, {name: '港澳证件', id: 1},{name: '护照', id: 2}]], |
| | | columns: [
|
| | | [{
|
| | | name: '身份证',
|
| | | id: 0
|
| | | }, {
|
| | | name: '港澳证件',
|
| | | id: 1
|
| | | }, {
|
| | | name: '护照',
|
| | | id: 2
|
| | | }]
|
| | | ],
|
| | | fileList: [], |
| | | visitorData: { |
| | | userAnswerId: '', |
| | |
| | | } |
| | | } |
| | | }, |
| | | components: { tlyPictureCut, QfImageCropper }, |
| | | components: {
|
| | | tlyPictureCut,
|
| | | QfImageCropper
|
| | | },
|
| | | |
| | | onLoad(option) { |
| | | const visitorData = uni.getStorageSync('visitorData') |
| | | const visitorData = uni.getStorageSync('member')
|
| | | if (visitorData.faceImg) {
|
| | | visitorData.faceImgUrl = visitorData.prefixUrl + visitorData.faceImg
|
| | | }
|
| | | if(visitorData && visitorData.name){ |
| | | this.visitorData = visitorData |
| | | }
|
| | | this.visitorData.companyName = visitorData.visitCompanyName
|
| | | this.visitorData.idcardNo = visitorData.idcardDecode
|
| | | if (this.visitorData.idcardType === 0) {
|
| | | this.visitorData.idcardTypeName = '身份证'
|
| | | } else if (this.visitorData.idcardType === 1) {
|
| | | this.visitorData.idcardTypeName = '港澳证件'
|
| | | } else if (this.visitorData.idcardType === 2) {
|
| | | this.visitorData.idcardTypeName = '护照'
|
| | | } |
| | | if (this.visitorData.imgurl) { |
| | | this.visitorData.imgurlUrl = this.visitorData.prefixUrl + this.visitorData.imgurl |
| | | } |
| | | // if (this.member ) { |
| | | // this.visitorData.name = this.member.name |
| | |
| | | |
| | | methods: { |
| | | submit() { |
| | | const { visitorData } = this |
| | | const {
|
| | | visitorData
|
| | | } = this
|
| | | if (!this.visitorData.name) return uni.showToast({ |
| | | title: '姓名不能为空', |
| | | icon: 'none' |
| | |
| | | uploadImg(file) { |
| | | var that = this |
| | | that.$refs.cropper.close() |
| | | uni.showLoading({ title: '上传中', mask: true }); |
| | | uni.showLoading({
|
| | | title: '上传中',
|
| | | mask: true
|
| | | });
|
| | | uni.uploadFile({ |
| | | url: uploadAvatar, |
| | | filePath: file.tempFilePath, |
| | |
| | | // that.$refs.tlyPictureCut.showPop(); |
| | | // } |
| | | if (type === 'imgurl') { |
| | | uni.showLoading({ title: '上传中', mask: true }); |
| | | uni.showLoading({
|
| | | title: '上传中',
|
| | | mask: true
|
| | | });
|
| | | uni.uploadFile({ |
| | | url: uploadAvatar, |
| | | filePath: chooseImageRes.tempFilePaths[0], |
| | |
| | | page { |
| | | background-color: #F7F7F7 !important; |
| | | } |
| | |
|
| | | .u-upload__button { |
| | | margin: 0 !important; |
| | | } |
| | |
|
| | | .content_uplaod { |
| | | width: 120rpx; |
| | | height: 120rpx; |
| | |
| | | justify-content: center; |
| | | overflow: hidden; |
| | | } |
| | |
|
| | | .content_uplaod image { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | |
|
| | | .empty{ |
| | | width: 750rpx; |
| | | height: 20rpx; |
| | | margin: 0 -30rpx; |
| | | background-color: #f7f7f7;; |
| | | background-color: #f7f7f7;
|
| | | ;
|
| | | } |
| | |
|
| | | .title { |
| | | font-size: 30rpx; |
| | | font-weight: 400; |
| | |
| | | .title1 { |
| | | display: flex; |
| | | flex-direction: column; |
| | |
|
| | | .title1_a { |
| | | font-size: 30rpx !important; |
| | | font-weight: 400; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 20rpx; |
| | |
|
| | | b { |
| | | color: #E42D2D; |
| | | margin-right: 4rpx; |
| | | |
| | | } |
| | | } |
| | |
|
| | | .title1_b { |
| | | font-size: 24rpx !important; |
| | | font-weight: 400; |
| | |
| | | export const getFighalarmDataList = (data) => { |
| | | return request('visitsAdmin/cloudService/board/api/fightingAdmin/alarmDataList', data) |
| | | } |
| | | // 温湿度数据 |
| | | export const getTemperatureHumidityData = (data) => { |
| | | return request('visitsAdmin/cloudService/board/api/fightingAdmin/getTemperatureHumidityData', data) |
| | | } |
| | | |
| | | |
| | | // 场内调度看板 今日月台完成订单统计 |
| | |
| | | export const wltransportMeasure = (data) => { |
| | | return request('visitsAdmin/cloudService/board/api/platformJobRun/transportMeasure', data) |
| | | } |
| | | // 物流运行调度看板 车辆 |
| | | export const carsListPost = (data) => { |
| | | return request('/visitsAdmin/cloudService/board/api/platformJobRun/carsList', data) |
| | | } |
| | | // 物流运行调度看板 根据车辆查信息 |
| | | export const getCarsJobDetails = (data) => { |
| | | return request('/visitsAdmin/cloudService/board/api/platformJobRun/getCarsJobDetails', data, 'POST') |
| | | } |
| | | |
| | | |
| | | // 安防管控大屏 中心数据 |
| | |
| | | |
| | | const instance = axios.create({ |
| | | baseURL: '/gateway_interface', |
| | | timeout: 10000, |
| | | timeout: 30000, |
| | | withCredentials: true, |
| | | headers: { |
| | | shopId: 1 |
| | |
| | | <img src="@/assets/images/nenghao_ic1.png" class="co2" alt=""> |
| | | <div> |
| | | <div class="name">本年累计循环烟箱</div> |
| | | <div><span class="num" v-if="data1.smokeBoxTotal || data1.smokeBoxTotal == 0">{{ |
| | | <div><span class="num" style="color: #68cfb2;" v-if="data1.smokeBoxTotal || data1.smokeBoxTotal == 0">{{ |
| | | data1.smokeBoxTotal.toLocaleString() |
| | | }}</span><span>只</span></div> |
| | | </div> |
| | |
| | | </div> |
| | | <div class="static" v-if="data1.electricityQuantity"> |
| | | <span class="lab">同比</span> |
| | | <template v-if="data1.electricityQuantity.sameNum"> |
| | | <img v-if="data1.electricityQuantity.totalNum > data1.electricityQuantity.sameNum" class="icon" |
| | | src="@/assets/images/ic_up.webp" alt="" /> |
| | | <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> |
| | | </template> |
| | | <span class="val" |
| | | v-if="data1.electricityQuantity.totalNum && data1.electricityQuantity.totalNum != 0">{{ |
| | | Math.abs(((data1.electricityQuantity.totalNum - |
| | | data1.electricityQuantity.sameNum) / data1.electricityQuantity.totalNum * 100).toFixed(1)) |
| | | }}%</span> |
| | | <span class="val" v-else>-</span> |
| | | <span class="val" v-else style="margin-left: 4px;"> -</span> |
| | | <span class="lab">环比</span> |
| | | <template v-if="data1.electricityQuantity.ringNum"> |
| | | <img v-if="data1.electricityQuantity.totalNum > data1.electricityQuantity.ringNum" class="icon" |
| | | src="@/assets/images/ic_up.webp" alt="" /> |
| | | <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> |
| | | </template> |
| | | |
| | | <span class="val" |
| | | v-if="data1.electricityQuantity.totalNum && data1.electricityQuantity.totalNum != 0">{{ |
| | | Math.abs(((data1.electricityQuantity.totalNum - |
| | | data1.electricityQuantity.ringNum) / data1.electricityQuantity.totalNum * 100).toFixed(1)) |
| | | }}%</span> |
| | | <span class="val" v-else>-</span> |
| | | <span class="val" v-else style="margin-left: 4px;"> -</span> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | |
| | | </div> |
| | | <div class="static" v-if="data1.waterQuantity"> |
| | | <span class="lab">同比</span> |
| | | <template v-if="data1.waterQuantity.sameNum"> |
| | | <img v-if="data1.waterQuantity.totalNum > data1.waterQuantity.sameNum" class="icon" |
| | | src="@/assets/images/ic_up.webp" alt="" /> |
| | | <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> |
| | | <span class="val" v-if="data1.waterQuantity.totalNum && data1.waterQuantity.totalNum != 0">{{ |
| | | </template> |
| | | <span class="val" v-if="data1.waterQuantity.sameNum && data1.waterQuantity.sameNum != 0">{{ |
| | | Math.abs(((data1.waterQuantity.totalNum - |
| | | data1.waterQuantity.sameNum) / data1.waterQuantity.totalNum * 100).toFixed(1)) }}%</span> |
| | | <span class="val" v-else>-</span> |
| | | data1.waterQuantity.sameNum) / data1.waterQuantity.sameNum * 100).toFixed(1)) }}%</span> |
| | | <span class="val" v-else style="margin-left: 4px;">-</span> |
| | | <span class="lab">环比</span> |
| | | <template v-if="data1.waterQuantity.ringNum"> |
| | | <img v-if="data1.waterQuantity.totalNum > data1.waterQuantity.ringNum" class="icon" |
| | | src="@/assets/images/ic_up.webp" alt="" /> |
| | | <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> |
| | | <span class="val" v-if="data1.waterQuantity.totalNum && data1.waterQuantity.totalNum != 0">{{ |
| | | </template> |
| | | <span class="val" v-if="data1.waterQuantity.ringNum && data1.waterQuantity.ringNum != 0">{{ |
| | | Math.abs(((data1.waterQuantity.totalNum - |
| | | data1.waterQuantity.ringNum) / data1.waterQuantity.totalNum * 100).toFixed(1)) }}%</span> |
| | | <span class="val" v-else>-</span> |
| | | data1.waterQuantity.ringNum) / data1.waterQuantity.ringNum * 100).toFixed(1)) }}%</span> |
| | | <span class="val" v-else style="margin-left: 4px;">-</span> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | |
| | | </div> |
| | | <div class="static" v-if="data1.gasQuantity"> |
| | | <span class="lab">同比</span> |
| | | <template v-if="data1.gasQuantity.sameNum"> |
| | | <img v-if="data1.gasQuantity.totalNum > data1.gasQuantity.sameNum" class="icon" |
| | | src="@/assets/images/ic_up.webp" alt="" /> |
| | | <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> |
| | | </template> |
| | | <span class="val" v-if="data1.gasQuantity.totalNum && data1.gasQuantity.totalNum != 0">{{ |
| | | Math.abs(((data1.gasQuantity.totalNum - data1.gasQuantity.sameNum) / data1.gasQuantity.totalNum |
| | | * 100).toFixed(1)) |
| | | }}%</span> |
| | | <span class="val" v-else>-</span> |
| | | <span class="val" v-else style="margin-left: 4px;">-</span> |
| | | <span class="lab">环比</span> |
| | | <template v-if="data1.gasQuantity.sameNum"> |
| | | <img v-if="data1.gasQuantity.totalNum > data1.gasQuantity.ringNum" class="icon" |
| | | src="@/assets/images/ic_up.webp" alt="" /> |
| | | <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> |
| | | </template> |
| | | <span class="val" v-if="data1.gasQuantity.totalNum && data1.gasQuantity.totalNum != 0">{{ |
| | | Math.abs(((data1.gasQuantity.totalNum - data1.gasQuantity.ringNum) / data1.gasQuantity.totalNum |
| | | * 100).toFixed(1)) |
| | | }}%</span> |
| | | <span class="val" v-else>-</span> |
| | | <span class="val" v-else style="margin-left: 4px;">-</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="line"> |
| | | <span class="item name">{{ item.typeName }}</span> |
| | | <span class="item">{{ item.totalDeviceNum || 0 }}</span> |
| | | <span class="item">{{ item.alarmDeviceNum || 0 }}</span> |
| | | <span class="item" style="color: #FEAF01;">{{ item.alarmDeviceNum || 0 }}</span> |
| | | <span class="item">{{ item.shieldDeviceNum || 0 }}</span> |
| | | <span class="item">{{ item.errDeviceNum || 0 }}</span> |
| | | <span class="item">{{ item.offlineDeviceNum || 0 }}</span> |
| | |
| | | <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=""> |
| | | <img @click="changeData8(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png" alt=""> |
| | | <div class="num">{{dataIndex8 + 1}}/{{ dataList8.length }}</div> |
| | | <img @click="changeData8(1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png" alt=""> |
| | | </div> |
| | | </div> |
| | | <div class="list_wrap"> |
| | |
| | | <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt=""> |
| | | <span>卸货区1</span> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="list" v-if="dataList8 && dataList8.length > 0"> |
| | | <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 class="num">{{ dataList8[dataIndex8].temperatureData?.latestValue }}<span>°C</span></div> |
| | | <div class="la">阈值 {{ dataList8[dataIndex8].temperatureData?.alarmLow }}~{{ dataList8[dataIndex8].temperatureData?.alarmHigh }}°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 class="num">{{ dataList8[dataIndex8].humidityData?.latestValue }}<span>%</span></div> |
| | | <div class="la">阈值 {{ dataList8[dataIndex8].humidityData?.alarmLow }}~{{ dataList8[dataIndex8].humidityData?.alarmHigh }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <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 class="placeT">阈值</div> |
| | | </div> |
| | | |
| | | <div class="place">阈值 0~4.50M</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="separate"></div> |
| | | <div class="item"> |
| | | <div>计划维保</div> |
| | | <div class="num active">{{ dataList5.planProtectTotal }}</div> |
| | | <div class="num acc">{{ dataList5.planProtectTotal }}</div> |
| | | </div> |
| | | <div class="separate"></div> |
| | | <div class="item"> |
| | | <div>维保率</div> |
| | | <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="num active">{{ |
| | | <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="acc num">{{ |
| | | ((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div> |
| | | </div> |
| | | </div> |
| | |
| | | getFightingcenterData, |
| | | getFightingDeAlarm, |
| | | getFightingDeviceY, |
| | | getFighalarmDataList |
| | | getFighalarmDataList, |
| | | getTemperatureHumidityData |
| | | } from '@/api' |
| | | |
| | | const colors = ['#FEAF01', '#01ABFE', '#51F9E4'] |
| | |
| | | const data4 = dataList3.value.map(i => i.errNum) |
| | | const months = dataList3.value.map(i => { |
| | | return i.startDate.substring(5, 7) + '月' |
| | | } |
| | | ) |
| | | }) |
| | | |
| | | |
| | | const option = { |
| | | legend: { |
| | | x: "center", |
| | |
| | | }) |
| | | } |
| | | |
| | | const dataList8 = ref([]) |
| | | const dataIndex8 = ref(0) |
| | | const getData8 = () => { |
| | | getTemperatureHumidityData().then(res => { |
| | | dataList8.value = res.data || [] |
| | | }) |
| | | } |
| | | const changeData8 = (num) => { |
| | | if(dataIndex8.value == dataList8.value.length - 1 && num > 0){ |
| | | dataIndex8.value = 0 |
| | | }else if (dataIndex8.value == 0 && num < 0){ |
| | | dataIndex8.value = dataList8.value.length - 1 |
| | | }else{ |
| | | dataIndex8.value = dataIndex8.value + num |
| | | } |
| | | } |
| | | |
| | | const autoplayFlag = (list = [], leng = 4, time = 2000) => { |
| | | if (list.length > leng) { |
| | | return { delay: time, disableOnInteraction: false } |
| | |
| | | getData5() |
| | | // getData6() |
| | | getData7() |
| | | getData8() |
| | | setInterval(() => { |
| | | getData2() |
| | | getData3() |
| | |
| | | setInterval(() => { |
| | | |
| | | getData5() |
| | | getData8() |
| | | |
| | | }, 60 * 60 * 1000) |
| | | |
| | |
| | | |
| | | .content_wrap { |
| | | flex: 1; |
| | | flex-shrink: 0; |
| | | margin-right: 20px; |
| | | |
| | | .title_wrap { |
| | |
| | | } |
| | | |
| | | .icon { |
| | | width: 13px; |
| | | height: 16px; |
| | | width: 30px; |
| | | cursor: pointer; |
| | | /* height: 16px; */ |
| | | } |
| | | } |
| | | } |
| | |
| | | .item { |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | position: relative; |
| | | .place{ |
| | | position: absolute; |
| | | top: 120px; |
| | | right: 70px; |
| | | z-index: 999; |
| | | font-size: 13px; |
| | | color: #869CC9; |
| | | width: 120px; |
| | | text-align: center; |
| | | } |
| | | .icon { |
| | | width: 70px; |
| | | height: 70px; |
| | |
| | | text-align: center; |
| | | position: relative; |
| | | left: 30px; |
| | | |
| | | .watergage { |
| | | width: 130px; |
| | | height: 112px; |
| | |
| | | } |
| | | } |
| | | |
| | | .place { |
| | | .placeT { |
| | | position: relative; |
| | | bottom: 10px; |
| | | left: 4px; |
| | | font-size: 44px; |
| | | color: #869CC9; |
| | | opacity: 0; |
| | | } |
| | | |
| | | .liquidlevel { |
| | | width: 320px; |
| | | height: 420px; |
| | | width: 300px; |
| | | height: 396px; |
| | | |
| | | } |
| | | } |
| | |
| | | margin-top: 12px; |
| | | font-weight: bold; |
| | | font-size: 32px; |
| | | |
| | | } |
| | | |
| | | .acc { |
| | | background-image: -webkit-linear-gradient(top, |
| | | #ffffff 0%, |
| | | #c8ddff 66%, |
| | | #95eefc 72%, |
| | | #95eefc 100%); |
| | | -webkit-background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | } |
| | | |
| | | .active { |
| | |
| | | }) |
| | | myChart.on('click', function (params) { |
| | | console.log(params.name) |
| | | |
| | | }) |
| | | window.addEventListener('resize', function () {//执行 |
| | | myChart.resize() |
| | |
| | | <div class="main_app"> |
| | | <img src="@/assets/images/energy_ef/bg@2x.png" class="main_bg" alt="" /> |
| | | <div class="main_header"> |
| | | <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" /> |
| | | <!-- <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" /> --> |
| | | <div class="title">安泰智慧物流园区-调度能效跟踪</div> |
| | | <div class="time_wrap"> |
| | | <span class="date">{{ date }}</span> |
| | |
| | | <div class="list"> |
| | | <div class="item"> |
| | | <img src="@/assets/images/LogisticsCenter/car_zaitu@2x.png" alt=""> |
| | | <span>在途:{{ 8 }}</span> |
| | | <span>在途:{{ data7.busyNum }}</span> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/LogisticsCenter/car_kongxian@2x.png" alt=""> |
| | | <span>空闲:{{ 8 }}</span> |
| | | <span>空闲:{{ data7.idleNum }}</span> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/LogisticsCenter/car_lixian@2x.png" alt=""> |
| | | <span>离线:{{ 8 }}</span> |
| | | <span>离线:{{ data7.offlineNum }}</span> |
| | | </div> |
| | | </div> |
| | | <div class="echart_wrap"> |
| | | <div ref="echartMap" class="echart_map" id="echartMap"></div> |
| | | </div> |
| | | |
| | | <div class="warnning_info"> |
| | | <div class="head" @click="isShowCarW = !isShowCarW"> |
| | | <img src="../assets/images/FireFighting/fire_right.png" alt=""> |
| | | <span>车辆报警</span> |
| | | </div> |
| | | <div v-if="isShowCarW" class="war_list"> |
| | | <div class="line" v-for="item in data7.eventList"> |
| | | <div class="id_card">{{ item.carCode }}</div> |
| | | <div class="title">{{ item.title }}</div> |
| | | <div v-if="item.time">{{ item.time.slice(11) }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="right_box"> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- --> |
| | | <div class="modal" v-if="showModal"> |
| | | <div class="modal" v-if="activeCar && activeCar.phone"> |
| | | <div class="title_head"> |
| | | <img src="@/assets/images/energy_ef/chuku_ic_car@2x.png" alt=""> |
| | | <span>皖a222</span> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="modal_mask" v-if="showModal" @click="showModal = false"></div> |
| | | <div class="modal_mask" v-if="activeCar && activeCar.phone" @click="activeCar = {}"></div> |
| | | </div> |
| | | </v-scale-screen> |
| | | </template> |
| | |
| | | wlstockList, |
| | | wltotalInList, |
| | | wltransportMeasure, |
| | | carsListPost, |
| | | getCarsJobDetails |
| | | } from '@/api' |
| | | import 'swiper/css/swiper.min.css' |
| | | import Swiper from 'swiper' |
| | |
| | | time.value = dayjs().format('HH:mm:ss') |
| | | |
| | | }, 1000) |
| | | |
| | | const showModal = ref(false) |
| | | const modalTab = ref(0) |
| | | const modalTabClick = (val) => { |
| | | modalTab.value = val |
| | | } |
| | | |
| | | |
| | | |
| | | const initEnergy = () => { |
| | |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '3%', |
| | | top: '18%', |
| | | top: '26%', |
| | | containLabel: true |
| | | }, |
| | | tooltip: { |
| | | trigger: 'axis' |
| | | }, |
| | | xAxis: [{ |
| | | xAxis: [ |
| | | { |
| | | nameGap: 5, |
| | | type: 'category', |
| | | axisLine: { |
| | |
| | | axisTick: { |
| | | show: false, |
| | | }, |
| | | data: dataList2.value.map(i => i.planDate), |
| | | }], |
| | | data: dataList2.value.map(i => i.planDateStrT), |
| | | } |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | nameTextStyle: { |
| | | color: '#869CC9', |
| | | }, |
| | | offset: 0, |
| | | name: '万支', |
| | | type: 'value', |
| | | name: '个', |
| | | min: 0, |
| | | axisLabel: { |
| | | show: true, |
| | | color: "#869CC9", |
| | | }, |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | width: 1, |
| | | color: "rgba(49,105,129,0.4)", |
| | | type: 'dashed' |
| | | } |
| | | }, |
| | | // interval: 5, |
| | | axisLabel: { |
| | | formatter: '{value}' |
| | | } |
| | | }, |
| | | { |
| | | type: 'value', |
| | | name: '万支', |
| | | nameTextStyle: { |
| | | color: '#869CC9', |
| | | }, |
| | | offset: 0, |
| | | type: 'value', |
| | | axisLine: { |
| | | show: true, |
| | | }, |
| | |
| | | type: 'dashed' |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | type: 'value', |
| | | name: '%', |
| | | min: 0, |
| | | max: 100, |
| | | // interval: 5, |
| | | axisLabel: { |
| | | formatter: '{value}%' |
| | | }, |
| | | splitLine: false |
| | | formatter: '{value}' |
| | | } |
| | | }, |
| | | ], |
| | | series: [ |
| | | { |
| | |
| | | position: 'top', |
| | | color: '#fff', |
| | | }, |
| | | yAxisIndex: 1, |
| | | itemStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { |
| | |
| | | name: '任务完成量', |
| | | type: 'bar', |
| | | barWidth: 10, |
| | | yAxisIndex: 1, |
| | | label: { |
| | | show: false, |
| | | position: 'top', |
| | |
| | | type: 'line', |
| | | smooth: false, |
| | | showAllSymbol: true, |
| | | yAxisIndex: 0, |
| | | symbol: 'none', |
| | | lineStyle: { |
| | | color: "#1a43bc" |
| | |
| | | const initMap = () => { |
| | | var myChart = echarts.init(echartMap.value) |
| | | echarts.registerMap('js', ahJSON) |
| | | var scatterData = [ |
| | | { |
| | | name: '幼儿园', |
| | | num: 15, |
| | | color: ['#1984ff', '#184b8d'], |
| | | img: icKongxian, |
| | | data: [ |
| | | { name: '', value: [117.25, 31.49] }, |
| | | ], |
| | | }, |
| | | { |
| | | name: '小学', |
| | | num: 11, |
| | | color: ['#f16c08', '#7f3710'], |
| | | img: icLixian, |
| | | data: [ |
| | | { name: '', value: [118.5, 31.08] }, |
| | | ], |
| | | const scatterData = data7.value.carsList.map(item => { |
| | | return { |
| | | name: item.terminalId, |
| | | img: item.status == 0 ? icLixian : item.status == 1 || item.status == 2 ? icZaitu : icKongxian, |
| | | data: [{code: item.plateNum, value: [item.longitude,item.latitude]}] |
| | | } |
| | | ] |
| | | }) |
| | | // var scatterData = [ |
| | | // { |
| | | // name: '幼儿园', |
| | | // num: 15, |
| | | // // color: ['#1984ff', '#184b8d'], |
| | | // img: icKongxian, |
| | | // data: [ |
| | | // { name: 'asdasdas ', value: [117.25, 31.49] }, |
| | | // ], |
| | | // }, |
| | | // ] |
| | | let serData = [] |
| | | scatterData.forEach((item) => { |
| | | serData.push({ |
| | |
| | | }, |
| | | symbolSize: [32, 40], |
| | | hoverAnimation: true, |
| | | |
| | | zlevel: 99, |
| | | data: item.data, |
| | | }) |
| | | } |
| | | ) |
| | | var center = { |
| | | '合肥市': [117.25, 31.83], |
| | | '滁州市': [118.32, 32.3], |
| | | '芜湖市': [118.43, 31.35], |
| | | '阜阳市': [115.38, 32.89], |
| | | '蚌埠市': [117.39, 32.92], |
| | | '淮南市': [116.99, 32.63], |
| | | '马鞍山市': [118.5, 31.71], |
| | | '安庆市': [117.05, 30.52], |
| | | '黄山市': [118.33, 29.71], |
| | | '铜陵市': [117.81, 30.94], |
| | | '宿州市': [116.98, 33.64], |
| | | '淮北市': [116.8, 33.9], |
| | | '六安市': [116.51, 31.75], |
| | | '池州市': [117.49, 30.66], |
| | | '宣城市': [118.76, 30.94], |
| | | '亳州市': [115.78, 33.84], |
| | | } |
| | | var data = [ |
| | | { name: "合肥市", value: 3 }, |
| | | { name: "滁州市", value: 0 }, |
| | |
| | | x: 'center', |
| | | textStyle: { |
| | | color: '#ffffff' |
| | | } |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item', |
| | | formatter: function (params) { |
| | | if (typeof (params.value)[2] == "undefined") { |
| | | return params.name + ' : ' + params.value |
| | | } else { |
| | | return params.name + ' : ' + params.value[2] |
| | | } |
| | | } |
| | | }, |
| | | visualMap: { |
| | |
| | | symbolSize: 14, |
| | | label: { |
| | | normal: { |
| | | show: true, |
| | | show: false, |
| | | formatter: function (params) { |
| | | return '{fline|地点:' + params.data.city + '}\n{tline|' + (params.data.info || '发生xx集件') + '}' |
| | | }, |
| | |
| | | label: { |
| | | show: true, |
| | | color: '#ffffff', |
| | | emphasis: { |
| | | color: 'white', |
| | | show: false |
| | | } |
| | | |
| | | }, |
| | | itemStyle: { |
| | | normal: { |
| | |
| | | areaColor: '#1d3b60' |
| | | }, |
| | | emphasis: { |
| | | areaColor: '#FA8C16', |
| | | borderWidth: 1, |
| | | color: '#428598' |
| | | disabled: true, |
| | | // areaColor: '#FA8C16', |
| | | // borderWidth: 1, |
| | | // color: '#428598', |
| | | label: { |
| | | show: true, // 始终显示文字 |
| | | color: '#fff' // 设置文字颜色 |
| | | }, |
| | | areaColor: null |
| | | } |
| | | }, |
| | | data: data |
| | |
| | | } |
| | | |
| | | myChart.setOption(option) |
| | | myChart.on('click', function (params) { |
| | | const item = params.data |
| | | getCarsJobDetails({carCode: item.code}).then(res => { |
| | | activeCar.value = res.data |
| | | }) |
| | | }) |
| | | window.addEventListener('resize', function () {//执行 |
| | | myChart.resize() |
| | | }) |
| | | } |
| | | const activeCar = ref({}) |
| | | const modalTab = ref(0) |
| | | const modalTabClick = (val) => { |
| | | modalTab.value = val |
| | | } |
| | | |
| | | |
| | | const data1 = ref({}) |
| | | const activeTab1 = ref(0) |
| | |
| | | |
| | | const dataList2 = ref([]) |
| | | const activeTab2 = ref(0) |
| | | const tabClick2 = (val) => { activeTab2.value = val } |
| | | const tabClick2 = (val) => { |
| | | activeTab2.value = val |
| | | getData2() |
| | | } |
| | | const getData2 = () => { |
| | | wltransportMeasure({ queryType: activeTab2.value }).then(res => { |
| | | const result = res.data |
| | | const result = res.data || [] |
| | | dataList2.value = result |
| | | dataList2.value.forEach(item => { |
| | | item.planDateStrT = activeTab2.value == 2 ? dayjs(item.planDateStr).format('M') : dayjs(item.planDateStr).format('M.D') |
| | | }) |
| | | initEnergy() |
| | | }) |
| | | } |
| | |
| | | } |
| | | const data4 = ref({}) |
| | | const activeTab4 = ref(0) |
| | | const tabClick4 = (val) => { activeTab4.value = val } |
| | | const tabClick4 = (val) => { |
| | | activeTab4.value = val |
| | | getData4() |
| | | } |
| | | const getData4 = () => { |
| | | wljobData({ queryType: activeTab4.value }).then(res => { |
| | | const result = res.data |
| | |
| | | wlstockList().then(res => { |
| | | const result = res.data |
| | | dataList6.value = result |
| | | }) |
| | | } |
| | | |
| | | const isShowCarW = ref(false) |
| | | const data7 = ref({}) |
| | | const getData7 = () => { |
| | | carsListPost().then(res => { |
| | | const result = res.data || {} |
| | | data7.value = result |
| | | initMap() |
| | | }) |
| | | } |
| | | |
| | |
| | | getData4() |
| | | getData5() |
| | | getData6() |
| | | |
| | | initMap() |
| | | getData7() |
| | | |
| | | setTimeout(() => { |
| | | loopFn1() |
| | |
| | | } |
| | | |
| | | .echart_wrap { |
| | | width: 100%; |
| | | width: 86%; |
| | | height: 100%; |
| | | |
| | | .echart_map { |
| | |
| | | /* transform: rotate(60deg); */ |
| | | } |
| | | } |
| | | |
| | | .warnning_info { |
| | | position: absolute; |
| | | right: 0; |
| | | bottom: 0; |
| | | border-top: 1px solid #5ecbce; |
| | | border-bottom: 1px solid #5ecbce; |
| | | .head { |
| | | display: flex; |
| | | width: 280px; |
| | | height: 57px; |
| | | background: rgba(0, 30, 63, 0.4); |
| | | backdrop-filter: blur(5px); |
| | | display: flex; |
| | | align-items: center; |
| | | padding-left: 10px; |
| | | font-weight: bold; |
| | | font-size: 16px; |
| | | cursor: pointer; |
| | | img { |
| | | width: 14px; |
| | | margin-right: 10px; |
| | | } |
| | | } |
| | | |
| | | .war_list { |
| | | max-height: 300px; |
| | | overflow: auto; |
| | | .line { |
| | | font-size: 13px; |
| | | color: #D2E0FF; |
| | | display: flex; |
| | | align-items: center; |
| | | height: 30px; |
| | | div{ |
| | | flex: 3; |
| | | } |
| | | .id_card{ |
| | | color: #00F2F3; |
| | | } |
| | | .title{ |
| | | flex: 4; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | </div> |
| | | <div class="list two-swiper"> |
| | | <div class="swiper-wrapper"> |
| | | <template v-for="item, i in dataList2"> |
| | | <template v-for="item, i in dataList2.filter(i => i.total > 0)"> |
| | | <div class="item two-swiper-slide swiper-slide"> |
| | | <div class="line"> |
| | | <div class="driver">{{ item.deviceType }}</div> |
| | |
| | | initialSlide: 0, |
| | | direction: 'vertical', //竖直方向 |
| | | slidesPerView: 3, |
| | | autoplay: autoplayFlag(dataList2.value, 3, 4000), |
| | | autoplay: autoplayFlag(dataList2.value.filter(i => i.total > 0), 3, 4000), |
| | | observer: true, //修改swiper自己或子元素时,自动初始化swiper |
| | | }) |
| | | } |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | padding: 16px 24px; |
| | | padding-top: 16px; |
| | | padding-left: 24px; |
| | | |
| | | .echart_wrap { |
| | | position: relative; |
| | |
| | | } |
| | | |
| | | .list { |
| | | margin-left: 36px; |
| | | margin-left: 32px; |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | <v-scale-screen width="1920" height="960"> |
| | | <div class="main_app"> |
| | | <img src="@/assets/images/task/bg@2x.png" class="main_bg" alt="" /> |
| | | <img class="point_icon" src="@/assets/ani/apngb-animated.png" alt=""> |
| | | <div class="main_header"> |
| | | <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" /> |
| | | <div class="title">安泰智慧物流园区-作业效能统筹</div> |
| | |
| | | <div class="list one-swiper"> |
| | | <div class="swiper-wrapper"> |
| | | <div class="line one-swiper-slide swiper-slide" v-for="item, i in dataList2" :key="i"> |
| | | <div class="top"><span v-if="i < 3">top</span>{{ i }}</div> |
| | | <div class="top"><span v-if="i < 3">top</span>{{ i + 1 }}</div> |
| | | <div class="id_card">{{ item.platformName }}</div> |
| | | <div class="wrap"> |
| | | <ChargeRate :rate="item.rate" /> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="center_box_bg"> |
| | | <!-- <div class="no no1" @click="workModalClick">1</div> |
| | | <div class="no no2" @click="workModalClick">2</div> |
| | | <div class="no no3" @click="workModalClick">3</div> --> |
| | | <img class="point_icon" src="@/assets/ani/apngb-animated.png" alt=""> |
| | | <div class="work_modal" @click="showWorkModal = false" v-if="showWorkModal"> |
| | | <img class="bg" src="@/assets/images/LogisticsCenter/bg_yuetai@2x.png" alt=""> |
| | | <div class="head"> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="center_box_two"> |
| | | <!-- <div class="videos"> |
| | | <div class="video" v-for="i in 4"></div> |
| | | </div> --> |
| | | <div v-if="data4.videoIndexCodes && data4.videoIndexCodes.length > 0" class="videos"> |
| | | <div class="video" v-for="indexCode in data4.videoIndexCodes"> |
| | | <Video v-if="indexCode" :href="data4.videoPluginUrl" :indexCode="indexCode" /> |
| | | </div> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="line header"> |
| | | <div>月台名称</div> |
| | |
| | | <div class="echart_wrap"> |
| | | <div class="echart3" id="echart3"></div> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="line" v-for="item, i in data6?.platformLogList"> |
| | | <div class="list four-swiper"> |
| | | <div class="swiper-wrapper"> |
| | | <div class="line four-swiper-slide swiper-slide" v-for="item, i in data6?.platformLogList"> |
| | | <div class="time_wrap"> |
| | | <div class="time" :style="{ |
| | | backgroundColor: item.objType == 5 ? '#4ca8f7' : item.objType == 6 ? '#f2b23e' : item.objType == 10 ? '#4673f6' : '#4aa38f' |
| | |
| | | <div class="id_card">{{ item.carCodeFront || item.param4 }}</div> |
| | | <div class="status">{{ statusMap[item.objType] }}</div> |
| | | <div class="desc">{{ item.content }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <span>告警:{{ item.eventContent }}</span> |
| | | </div> |
| | | <div class="wrap"> |
| | | <!-- <span style="margin-right: 30px;">状态:待处理</span> --> |
| | | <span style="margin-right: 50px;">{{ item.platformName }}</span> |
| | | <span>已发生:{{ item.haveTime }}</span> |
| | | </div> |
| | | </div> |
| | |
| | | dayjs.extend(duration) |
| | | import 'swiper/css/swiper.min.css' |
| | | import Swiper from 'swiper' |
| | | import Video from './videoUrl/Video.vue' |
| | | import { |
| | | cnplatformGroupFinish, |
| | | cnplatformDuration, |
| | |
| | | }]), |
| | | ] |
| | | const temp = [] |
| | | temp.push({ name: '签到数', value: data4.value?.signedNum || 0, rate: data4.value?.signedNum ? '100.0' : 0 }) |
| | | temp.push({ name: '签到数', value: data4.value?.signedNum || 0, rate: data4.value?.signedNum ? '100' : 0 }) |
| | | temp.push({ name: '已叫号', value: data4.value?.calledNum || 0, rate: data4.value?.signedNum ? (data4.value.calledNum / data4.value?.signedNum * 100).toFixed(1) : 0 }) |
| | | temp.push({ name: '已作业', value: data4.value?.workedNum || 0, rate: data4.value?.signedNum ? (data4.value.workedNum / data4.value?.signedNum * 100).toFixed(1) : 0 }) |
| | | temp.push({ name: '已完成', value: data4.value?.doneNum || 0, rate: data4.value?.signedNum ? (data4.value.doneNum / data4.value?.signedNum * 100).toFixed(1) : 0 }) |
| | |
| | | |
| | | const data6 = ref({}) |
| | | const getData6 = () => { |
| | | cncarWorkSituation({ size: 7 }).then(res => { |
| | | cncarWorkSituation({ size: 30 }).then(res => { |
| | | const result = res.data |
| | | data6.value = result |
| | | }) |
| | |
| | | |
| | | const showWorkModal = ref(false) |
| | | const workModalParam = ref({}) |
| | | // point_icon |
| | | const pointList = ref([ |
| | | { left: 230, top: 190 }, |
| | | { left: 265, top: 180 }, |
| | | { left: 300, top: 170 }, |
| | | { left: 335, top: 160 }, |
| | | { left: 370, top: 150 }, |
| | | |
| | | { left: 530, top: 50 }, |
| | | { left: 550, top: 65 }, |
| | | { left: 570, top: 75 }, |
| | | { left: 590, top: 75 }, |
| | | { left: 600, top: 80 }, |
| | | { left: 850, top: 60 }, |
| | | |
| | | ]) |
| | | |
| | | const platformClick = (val) => { |
| | | workModalParam.value = val |
| | | console.log(val) |
| | |
| | | observer: true, //修改swiper自己或子元素时,自动初始化swiper |
| | | }) |
| | | } |
| | | const loopFn6 = () => { |
| | | var newSwiper1 = new Swiper('.four-swiper', { |
| | | initialSlide: 0, |
| | | direction: 'vertical', //竖直方向 |
| | | slidesPerView: 7, |
| | | autoplay: autoplayFlag(data6.value.platformLogList, 7, 4000), |
| | | observer: true, //修改swiper自己或子元素时,自动初始化swiper |
| | | }) |
| | | } |
| | | const autoplayFlag = (list = [], leng = 4, time = 2000) => { |
| | | if (list.length > leng) { |
| | | return { delay: time, disableOnInteraction: false } |
| | |
| | | loopFn2() |
| | | loopFn5() |
| | | loopFn7() |
| | | loopFn6() |
| | | }, 12000) |
| | | }) |
| | | |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | position: relative; |
| | | .point_icon { |
| | | position: absolute; |
| | | left: 850px; |
| | | top: 60px; |
| | | } |
| | | |
| | | .no { |
| | | width: 28px; |
| | | height: 28px; |
| | |
| | | |
| | | .center_box_two { |
| | | width: 100%; |
| | | background: rgba(0, 86, 255, 0.05); |
| | | backdrop-filter: blur(5px); |
| | | |
| | | |
| | | .videos { |
| | | width: 100%; |
| | |
| | | width: 100%; |
| | | height: 210px; |
| | | overflow-y: auto; |
| | | |
| | | background: rgba(0, 86, 255, 0.05); |
| | | backdrop-filter: blur(5px); |
| | | .two-swiper { |
| | | height: 180px; |
| | | overflow: hidden; |
| | |
| | | backdrop-filter: blur(5px); |
| | | background: rgba(0, 86, 255, 0.05); |
| | | backdrop-filter: blur(5px); |
| | | |
| | | .static_wrap { |
| | | display: flex; |
| | | padding: 20px 0 15px; |
| | |
| | | |
| | | .list { |
| | | margin: 0 20px 0; |
| | | width: 100%; |
| | | height: 222px; |
| | | width: 430px; |
| | | height: 231px; |
| | | overflow: hidden; |
| | | scrollbar-width: none; |
| | | |
| | | .line { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 12px; |
| | | height: 33px; |
| | | height: 33px !important; |
| | | color: #D2E0FF; |
| | | width: 100%; |
| | | |
| | |
| | | .right_box_two { |
| | | padding: 20px 20px 0; |
| | | margin-top: 20px; |
| | | |
| | | .list { |
| | | height: 220px; |
| | | overflow: hidden; |
| | |
| | | background: rgba(0, 86, 255, 0.05); |
| | | backdrop-filter: blur(5px); |
| | | padding-top: 15px; |
| | | |
| | | .item { |
| | | display: flex; |
| | | font-size: 13px; |
| | |
| | | position: relative; |
| | | z-index: -2; |
| | | font-size: 14px; |
| | | |
| | | .point_icon { |
| | | position: absolute; |
| | | left: 800px; |
| | | top: 420px; |
| | | } |
| | | |
| | | .main_bg { |
| | | position: absolute; |