| | |
| | | }) |
| | | } |
| | | } |
| | | this.loadMember() |
| | | }) |
| | | }, |
| | | getfindCompanyTreePage() { |
| | |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="责任部门" prop="companyId"> |
| | | <el-select v-model="param.companyId"> |
| | | <el-select @change="getAddrList" v-model="param.companyId"> |
| | | <el-option v-for="op in department" :key="op.id" :label="op.name" :value="op.id"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | |
| | | allList({ type: 1 }).then(res => { // 类型 |
| | | this.typeList = res || [] |
| | | }) |
| | | allList({ type: 0 }).then(res => { // 位置 |
| | | this.addrList = res || [] |
| | | }) |
| | | memberList({}).then(res => { |
| | | this.memberList = res || [] |
| | | }) |
| | |
| | | } |
| | | }) |
| | | }, |
| | | getAddrList() { |
| | | const { companyId } = this.param |
| | | allList({ type: 0,companyId }).then(res => { // 位置 |
| | | this.addrList = res || [] |
| | | }) |
| | | }, |
| | | changeArea (e) { |
| | | const item = this.addrList.find(i => i.id === e) |
| | | const arr = [] |
| | |
| | | { name: '所属部门及下属部门', id: 1 }, |
| | | { name: '所属部门及其子孙部门', id: 2 }, |
| | | { name: '仅所属部门', id: 3 }, |
| | | { name: '自定义部门', id: 4 } |
| | | { name: '自定义部门', id: 4 }, |
| | | { name: '只看自己', id: -1 }, |
| | | ], |
| | | // 表单数据 |
| | | form: { |
| | |
| | | <el-form-item label="提报人组织" prop="companyName"> |
| | | <el-input v-model="searchForm.companyName" placeholder="请输入" clearable @keypress.enter.native="search"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="责任部门" prop="companyName"> |
| | | <el-input v-model="searchForm.companyName" placeholder="请输入" clearable @keypress.enter.native="search"></el-input> |
| | | <el-form-item label="责任部门" prop="dutyCompanyName"> |
| | | <el-input v-model="searchForm.dutyCompanyName" placeholder="请输入责任部门" clearable @keypress.enter.native="search"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="隐患区域" prop="areaId"> |
| | | <el-select v-model="searchForm.areaId" placeholder="请选择隐患区域" clearable @change="search"> |
| | |
| | | @selection-change="handleSelectionChange" |
| | | > |
| | | <el-table-column type="selection" width="55"></el-table-column> |
| | | <el-table-column prop="companyName" label="责任部门" min-width="150px"></el-table-column> |
| | | <el-table-column prop="dutyCompanyName" label="责任部门" min-width="150px"></el-table-column> |
| | | <el-table-column prop="areaName" label="隐患区域" min-width="150px"></el-table-column> |
| | | <el-table-column prop="categoryName" label="隐患类型" min-width="150px"></el-table-column> |
| | | <el-table-column prop="memberName" label="提报人" min-width="80px"></el-table-column> |
| | |
| | | method: 'get' |
| | | }) |
| | | } |
| | | // 部门列表 |
| | | export const deptListPost = (data) => { |
| | | return http({ |
| | | url: '/visitsAdmin/cloudService/business/company/list', |
| | | method: 'post', |
| | | data |
| | | }) |
| | | } |
| | | // 隐患 类型 |
| | | export const DangerConfigType = (data) => { |
| | | return http({ |
| | |
| | | // 这个字段名需与你配置的basePrefixUrl一致,系统识别到带有/dev-api请求的地址时,会在前面拼接上代理服务器地址 |
| | | // "target" : "http://172.20.10.7:10010", // 代理服务器域名或IP地址 |
| | | // "target" : "http://192.168.0.100:10010", // 代理服务器域名或IP地址 |
| | | // "target" : "http://10.50.250.253:8088/gateway_interface", // 代理服务器域名或IP地址 |
| | | "target" : "http://192.168.0.173/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" : { |
| | | "^/gateway_interface" : "" |
| | |
| | | <view class="line"> |
| | | <view class="label"> |
| | | <text>*</text> |
| | | <text>责任部门</text> |
| | | </view> |
| | | <view class="value" @click="isShowCompany = true"> |
| | | <text class="mr6" |
| | | :style="{ color: param.companyName ? '#000000' : '#999999' }">{{ param.companyName ? param.companyName : "请选择" }}</text> |
| | | <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon> |
| | | </view> |
| | | </view>
|
| | | <view class="line">
|
| | | <view class="label">
|
| | | <text>*</text>
|
| | | <text>隐患区域</text> |
| | | </view> |
| | | <view class="value" @click="isShowArea = true"> |
| | | <text |
| | | class="mr6" |
| | | :style="{ color: param.areaName ? '#000000' : '#999999' }" |
| | | >{{ param.areaName ? param.areaName : "请选择" }}</text |
| | | > |
| | | <text class="mr6"
|
| | | :style="{ color: param.areaName ? '#000000' : '#999999' }">{{ param.areaName ? param.areaName : "请选择" }}</text>
|
| | | <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon> |
| | | </view> |
| | | </view> |
| | |
| | | <text>接收人</text> |
| | | </view> |
| | | <view class="value" @click="selMember"> |
| | | <text |
| | | class="mr6" |
| | | :style="{ color: param.checkorName ? '#000000' : '#999999' }" |
| | | >{{ param.checkorName ? param.checkorName : "请选择" }}</text |
| | | > |
| | | <text class="mr6"
|
| | | :style="{ color: param.checkorName ? '#000000' : '#999999' }">{{ param.checkorName ? param.checkorName : "请选择" }}</text>
|
| | | <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon> |
| | | </view> |
| | | </view> |
| | |
| | | <text>隐患类型</text> |
| | | </view> |
| | | <view class="value" @click="isShowType = true"> |
| | | <text |
| | | class="mr6" |
| | | :style="{ color: param.categoryName ? '#000000' : '#999999' }" |
| | | >{{ param.categoryName ? param.categoryName : "请选择" }}</text |
| | | > |
| | | <text class="mr6"
|
| | | :style="{ color: param.categoryName ? '#000000' : '#999999' }">{{ param.categoryName ? param.categoryName : "请选择" }}</text>
|
| | | <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon> |
| | | </view> |
| | | </view> |
| | | <view class="upload_line"> |
| | | <view class="name">现场情况</view> |
| | | <view class="wrap"> |
| | | <view |
| | | class="adduser_list_item_ipt1_upload" |
| | | @click="showUpload = true" |
| | | > |
| | | <view class="adduser_list_item_ipt1_upload" @click="showUpload = true">
|
| | | <u-icon name="plus" color="rgb(153, 153, 153)" size="20"></u-icon> |
| | | <view class="mt6">图片/视频</view> |
| | | </view> |
| | | <view |
| | | class="adduser_list_item_ipt1_upload" |
| | | v-for="(item, i) in submitFileList" |
| | | :key="i" |
| | | > |
| | | <u-icon |
| | | class="close" |
| | | size="20" |
| | | name="close-circle-fill" |
| | | color="red" |
| | | @click="fileDel(i)" |
| | | ></u-icon> |
| | | <image |
| | | v-if="item.type == 0" |
| | | :src="item.fileurlFull" |
| | | mode="widthFix" |
| | | ></image |
| | | ><video v-if="item.type == 1" :src="item.fileurlFull"></video |
| | | ></view> |
| | | <view class="adduser_list_item_ipt1_upload" v-for="(item, i) in submitFileList" :key="i">
|
| | | <u-icon class="close" size="20" name="close-circle-fill" color="red" @click="fileDel(i)"></u-icon>
|
| | | <image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image><video v-if="item.type == 1"
|
| | | :src="item.fileurlFull"></video>
|
| | | </view>
|
| | | </view> |
| | | </view> |
| | | <view class="empty"></view> |
| | |
| | | <text>情况说明</text> |
| | | </view> |
| | | <view class="value"> |
| | | <textarea |
| | | placeholder="请详细描述现场情况,不少于10个字" |
| | | minlength="10" |
| | | v-model="param.content" |
| | | placeholder-style="color: #999999;" |
| | | /> |
| | | <textarea placeholder="请详细描述现场情况,不少于10个字" minlength="10" v-model="param.content"
|
| | | placeholder-style="color: #999999;" />
|
| | | </view> |
| | | </view> |
| | | <view class="empty"></view> |
| | |
| | | <text></text> |
| | | <text>提报人</text> |
| | | </view> |
| | | <view class="value" |
| | | ><input |
| | | type="text" |
| | | disabled |
| | | placeholder="请输入提报人" |
| | | v-model="param.memberName" |
| | | placeholder-style="color: #999999;" |
| | | /></view> |
| | | <view class="value"><input type="text" disabled placeholder="请输入提报人" v-model="param.memberName"
|
| | | placeholder-style="color: #999999;" /></view>
|
| | | </view> |
| | | <view class="line"> |
| | | <view class="label"> |
| | | <text></text> |
| | | <text>联系电话</text> |
| | | </view> |
| | | <view class="value" |
| | | ><input |
| | | type="text" |
| | | disabled |
| | | placeholder="请输入联系电话" |
| | | v-model="param.memberPhone" |
| | | placeholder-style="color: #999999;" |
| | | /></view> |
| | | <view class="value"><input type="text" disabled placeholder="请输入联系电话" v-model="param.memberPhone"
|
| | | placeholder-style="color: #999999;" /></view>
|
| | | </view> |
| | | <view class="line"> |
| | | <view class="label"> |
| | |
| | | <text>提报时间</text> |
| | | </view> |
| | | <view class="value" @click="isShowTime = true"> |
| | | <text |
| | | class="mr6" |
| | | :style="{ color: param.submitTime ? '#000000' : '#999999' }" |
| | | >{{ param.submitTime ? param.submitTime : "请选择" }}</text |
| | | > |
| | | <text class="mr6"
|
| | | :style="{ color: param.submitTime ? '#000000' : '#999999' }">{{ param.submitTime ? param.submitTime : "请选择" }}</text>
|
| | | <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="footer" |
| | | ><view class="footer_btn" @click="onSubmit">提交</view></view |
| | | > |
| | | <view class="footer">
|
| | | <view class="footer_btn" @click="onSubmit">提交</view>
|
| | | </view>
|
| | | </view> |
| | | <!-- --> |
| | | <u-picker keyName="name" :show="isShowCompany" closeOnClickOverlay :columns="deptList" @confirm="seletedCompany" |
| | | @close="isShowCompany = false" @cancel="isShowCompany = false"></u-picker>
|
| | | <!-- 区域 --> |
| | | <u-picker |
| | | keyName="name" |
| | | :show="isShowArea" |
| | | closeOnClickOverlay |
| | | :columns="areaOptions" |
| | | @confirm="seletedArea" |
| | | @close="isShowArea = false" |
| | | @cancel="isShowArea = false" |
| | | ></u-picker> |
| | | <u-picker |
| | | keyName="name" |
| | | :show="isShowType" |
| | | closeOnClickOverlay |
| | | :columns="areaType" |
| | | @confirm="seletedType" |
| | | @close="isShowType = false" |
| | | @cancel="isShowType = false" |
| | | ></u-picker> |
| | | <u-picker keyName="name" :show="isShowArea" closeOnClickOverlay :columns="areaOptions" @confirm="seletedArea"
|
| | | @close="isShowArea = false" @cancel="isShowArea = false"></u-picker>
|
| | | <u-picker keyName="name" :show="isShowType" closeOnClickOverlay :columns="areaType" @confirm="seletedType"
|
| | | @close="isShowType = false" @cancel="isShowType = false"></u-picker>
|
| | | <!-- --> |
| | | <u-datetime-picker |
| | | :show="isShowTime" |
| | | :minDate="new Date().getTime()" |
| | | mode="datetime" |
| | | closeOnClickOverlay |
| | | @cancel="isShowTime = false" |
| | | @close="isShowTime = false" |
| | | @confirm="seletedDate" |
| | | ></u-datetime-picker> |
| | | <u-datetime-picker :show="isShowTime" :minDate="new Date().getTime()" mode="datetime" closeOnClickOverlay
|
| | | @cancel="isShowTime = false" @close="isShowTime = false" @confirm="seletedDate"></u-datetime-picker>
|
| | | <!-- --> |
| | | <u-popup :show="showUpload" @close="showUpload = false" closeOnClickOverlay> |
| | | <view class="upload_wrap"> |
| | |
| | | import { |
| | | uploadUrl, |
| | | DangerCreate, |
| | | DangerConfigType |
| | | DangerConfigType, |
| | | deptListPost
|
| | | } from '@/api' |
| | | import dayjs from 'dayjs' |
| | | export default { |
| | |
| | | param: {}, |
| | | submitFileList: [], |
| | | |
| | | isShowCompany: false, |
| | | isShowArea: false, |
| | | isShowType: false, |
| | | isShowTime: false, |
| | | showUpload: false, |
| | | |
| | | deptList: [], |
| | | areaOptions: [], |
| | | areaType: [], |
| | | } |
| | |
| | | }, |
| | | methods: { |
| | | onSubmit() { |
| | | const { param, submitFileList } = this |
| | | const {
|
| | | param,
|
| | | submitFileList
|
| | | } = this |
| | | if (!param.companyName) return uni.showToast({ |
| | | title: '请选择责任部门', |
| | | icon: 'none' |
| | | })
|
| | | if (!param.areaName) return uni.showToast({ |
| | | title: '请选择隐患区域', |
| | | icon: 'none' |
| | |
| | | this.$jump('/pages/staff/snapshotResult') |
| | | } |
| | | }) |
| | | }, |
| | | seletedCompany(e) { |
| | | const item = e.value[0] |
| | | this.$set(this.param, 'companyId', item.id) |
| | | this.$set(this.param, 'companyName', item.name) |
| | | this.$set(this.param, 'areaId', '') |
| | | this.$set(this.param, 'areaName', '') |
| | | DangerConfigType({ |
| | | type: '0', |
| | | companyId: item.id |
| | | }).then(res => { |
| | | this.areaOptions = [res.data] |
| | | }) |
| | | this.isShowCompany = false |
| | | }, |
| | | seletedArea(e) { |
| | | const item = e.value[0] |
| | |
| | | this.isShowTime = false |
| | | }, |
| | | initConfig() { |
| | | DangerConfigType({ type: '1' }).then(res => { |
| | | deptListPost({}).then(res => { |
| | | this.deptList = [res.data] |
| | | })
|
| | | DangerConfigType({
|
| | | type: '1'
|
| | | }).then(res => {
|
| | | this.areaType = [res.data] |
| | | }) |
| | | DangerConfigType({ type: '0' }).then(res => { |
| | | DangerConfigType({
|
| | | type: '0'
|
| | | }).then(res => {
|
| | | this.areaOptions = [res.data] |
| | | }) |
| | | }, |
| | |
| | | uni.chooseImage({ |
| | | count: 4, |
| | | success: (chooseImageRes) => { |
| | | uni.showLoading({ title: '上传中', mask: true }) |
| | | uni.showLoading({
|
| | | title: '上传中',
|
| | | mask: true
|
| | | })
|
| | | const tempFilePaths = chooseImageRes.tempFilePaths |
| | | let imgs = tempFilePaths.map((value, index) => { |
| | | return { |
| | |
| | | let token = uni.getStorageSync('token') || '' |
| | | uni.chooseVideo({ |
| | | success: (chooseImageRes) => { |
| | | uni.showLoading({ title: '上传中', mask: true }) |
| | | uni.showLoading({
|
| | | title: '上传中',
|
| | | mask: true
|
| | | })
|
| | | uni.uploadFile({ |
| | | url: `${uploadUrl}`, |
| | | filePath: chooseImageRes.tempFilePath, |
| | |
| | | <style lang="scss"> |
| | | .main_wrap { |
| | | padding-bottom: 200rpx; |
| | |
|
| | | .line { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | border-bottom: 1rpx solid #e5e5e5; |
| | | padding: 30rpx 0; |
| | |
|
| | | .label { |
| | | font-size: 30rpx; |
| | | font-weight: 400; |
| | |
|
| | | text { |
| | | &:nth-child(1) { |
| | | color: #e42d2d; |
| | |
| | | } |
| | | } |
| | | } |
| | |
|
| | | .value { |
| | | flex: 1; |
| | | height: 100%; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: flex-end; |
| | |
|
| | | input { |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | } |
| | | } |
| | | } |
| | |
|
| | | .upload_line { |
| | | padding: 30rpx 0; |
| | |
|
| | | .wrap { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | } |
| | |
|
| | | .adduser_list_item_ipt1_upload { |
| | | margin-top: 24rpx; |
| | | width: 120rpx; |
| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | position: relative; |
| | |
|
| | | .close { |
| | | position: absolute; |
| | | right: -20rpx; |
| | | top: -20rpx; |
| | | z-index: 9999; |
| | | } |
| | |
|
| | | image { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | |
|
| | | video { |
| | | width: 100%; |
| | | max-height: 120rpx; |
| | |
| | | } |
| | | } |
| | | } |
| | |
|
| | | .upload_wrap { |
| | | width: 100%; |
| | |
|
| | | .btn { |
| | | height: 90rpx; |
| | | line-height: 90rpx; |
| | | text-align: center; |
| | | } |
| | | } |
| | |
|
| | | .footer { |
| | | width: 100%; |
| | | padding: 0 30rpx; |
| | |
| | | color: #ffffff; |
| | | } |
| | | } |
| | |
|
| | | .empty { |
| | | width: 750rpx; |
| | | height: 20rpx; |
| | |
| | | data() { |
| | | return { |
| | | form: { |
| | | username: '18056814089', |
| | | password: '123456', |
| | | code: 1 |
| | | // username: '18056814089', |
| | | username: '', |
| | | password: '', |
| | | code: '' |
| | | }, |
| | | isShowProtocol: false, |
| | | ProtocolFlag: true, |
| | | ProtocolFlag: false, |
| | | captcha: {}, |
| | | htmlText: '' |
| | | } |
| | |
| | | </view>
|
| | | <view class="line">
|
| | | <text class="label">总运输量</text>
|
| | | <text class="value">{{ item.totalNum }}万支</text>
|
| | | <text class="value">{{ item.totalNum || item.ioQty}}万支</text>
|
| | | </view>
|
| | | <view class="line" v-if="item.carrierName">
|
| | | <text class="label">运输公司</text>
|
| | |
| | | </view>
|
| | | <view class="line">
|
| | | <text class="label">总运输量</text>
|
| | | <text class="value">{{ item.totalNum }}万支</text>
|
| | | <text class="value">{{ item.totalNum || item.ioQty }}万支</text>
|
| | | </view>
|
| | | <view class="line" v-if="item.carrierName">
|
| | | <text class="label">运输公司</text>
|
| | |
| | | flex-wrap: wrap;
|
| | |
|
| | | .item {
|
| | | width: 210rpx;
|
| | | width: 220rpx;
|
| | | height: 80rpx;
|
| | | display: flex;
|
| | | justify-content: center;
|
| | | align-items: center;
|
| | | line-height: 80rpx; |
| | | text-align: center;
|
| | | background: #ffffff;
|
| | | border-radius: 8rpx;
|
| | | border: 1rpx solid #999999;
|
| | | font-size: 30rpx;
|
| | | color: #222222;
|
| | | margin-bottom: 20rpx;
|
| | | margin-right: 30rpx;
|
| | |
|
| | | margin-bottom: 15rpx;
|
| | | margin-right: 15rpx;
|
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis;
|
| | | &:nth-of-type(3n) {
|
| | | margin-right: 0;
|
| | | }
|
| | |
| | | </view> |
| | | <view class="line"> |
| | | <text class="label">总运输量</text> |
| | | <text class="value">{{ item.totalNum }}万支</text> |
| | | <text class="value">{{ item.totalNum || item.ioQty }}万支</text> |
| | | </view> |
| | | <view class="line" v-if="item.carrierName"> |
| | | <text class="label">运输公司</text> |
| | |
| | | margin-bottom: 120rpx; |
| | | } |
| | | .item { |
| | | width: 210rpx; |
| | | width: 220rpx; |
| | | height: 80rpx; |
| | | background: #f3f3f3; |
| | | border-radius: 40rpx; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | margin-bottom: 20rpx; |
| | | line-height: 80rpx; |
| | | text-align: center; |
| | | margin-bottom: 15rpx; |
| | | font-size: 30rpx; |
| | | margin-right: 30rpx; |
| | | margin-right: 15rpx; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | &:nth-of-type(3n){ |
| | | margin-right: 0; |
| | | } |
| | |
| | | |
| | | // 安防管控大屏 中心数据 |
| | | export const getEnergyCenterData = (data) => { |
| | | return instance({ |
| | | url: 'visitsAdmin/cloudService/board/api/energy/centerData', |
| | | method: 'get', |
| | | data |
| | | }) |
| | | return request('visitsAdmin/cloudService/board/api/security/centerData', data) |
| | | } |
| | | // 安防管控大屏 园区安防设备 |
| | | export const getSecurityDeviceData = (data) => { |
| | | return instance({ |
| | | url: 'visitsAdmin/cloudService/board/api/energy/securityDeviceData', |
| | | method: 'get', |
| | | data |
| | | }) |
| | | return request('visitsAdmin/cloudService/board/api/security/securityDeviceData', data) |
| | | } |
| | | // 安防管控大屏 访客滞留情况 |
| | | export const getVisitRetentionData = (data) => { |
| | | return instance({ |
| | | url: 'visitsAdmin/cloudService/board/api/energy/visitRetentionData', |
| | | method: 'get', |
| | | data |
| | | }) |
| | | return request('visitsAdmin/cloudService/board/api/security/visitRetentionData', data) |
| | | } |
| | |
| | | background-color: #172630; |
| | | padding: 4px; |
| | | height: 18px; |
| | | overflow: hidden; |
| | | .plan{ |
| | | height: 10px; |
| | | } |
| | |
| | | <div>累计出库量统计</div> |
| | | </div> |
| | | <div class="tabs"> |
| | | <div class="tab active">本月</div> |
| | | <div class="tab" :class="{ active: activeTab1 == 0 }" @click="tabClick1(0)">本月</div> |
| | | <div class="separate"></div> |
| | | <div class="tab">本年</div> |
| | | <div class="tab" :class="{ active: activeTab1 == 1 }" @click="tabClick1(1)">本年</div> |
| | | </div> |
| | | <img src="@/assets/images/title@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="content_wrap"> |
| | | <div class="content"> |
| | | <div class="num">1000000</div> |
| | | <div class="unit_wrap"> |
| | | <div class="num">{{ activeTab1 == 0 ? data1.monthOutTotal : data1.yearOutTotal }}</div> |
| | | <div class="unit_wrap" v-if="data1.monthOutTotalOnYear || data1.yearOutTotalOnYear"> |
| | | <span style="color: #869CC9;">同比</span> |
| | | <img src="@/assets/images/ic_up.png" class="icon" alt=""> |
| | | <span>10.2%</span> |
| | | <img |
| | | v-if="(activeTab1 == 0 && data1.monthOutTotalOnYear > 0) || (activeTab1 == 1 && data1.yearOutTotalOnYear > 0)" |
| | | src="@/assets/images/ic_up.png" class="icon" alt=""> |
| | | <img v-else src="@/assets/images/ic_down.png" class="icon" alt=""> |
| | | <span>{{ activeTab1 == 0 ? Math.abs(data1.monthOutTotalOnYear) : Math.abs(data1.yearOutTotalOnYear) |
| | | }}%</span> |
| | | </div> |
| | | </div> |
| | | <div class="train_wrap"> |
| | |
| | | </div> |
| | | <div class="total"> |
| | | <span>累计出库车次</span> |
| | | <span><strong>3900</strong><span class="unit">次</span></span> |
| | | <span><strong>{{ activeTab1 == 0 ? data1.monthOutTimes : data1.yearOutTimes }}</strong><span |
| | | class="unit">次</span></span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="com_header"> |
| | | <div class="title"> |
| | | <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> |
| | | <div>月能耗分析</div> |
| | | <div>运输任务分析</div> |
| | | </div> |
| | | <div class="tabs"> |
| | | <div class="tab active">近7日</div> |
| | | <div class="tab" :class="{ active: activeTab2 == 0 }" @click="tabClick2(0)">近7日</div> |
| | | <div class="separate"></div> |
| | | <div class="tab">本月</div> |
| | | <div class="tab" :class="{ active: activeTab2 == 1 }" @click="tabClick2(1)">本月</div> |
| | | <div class="separate"></div> |
| | | <div class="tab">本年</div> |
| | | <div class="tab" :class="{ active: activeTab2 == 2 }" @click="tabClick2(2)">本年</div> |
| | | </div> |
| | | <img src="@/assets/images/title@2x.png" class="bg" alt="" /> |
| | | </div> |
| | |
| | | <span class="item addr">收货单位</span> |
| | | <span class="item time">任务开始时间</span> |
| | | </div> |
| | | <div class="line" v-for="i in 7"> |
| | | <span class="item flag"><span class="flag_bg">出</span></span> |
| | | <span class="item order">11</span> |
| | | <span class="item id_card">11</span> |
| | | <span class="item status">11</span> |
| | | <span class="item addr">11</span> |
| | | <span class="item time">11</span> |
| | | <div class="line" v-for="item in dataList3"> |
| | | <span class="item flag"><span :class="{ flag_bg: item.type == 1 || item.type == 3 }">{{ item.type == 1 |
| | | || item.type == 3 ? '出' : '入' }}</span></span> |
| | | <span class="item order">{{ item.billCode || item.contractNum }}</span> |
| | | <span class="item id_card">{{ item.carCodeFront }}</span> |
| | | <span class="item status">{{ statusMap[item.status].label }}</span> |
| | | <span class="item addr">{{ item.repertotyAddress }}</span> |
| | | <span class="item time" v-if="item.confirmTaskDate">{{ item.confirmTaskDate.slice(5, 16) }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="center_box"> |
| | | <div class="center_box_one"> |
| | | <div class="tabs"> |
| | | <div class="tab active"> |
| | | <img src="@/assets/images/energy_ef/chuku_task_ac.png" alt=""> |
| | | <div class="tab" :class="{ active: activeTab4 == 0 }" @click="tabClick4(0)"> |
| | | <img v-if="activeTab4 == 0" src="@/assets/images/energy_ef/chuku_task_ac.png" alt=""> |
| | | <img v-else src="@/assets/images/energy_ef/chuku_task.png" alt=""> |
| | | <span>出库任务</span> |
| | | </div> |
| | | <div class="tab"> |
| | | <img src="@/assets/images/energy_ef/ruku_task.png" alt=""> |
| | | <div class="tab" :style="{ color: activeTab4 == 1 ? '#387df0' : '#d8e4f8' }" @click="tabClick4(1)"> |
| | | <img v-if="activeTab4 == 1" src="@/assets/images/energy_ef/ruku_task_ac.png" alt=""> |
| | | <img v-if="activeTab4 == 0" src="@/assets/images/energy_ef/ruku_task.png" alt=""> |
| | | <span>入库任务</span> |
| | | </div> |
| | | </div> |
| | |
| | | <img src="@/assets/images/energy_ef/ic_renwuzongliang@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">当前任务量</div> |
| | | <div class="num"><span>1000</span>万支</div> |
| | | <div class="num"><span>{{ data4.planTaskNum }}</span>万支</div> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/energy_ef/ic_wanchengrenwu@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">当日完成任务总量</div> |
| | | <div class="num"><span class="today">1000</span>万支</div> |
| | | <div class="num"><span class="today">{{ data4.finishTaskNum }}</span>万支</div> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/energy_ef/ic_bili@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">已完成比例</div> |
| | | <div class="num"><span class="finish">1000</span>万支</div> |
| | | <div class="num" v-if="data4.finishTaskNum && data4.planTaskNum"><span class="finish">{{ (( |
| | | data4.finishTaskNum / data4.planTaskNum) * 100).toFixed(1) }}%</span>万支</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div>出入库效率</div> |
| | | </div> |
| | | <div class="tabs"> |
| | | <div class="tab active">今日</div> |
| | | <div class="tab" :class="{ active: activeTab12 == 0 }" @click="tabClick12(0)">今日</div> |
| | | <div class="separate"></div> |
| | | <div class="tab">本月</div> |
| | | <div class="tab" :class="{ active: activeTab12 == 1 }" @click="tabClick12(1)">本月</div> |
| | | </div> |
| | | <img src="@/assets/images/title@2x.png" class="bg" alt="" /> |
| | | </div> |
| | |
| | | <img src="@/assets/images/energy_ef/ic_chukuxiaolv@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">出库效率</div> |
| | | <div class="num"><span>1000</span>万支/小时</div> |
| | | <div class="num"><span>{{ activeTab12 == 0 ? data1.todayInRata : data1.monthInRata }}</span>万支/小时 |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/energy_ef/ic_rukuxiaolv@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">入库效率</div> |
| | | <div class="num"><span class="today">1000</span>万支/小时</div> |
| | | <div class="num"><span class="today">{{ activeTab12 == 0 ? data1.monthOutTotal : data1.yearOutTotal |
| | | }}</span>万支/小时</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="content"> |
| | | <div class="echart_wrap"> |
| | | <div class="pie_text"> |
| | | <div class="fs30"><strong>300</strong></div> |
| | | <div class="fs30"><strong>{{ data5 }}</strong></div> |
| | | <div>入库数量</div> |
| | | </div> |
| | | <div class="echart" id="echart1"></div> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="item"> |
| | | <div class="item" v-for="item, i in dataList5"> |
| | | <div class="line"> |
| | | <div :style="{ background: colors[0] }" class="icon"></div> |
| | | <div class="text">合肥厂</div> |
| | | <div :style="{ background: colors[i] }" class="icon"></div> |
| | | <div class="text">{{ item.name }}</div> |
| | | </div> |
| | | <div :style="{ color: colors[0] }" class="num">100万支 | 55%</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="line"> |
| | | <div :style="{ background: colors[1] }" class="icon"></div> |
| | | <div class="text">集散中心</div> |
| | | </div> |
| | | <div :style="{ color: colors[1] }" class="num">100万支 | 55%</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="line"> |
| | | <div :style="{ background: colors[2] }" class="icon"></div> |
| | | <div class="text">市公司</div> |
| | | </div> |
| | | <div :style="{ color: colors[2] }" class="num">100万支 | 55%</div> |
| | | <div :style="{ color: colors[i] }" class="num">{{ item.value }}万支 | {{ item.rate }}%</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="repertory"> |
| | | <div class="use_ratio"> |
| | | <div class="header"> |
| | | <div>库存量 <span class="num">80/100</span></div> |
| | | <div>利用率 88%</div> |
| | | <div>库存量 <span class="num">{{data1.stockTotal}}/{{data1.stockMax}}</span></div> |
| | | <div v-if="data1.stockTotal && data1.stockMax">利用率{{ ((data1.stockTotal / data1.stockMax) * 100).toFixed(0) }}%</div> |
| | | </div> |
| | | <Percent :rate="80" /> |
| | | <Percent v-if="data1.stockTotal && data1.stockMax" :rate="((data1.stockTotal / data1.stockMax) * 100).toFixed(0)" /> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="item"> |
| | | <div class="la">黄山(新制皖烟)</div> |
| | | <div class="val">400万支</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">黄山(新制皖烟)</div> |
| | | <div class="val">400万支</div> |
| | | <div class="item" v-for="item in dataList6"> |
| | | <div class="la">{{ item.name }}</div> |
| | | <div class="val">{{item.num}}万支</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | itemGap: 12, |
| | | // icon: 'circle', |
| | | right: '12px', |
| | | top: '0', |
| | | data: ['总库存', '当前库存', '库存利用率'], |
| | | itemWidth: 20, |
| | | itemHeight: 10, |
| | | top: '10px', |
| | | data: ['计划任务量', '任务完成量', '计划任务数'], |
| | | itemWidth: 12, |
| | | itemHeight: 4, |
| | | textStyle: { |
| | | color: '#fff', |
| | | borderColor: '#fff' |
| | |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '3%', |
| | | top: '16%', |
| | | top: '18%', |
| | | containLabel: true |
| | | }, |
| | | tooltip: { |
| | |
| | | axisTick: { |
| | | show: false, |
| | | }, |
| | | data: ['7.1', '7.1', '7.1', '7.1', '7.1'], |
| | | data: dataList2.value.map(i => i.planDate), |
| | | }], |
| | | yAxis: [ |
| | | { |
| | |
| | | ], |
| | | series: [ |
| | | { |
| | | name: '计划完成数量', |
| | | name: '计划任务量', |
| | | type: 'bar', |
| | | barWidth: 10, |
| | | barGap: '60%', |
| | |
| | | }, |
| | | barBorderRadius: [3, 3, 0, 0], |
| | | }, |
| | | data: [900, 438, 485, 631, 689] |
| | | data: dataList2.value.map(i => i.planTaskNum) |
| | | }, |
| | | { |
| | | name: '任务完成量', |
| | |
| | | }, |
| | | barBorderRadius: [3, 3, 0, 0], |
| | | }, |
| | | data: [438, 485, 631, 689, 900] |
| | | data: dataList2.value.map(i => i.finishTaskNum) |
| | | }, |
| | | { |
| | | name: '计划任务数', |
| | |
| | | position: 'top', |
| | | color: '#fff', |
| | | }, |
| | | data: [485, 631, 389, 224, 287] |
| | | data: dataList2.value.map(i => i.planTimes) |
| | | } |
| | | ] |
| | | }) |
| | |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | data: [ |
| | | { value: 1048, name: 'Search Engine' }, |
| | | { value: 735, name: 'Direct' }, |
| | | { value: 580, name: 'Email' } |
| | | ] |
| | | data: dataList5.value |
| | | } |
| | | ] |
| | | } |
| | |
| | | }) |
| | | } |
| | | |
| | | const dataList1 = ref([]) |
| | | const data1 = ref({}) |
| | | const activeTab1 = ref(0) |
| | | const activeTab12 = ref(0) |
| | | const tabClick1 = (val) => { |
| | | activeTab1.value = val |
| | | } |
| | | const tabClick12 = (val) => { |
| | | activeTab12.value = val |
| | | } |
| | | const getData1 = () => { |
| | | wlcenterData().then(res => { |
| | | const result = res |
| | | const result = res.data |
| | | data1.value = result |
| | | }) |
| | | } |
| | | |
| | | const dataList2 = ref([]) |
| | | const activeTab2 = ref(0) |
| | | const tabClick2 = (val) => { activeTab2.value = val } |
| | | const getData2 = () => { |
| | | wlcenterData().then(res => { |
| | | const result = res |
| | | wltransportMeasure({ queryType: activeTab2.value }).then(res => { |
| | | const result = res.data |
| | | dataList2.value = result |
| | | initEnergy() |
| | | }) |
| | | } |
| | | |
| | | const dataList3 = ref([]) |
| | | const statusMap = [ |
| | | { value: 0, label: '待确认' }, |
| | | { value: 1, label: '待签到' }, |
| | | { value: 2, label: '等待叫号' }, |
| | | { value: 3, label: '入园等待' }, |
| | | { value: 4, label: '月台等待' }, |
| | | { value: 5, label: '作业中' }, |
| | | { value: 6, label: '作业完成' }, |
| | | { value: 7, label: '转移中' }, |
| | | { value: 8, label: '异常挂起' }, |
| | | { value: 9, label: '已授权离园' }, |
| | | { value: 10, label: '已离园' }, |
| | | { value: 11, label: '已过号' }, |
| | | { value: 12, label: '已取消' }, |
| | | ] |
| | | const getData3 = () => { |
| | | wlcenterData().then(res => { |
| | | const result = res |
| | | wlplatformJobList().then(res => { |
| | | const result = res.data |
| | | dataList3.value = result |
| | | }) |
| | | } |
| | | const dataList4 = ref([]) |
| | | const data4 = ref({}) |
| | | const activeTab4 = ref(0) |
| | | const tabClick4 = (val) => { activeTab4.value = val } |
| | | const getData4 = () => { |
| | | wlcenterData().then(res => { |
| | | const result = res |
| | | wljobData({ queryType: activeTab4.value }).then(res => { |
| | | const result = res.data |
| | | data4.value = result |
| | | }) |
| | | } |
| | | const dataList5 = ref([]) |
| | | const data5 = ref(0) |
| | | const getData5 = () => { |
| | | wlcenterData().then(res => { |
| | | const result = res |
| | | wltotalInList().then(res => { |
| | | const result = res.data || [] |
| | | let count = 0 |
| | | dataList5.value = result.map(i => { |
| | | i.value = i.num |
| | | count += i.num |
| | | return i |
| | | }) |
| | | dataList5.value.forEach(i => { |
| | | i.rate = ((i.num / count) * 100).toFixed(0) |
| | | }) |
| | | data5.value = count |
| | | initEchart1() |
| | | }) |
| | | } |
| | | const dataList6 = ref([]) |
| | | const getData6 = () => { |
| | | wlcenterData().then(res => { |
| | | const result = res |
| | | wlstockList().then(res => { |
| | | const result = res.data |
| | | dataList6.value = result |
| | | }) |
| | | } |
| | | onMounted(() => { |
| | |
| | | getData4() |
| | | getData5() |
| | | getData6() |
| | | return |
| | | initEnergy() |
| | | initEchart1() |
| | | |
| | | initMap() |
| | | }) |
| | | |
| | |
| | | |
| | | &:nth-of-type(2n) { |
| | | background: rgba(27, 64, 97, 0.52); |
| | | |
| | | .flag_bg { |
| | | background: #01ABFE !important; |
| | | } |
| | | } |
| | | |
| | | .item { |
| | |
| | | flex: 3; |
| | | display: flex; |
| | | |
| | | .flag_bg { |
| | | span { |
| | | width: 22px; |
| | | height: 22px; |
| | | display: flex; |
| | |
| | | background: #00F2F3; |
| | | font-weight: 500; |
| | | color: #001B3C; |
| | | } |
| | | |
| | | .flag_bg { |
| | | background: #4eacf6; |
| | | } |
| | | } |
| | | |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | margin-right: 30px; |
| | | cursor: pointer; |
| | | |
| | | img { |
| | | width: 20px; |
| | |
| | | |
| | | .static_wrap { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | margin: 30px 0 54px; |
| | | |
| | | .item { |
| | | display: flex; |
| | | justify-content: center; |
| | | flex: 1; |
| | | |
| | | img { |
| | | width: 68px; |
| | |
| | | .echart_map { |
| | | width: 100%; |
| | | height: 100%; |
| | | border: 1px solid; |
| | | } |
| | | } |
| | | } |
| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 200px; |
| | | border: 1px solid; |
| | | |
| | | .echart_wrap { |
| | | position: relative; |
| | |
| | | |
| | | .list { |
| | | margin-top: 22px; |
| | | |
| | | height: 240px; |
| | | overflow: auto; |
| | | scrollbar-width: none; |
| | | .item { |
| | | width: 100%; |
| | | height: 36px; |
| | |
| | | margin: 0 6px; |
| | | } |
| | | |
| | | .tab { |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .active { |
| | | color: #0094eb; |
| | | } |
| | |
| | | </div> |
| | | <div class="num_wrap"> |
| | | <div class="la">总车位:</div> |
| | | <div class="val">100</div> |
| | | <div class="val">{{ data.parkingLotTotal }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="stall_static"> |
| | | <div class="residue"> |
| | | <div class="la">剩余车位</div> |
| | | <div class="val">50</div> |
| | | <div class="val">{{ data.freeParkingLot }}</div> |
| | | </div> |
| | | <div class="total"> |
| | | <div class="la">车位总数</div> |
| | | <div class="val">50</div> |
| | | <div class="val">{{ data.parkingLotTotal }}</div> |
| | | </div> |
| | | <div class="rate"> |
| | | <div class="la"> |
| | | <span>车位使用率</span> |
| | | <span class="num">50%</span> |
| | | <span v-if="data.inParkCarTotal && data.parkingLotTotal" class="num">{{ ((data.inParkCarTotal / |
| | | data.parkingLotTotal) * 100).toFixed(0) }}%</span> |
| | | </div> |
| | | <div class="val"> |
| | | <Percent :rate="50" /> |
| | | <Percent :rate="((data.inParkCarTotal / data.parkingLotTotal) * 100).toFixed(0)" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="private_car"> |
| | | <div class="item"> |
| | | <div class="name">员工车辆</div> |
| | | <div class="num">20</div> |
| | | <div class="num">{{ data.internalCarTotal }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="name">相关方车辆</div> |
| | | <div class="num num2">20</div> |
| | | <div class="num num2">{{ data.relatedCarTotal }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | |
| | | <div class="name">来访车辆</div> |
| | | <div class="num num3">20</div> |
| | | <div class="num num3">{{ data.visitCarTotal }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="section"> |
| | | <div class="item"></div> |
| | | <div class="item"></div> |
| | | <div class="item"></div> |
| | | <div class="item" :style="{ flex: data.internalCarTotal }"></div> |
| | | <div class="item" :style="{ flex: data.relatedCarTotal }"></div> |
| | | <div class="item" :style="{ flex: data.visitCarTotal }"></div> |
| | | </div> |
| | | <div class="second_title"> |
| | | <div class="title"> |
| | |
| | | <div class="car_static"> |
| | | <div class="echart_wrap"> |
| | | <div class="pie_text"> |
| | | <div class="fs30"><strong>300</strong></div> |
| | | <div class="fs30"><strong v-if="data.visitJobCarTotal">{{ data.internalJobCarTotal + |
| | | data.relatedJobCarTotal + data.visitJobCarTotal }}</strong></div> |
| | | <div>货车</div> |
| | | </div> |
| | | <div class="echart" id="echart1"></div> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="item"> |
| | | <div class="item" v-for="item, i in dataList1"> |
| | | <div class="line"> |
| | | <div :style="{ background: colors[0] }" class="icon"></div> |
| | | <div class="text">内运车辆</div> |
| | | <div :style="{ background: colors[i] }" class="icon"></div> |
| | | <div class="text">{{ item.name }}</div> |
| | | </div> |
| | | <div :style="{ color: colors[0] }" class="num">100</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="line"> |
| | | <div :style="{ background: colors[1] }" class="icon"></div> |
| | | <div class="text">外协运输车辆</div> |
| | | </div> |
| | | <div :style="{ color: colors[1] }" class="num">100</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="line"> |
| | | <div :style="{ background: colors[2] }" class="icon"></div> |
| | | <div class="text">市公司卸货车辆</div> |
| | | </div> |
| | | <div :style="{ color: colors[2] }" class="num">100</div> |
| | | <div :style="{ color: colors[i] }" class="num">{{ item.value }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt=""> |
| | | </div> |
| | | <div class="num_wrap"> |
| | | <div class="num">200</div> |
| | | <div class="num">{{ data.inParkTotal }}</div> |
| | | <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt=""> |
| | | </div> |
| | | </div> |
| | |
| | | <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt=""> |
| | | </div> |
| | | <div class="num_wrap"> |
| | | <div class="num">200</div> |
| | | <div class="num">{{ data.inParkCarTotal }}</div> |
| | | <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt=""> |
| | | </div> |
| | | </div> |
| | |
| | | <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt=""> |
| | | </div> |
| | | <div class="num_wrap"> |
| | | <div class="num">200</div> |
| | | <div class="num">{{ data.deviceTotal }}</div> |
| | | <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt=""> |
| | | </div> |
| | | </div> |
| | |
| | | <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt=""> |
| | | </div> |
| | | <div class="num_wrap"> |
| | | <div class="num">200</div> |
| | | <div class="num">{{ data.errTotal }}</div> |
| | | <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt=""> |
| | | </div> |
| | | </div> |
| | |
| | | <img src="@/assets/images/SecurityControl/staff_ic_neibu@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">内部员工</div> |
| | | <div class="num"><span>1000</span> | 66.6%</div> |
| | | <div class="num" v-if="data.internalTotal && data.inParkTotal"><span>{{ data.internalTotal }}</span> | |
| | | {{ ((data.internalTotal / data.inParkTotal) * 100).toFixed(1) }}%</div> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/SecurityControl/staff_ic_xiangguanfang@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">长期相关方</div> |
| | | <div class="num today"><span>1000</span> | 66.6%</div> |
| | | <div class="num today" v-if="data.relatedTotal && data.inParkTotal"><span>{{ data.relatedTotal |
| | | }}</span> | {{ ((data.relatedTotal / data.inParkTotal) * 100).toFixed(1) }}%</div> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/SecurityControl/staff_ic_fangke@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">在园访客</div> |
| | | <div class="num finish"><span>1000</span> | 66.6%</div> |
| | | <div class="num finish" v-if="data.visitTotal && data.inParkTotal"><span>{{ data.visitTotal }}</span> |
| | | | {{ ((data.visitTotal / data.inParkTotal) * 100).toFixed(1) }}%</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="sa_static"> |
| | | <div class="echart_wrap"> |
| | | <div class="pie_text"> |
| | | <div class="fs30"><strong>300</strong></div> |
| | | <div class="fs30"><strong v-if="dataListT2 && dataListT2.length == 2">{{ dataListT2[0].value + |
| | | dataListT2[1].value }}</strong></div> |
| | | <div>总计</div> |
| | | </div> |
| | | <div class="echart" id="echart2"></div> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="item"> |
| | | <div class="item" v-for="item, i in dataListT2"> |
| | | <div class="line"> |
| | | <div :style="{ background: colors[1] }" class="icon"></div> |
| | | <div class="text">在线</div> |
| | | <div :style="{ background: colors[i] }" class="icon"></div> |
| | | <div class="text">{{ item.name }}</div> |
| | | </div> |
| | | <div :style="{ color: colors[1] }" class="num">100</div> |
| | | <div :style="{ color: colors[i] }" class="num">{{ item.value }} | {{ item.rate }}%</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="line"> |
| | | <div :style="{ background: colors[2] }" class="icon"></div> |
| | | <div class="text">离线</div> |
| | | </div> |
| | | <div :style="{ color: colors[2] }" class="num">100</div> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | <div class="table"> |
| | |
| | | <div>离线数</div> |
| | | <div>在线率</div> |
| | | </div> |
| | | <template v-for="item, i in dataList2"> |
| | | <div class="line"> |
| | | <div class="driver">门禁设备</div> |
| | | <div>10</div> |
| | | <div>10</div> |
| | | <div>10</div> |
| | | <div>10</div> |
| | | <div class="driver">{{ item.deviceType }}</div> |
| | | <div>{{ item.totalNum }}</div> |
| | | <div>{{ item.onlineNum }}</div> |
| | | <div>{{ item.offlineDeviceNum }}</div> |
| | | <div v-if="item.onlineNum && item.totalNum">{{ ((item.onlineNum / item.totalNum) * 100).toFixed(0) }}% |
| | | </div> |
| | | </div> |
| | | <div class="separate"></div> |
| | | <div class="line"> |
| | | <div class="driver">门禁设备</div> |
| | | <div>10</div> |
| | | <div>10</div> |
| | | <div>10</div> |
| | | <div>10</div> |
| | | </div> |
| | | <div class="separate"></div> |
| | | </template> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="dept">拜访部门</div> |
| | | <div class="dept">超时时长</div> |
| | | </div> |
| | | <template v-for="item in dataList3"> |
| | | <div class="line"> |
| | | <div>name</div> |
| | | <div class="dept">综合管理科</div> |
| | | <div class="dept">10:21</div> |
| | | <div>{{ item.name }}</div> |
| | | <div class="dept">{{ item.companyName }}</div> |
| | | <div class="dept">{{ item.timeOutMinuteT }}</div> |
| | | </div> |
| | | <div class="separate"></div> |
| | | <div class="line"> |
| | | <div>name</div> |
| | | <div class="dept">综合管理科</div> |
| | | <div class="dept">10:21</div> |
| | | </div> |
| | | <div class="separate"></div> |
| | | </template> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | import VScaleScreen from 'v-scale-screen' |
| | | import Percent from '@/components/percent.vue' |
| | | import dayjs from 'dayjs' |
| | | import duration from 'dayjs/plugin/duration' |
| | | dayjs.extend(duration) |
| | | import * as echarts from 'echarts' |
| | | import { getEnergyCenterData, getSecurityDeviceData, getVisitRetentionData } from '@/api' |
| | | |
| | | |
| | | const colors = ['#FEAF01', '#01ABFE', '#51F9E4'] |
| | | const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',] |
| | | const date = ref(dayjs().format('YYYY.MM.DD')) |
| | | const week = ref(weekMap[new Date().getDay()]) |
| | |
| | | myChart.resize() |
| | | }) |
| | | } |
| | | |
| | | const dataList1 = ref([]) |
| | | const initEchart1 = () => { |
| | | const myChart = echarts.init(document.getElementById('echart1')) |
| | | const temp = [] |
| | | temp.push({ name: '内运车辆', value: data.value.internalJobCarTotal }) |
| | | temp.push({ name: '外协运输车辆', value: data.value.relatedJobCarTotal }) |
| | | temp.push({ name: '市公司卸货车辆', value: data.value.visitJobCarTotal }) |
| | | temp.sort((a, b) => { |
| | | return a.value - b.value |
| | | }) |
| | | dataList1.value = temp |
| | | const option = { |
| | | series: [ |
| | | { |
| | |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | data: [ |
| | | { value: 1048, name: 'Search Engine' }, |
| | | { value: 735, name: 'Direct' }, |
| | | { value: 580, name: 'Email' } |
| | | ] |
| | | data: temp |
| | | } |
| | | ] |
| | | } |
| | |
| | | myChart.resize() |
| | | }) |
| | | } |
| | | |
| | | const colors = ['#FEAF01', '#01ABFE', '#51F9E4'] |
| | | const initEchart2 = () => { |
| | | const myChart = echarts.init(document.getElementById('echart2')) |
| | | const option = { |
| | |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | data: [ |
| | | { value: 1048, name: 'Search Engine' }, |
| | | { value: 735, name: 'Direct' }, |
| | | { value: 580, name: 'Email' } |
| | | ] |
| | | data: dataListT2.value |
| | | } |
| | | ] |
| | | } |
| | |
| | | myChart.resize() |
| | | }) |
| | | } |
| | | const ininDate = () => { |
| | | getEnergyCenterData() |
| | | } |
| | | onMounted(() => { |
| | | ininDate() |
| | | initEchart3() |
| | | |
| | | const data = ref({}) |
| | | const getData1 = () => { |
| | | getEnergyCenterData().then(res => { |
| | | const result = res.data |
| | | data.value = result |
| | | initEchart1() |
| | | }) |
| | | } |
| | | |
| | | const dataList2 = ref([]) |
| | | const dataListT2 = ref([]) |
| | | const getData2 = () => { |
| | | getSecurityDeviceData().then(res => { |
| | | const result = res.data |
| | | let temp = [] |
| | | let online = 0 |
| | | let outline = 0 |
| | | dataList2.value = result.map(item => { |
| | | online += item.onlineNum |
| | | outline += item.offlineDeviceNum |
| | | return item |
| | | }) |
| | | if (online >= outline) { |
| | | temp.push({ name: '在线', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) }) |
| | | temp.push({ name: '离线', value: outline, rate: ((outline / (online + outline)) * 100).toFixed(1) }) |
| | | } else { |
| | | temp.push({ name: '离线', value: outline, rate: ((outline / (online + outline)) * 100).toFixed(1) }) |
| | | temp.push({ name: '在线', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) }) |
| | | } |
| | | |
| | | dataListT2.value = temp |
| | | initEchart2() |
| | | }) |
| | | } |
| | | |
| | | const dataList3 = ref([]) |
| | | const getData3 = () => { |
| | | getVisitRetentionData().then(res => { |
| | | const result = res.data || [] |
| | | dataList3.value = result.map(i => { |
| | | i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('HH:mm') |
| | | return i |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getData1() |
| | | getData2() |
| | | getData3() |
| | | initEchart3() |
| | | // initEchart1() |
| | | }) |
| | | |
| | | |
| | |
| | | flex: 1; |
| | | margin-right: 20px; |
| | | position: relative; |
| | | |
| | | .content { |
| | | display: flex; |
| | | |
| | |
| | | background: linear-gradient(180deg, #021F4A 0%, #054281 100%), linear-gradient(180deg, #011738 0%, rgba(5, 66, 129, 0.26) 100%), #00141F; |
| | | border-radius: 2px; |
| | | border: 1px solid rgba(12, 153, 236, 0.68); |
| | | |
| | | .icon{ |
| | | width: 30px; |
| | | } |
| | | |
| | | .top { |
| | | width: 12px; |
| | | height: 12px; |
| | |
| | | server: { |
| | | proxy: { |
| | | "/gateway_interface": { |
| | | // target: "http://192.168.0.103:10010", |
| | | // target: "http://192.168.0.138:10010", |
| | | // target: "http://10.50.250.253:8088/gateway_interface", |
| | | target: "http://192.168.0.173/gateway_interface", |
| | | changeOrigin: true, |