| | |
| | | uni.navigateTo({ |
| | | url: `/pages/staff/task/vDangetAppr?id=${objId}&objType=${objType}&info=${info}` |
| | | }) |
| | | }else if (objType === 7) { |
| | | window.open('https://atwl.ahzyssl.com/dps/web/wxAuth/loginV2?oaId=atwl&redirectId=index') |
| | | } else if (objType === 6 || objType === 5) { |
| | | uni.navigateTo({ |
| | | url: `/pages/staff/task/driver?id=${objId}&objType=${objType}&info=${info}` |
| | |
| | | class="status_img"></image>
|
| | | <view>{{ info.content }}</view>
|
| | | <view class="file_list">
|
| | | <view class="img_wrap" v-for="item,i in info.submitFileList" :key="item.id">
|
| | | <view class="img_wrap" v-for="item, i in info.submitFileList" :key="item.id">
|
| | | <image v-if="item.type == 0" :src="item.fileurlFull" @click="priviewImage(item.fileurlFull)" mode="widthFix"
|
| | | class="img" />
|
| | | <view v-if="item.type == 1" @click="videoClick(item, i)" class="video_wrap">
|
| | |
| | | <view class="value primaryColor" :class="{ red: info.status == 2 }">{{ statusMap[info.status] }}</view>
|
| | | </view>
|
| | | <view class="item">
|
| | | <view class="label">{{info.status == '1' ? 'æ´æ¹å' : 'è§é¢/å¾ç'}}</view>
|
| | | <view class="label">{{ info.status == '1' ? 'æ´æ¹å' : 'è§é¢/å¾ç' }}</view>
|
| | | <view class="value">
|
| | | <view class="adduser_list_item_ipt1_upload" v-for="(item, i) in info.dealBeforeFileList" :key="i">
|
| | | <image v-if="item.type == 0" @click="priviewImage(item.fileurlFull)" :src="item.fileurlFull"
|
| | |
| | | </view>
|
| | | </view>
|
| | | <view class="item">
|
| | | <view class="label">{{info.status == '1' ? 'æ´æ¹è¯´æ' : 'éå说æ'}}</view>
|
| | | <view class="label">{{ info.status == '1' ? 'æ´æ¹è¯´æ' : 'éå说æ' }}</view>
|
| | | <view class="value">{{ info.checkInfo }}</view>
|
| | | </view>
|
| | | </view>
|
| | |
| | | v-if="info.status == 2 && index == flowList.length - 1" />
|
| | | <image v-if="item.avatar != null && item.avatar != ''" :src="item.avatar" class="img" alt="" />
|
| | | <!-- <image v-else src="@/static/default_avatar.png" class="img" mode=""></image> -->
|
| | | <span v-if="item.avatar == null || item.avatar == ''"
|
| | | class="img_name">{{ item.createUserName && item.createUserName.slice(0, 1) }}</span>
|
| | | <span v-if="item.avatar == null || item.avatar == ''" class="img_name">{{ item.createUserName &&
|
| | | item.createUserName.slice(0, 1) }}</span>
|
| | | </view>
|
| | | <view class="content">
|
| | | <view class="head">
|
| | | <view class="event">{{ item.title }}</view>
|
| | | <view class="time" v-if="item.createDate">{{ item.createDate.slice(0,16) }}</view>
|
| | | <view class="time" v-if="item.createDate">{{ item.createDate.slice(0, 16) }}</view>
|
| | | </view>
|
| | | <view class="line">
|
| | | <view class="company">
|
| | |
| | | </view>
|
| | | </view>
|
| | | <view class="emyty"></view>
|
| | | <view class="main_footer" v-if="info.status==0&& info.checkUserId == userInfo.memberId">
|
| | | <view v-if="info.status==0&& info.checkUserId == userInfo.memberId" class="btn" @click="handleBack">éå</view>
|
| | | <view v-if="info.status==0&& info.checkUserId == userInfo.memberId" class="btn transfer" @click="handleTransfer">
|
| | | <view class="main_footer" v-if="info.status == 0 && info.checkUserId == userInfo.memberId">
|
| | | <view v-if="info.status == 0 && info.checkUserId == userInfo.memberId" class="btn" @click="handleBack">éå</view>
|
| | | <view v-if="info.status == 0 && info.checkUserId == userInfo.memberId" class="btn transfer" @click="handleTransfer">
|
| | | 转交</view>
|
| | | <view v-if="info.status==0&& info.checkUserId == userInfo.memberId" class="btn handle" @click="handleOpen">å¤ç
|
| | | <view v-if="info.status == 0 && info.checkUserId == userInfo.memberId" class="btn handle" @click="handleOpen">å¤ç
|
| | | </view>
|
| | | </view>
|
| | |
|
| | |
| | | <view class="mt24 placeholder6">å
±{{ memberList.length }}æ¡æ°æ®</view>
|
| | | <view v-for="item in memberList" :key="item.id" class="line">
|
| | | <image v-if="item.faceImgFull" :src="item.faceImgFull" class="avatar"></image>
|
| | | <span v-else class="img_name">{{item.name && item.name.slice(0,1)}}</span>
|
| | | <span v-else class="img_name">{{ item.name && item.name.slice(0, 1) }}</span>
|
| | | <view class="content">
|
| | | <view class="info">
|
| | | <text class="name">{{ item.name }}</text>
|
| | |
| | | </template>
|
| | |
|
| | | <script>
|
| | | import {
|
| | | hiddenDangerDetail,
|
| | | uploadUrl,
|
| | | findHiddenAreaMemberList,
|
| | | dealHiddenDanger,
|
| | | transferHiddenDanger,
|
| | | findListFlowDanger
|
| | | } from '@/api';
|
| | | import dayjs from 'dayjs';
|
| | | export default {
|
| | | data() {
|
| | | return {
|
| | | isShowBack: false,
|
| | | param: {},
|
| | | info: {},
|
| | | userInfo: this.$store.state.userInfo,
|
| | | flowList: [],
|
| | | import {
|
| | | hiddenDangerDetail,
|
| | | uploadUrl,
|
| | | findHiddenAreaMemberList,
|
| | | dealHiddenDanger,
|
| | | transferHiddenDanger,
|
| | | findListFlowDanger
|
| | | } from '@/api'
|
| | | import dayjs from 'dayjs'
|
| | | export default {
|
| | | data() {
|
| | | return {
|
| | | isShowBack: false,
|
| | | param: {},
|
| | | info: {},
|
| | | userInfo: this.$store.state.userInfo,
|
| | | flowList: [],
|
| | |
|
| | | id: '',
|
| | | type: '',
|
| | | cateList: [{
|
| | | name: '访客ç³è¯·',
|
| | | id: 0
|
| | | }, {
|
| | | name: '访客æ¥å¤',
|
| | | id: 1
|
| | | }, {
|
| | | name: 'ç¨è½¦ç³è¯·',
|
| | | id: 2
|
| | | }, {
|
| | | name: '鿣鿿',
|
| | | id: 3
|
| | | }, {
|
| | | name: 'ç©æµè½¦ç³è¯·',
|
| | | id: 4
|
| | | }],
|
| | | statusMap: {
|
| | | 0: 'å¾
å¤ç',
|
| | | 1: 'å·²æ´æ¹',
|
| | | 2: 'å·²éå',
|
| | | 3: 'å·²æç»',
|
| | | 4: '已忶',
|
| | | 5: 'ä»äººæç¾',
|
| | | 6: 'ä»äººæç»'
|
| | | },
|
| | | id: '',
|
| | | type: '',
|
| | | cateList: [{
|
| | | name: '访客ç³è¯·',
|
| | | id: 0
|
| | | }, {
|
| | | name: '访客æ¥å¤',
|
| | | id: 1
|
| | | }, {
|
| | | name: 'ç¨è½¦ç³è¯·',
|
| | | id: 2
|
| | | }, {
|
| | | name: '鿣鿿',
|
| | | id: 3
|
| | | }, {
|
| | | name: 'ç©æµè½¦ç³è¯·',
|
| | | id: 4
|
| | | }],
|
| | | statusMap: {
|
| | | 0: 'å¾
å¤ç',
|
| | | 1: 'å·²æ´æ¹',
|
| | | 2: 'å·²éå',
|
| | | 3: 'å·²æç»',
|
| | | 4: '已忶',
|
| | | 5: 'ä»äººæç¾',
|
| | | 6: 'ä»äººæç»'
|
| | | },
|
| | |
|
| | | showUpload: false,
|
| | | isShowBackDate: false,
|
| | | submitFileList: [],
|
| | | backParam: {},
|
| | | showUpload: false,
|
| | | isShowBackDate: false,
|
| | | submitFileList: [],
|
| | | backParam: {},
|
| | |
|
| | | isShowHandle: false,
|
| | | handleParam: {},
|
| | | isShowHandleDate: false,
|
| | | showUploadBe: false,
|
| | | showUploadAf: false,
|
| | | dealBeforeFileList: [],
|
| | | dealAfterFileList: [],
|
| | | isShowHandle: false,
|
| | | handleParam: {},
|
| | | isShowHandleDate: false,
|
| | | showUploadBe: false,
|
| | | showUploadAf: false,
|
| | | dealBeforeFileList: [],
|
| | | dealAfterFileList: [],
|
| | |
|
| | | isShowTransfer: false,
|
| | | transferParam: {},
|
| | | transferModel: {},
|
| | | pagination: {
|
| | | page: 1,
|
| | | capacity: 50
|
| | | },
|
| | | memberList: [],
|
| | | isShowTransfer: false,
|
| | | transferParam: {},
|
| | | transferModel: {},
|
| | | pagination: {
|
| | | page: 1,
|
| | | capacity: 50
|
| | | },
|
| | | memberList: [],
|
| | |
|
| | | videoPlay: false,
|
| | | videoContext: null,
|
| | | videoUrl: ''
|
| | | };
|
| | | },
|
| | | onLoad(op) { |
| | | uni.setStorageSync('ywinfo',{})
|
| | | this.id = op.id;
|
| | | this.getDetail();
|
| | | },
|
| | | methods: {
|
| | | priviewImage(url) {
|
| | | uni.previewImage({
|
| | | urls: [url]
|
| | | });
|
| | | },
|
| | | screenChange(e) {
|
| | | let fullScreen = e.detail.fullScreen; // å¼true为è¿å
¥å
¨å±ï¼false为éåºå
¨å±
|
| | | if (!fullScreen) {
|
| | | //éåºå
¨å±
|
| | | this.videoPlay = false; // éèææ¾çå
|
| | | }
|
| | | },
|
| | | closeVideo() {
|
| | | this.videoPlay = false
|
| | | this.videoContext = null
|
| | | },
|
| | | videoClick(item, i) {
|
| | | this.videoPlay = true;
|
| | | this.videoContext = uni.createVideoContext("myvideo", this); // thisè¿ä¸ªæ¯å®ä¾å¯¹è±¡ å¿
ä¼
|
| | | this.videoUrl = item.fileurlFull;
|
| | | this.videoContext.requestFullScreen();
|
| | | this.$nextTick(() => {
|
| | | this.videoContext.play();
|
| | | })
|
| | |
|
| | | },
|
| | | 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'));
|
| | | },
|
| | | handleBack() {
|
| | | this.isShowBack = true;
|
| | | // const submitFileList = this.info.submitFileList || []
|
| | | // this.submitFileList = [...submitFileList];
|
| | | this.dealBeforeFileList = []
|
| | | this.$set(this.backParam, 'dealTime', dayjs().format('YYYY-MM-DD HH:mm:ss'));
|
| | | },
|
| | | getDetail() {
|
| | | const {
|
| | | id
|
| | | } = this;
|
| | | hiddenDangerDetail(id).then(res => {
|
| | | this.info = res.data;
|
| | | });
|
| | | findListFlowDanger({
|
| | | hiddenDangerId: id
|
| | | }).then(res => {
|
| | | this.flowList = res.data;
|
| | | });
|
| | | },
|
| | | onSubmit() {
|
| | | const {
|
| | | dealBeforeFileList,
|
| | | dealAfterFileList,
|
| | | handleParam
|
| | | } = this;
|
| | | if (dealBeforeFileList.length === 0)
|
| | | return uni.showToast({
|
| | | title: '请ä¸ä¼ æ´æ¹åå¾çæè§é¢',
|
| | | icon: 'none'
|
| | | });
|
| | | if (dealAfterFileList.length === 0)
|
| | | return uni.showToast({
|
| | | title: '请ä¸ä¼ æ´æ¹åå¾çæè§é¢',
|
| | | icon: 'none'
|
| | | });
|
| | | dealHiddenDanger({
|
| | | ...handleParam,
|
| | | dealBeforeFileList: dealBeforeFileList,
|
| | | dealAfterFileList: dealAfterFileList,
|
| | | status: 1,
|
| | | id: this.id
|
| | | }).then(res => {
|
| | | if (res.code === 200) {
|
| | | this.isShowHandle = false;
|
| | | setTimeout(() => {
|
| | | uni.showToast({
|
| | | title: 'æä½æå',
|
| | | icon: 'success'
|
| | | });
|
| | | });
|
| | | uni.navigateBack();
|
| | | }
|
| | | });
|
| | | },
|
| | | enterTransfer() {
|
| | | const {
|
| | | transferParam,
|
| | | id
|
| | | } = this;
|
| | | if (!transferParam.id)
|
| | | return uni.showToast({
|
| | | title: 'è¯·éæ©äººå',
|
| | | icon: 'none'
|
| | | });
|
| | | transferHiddenDanger({
|
| | | checkUserId: transferParam.id,
|
| | | id
|
| | | }).then(res => {
|
| | | if (res.code === 200) {
|
| | | this.isShowTransfer = false;
|
| | | setTimeout(() => {
|
| | | uni.showToast({
|
| | | title: 'æä½æå',
|
| | | icon: 'success'
|
| | | });
|
| | | });
|
| | | uni.navigateBack();
|
| | | }
|
| | | });
|
| | | },
|
| | | changeMem(e) {
|
| | | this.transferParam = e;
|
| | | },
|
| | | handleTransfer() {
|
| | | this.isShowTransfer = true;
|
| | | this.getMemList();
|
| | | },
|
| | | getMemList() {
|
| | | findHiddenAreaMemberList({
|
| | | ...this.transferModel,
|
| | | id: this.info.areaId,
|
| | | ...this.pagination
|
| | | }).then(res => {
|
| | | this.memberList = res.data || [];
|
| | | });
|
| | | },
|
| | | confirmBackDate(e) {
|
| | | this.$set(this.backParam, 'dealTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'));
|
| | | this.isShowBackDate = false;
|
| | | },
|
| | | confirmHandleDate(e) {
|
| | | this.$set(this.handleParam, 'dealTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'));
|
| | | this.isShowHandleDate = false;
|
| | | },
|
| | | onSubBack() {
|
| | | const {
|
| | | dealBeforeFileList,
|
| | | backParam
|
| | | } = this;
|
| | | dealHiddenDanger({
|
| | | ...backParam,
|
| | | dealBeforeFileList,
|
| | | status: 2,
|
| | | id: this.id
|
| | | }).then(res => {
|
| | | if (res.code === 200) {
|
| | | this.isShowBack = false;
|
| | | setTimeout(() => {
|
| | | uni.showToast({
|
| | | title: 'æä½æå',
|
| | | icon: 'success'
|
| | | });
|
| | | });
|
| | | uni.navigateBack();
|
| | | }
|
| | | });
|
| | | },
|
| | | fileDel(str, i) {
|
| | | this[str].splice(i, 1);
|
| | | },
|
| | | uploadBeImage() {
|
| | | this.showUploadBe = false;
|
| | | let token = uni.getStorageSync('token') || '';
|
| | | uni.chooseImage({
|
| | | count: 9,
|
| | | success: chooseImageRes => {
|
| | | uni.showLoading({
|
| | | title: 'ä¸ä¼ ä¸',
|
| | | mask: true
|
| | | });
|
| | | const tempFilePaths = chooseImageRes.tempFilePaths;
|
| | | let imgs = tempFilePaths.map((value, index) => {
|
| | | return {
|
| | | name: 'file',
|
| | | uri: value
|
| | | };
|
| | | });
|
| | | uni.uploadFile({
|
| | | url: `${uploadUrl}`,
|
| | | files: imgs,
|
| | | name: 'file',
|
| | | formData: {
|
| | | folder: 'HIDDEN_DANGER_FILE'
|
| | | },
|
| | | header: {
|
| | | Dm_user_token: token
|
| | | },
|
| | | success: uploadFileRes => {
|
| | | let res = JSON.parse(uploadFileRes.data);
|
| | | let obj = {
|
| | | type: '0'
|
| | | };
|
| | | if (res.data && res.data.length > 0) {
|
| | | res.data.forEach(i => {
|
| | | i.type = 0;
|
| | | i.fileurl = i.imgaddr;
|
| | | i.fileurlFull = i.url;
|
| | | this.dealBeforeFileList.push(i);
|
| | | });
|
| | | }
|
| | | },
|
| | | fail(err) {
|
| | | console.log('err', err);
|
| | | },
|
| | | complete() {
|
| | | uni.hideLoading();
|
| | | // if (i === chooseImageRes.tempFilePaths.length - 1) {
|
| | | // uni.hideLoading()
|
| | | // }
|
| | | }
|
| | | });
|
| | | }
|
| | | });
|
| | | },
|
| | | uploadBeVideo() {
|
| | | this.showUploadBe = false;
|
| | | let token = uni.getStorageSync('token') || '';
|
| | | uni.chooseVideo({
|
| | | success: chooseImageRes => {
|
| | | uni.showLoading({
|
| | | title: 'ä¸ä¼ ä¸',
|
| | | mask: true
|
| | | });
|
| | | uni.uploadFile({
|
| | | url: `${uploadUrl}`,
|
| | | filePath: chooseImageRes.tempFilePath,
|
| | | header: {
|
| | | Dm_user_token: token
|
| | | },
|
| | | name: 'file',
|
| | | formData: {
|
| | | folder: 'HIDDEN_DANGER_FILE'
|
| | | },
|
| | | success: uploadFileRes => {
|
| | | let res = JSON.parse(uploadFileRes.data);
|
| | | if (res.data && res.data.length > 0) {
|
| | | res.data.forEach(i => {
|
| | | i.type = 1;
|
| | | i.fileurl = i.imgaddr;
|
| | | i.fileurlFull = i.url;
|
| | | this.dealBeforeFileList.push(i);
|
| | | });
|
| | | }
|
| | | },
|
| | | complete() {
|
| | | uni.hideLoading();
|
| | | }
|
| | | });
|
| | | }
|
| | | });
|
| | | },
|
| | | uploadAfImage() {
|
| | | this.showUploadAf = false;
|
| | | let token = uni.getStorageSync('token') || '';
|
| | | uni.chooseImage({
|
| | | count: 9,
|
| | | success: chooseImageRes => {
|
| | | uni.showLoading({
|
| | | title: 'ä¸ä¼ ä¸',
|
| | | mask: true
|
| | | });
|
| | | const tempFilePaths = chooseImageRes.tempFilePaths;
|
| | | let imgs = tempFilePaths.map((value, index) => {
|
| | | return {
|
| | | name: 'file',
|
| | | uri: value
|
| | | };
|
| | | });
|
| | | uni.uploadFile({
|
| | | url: `${uploadUrl}`,
|
| | | files: imgs,
|
| | | name: 'file',
|
| | | formData: {
|
| | | folder: 'HIDDEN_DANGER_FILE'
|
| | | },
|
| | | header: {
|
| | | Dm_user_token: token
|
| | | },
|
| | | success: uploadFileRes => {
|
| | | let res = JSON.parse(uploadFileRes.data);
|
| | | if (res.data && res.data.length > 0) {
|
| | | res.data.forEach(i => {
|
| | | i.type = 0;
|
| | | i.fileurl = i.imgaddr;
|
| | | i.fileurlFull = i.url;
|
| | | this.dealAfterFileList.push(i);
|
| | | });
|
| | | }
|
| | | },
|
| | | fail(err) {
|
| | | console.log('err', err);
|
| | | },
|
| | | complete() {
|
| | | uni.hideLoading();
|
| | | // if (i === chooseImageRes.tempFilePaths.length - 1) {
|
| | | // uni.hideLoading()
|
| | | // }
|
| | | }
|
| | | });
|
| | | }
|
| | | });
|
| | | },
|
| | | uploadAfVideo() {
|
| | | this.showUploadAf = false;
|
| | | let token = uni.getStorageSync('token') || '';
|
| | | uni.chooseVideo({
|
| | | success: chooseImageRes => {
|
| | | uni.showLoading({
|
| | | title: 'ä¸ä¼ ä¸',
|
| | | mask: true
|
| | | });
|
| | | uni.uploadFile({
|
| | | url: `${uploadUrl}`,
|
| | | filePath: chooseImageRes.tempFilePath,
|
| | | header: {
|
| | | Dm_user_token: token
|
| | | },
|
| | | name: 'file',
|
| | | formData: {
|
| | | folder: 'HIDDEN_DANGER_FILE'
|
| | | },
|
| | | success: uploadFileRes => {
|
| | | let res = JSON.parse(uploadFileRes.data);
|
| | | if (res.data && res.data.length > 0) {
|
| | | res.data.forEach(i => {
|
| | | i.type = 1;
|
| | | i.fileurl = i.imgaddr;
|
| | | i.fileurlFull = i.url;
|
| | | this.dealAfterFileList.push(i);
|
| | | });
|
| | | }
|
| | | },
|
| | | complete() {
|
| | | uni.hideLoading();
|
| | | }
|
| | | });
|
| | | }
|
| | | });
|
| | | },
|
| | | uploadImage() {
|
| | | this.showUpload = false;
|
| | | let token = uni.getStorageSync('token') || '';
|
| | | uni.chooseImage({
|
| | | count: 9,
|
| | | success: chooseImageRes => {
|
| | | uni.showLoading({
|
| | | title: 'ä¸ä¼ ä¸',
|
| | | mask: true
|
| | | });
|
| | | const tempFilePaths = chooseImageRes.tempFilePaths;
|
| | | let imgs = tempFilePaths.map((value, index) => {
|
| | | return {
|
| | | name: 'file',
|
| | | uri: value
|
| | | };
|
| | | });
|
| | | uni.uploadFile({
|
| | | url: `${uploadUrl}`,
|
| | | files: imgs,
|
| | | name: 'file',
|
| | | formData: {
|
| | | folder: 'HIDDEN_DANGER_FILE'
|
| | | },
|
| | | header: {
|
| | | Dm_user_token: token
|
| | | },
|
| | | success: uploadFileRes => {
|
| | | let res = JSON.parse(uploadFileRes.data);
|
| | | if (res.data && res.data.length > 0) {
|
| | | res.data.forEach(i => {
|
| | | i.type = 0;
|
| | | i.fileurl = i.imgaddr;
|
| | | i.fileurlFull = i.url;
|
| | | this.submitFileList.push(i);
|
| | | });
|
| | | }
|
| | | },
|
| | | fail(err) {
|
| | | console.log('err', err);
|
| | | },
|
| | | complete() {
|
| | | uni.hideLoading();
|
| | | // if (i === chooseImageRes.tempFilePaths.length - 1) {
|
| | | // uni.hideLoading()
|
| | | // }
|
| | | }
|
| | | });
|
| | | }
|
| | | });
|
| | | },
|
| | | uploadVideo() {
|
| | | this.showUpload = false;
|
| | | let token = uni.getStorageSync('token') || '';
|
| | | uni.chooseVideo({
|
| | | success: chooseImageRes => {
|
| | | uni.showLoading({
|
| | | title: 'ä¸ä¼ ä¸',
|
| | | mask: true
|
| | | });
|
| | | uni.uploadFile({
|
| | | url: `${uploadUrl}`,
|
| | | filePath: chooseImageRes.tempFilePath,
|
| | | header: {
|
| | | Dm_user_token: token
|
| | | },
|
| | | name: 'file',
|
| | | formData: {
|
| | | folder: 'HIDDEN_DANGER_FILE'
|
| | | },
|
| | | success: uploadFileRes => {
|
| | | let res = JSON.parse(uploadFileRes.data);
|
| | | if (res.data && res.data.length > 0) {
|
| | | res.data.forEach(i => {
|
| | | i.type = 1;
|
| | | i.fileurl = i.imgaddr;
|
| | | i.fileurlFull = i.url;
|
| | | this.submitFileList.push(i);
|
| | | });
|
| | | }
|
| | | },
|
| | | complete() {
|
| | | uni.hideLoading();
|
| | | }
|
| | | });
|
| | | }
|
| | | });
|
| | | }
|
| | | videoPlay: false,
|
| | | videoContext: null,
|
| | | videoUrl: ''
|
| | | }
|
| | | };
|
| | | },
|
| | | onLoad(op) {
|
| | | uni.setStorageSync('ywinfo', {})
|
| | | this.id = op.id
|
| | | this.getDetail()
|
| | | },
|
| | | methods: {
|
| | | priviewImage(url) {
|
| | | uni.previewImage({
|
| | | urls: [url]
|
| | | })
|
| | | },
|
| | | screenChange(e) {
|
| | | let fullScreen = e.detail.fullScreen // å¼true为è¿å
¥å
¨å±ï¼false为éåºå
¨å±
|
| | | if (!fullScreen) {
|
| | | //éåºå
¨å±
|
| | | this.videoPlay = false // éèææ¾çå
|
| | | }
|
| | | },
|
| | | closeVideo() {
|
| | | this.videoPlay = false
|
| | | this.videoContext = null
|
| | | },
|
| | | videoClick(item, i) {
|
| | | this.videoPlay = true
|
| | | this.videoContext = uni.createVideoContext("myvideo", this) // thisè¿ä¸ªæ¯å®ä¾å¯¹è±¡ å¿
ä¼
|
| | | this.videoUrl = item.fileurlFull
|
| | | this.videoContext.requestFullScreen()
|
| | | this.$nextTick(() => {
|
| | | this.videoContext.play()
|
| | | })
|
| | | },
|
| | | 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'))
|
| | | },
|
| | | handleBack() {
|
| | | this.isShowBack = true
|
| | | // const submitFileList = this.info.submitFileList || []
|
| | | // this.submitFileList = [...submitFileList];
|
| | | this.dealBeforeFileList = []
|
| | | this.$set(this.backParam, 'dealTime', dayjs().format('YYYY-MM-DD HH:mm:ss'))
|
| | | },
|
| | | getDetail() {
|
| | | const {
|
| | | id
|
| | | } = this
|
| | | hiddenDangerDetail(id).then(res => {
|
| | | this.info = res.data
|
| | | })
|
| | | findListFlowDanger({
|
| | | hiddenDangerId: id
|
| | | }).then(res => {
|
| | | this.flowList = res.data
|
| | | })
|
| | | },
|
| | | onSubmit() {
|
| | | const {
|
| | | dealBeforeFileList,
|
| | | dealAfterFileList,
|
| | | handleParam
|
| | | } = this
|
| | | if (dealBeforeFileList.length === 0)
|
| | | return uni.showToast({
|
| | | title: '请ä¸ä¼ æ´æ¹åå¾çæè§é¢',
|
| | | icon: 'none'
|
| | | })
|
| | | if (dealAfterFileList.length === 0)
|
| | | return uni.showToast({
|
| | | title: '请ä¸ä¼ æ´æ¹åå¾çæè§é¢',
|
| | | icon: 'none'
|
| | | })
|
| | | dealHiddenDanger({
|
| | | ...handleParam,
|
| | | dealBeforeFileList: dealBeforeFileList,
|
| | | dealAfterFileList: dealAfterFileList,
|
| | | status: 1,
|
| | | id: this.id
|
| | | }).then(res => {
|
| | | if (res.code === 200) {
|
| | | this.isShowHandle = false
|
| | | setTimeout(() => {
|
| | | uni.showToast({
|
| | | title: 'æä½æå',
|
| | | icon: 'success'
|
| | | })
|
| | | })
|
| | | uni.navigateBack()
|
| | | }
|
| | | })
|
| | | },
|
| | | enterTransfer() {
|
| | | const {
|
| | | transferParam,
|
| | | id
|
| | | } = this
|
| | | if (!transferParam.id)
|
| | | return uni.showToast({
|
| | | title: 'è¯·éæ©äººå',
|
| | | icon: 'none'
|
| | | })
|
| | | transferHiddenDanger({
|
| | | checkUserId: transferParam.id,
|
| | | id
|
| | | }).then(res => {
|
| | | if (res.code === 200) {
|
| | | this.isShowTransfer = false
|
| | | setTimeout(() => {
|
| | | uni.showToast({
|
| | | title: 'æä½æå',
|
| | | icon: 'success'
|
| | | })
|
| | | })
|
| | | uni.navigateBack()
|
| | | }
|
| | | })
|
| | | },
|
| | | changeMem(e) {
|
| | | this.transferParam = e
|
| | | },
|
| | | handleTransfer() {
|
| | | this.isShowTransfer = true
|
| | | this.getMemList()
|
| | | },
|
| | | getMemList() {
|
| | | findHiddenAreaMemberList({
|
| | | ...this.transferModel,
|
| | | id: this.info.areaId,
|
| | | ...this.pagination
|
| | | }).then(res => {
|
| | | this.memberList = res.data || []
|
| | | })
|
| | | },
|
| | | confirmBackDate(e) {
|
| | | this.$set(this.backParam, 'dealTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'))
|
| | | this.isShowBackDate = false
|
| | | },
|
| | | confirmHandleDate(e) {
|
| | | this.$set(this.handleParam, 'dealTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'))
|
| | | this.isShowHandleDate = false
|
| | | },
|
| | | onSubBack() {
|
| | | const {
|
| | | dealBeforeFileList,
|
| | | backParam
|
| | | } = this
|
| | | dealHiddenDanger({
|
| | | ...backParam,
|
| | | dealBeforeFileList,
|
| | | status: 2,
|
| | | id: this.id
|
| | | }).then(res => {
|
| | | if (res.code === 200) {
|
| | | this.isShowBack = false
|
| | | setTimeout(() => {
|
| | | uni.showToast({
|
| | | title: 'æä½æå',
|
| | | icon: 'success'
|
| | | })
|
| | | })
|
| | | uni.navigateBack()
|
| | | }
|
| | | })
|
| | | },
|
| | | fileDel(str, i) {
|
| | | this[str].splice(i, 1)
|
| | | },
|
| | | uploadBeImage() {
|
| | | this.showUploadBe = false
|
| | | let token = uni.getStorageSync('token') || ''
|
| | | uni.chooseImage({
|
| | | count: 9,
|
| | | success: chooseImageRes => {
|
| | | uni.showLoading({
|
| | | title: 'ä¸ä¼ ä¸',
|
| | | mask: true
|
| | | })
|
| | | const tempFilePaths = chooseImageRes.tempFilePaths
|
| | | let imgs = tempFilePaths.map((value, index) => {
|
| | | return {
|
| | | name: 'file',
|
| | | uri: value
|
| | | }
|
| | | })
|
| | | uni.uploadFile({
|
| | | url: `${uploadUrl}`,
|
| | | files: imgs,
|
| | | name: 'file',
|
| | | formData: {
|
| | | folder: 'HIDDEN_DANGER_FILE'
|
| | | },
|
| | | header: {
|
| | | Dm_user_token: token
|
| | | },
|
| | | success: uploadFileRes => {
|
| | | let res = JSON.parse(uploadFileRes.data)
|
| | | let obj = {
|
| | | type: '0'
|
| | | }
|
| | | if (res.data && res.data.length > 0) {
|
| | | res.data.forEach(i => {
|
| | | i.type = 0
|
| | | i.fileurl = i.imgaddr
|
| | | i.fileurlFull = i.url
|
| | | this.dealBeforeFileList.push(i)
|
| | | })
|
| | | }
|
| | | },
|
| | | fail(err) {
|
| | | console.log('err', err)
|
| | | },
|
| | | complete() {
|
| | | uni.hideLoading()
|
| | | // if (i === chooseImageRes.tempFilePaths.length - 1) {
|
| | | // uni.hideLoading()
|
| | | // }
|
| | | }
|
| | | })
|
| | | }
|
| | | })
|
| | | },
|
| | | uploadBeVideo() {
|
| | | this.showUploadBe = false
|
| | | let token = uni.getStorageSync('token') || ''
|
| | | uni.chooseVideo({
|
| | | success: chooseImageRes => {
|
| | | uni.showLoading({
|
| | | title: 'ä¸ä¼ ä¸',
|
| | | mask: true
|
| | | })
|
| | | uni.uploadFile({
|
| | | url: `${uploadUrl}`,
|
| | | filePath: chooseImageRes.tempFilePath,
|
| | | header: {
|
| | | Dm_user_token: token
|
| | | },
|
| | | name: 'file',
|
| | | formData: {
|
| | | folder: 'HIDDEN_DANGER_FILE'
|
| | | },
|
| | | success: uploadFileRes => {
|
| | | let res = JSON.parse(uploadFileRes.data)
|
| | | if (res.data && res.data.length > 0) {
|
| | | res.data.forEach(i => {
|
| | | i.type = 1
|
| | | i.fileurl = i.imgaddr
|
| | | i.fileurlFull = i.url
|
| | | this.dealBeforeFileList.push(i)
|
| | | })
|
| | | }
|
| | | },
|
| | | complete() {
|
| | | uni.hideLoading()
|
| | | }
|
| | | })
|
| | | }
|
| | | })
|
| | | },
|
| | | uploadAfImage() {
|
| | | this.showUploadAf = false
|
| | | let token = uni.getStorageSync('token') || ''
|
| | | uni.chooseImage({
|
| | | count: 9,
|
| | | success: chooseImageRes => {
|
| | | uni.showLoading({
|
| | | title: 'ä¸ä¼ ä¸',
|
| | | mask: true
|
| | | })
|
| | | const tempFilePaths = chooseImageRes.tempFilePaths
|
| | | let imgs = tempFilePaths.map((value, index) => {
|
| | | return {
|
| | | name: 'file',
|
| | | uri: value
|
| | | }
|
| | | })
|
| | | uni.uploadFile({
|
| | | url: `${uploadUrl}`,
|
| | | files: imgs,
|
| | | name: 'file',
|
| | | formData: {
|
| | | folder: 'HIDDEN_DANGER_FILE'
|
| | | },
|
| | | header: {
|
| | | Dm_user_token: token
|
| | | },
|
| | | success: uploadFileRes => {
|
| | | let res = JSON.parse(uploadFileRes.data)
|
| | | if (res.data && res.data.length > 0) {
|
| | | res.data.forEach(i => {
|
| | | i.type = 0
|
| | | i.fileurl = i.imgaddr
|
| | | i.fileurlFull = i.url
|
| | | this.dealAfterFileList.push(i)
|
| | | })
|
| | | }
|
| | | },
|
| | | fail(err) {
|
| | | console.log('err', err)
|
| | | },
|
| | | complete() {
|
| | | uni.hideLoading()
|
| | | // if (i === chooseImageRes.tempFilePaths.length - 1) {
|
| | | // uni.hideLoading()
|
| | | // }
|
| | | }
|
| | | })
|
| | | }
|
| | | })
|
| | | },
|
| | | uploadAfVideo() {
|
| | | this.showUploadAf = false
|
| | | let token = uni.getStorageSync('token') || ''
|
| | | uni.chooseVideo({
|
| | | success: chooseImageRes => {
|
| | | uni.showLoading({
|
| | | title: 'ä¸ä¼ ä¸',
|
| | | mask: true
|
| | | })
|
| | | uni.uploadFile({
|
| | | url: `${uploadUrl}`,
|
| | | filePath: chooseImageRes.tempFilePath,
|
| | | header: {
|
| | | Dm_user_token: token
|
| | | },
|
| | | name: 'file',
|
| | | formData: {
|
| | | folder: 'HIDDEN_DANGER_FILE'
|
| | | },
|
| | | success: uploadFileRes => {
|
| | | let res = JSON.parse(uploadFileRes.data)
|
| | | if (res.data && res.data.length > 0) {
|
| | | res.data.forEach(i => {
|
| | | i.type = 1
|
| | | i.fileurl = i.imgaddr
|
| | | i.fileurlFull = i.url
|
| | | this.dealAfterFileList.push(i)
|
| | | })
|
| | | }
|
| | | },
|
| | | complete() {
|
| | | uni.hideLoading()
|
| | | }
|
| | | })
|
| | | }
|
| | | })
|
| | | },
|
| | | uploadImage() {
|
| | | this.showUpload = false
|
| | | let token = uni.getStorageSync('token') || ''
|
| | | uni.chooseImage({
|
| | | count: 9,
|
| | | success: chooseImageRes => {
|
| | | uni.showLoading({
|
| | | title: 'ä¸ä¼ ä¸',
|
| | | mask: true
|
| | | })
|
| | | const tempFilePaths = chooseImageRes.tempFilePaths
|
| | | let imgs = tempFilePaths.map((value, index) => {
|
| | | return {
|
| | | name: 'file',
|
| | | uri: value
|
| | | }
|
| | | })
|
| | | uni.uploadFile({
|
| | | url: `${uploadUrl}`,
|
| | | files: imgs,
|
| | | name: 'file',
|
| | | formData: {
|
| | | folder: 'HIDDEN_DANGER_FILE'
|
| | | },
|
| | | header: {
|
| | | Dm_user_token: token
|
| | | },
|
| | | success: uploadFileRes => {
|
| | | let res = JSON.parse(uploadFileRes.data)
|
| | | if (res.data && res.data.length > 0) {
|
| | | res.data.forEach(i => {
|
| | | i.type = 0
|
| | | i.fileurl = i.imgaddr
|
| | | i.fileurlFull = i.url
|
| | | this.submitFileList.push(i)
|
| | | })
|
| | | }
|
| | | },
|
| | | fail(err) {
|
| | | console.log('err', err)
|
| | | },
|
| | | complete() {
|
| | | uni.hideLoading()
|
| | | // if (i === chooseImageRes.tempFilePaths.length - 1) {
|
| | | // uni.hideLoading()
|
| | | // }
|
| | | }
|
| | | })
|
| | | }
|
| | | })
|
| | | },
|
| | | uploadVideo() {
|
| | | this.showUpload = false
|
| | | let token = uni.getStorageSync('token') || ''
|
| | | uni.chooseVideo({
|
| | | success: chooseImageRes => {
|
| | | uni.showLoading({
|
| | | title: 'ä¸ä¼ ä¸',
|
| | | mask: true
|
| | | })
|
| | | uni.uploadFile({
|
| | | url: `${uploadUrl}`,
|
| | | filePath: chooseImageRes.tempFilePath,
|
| | | header: {
|
| | | Dm_user_token: token
|
| | | },
|
| | | name: 'file',
|
| | | formData: {
|
| | | folder: 'HIDDEN_DANGER_FILE'
|
| | | },
|
| | | success: uploadFileRes => {
|
| | | let res = JSON.parse(uploadFileRes.data)
|
| | | if (res.data && res.data.length > 0) {
|
| | | res.data.forEach(i => {
|
| | | i.type = 1
|
| | | i.fileurl = i.imgaddr
|
| | | i.fileurlFull = i.url
|
| | | this.submitFileList.push(i)
|
| | | })
|
| | | }
|
| | | },
|
| | | complete() {
|
| | | uni.hideLoading()
|
| | | }
|
| | | })
|
| | | }
|
| | | })
|
| | | }
|
| | | }
|
| | | }
|
| | | </script>
|
| | |
|
| | | <style lang="scss">
|
| | | page {
|
| | | background-color: #f7f7f7;
|
| | | page {
|
| | | background-color: #f7f7f7;
|
| | |
|
| | | ::v-deep .u-popup__content {
|
| | | border-top: 1rpx solid #cccccc;
|
| | | }
|
| | | ::v-deep .u-popup__content {
|
| | | border-top: 1rpx solid #cccccc;
|
| | | }
|
| | | }
|
| | |
|
| | | .main_app {
|
| | | background-color: #fff;
|
| | | padding-bottom: 0;
|
| | |
|
| | | .flow_title {
|
| | | font-weight: 600;
|
| | | font-size: 32rpx;
|
| | | color: #222222;
|
| | | margin-bottom: 24rpx;
|
| | | }
|
| | |
|
| | | .main_app {
|
| | | background-color: #fff;
|
| | | padding-bottom: 0;
|
| | | .flow_wrap {
|
| | | padding: 30rpx 0 90rpx;
|
| | |
|
| | | .flow_title {
|
| | | font-weight: 600;
|
| | | font-size: 32rpx;
|
| | | color: #222222;
|
| | | margin-bottom: 24rpx;
|
| | | }
|
| | | .list {
|
| | | .item {
|
| | | display: flex;
|
| | | margin-bottom: 48rpx;
|
| | | position: relative;
|
| | |
|
| | | .flow_wrap {
|
| | | padding: 30rpx 0 90rpx;
|
| | | .separate {
|
| | | position: absolute;
|
| | | width: 4rpx;
|
| | | height: 100%;
|
| | | background-color: #eeeeee;
|
| | | left: 40rpx;
|
| | | transform: translate(-50%, 0);
|
| | | top: 80rpx;
|
| | | }
|
| | |
|
| | | .list {
|
| | | .item {
|
| | | display: flex;
|
| | | margin-bottom: 48rpx;
|
| | | .avatar {
|
| | | width: 80rpx;
|
| | | height: 80rpx;
|
| | | position: relative;
|
| | | margin-right: 20rpx;
|
| | |
|
| | | .separate {
|
| | | position: absolute;
|
| | | width: 4rpx;
|
| | | height: 100%;
|
| | | background-color: #eeeeee;
|
| | | left: 40rpx;
|
| | | transform: translate(-50%, 0);
|
| | | top: 80rpx;
|
| | | }
|
| | |
|
| | | .avatar {
|
| | | .img {
|
| | | width: 80rpx;
|
| | | height: 80rpx;
|
| | | position: relative;
|
| | | margin-right: 20rpx;
|
| | | border-radius: 50%;
|
| | | }
|
| | |
|
| | | .img {
|
| | | width: 80rpx;
|
| | | height: 80rpx;
|
| | | border-radius: 50%;
|
| | | .status {
|
| | | width: 28rpx;
|
| | | height: 28rpx;
|
| | | border-radius: 50%;
|
| | | position: absolute;
|
| | | right: 0;
|
| | | bottom: 0;
|
| | | z-index: 999;
|
| | | }
|
| | | }
|
| | |
|
| | | .content {
|
| | | flex: 1;
|
| | |
|
| | | .head {
|
| | | display: flex;
|
| | | justify-content: space-between;
|
| | | margin-bottom: 4rpx;
|
| | |
|
| | | .event {
|
| | | font-size: 30rpx;
|
| | | }
|
| | |
|
| | | .time {
|
| | | font-size: 26rpx;
|
| | | color: #999999;
|
| | | }
|
| | | }
|
| | |
|
| | | .name_wrap {
|
| | | font-size: 26rpx;
|
| | | color: #777777;
|
| | |
|
| | | .status {
|
| | | width: 28rpx;
|
| | | height: 28rpx;
|
| | | border-radius: 50%;
|
| | | position: absolute;
|
| | | right: 0;
|
| | | bottom: 0;
|
| | | z-index: 999;
|
| | | color: $uni-color-primary;
|
| | | }
|
| | | }
|
| | |
|
| | | .content {
|
| | | flex: 1;
|
| | |
|
| | | .head {
|
| | | display: flex;
|
| | | justify-content: space-between;
|
| | | margin-bottom: 4rpx;
|
| | |
|
| | | .event {
|
| | | font-size: 30rpx;
|
| | | }
|
| | |
|
| | | .time {
|
| | | font-size: 26rpx;
|
| | | color: #999999;
|
| | | }
|
| | | }
|
| | |
|
| | | .name_wrap {
|
| | | .line {
|
| | | .company {
|
| | | font-size: 26rpx;
|
| | | color: #777777;
|
| | |
|
| | | .status {
|
| | | color: $uni-color-primary;
|
| | | }
|
| | | }
|
| | |
|
| | | .line {
|
| | | .company {
|
| | | font-size: 26rpx;
|
| | | color: #777777;
|
| | | }
|
| | |
|
| | | .status-green {
|
| | | color: $uni-color-primary;
|
| | | }
|
| | |
|
| | | .status-red {
|
| | | color: red;
|
| | | }
|
| | | .status-green {
|
| | | color: $uni-color-primary;
|
| | | }
|
| | |
|
| | | .remark {
|
| | | margin-top: 12rpx;
|
| | | background-color: #f7f7f7;
|
| | | padding: 14rpx 20rpx;
|
| | | border-radius: 8rpx;
|
| | | font-size: 26rpx;
|
| | | color: #666666;
|
| | | line-height: 36rpx;
|
| | | .status-red {
|
| | | color: red;
|
| | | }
|
| | | }
|
| | |
|
| | | .carbon {
|
| | | display: flex;
|
| | | width: 590rpx;
|
| | | overflow-x: auto;
|
| | | .remark {
|
| | | margin-top: 12rpx;
|
| | | background-color: #f7f7f7;
|
| | | padding: 14rpx 20rpx;
|
| | | border-radius: 8rpx;
|
| | | font-size: 26rpx;
|
| | | color: #666666;
|
| | | line-height: 36rpx;
|
| | | }
|
| | | }
|
| | |
|
| | | .carbon_item {
|
| | | text-align: center;
|
| | | flex-shrink: 0;
|
| | | width: 100rpx;
|
| | | .carbon {
|
| | | display: flex;
|
| | | width: 590rpx;
|
| | | overflow-x: auto;
|
| | | margin-top: 12rpx;
|
| | |
|
| | | image {
|
| | | width: 60rpx;
|
| | | height: 60rpx;
|
| | | margin: 0 auto;
|
| | | }
|
| | | .carbon_item {
|
| | | text-align: center;
|
| | | flex-shrink: 0;
|
| | | width: 100rpx;
|
| | |
|
| | | view {
|
| | | font-size: 26rpx;
|
| | | color: #777777;
|
| | | }
|
| | | image {
|
| | | width: 60rpx;
|
| | | height: 60rpx;
|
| | | margin: 0 auto;
|
| | | }
|
| | |
|
| | | view {
|
| | | font-size: 26rpx;
|
| | | color: #777777;
|
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | &:nth-last-child(1) {
|
| | | .separate {
|
| | | height: 0;
|
| | | }
|
| | | &:nth-last-child(1) {
|
| | | .separate {
|
| | | height: 0;
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | .adduser_list_item_ipt1_upload {
|
| | | width: 156rpx;
|
| | | height: 156rpx;
|
| | | margin-right: 20rpx;
|
| | | border: 2rpx solid #e5e5e5;
|
| | | background: #f7f7f7;
|
| | | color: #666666;
|
| | | font-size: 22rpx;
|
| | | display: flex;
|
| | | flex-direction: column;
|
| | | align-items: center;
|
| | | justify-content: center;
|
| | | position: relative;
|
| | |
|
| | | &:nth-of-type(4n) {
|
| | | margin-right: 0;
|
| | | }
|
| | |
|
| | | .close {
|
| | | position: absolute;
|
| | | right: -20rpx;
|
| | | top: -20rpx;
|
| | | z-index: 9999;
|
| | | }
|
| | |
|
| | | image {
|
| | | width: 100%;
|
| | | height: 100%;
|
| | | }
|
| | |
|
| | | video {
|
| | | width: 100%;
|
| | | max-height: 156rpx;
|
| | | }
|
| | | }
|
| | |
|
| | | .module_list {
|
| | | .title {
|
| | | font-weight: 600;
|
| | | font-size: 32rpx;
|
| | | color: #222222;
|
| | | padding-top: 28rpx;
|
| | | }
|
| | |
|
| | | .item {
|
| | | padding: 30rpx 0;
|
| | | border-bottom: 1rpx solid #e5e5e5;
|
| | |
|
| | | .label {
|
| | | font-size: 26rpx;
|
| | | color: #666666;
|
| | | margin-bottom: 20rpx;
|
| | | }
|
| | |
|
| | | .value {
|
| | | font-size: 30rpx;
|
| | | display: flex;
|
| | | align-items: center;
|
| | |
|
| | | .avatar {
|
| | | margin-right: 20rpx;
|
| | | width: 120rpx;
|
| | | height: 120rpx;
|
| | | border-radius: 8rpx;
|
| | | border: 2rpx solid #e5e5e5;
|
| | | }
|
| | |
|
| | | .info {
|
| | | flex: 1;
|
| | | display: flex;
|
| | | flex-direction: column;
|
| | | justify-content: space-between;
|
| | | font-size: 26rpx;
|
| | | color: #666666;
|
| | |
|
| | | .name {
|
| | | font-size: 30rpx;
|
| | | color: #333333;
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | .status_wrap {
|
| | | position: relative;
|
| | | padding: 30rpx 0;
|
| | |
|
| | | .name {
|
| | | font-weight: 600;
|
| | | font-size: 32rpx;
|
| | | margin-bottom: 20rpx;
|
| | | color: $uni-color-primary;
|
| | | }
|
| | |
|
| | | .desc {
|
| | | font-size: 26rpx;
|
| | | color: #ed4545;
|
| | | }
|
| | |
|
| | | .gray {
|
| | | color: #999999;
|
| | | }
|
| | |
|
| | | .file_list {
|
| | | display: flex;
|
| | | margin-bottom: 20rpx;
|
| | | flex-wrap: wrap;
|
| | |
|
| | | .img_wrap {
|
| | | margin-top: 24rpx;
|
| | | width: 156rpx;
|
| | | height: 156rpx;
|
| | | border: 2rpx solid #e5e5e5;
|
| | | background: #f7f7f7;
|
| | | color: #666666;
|
| | | font-size: 22rpx;
|
| | | display: flex;
|
| | | border-radius: 4rpx;
|
| | | flex-direction: column;
|
| | | align-items: center;
|
| | | justify-content: center;
|
| | | position: relative;
|
| | | margin-right: 20rpx;
|
| | | flex-shrink: 0;
|
| | |
|
| | | &:nth-of-type(4n) {
|
| | | margin-right: 0;
|
| | | }
|
| | | }
|
| | |
|
| | |
|
| | | .img {
|
| | | width: 100%;
|
| | | max-height: 100%;
|
| | | }
|
| | |
|
| | | .video {
|
| | | width: 100%;
|
| | | max-height: 100%;
|
| | | }
|
| | | }
|
| | |
|
| | | .text_wrap {
|
| | | padding: 20rpx;
|
| | | background-color: #f8f7f7;
|
| | | border-radius: 8rpx;
|
| | | margin-top: 20rpx;
|
| | |
|
| | | .line {
|
| | | margin-bottom: 18rpx;
|
| | | display: flex;
|
| | | font-size: 24rpx;
|
| | |
|
| | | &:nth-last-child(1) {
|
| | | margin-bottom: 0;
|
| | | }
|
| | |
|
| | | .label {
|
| | | color: #999999;
|
| | | width: 140rpx;
|
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | .status {
|
| | | position: absolute;
|
| | | right: -30rpx;
|
| | | top: 0;
|
| | | height: 60rpx;
|
| | | line-height: 60rpx;
|
| | | padding: 0 32rpx;
|
| | | border-radius: 0rpx 0rpx 0rpx 30rpx;
|
| | | background: rgba(39, 155, 170, 0.12);
|
| | | color: $uni-color-primary;
|
| | | }
|
| | |
|
| | | .status_img {
|
| | | position: absolute;
|
| | | right: 0rpx;
|
| | | top: 20rpx;
|
| | | width: 120rpx;
|
| | | }
|
| | | }
|
| | |
|
| | | .main_footer {
|
| | | position: fixed;
|
| | | bottom: 0;
|
| | | width: 100%;
|
| | | z-index: 9999;
|
| | | left: 0;
|
| | | padding: 30rpx 10rpx 60rpx;
|
| | | display: flex;
|
| | | justify-content: space-between;
|
| | | background: #ffffff;
|
| | |
|
| | | .btn {
|
| | | flex: 1;
|
| | | height: 88rpx;
|
| | | line-height: 88rpx;
|
| | | background: #ffffff;
|
| | | border-radius: 44rpx;
|
| | | border: 1rpx solid #999999;
|
| | | font-size: 32rpx;
|
| | | text-align: center;
|
| | | margin: 16rpx 8rpx;
|
| | | }
|
| | |
|
| | | .transfer {
|
| | | color: $uni-color-primary;
|
| | | border: 1rpx solid $uni-color-primary;
|
| | | }
|
| | |
|
| | | .handle {
|
| | | flex: 2;
|
| | | background: $uni-color-primary;
|
| | | color: #fff;
|
| | | border: 1rpx solid $uni-color-primary;
|
| | | }
|
| | | }
|
| | |
|
| | | .appr_modal {
|
| | | padding: 36rpx 30rpx 0;
|
| | |
|
| | | .title {
|
| | | font-weight: 600;
|
| | | font-size: 32rpx;
|
| | | color: #222222;
|
| | | margin-bottom: 40rpx;
|
| | | text-align: center;
|
| | | }
|
| | |
|
| | | .label {
|
| | | text {
|
| | | color: #ed4545;
|
| | | }
|
| | | }
|
| | |
|
| | | .df_sb {
|
| | | display: flex;
|
| | | justify-content: space-between;
|
| | | align-items: center;
|
| | | height: 90rpx;
|
| | | border-bottom: 1rpx solid #e4e4e4;
|
| | | margin-bottom: 30rpx;
|
| | | }
|
| | |
|
| | | .back_footer {
|
| | | display: flex;
|
| | |
|
| | | .btn {
|
| | | flex: 1;
|
| | | height: 88rpx;
|
| | | line-height: 88rpx;
|
| | | background: #ffffff;
|
| | | border-radius: 44rpx;
|
| | | border: 1rpx solid #999999;
|
| | | font-size: 32rpx;
|
| | | text-align: center;
|
| | | margin: 16rpx 8rpx;
|
| | | }
|
| | |
|
| | | .agree {
|
| | | background: $uni-color-primary;
|
| | | color: #fff;
|
| | | border: 1rpx solid $uni-color-primary;
|
| | | }
|
| | | }
|
| | |
|
| | | textarea {
|
| | | box-sizing: border-box;
|
| | | width: 690rpx;
|
| | | min-height: 200rpx;
|
| | | background-color: #f7f7f7;
|
| | | font-size: 28rpx;
|
| | | color: #333333;
|
| | | padding: 24rpx;
|
| | | border-radius: 8rpx;
|
| | | margin-bottom: 30rpx;
|
| | | }
|
| | |
|
| | | .upload_wrap {
|
| | | display: flex;
|
| | | flex-wrap: wrap;
|
| | | margin-bottom: 30rpx;
|
| | | }
|
| | |
|
| | | .adduser_list_item_ipt1_upload {
|
| | | margin-top: 20rpx;
|
| | | width: 156rpx;
|
| | | height: 156rpx;
|
| | | margin-right: 20rpx;
|
| | |
| | | position: absolute;
|
| | | right: -20rpx;
|
| | | top: -20rpx;
|
| | | z-index: 9999;
|
| | | z-index: 999999999999;
|
| | | color: #fff;
|
| | | }
|
| | |
|
| | | image {
|
| | |
| | |
|
| | | video {
|
| | | width: 100%;
|
| | | max-height: 156rpx;
|
| | | height: 100%;
|
| | | }
|
| | | }
|
| | |
|
| | | .module_list {
|
| | | .title {
|
| | | font-weight: 600;
|
| | | font-size: 32rpx;
|
| | | color: #222222;
|
| | | padding-top: 28rpx;
|
| | | }
|
| | |
|
| | | .item {
|
| | | padding: 30rpx 0;
|
| | | border-bottom: 1rpx solid #e5e5e5;
|
| | |
|
| | | .label {
|
| | | font-size: 26rpx;
|
| | | color: #666666;
|
| | | margin-bottom: 20rpx;
|
| | | }
|
| | |
|
| | | .value {
|
| | | font-size: 30rpx;
|
| | | display: flex;
|
| | | align-items: center;
|
| | |
|
| | | .avatar {
|
| | | margin-right: 20rpx;
|
| | | width: 120rpx;
|
| | | height: 120rpx;
|
| | | border-radius: 8rpx;
|
| | | border: 2rpx solid #e5e5e5;
|
| | | }
|
| | |
|
| | | .info {
|
| | | flex: 1;
|
| | | display: flex;
|
| | | flex-direction: column;
|
| | | justify-content: space-between;
|
| | | font-size: 26rpx;
|
| | | color: #666666;
|
| | |
|
| | | .name {
|
| | | font-size: 30rpx;
|
| | | color: #333333;
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | .status_wrap {
|
| | | position: relative;
|
| | | padding: 30rpx 0;
|
| | |
|
| | | .name {
|
| | | font-weight: 600;
|
| | | font-size: 32rpx;
|
| | | margin-bottom: 20rpx;
|
| | | color: $uni-color-primary;
|
| | | }
|
| | |
|
| | | .desc {
|
| | | font-size: 26rpx;
|
| | | color: #ed4545;
|
| | | }
|
| | |
|
| | | .gray {
|
| | | color: #999999;
|
| | | }
|
| | |
|
| | | .file_list {
|
| | | display: flex;
|
| | | margin-bottom: 20rpx;
|
| | | flex-wrap: wrap;
|
| | |
|
| | | .img_wrap {
|
| | | margin-top: 24rpx;
|
| | | width: 156rpx;
|
| | | height: 156rpx;
|
| | | border: 2rpx solid #e5e5e5;
|
| | | background: #f7f7f7;
|
| | | color: #666666;
|
| | | font-size: 22rpx;
|
| | | display: flex;
|
| | | border-radius: 4rpx;
|
| | | flex-direction: column;
|
| | | align-items: center;
|
| | | justify-content: center;
|
| | | position: relative;
|
| | | margin-right: 20rpx;
|
| | | flex-shrink: 0;
|
| | |
|
| | | &:nth-of-type(4n) {
|
| | | margin-right: 0;
|
| | | }
|
| | | }
|
| | |
|
| | |
|
| | | .img {
|
| | | width: 100%;
|
| | | max-height: 100%;
|
| | | }
|
| | |
|
| | | .video {
|
| | | width: 100%;
|
| | | max-height: 100%;
|
| | | }
|
| | | }
|
| | |
|
| | | .text_wrap {
|
| | | padding: 20rpx;
|
| | | background-color: #f8f7f7;
|
| | | border-radius: 8rpx;
|
| | | margin-top: 20rpx;
|
| | |
|
| | | .line {
|
| | | margin-bottom: 18rpx;
|
| | | display: flex;
|
| | | font-size: 24rpx;
|
| | |
|
| | | &:nth-last-child(1) {
|
| | | margin-bottom: 0;
|
| | | }
|
| | |
|
| | | .label {
|
| | | color: #999999;
|
| | | width: 140rpx;
|
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | .status {
|
| | | position: absolute;
|
| | | right: -30rpx;
|
| | | top: 0;
|
| | | height: 60rpx;
|
| | | line-height: 60rpx;
|
| | | padding: 0 32rpx;
|
| | | border-radius: 0rpx 0rpx 0rpx 30rpx;
|
| | | background: rgba(39, 155, 170, 0.12);
|
| | | color: $uni-color-primary;
|
| | | }
|
| | |
|
| | | .status_img {
|
| | | position: absolute;
|
| | | right: 0rpx;
|
| | | top: 20rpx;
|
| | | width: 120rpx;
|
| | | }
|
| | | }
|
| | |
|
| | | .main_footer {
|
| | | position: fixed;
|
| | | bottom: 0;
|
| | | width: 100%;
|
| | | z-index: 9999;
|
| | | left: 0;
|
| | | padding: 30rpx 10rpx 60rpx;
|
| | | display: flex;
|
| | | justify-content: space-between;
|
| | | background: #ffffff;
|
| | |
|
| | | .btn {
|
| | | flex: 1;
|
| | | height: 88rpx;
|
| | | line-height: 88rpx;
|
| | | background: #ffffff;
|
| | | border-radius: 44rpx;
|
| | | border: 1rpx solid #999999;
|
| | | font-size: 32rpx;
|
| | | text-align: center;
|
| | | margin: 16rpx 8rpx;
|
| | | }
|
| | |
|
| | | .transfer {
|
| | | color: $uni-color-primary;
|
| | | border: 1rpx solid $uni-color-primary;
|
| | | }
|
| | |
|
| | | .handle {
|
| | | flex: 2;
|
| | | background: $uni-color-primary;
|
| | | color: #fff;
|
| | | border: 1rpx solid $uni-color-primary;
|
| | | }
|
| | | }
|
| | |
|
| | | .appr_modal {
|
| | | padding: 36rpx 30rpx 0;
|
| | |
|
| | | .title {
|
| | | font-weight: 600;
|
| | | font-size: 32rpx;
|
| | | color: #222222;
|
| | | margin-bottom: 40rpx;
|
| | | text-align: center;
|
| | | }
|
| | |
|
| | | .label {
|
| | | text {
|
| | | color: #ed4545;
|
| | | }
|
| | | }
|
| | |
|
| | | .df_sb {
|
| | | display: flex;
|
| | | justify-content: space-between;
|
| | | align-items: center;
|
| | | height: 90rpx;
|
| | | border-bottom: 1rpx solid #e4e4e4;
|
| | | margin-bottom: 30rpx;
|
| | | }
|
| | |
|
| | | .back_footer {
|
| | | display: flex;
|
| | |
|
| | | .btn {
|
| | | flex: 1;
|
| | | height: 88rpx;
|
| | | line-height: 88rpx;
|
| | | background: #ffffff;
|
| | | border-radius: 44rpx;
|
| | | border: 1rpx solid #999999;
|
| | | font-size: 32rpx;
|
| | | text-align: center;
|
| | | margin: 16rpx 8rpx;
|
| | | }
|
| | |
|
| | | .agree {
|
| | | background: $uni-color-primary;
|
| | | color: #fff;
|
| | | border: 1rpx solid $uni-color-primary;
|
| | | }
|
| | | }
|
| | |
|
| | | textarea {
|
| | | box-sizing: border-box;
|
| | | width: 690rpx;
|
| | | min-height: 200rpx;
|
| | | background-color: #f7f7f7;
|
| | | font-size: 28rpx;
|
| | | color: #333333;
|
| | | padding: 24rpx;
|
| | | border-radius: 8rpx;
|
| | | margin-bottom: 30rpx;
|
| | | }
|
| | |
|
| | | .upload_wrap {
|
| | | display: flex;
|
| | | flex-wrap: wrap;
|
| | | margin-bottom: 30rpx;
|
| | | }
|
| | |
|
| | | .adduser_list_item_ipt1_upload {
|
| | | margin-top: 20rpx;
|
| | | width: 156rpx;
|
| | | height: 156rpx;
|
| | | margin-right: 20rpx;
|
| | | border: 2rpx solid #e5e5e5;
|
| | | background: #f7f7f7;
|
| | | color: #666666;
|
| | | font-size: 22rpx;
|
| | | display: flex;
|
| | | flex-direction: column;
|
| | | align-items: center;
|
| | | justify-content: center;
|
| | | position: relative;
|
| | |
|
| | | &:nth-of-type(4n) {
|
| | | margin-right: 0;
|
| | | }
|
| | |
|
| | | .close {
|
| | | position: absolute;
|
| | | right: -20rpx;
|
| | | top: -20rpx;
|
| | | z-index: 999999999999;
|
| | | color: #fff;
|
| | | }
|
| | |
|
| | | image {
|
| | | width: 100%;
|
| | | height: 100%;
|
| | | }
|
| | |
|
| | | video {
|
| | | width: 100%;
|
| | | height: 100%;
|
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | .emyty {
|
| | | width: 750rpx;
|
| | | height: 20rpx;
|
| | | background-color: #f7f7f7;
|
| | | margin: 0 -30rpx;
|
| | | }
|
| | | }
|
| | | .video_wrap {
|
| | | position: relative;
|
| | | border: 1px solid;
|
| | | width: 156rpx;
|
| | | height: 156rpx;
|
| | | border-radius: 4rpx;
|
| | |
|
| | | .play {
|
| | | width: 60rpx !important;
|
| | | height: 60rpx !important;
|
| | | position: absolute;
|
| | | top: 50%;
|
| | | left: 50%;
|
| | | transform: translate(-50%, -50%);
|
| | | }
|
| | | }
|
| | | .sel_upload_wrap {
|
| | | width: 100%;
|
| | | border-top: 1px solid #333333;
|
| | | box-shadow: 0 1 1 #333333;
|
| | |
|
| | | .btn {
|
| | | height: 90rpx;
|
| | | line-height: 90rpx;
|
| | | text-align: center;
|
| | | }
|
| | | }
|
| | |
|
| | | .member_list {
|
| | | height: 920rpx;
|
| | | overflow: auto;
|
| | |
|
| | | .line {
|
| | | display: flex;
|
| | | align-items: center;
|
| | | border-bottom: 1rpx solid #e5e5e5;
|
| | | padding: 30rpx 0;
|
| | |
|
| | | .avatar {
|
| | | width: 64rpx;
|
| | | height: 64rpx;
|
| | | border-radius: 50%;
|
| | | overflow: hidden;
|
| | | margin-right: 20rpx;
|
| | | }
|
| | |
|
| | | .img_name {
|
| | | width: 64rpx;
|
| | | height: 64rpx;
|
| | | line-height: 64rpx;
|
| | | text-align: center;
|
| | | border-radius: 50%;
|
| | | overflow: hidden;
|
| | | margin-right: 20rpx;
|
| | | background: $uni-color-primary;
|
| | | color: #fff;
|
| | | border: 1rpx solid $uni-color-primary;
|
| | | }
|
| | |
|
| | | .content {
|
| | | flex: 1;
|
| | |
|
| | | .depart {
|
| | | font-size: 24rpx;
|
| | | color: #666666;
|
| | | }
|
| | |
|
| | | .info {
|
| | | display: flex;
|
| | | margin-bottom: 16rpx;
|
| | |
|
| | | .name {
|
| | | font-size: 30rpx;
|
| | | }
|
| | |
|
| | | .tag {
|
| | | font-size: 24rpx;
|
| | | border-radius: 4rpx;
|
| | | border: 1rpx solid #f62710;
|
| | | color: #f62710;
|
| | | padding: 0rpx 6rpx;
|
| | | margin-left: 8rpx;
|
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | .checked {
|
| | | width: 48rpx;
|
| | | }
|
| | | }
|
| | |
|
| | | .empty {
|
| | | width: 100%;
|
| | | height: 280rpx;
|
| | | }
|
| | | .emyty {
|
| | | width: 750rpx;
|
| | | height: 20rpx;
|
| | | background-color: #f7f7f7;
|
| | | margin: 0 -30rpx;
|
| | | }
|
| | | }
|
| | |
|
| | | .search_inp {
|
| | | height: 72rpx;
|
| | | background: #f7f7f7;
|
| | | border-radius: 4rpx;
|
| | | padding-left: 16rpx;
|
| | | .video_wrap {
|
| | | position: relative;
|
| | | border: 1px solid;
|
| | | width: 156rpx;
|
| | | height: 156rpx;
|
| | | border-radius: 4rpx;
|
| | |
|
| | | .search {
|
| | | width: 28rpx;
|
| | | }
|
| | |
|
| | | input {
|
| | | flex: 1;
|
| | | font-size: 28rpx;
|
| | | color: #333333;
|
| | | }
|
| | | .play {
|
| | | width: 60rpx !important;
|
| | | height: 60rpx !important;
|
| | | position: absolute;
|
| | | top: 50%;
|
| | | left: 50%;
|
| | | transform: translate(-50%, -50%);
|
| | | }
|
| | | }
|
| | |
|
| | | .video_app {
|
| | | overflow: hidden;
|
| | | position: fixed;
|
| | | left: 0;
|
| | | top: 0;
|
| | | width: 100vw;
|
| | | height: 100vh;
|
| | | .sel_upload_wrap {
|
| | | width: 100%;
|
| | | border-top: 1px solid #333333;
|
| | | box-shadow: 0 1 1 #333333;
|
| | |
|
| | | .btn {
|
| | | height: 90rpx;
|
| | | line-height: 90rpx;
|
| | | text-align: center;
|
| | | }
|
| | | }
|
| | |
|
| | | .member_list {
|
| | | height: 920rpx;
|
| | | overflow: auto;
|
| | |
|
| | | .line {
|
| | | display: flex;
|
| | | align-items: center;
|
| | | z-index: 9990;
|
| | | .bg {
|
| | | background-color: rgba(0, 0, 0, .6);
|
| | | position: absolute;
|
| | | width: 100%;
|
| | | height: 100%;
|
| | | z-index: -1;
|
| | | border-bottom: 1rpx solid #e5e5e5;
|
| | | padding: 30rpx 0;
|
| | |
|
| | | .avatar {
|
| | | width: 64rpx;
|
| | | height: 64rpx;
|
| | | border-radius: 50%;
|
| | | overflow: hidden;
|
| | | margin-right: 20rpx;
|
| | | }
|
| | |
|
| | | video {
|
| | | width: 100%;
|
| | | height: 42vh;
|
| | | }
|
| | | }
|
| | |
|
| | | .Transfer_footer {
|
| | | display: flex;
|
| | |
|
| | | .btn {
|
| | | flex: 1;
|
| | | height: 88rpx;
|
| | | line-height: 88rpx;
|
| | | background: #ffffff;
|
| | | border-radius: 44rpx;
|
| | | border: 1rpx solid #999999;
|
| | | font-size: 32rpx;
|
| | | .img_name {
|
| | | width: 64rpx;
|
| | | height: 64rpx;
|
| | | line-height: 64rpx;
|
| | | text-align: center;
|
| | | margin: 16rpx 8rpx;
|
| | | }
|
| | |
|
| | | .active {
|
| | | border-radius: 50%;
|
| | | overflow: hidden;
|
| | | margin-right: 20rpx;
|
| | | background: $uni-color-primary;
|
| | | color: #fff;
|
| | | border: 1rpx solid $uni-color-primary;
|
| | | }
|
| | |
|
| | | .content {
|
| | | flex: 1;
|
| | |
|
| | | .depart {
|
| | | font-size: 24rpx;
|
| | | color: #666666;
|
| | | }
|
| | |
|
| | | .info {
|
| | | display: flex;
|
| | | margin-bottom: 16rpx;
|
| | |
|
| | | .name {
|
| | | font-size: 30rpx;
|
| | | }
|
| | |
|
| | | .tag {
|
| | | font-size: 24rpx;
|
| | | border-radius: 4rpx;
|
| | | border: 1rpx solid #f62710;
|
| | | color: #f62710;
|
| | | padding: 0rpx 6rpx;
|
| | | margin-left: 8rpx;
|
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | .checked {
|
| | | width: 48rpx;
|
| | | }
|
| | | }
|
| | |
|
| | | .empty {
|
| | | width: 100%;
|
| | | height: 280rpx;
|
| | | }
|
| | | }
|
| | |
|
| | | .search_inp {
|
| | | height: 72rpx;
|
| | | background: #f7f7f7;
|
| | | border-radius: 4rpx;
|
| | | padding-left: 16rpx;
|
| | |
|
| | | .search {
|
| | | width: 28rpx;
|
| | | }
|
| | |
|
| | | input {
|
| | | flex: 1;
|
| | | font-size: 28rpx;
|
| | | color: #333333;
|
| | | }
|
| | | }
|
| | |
|
| | | .video_app {
|
| | | overflow: hidden;
|
| | | position: fixed;
|
| | | left: 0;
|
| | | top: 0;
|
| | | width: 100vw;
|
| | | height: 100vh;
|
| | | display: flex;
|
| | | align-items: center;
|
| | | z-index: 9990;
|
| | |
|
| | | .bg {
|
| | | background-color: rgba(0, 0, 0, .6);
|
| | | position: absolute;
|
| | | width: 100%;
|
| | | height: 100%;
|
| | | z-index: -1;
|
| | | }
|
| | |
|
| | | video {
|
| | | width: 100%;
|
| | | height: 42vh;
|
| | | }
|
| | | }
|
| | |
|
| | | .Transfer_footer {
|
| | | display: flex;
|
| | |
|
| | | .btn {
|
| | | flex: 1;
|
| | | height: 88rpx;
|
| | | line-height: 88rpx;
|
| | | background: #ffffff;
|
| | | border-radius: 44rpx;
|
| | | border: 1rpx solid #999999;
|
| | | font-size: 32rpx;
|
| | | text-align: center;
|
| | | margin: 16rpx 8rpx;
|
| | | }
|
| | |
|
| | | .active {
|
| | | background: $uni-color-primary;
|
| | | color: #fff;
|
| | | border: 1rpx solid $uni-color-primary;
|
| | | }
|
| | | }
|
| | | </style> |
| | |
| | | <script src="./jsencrypt.min.js"></script> |
| | | <script src="./web-control_1.2.7.min.js"></script> |
| | | <script type="module" src="/src/main.js"></script> |
| | | |
| | | <script src="https://webapi.amap.com/maps?v=2.0&key=96b8d96e645290f1de14f5229ee030e4"></script> |
| | | </body> |
| | | </html> |
| | |
| | | } |
| | | // åºå¶ç®¡ççæ¿ å½åè¿è¾ä»»å¡ |
| | | export const getStoreTaskList = (data) => { |
| | | return request('visitsAdmin/cloudService/board/api/wholeProvince/transportTaskList', data) |
| | | return request('visitsAdmin/cloudService/board/api/wholeProvince/orderList', data, 'POST') |
| | | } |
| | | // åºå¶ç®¡ççæ¿ å½åè¿è¾ä»»å¡ |
| | | export const kzorderInfo = (data) => { |
| | | return request('visitsAdmin/cloudService/board/api/wholeProvince/orderInfo', data, 'POST') |
| | | } |
| | | // |
| | | // åºå¶ç®¡ççæ¿ 累计åºåºé |
| | | export const kztotalOutQtyNum = (data) => { |
| | | return request('visitsAdmin/cloudService/board/api/wholeProvince/totalOutQtyNum', data) |
| | | } |
| | | // å°å¾æ¬ææ¬å¹´æ»åºåºéç»è®¡éåï¼æçä»½ï¼ |
| | | export const mapYearAndMonthOutList = (data) => { |
| | | return request('visitsAdmin/cloudService/board/api/wholeProvince/mapYearAndMonthOutList', data) |
| | | } |
| | | // ä»åºèµæºå©ç¨ç |
| | | export const kzinventoryUseRate = (data) => { |
| | | return request('visitsAdmin/cloudService/board/api/wholeProvince/inventoryUseRate', data) |
| | | } |
| | | // åºåºè½åå©ç¨ç |
| | | export const outAbilityUseRate = (data) => { |
| | | return request('visitsAdmin/cloudService/board/api/wholeProvince/outAbilityUseRate', data) |
| | | } |
| | | // è¿åèµæºå©ç¨ç |
| | | export const tranportAbilityUseRate = (data) => { |
| | | return request('visitsAdmin/cloudService/board/api/wholeProvince/tranportAbilityUseRate', data) |
| | | } |
| | | // çåéå |
| | | export const kzfactoryList = (data) => { |
| | | return request('visitsAdmin/cloudService/board/api/wholeProvince/factoryList', data) |
| | | } |
| | | // è¿7æ¥å°è´§æ
åµ |
| | | export const arriveGoodsList = (data) => { |
| | | return request('visitsAdmin/cloudService/board/api/wholeProvince/arriveGoodsList', data) |
| | | } |
| | | |
| | | |
| | | // æ¶é²ç®¡æ§å¤§å± æ¥è¦ä¿¡æ¯ |
| | | export const getFightingalarmData = (data) => { |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div> |
| | | <div id="map-container" ref="mapContainer"></div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { onMounted, ref } from 'vue' |
| | | const mapContainer = ref(null) |
| | | |
| | | onMounted(() => { |
| | | // åå§åé«å¾·å°å¾ |
| | | const map = new AMap.Map(mapContainer.value, { |
| | | zoom: 10, // åå§ç¼©æ¾çº§å« |
| | | center: [116.397428, 39.90923], // åå§ä¸å¿ç¹ï¼åäº¬åæ ï¼ |
| | | }) |
| | | |
| | | // æ·»å åºç¡æ§ä»¶ |
| | | AMap.plugin(['AMap.ToolBar'], () => { |
| | | const toolbar = new AMap.ToolBar() |
| | | map.addControl(toolbar) |
| | | }) |
| | | }); |
| | | |
| | | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | #map-container { |
| | | width: 300px; |
| | | height: 160px; |
| | | } |
| | | </style> |
| | |
| | | <div class="header"> |
| | | <img class="icon" src="@/assets/images/ic_yongqi@2x.png" alt="" /> |
| | | <div class="content"> |
| | | <div class="name">ä¸æç¨æ°(t)</div> |
| | | <div class="name">ä¸æç¨æ°(m³)</div> |
| | | <div class="num" v-if="data1.gasQuantity">{{ data1.gasQuantity.total.toLocaleString() }}</div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="second_title"> |
| | | <div class="title"> |
| | | <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" /> |
| | | <div>æ¬å¹´ç´¯è®¡åºåºé</div> |
| | | <div>累计åºåºé</div> |
| | | </div> |
| | | <div class="tabs"> |
| | | <div class="tab" :class="{ active: activeTab1 == 0 }" @click="tab1Click(0)">æ¬å¨</div> |
| | | <div class="tab" :class="{ active: activeTab1 == 1 }" @click="tab1Click(1)">æ¬å¨</div> |
| | | <div class="separate"></div> |
| | | <div class="tab" :class="{ active: activeTab1 == 1 }" @click="tab1Click(1)">æ¬æ</div> |
| | | <div class="tab" :class="{ active: activeTab1 == 0 }" @click="tab1Click(0)">æ¬æ</div> |
| | | <div class="separate"></div> |
| | | <div class="tab" :class="{ active: activeTab1 == 2 }" @click="tab1Click(2)">æ¬å¹´</div> |
| | | </div> |
| | | </div> |
| | | <div class="content_wrap"> |
| | | <div class="num_wrap"> |
| | | <div class="num_list" v-if="cneterData.yearOutTotal"> |
| | | <div class="num" v-for="i in cneterData.yearOutTotal + ''"> |
| | | <div class="num_list" v-if="StockOutData.currentNum"> |
| | | <div class="num" v-for="i in StockOutData.currentNum + ''"> |
| | | {{ i }} |
| | | <img class="bg" src="@/assets/images/LogisticsCenter/bg_number@2x.png" alt=""> |
| | | </div> |
| | |
| | | <div class="content"> |
| | | <div class="unit_wrap"> |
| | | <span class="la">忝</span> |
| | | <img src="@/assets/images/ic_up.png" class="icon" alt=""> |
| | | <span v-if="cneterData.yearOutTotalOnYear || cneterData.yearOutTotalOnYear == 0">{{ |
| | | cneterData.yearOutTotalOnYear }} %</span> |
| | | <template v-if="StockOutData.currentNum && StockOutData.lastNum"> |
| | | <img v-if="StockOutData.currentNum >= StockOutData.lastNum" src="@/assets/images/ic_up.png" |
| | | class="icon" alt=""> |
| | | <img v-else src="@/assets/images/ic_down.webp" class="icon" alt=""> |
| | | </template> |
| | | <span v-if="StockOutData.lastNum && StockOutData.currentNum">{{ Math.abs((((StockOutData.currentNum |
| | | - |
| | | StockOutData.lastNum) / |
| | | StockOutData.lastNum) |
| | | * 100).toFixed(2)) }}%</span> |
| | | <span v-else style="margin-left: 6px;">-</span> |
| | | <span class="la" style="margin-left: 30px;margin-right: 10px;">累计åºåºè½¦æ¬¡</span> |
| | | <span>{{ cneterData.yearOutTimes || '' }}</span> |
| | | <span>{{ StockOutData.totalCarNum || '' }}</span> |
| | | </div> |
| | | |
| | | </div> |
| | |
| | | <div class="echart_wrap"> |
| | | <div class="echart1" id="echart1"></div> |
| | | <div class="list"> |
| | | <div class="item" v-for="item, i in StockOutData" :key="i"> |
| | | <div class="item" v-for="item, i in StockOutData.arr" :key="i"> |
| | | <div :style="{ background: colors[i] }" class="icon"></div> |
| | | <div class="text">{{ item.name }}</div> |
| | | <div class="num">{{ item.value }}</div> |
| | | <div class="num">{{ item.rate }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="list_wrap"> |
| | | <div class="header line"> |
| | | <span class="item">è¿è¾è½¦è¾</span> |
| | | <span class="item">ç¶æ</span> |
| | | <span class="item status">ç¶æ</span> |
| | | <span class="item">ä½ç½®</span> |
| | | <span class="item">ä»»å¡ä¸è¾¾æ¶é´</span> |
| | | </div> |
| | | <div class="one-swiper list"> |
| | | <div class="swiper-wrapper"> |
| | | <div class="line one-swiper-slide swiper-slide item" @click="taskClick(item)" |
| | | <div :class="{ avtive: modalInfo.contractNumber == item.contractNumber }" |
| | | class="line one-swiper-slide swiper-slide item" @click="taskClick(item)" |
| | | v-for="(item, i) in transportTask" :key="i"> |
| | | <span class="item">{{ item.carNo }}</span> |
| | | <span class="item">{{ item.statusStr }}</span> |
| | | <span class="item">{{ item.address }}</span> |
| | | <span class="item">{{ item.taskDate }}</span> |
| | | <span class="item">{{ item.contractNumber }}</span> |
| | | <span class="item status">{{ item.statusDesc }}</span> |
| | | <span class="item">{{ item.receiveEnterprise }}</span> |
| | | <span class="item">{{ item.transportDate }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <img src="@/assets/images/LogisticsCenter/ic_jinrijihua@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">彿¥è®¢åé</div> |
| | | <div class="num"><span class="blue">{{ cneterData.outPlanTotal }}</span>䏿¯</div> |
| | | <div class="num"><span class="blue">{{ cneterData.currentOrderNum }}</span>䏿¯</div> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/LogisticsCenter/ic_jinrijihua@2.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">彿¥è®¡åé</div> |
| | | <div class="num"><span>{{ cneterData.outPlanTotal }}</span>䏿¯</div> |
| | | <div class="unit">车次ï¼{{ cneterData.outPlanTimes }}</div> |
| | | <div class="num"><span>{{ cneterData.currentPlanNum }}</span>䏿¯</div> |
| | | <div class="unit">车次ï¼{{ cneterData.currentPlanCarNum }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/LogisticsCenter/ic_jinrichuku@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">仿¥åºåºé</div> |
| | | <div class="num" v-if="cneterData.outPlanTotal && cneterData.outTotal"><span class="finish">{{ |
| | | cneterData.outPlanTotal - cneterData.outTotal }}</span>䏿¯</div> |
| | | <div class="unit" v-if="cneterData.outPlanTotal && cneterData.outTotal">车次ï¼{{ cneterData.outPlanTimes |
| | | - |
| | | cneterData.outTimes }}</div> |
| | | <div class="num"><span class="finish">{{ cneterData.crrentOutNum }}</span>䏿¯</div> |
| | | <div class="unit">车次ï¼{{ cneterData.crrentOutCarNum }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/LogisticsCenter/ic_jinriweichu@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">å©ä½ä»»å¡é</div> |
| | | <div class="num" v-if="cneterData.outPlanTotal && cneterData.outTotal"><span class="today">{{ |
| | | cneterData.outPlanTotal - cneterData.outTotal }}</span>䏿¯</div> |
| | | <div class="unit" v-if="cneterData.outPlanTotal && cneterData.outTotal">车次ï¼{{ cneterData.outPlanTimes |
| | | - |
| | | cneterData.outTimes }}</div> |
| | | <div class="num"><span class="today">{{ cneterData.crrentRestNum }}</span>䏿¯</div> |
| | | <div class="unit">车次ï¼{{ cneterData.crrentRestCarNum }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="wrap"> |
| | | <div class="content"> |
| | | <div class="scale">0</div> |
| | | <!-- <div class="node"> |
| | | <div>8h</div> |
| | | <div class="node_icon"> |
| | | <div class="icon icon1"></div> |
| | | <div class="icon icon2"></div> |
| | | </div> |
| | | </div> --> |
| | | <div class="box"> |
| | | <div class="tag"> |
| | | <div class="icon"></div> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="side"> |
| | | <!-- <div class="side"> |
| | | <div class="box"></div> |
| | | <div class="scale" style="left: -12px;">8h</div> |
| | | <div class="scale scale1">æå¤§</div> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="center_box_two"> |
| | | <div class="echart_map" ref="mapEchart" id="echart_map"></div> |
| | | <div class="list"> |
| | | <div v-if="showModal1" @click="showModal1 = false" class="modal1"> |
| | | <div class="list"> |
| | | <div class="head line"> |
| | | <div class="item">车çå·</div> |
| | | <div class="item contract">ååå·</div> |
| | | <div class="item">ç®çå°</div> |
| | | </div> |
| | | <div class="line" v-for="item in active1List"> |
| | | <div class="item">{{ item.platNumber }}</div> |
| | | <div class="item contract">{{ item.contractNumber }}</div> |
| | | <div class="item">{{ item.repertotyName }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- <div class="list"> |
| | | <div class="item"> |
| | | <div class="icon"></div> |
| | | <div class="text">åºåºé10w以ä¸</div> |
| | |
| | | <div class="icon icon4"></div> |
| | | <div class="text">åºåºé2w以ä¸</div> |
| | | </div> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | <div class="right_box"> |
| | |
| | | <div class="second_title"> |
| | | <div class="title"> |
| | | <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" /> |
| | | <div>åºåå©ç¨ç</div> |
| | | <div>ä»åºèµæºå©ç¨ç</div> |
| | | </div> |
| | | <div class="side">å
¨çï¼<span>100<span class="unit">䏿¯ |</span> 40.6%</span></div> |
| | | <div class="side"> |
| | | å
¨çï¼ |
| | | <span>{{ data5.totalNum }}</span> |
| | | <span class="unit">䏿¯ | </span> |
| | | <span v-if="data5.totalNum">{{ ((data5.currentNum / data5.totalNum) * 100).toFixed(1) }}%</span> |
| | | </div> |
| | | </div> |
| | | <div class="echart5_wrap"> |
| | | <div class="echart5" id="echart5"></div> |
| | |
| | | <div class="modal_wrap" v-if="showModal"> |
| | | <div class="title_head"> |
| | | <img src="@/assets/images/energy_ef/chuku_ic_car@2x.png" alt=""> |
| | | <span>ça222</span> |
| | | <span>ååå·ï¼{{ modalInfo.contractNumber }}</span> |
| | | </div> |
| | | <div class="info"> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">è¿è¾åå·ï¼</div> |
| | | <div class="val">471342</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">叿ºä¿¡æ¯ï¼</div> |
| | | <div class="val">åææ¦ 17493932936</div> |
| | | <div class="val">{{ modalInfo.driverName }} {{ modalInfo.driverTel }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">æ»è¿è¾éï¼</div> |
| | | <div class="val">22䏿¯</div> |
| | | <div class="la">车çå·ï¼</div> |
| | | <div class="val">{{ modalInfo.plateName }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">å½åä½ç½®ï¼</div> |
| | | <div class="val">å®å¾½çåè¥å¸å
æ²³åºç¹å大é123ç±³å¤</div> |
| | | </div> |
| | | </div> |
| | | <div class="tabs"> |
| | | <div :class="{ active: modalTab == 0 }" @click="modalTabClick(0)" class="tab">åå1:1231231</div> |
| | | <div :class="{ active: modalTab == 1 }" @click="modalTabClick(1)" class="tab">åå2:1231231</div> |
| | | </div> |
| | | <div class="ht_info"> |
| | | <div class="item"> |
| | | <div class="la">åè´§ä»åºï¼</div> |
| | | <div class="val">èæ¹æå</div> |
| | | <div class="la">åè´§å°ç¹ï¼</div> |
| | | <div class="val">{{ modalInfo.deliveryEnterprise }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">é¢è®¡å°è¾¾ï¼</div> |
| | | <div class="val">2024-12-04 14:00</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">å°è´§å°ç¹ï¼</div> |
| | | <div class="val">æ±é¨çèç©æµé
éä¸å¿</div> |
| | | <div class="val">{{ modalInfo.receiveEnterprise }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">è¿è¾éï¼</div> |
| | | <div class="val">300䏿¯</div> |
| | | <div class="dian"></div> |
| | | <div class="la">车è¾ä½ç½®ï¼</div> |
| | | <div class="val">{{ modalInfo.aa || '-' }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">é¢è®¡å°è¾¾ï¼</div> |
| | | <div class="val" v-if="modalInfo.plannedArrivedDate">{{ modalInfo.plannedArrivedDate.slice(0, 11) }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="tab1"> |
| | | <div class="title"> |
| | | <div class="logistics_wrap"> |
| | | <div class="m_title"> |
| | | <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" alt=""> |
| | | <span>ç©æµä¿¡æ¯</span> |
| | | </div> |
| | | <div class="item" v-for="item, i in 3"> |
| | | <div class="icon_wrap"> |
| | | <img v-if="i !== 0" class="dian" src="@/assets/images/ic_dangqian@2x.png" alt=""> |
| | | <img v-else src="@/assets/images/ic_jindu@2x.png" class="dian_ac" alt=""> |
| | | <div class="line"></div> |
| | | </div> |
| | | <div class="content"> |
| | | <div class="status">车è¾å¯è¿-çµåéæ°è¿</div> |
| | | <div class="time">2024-04-02 12:00</div> |
| | | <div id="map-container" ref="mapContainer"></div> |
| | | <div class="fu_list"> |
| | | <div class="fu_item" v-for="item, i in modalInfo.cicleStatusList"> |
| | | <div class="item_title"> |
| | | <div class="icon"> |
| | | <img v-if="item.key == 0 && k != 0" src="@/assets/images/LogisticsCenter/ic_dingdan@2x.png" |
| | | class="icon"></img> |
| | | <img v-if="item.key == 0 && k == 0" src="@/assets/images/LogisticsCenter/ic_dingdan_sel@2x.png" |
| | | class="icon"></img> |
| | | <img v-if="item.key == 1 && k != 0" src="@/assets/images/LogisticsCenter/ic_peizai@2x.png" |
| | | class="icon"></img> |
| | | <img v-if="item.key == 1 && k == 0" src="@/assets/images/LogisticsCenter/ic_peizai_sel@2x.png" |
| | | class="icon"></img> |
| | | <img v-if="item.key == 2 && k != 0" src="@/assets/images/LogisticsCenter/ic_cangku@2x.png" |
| | | class="icon"></img> |
| | | <img v-if="item.key == 2 && k == 0" src="@/assets/images/LogisticsCenter/ic_cangku_sel@2x.png" |
| | | class="icon"></img> |
| | | <img v-if="item.key == 3 && k != 0" src="@/assets/images/LogisticsCenter/ic_yunshu@2x.png" |
| | | class="icon"></img> |
| | | <img v-if="item.key == 3 && k == 0" src="@/assets/images/LogisticsCenter/ic_yunshu_sel@2x.png" |
| | | class="icon"></img> |
| | | <img v-if="item.key == 4 && k != 0" src="@/assets/images/LogisticsCenter/ic_daohuo@2x.png" |
| | | class="icon"></img> |
| | | <img v-if="item.key == 4 && k == 0" src="@/assets/images/LogisticsCenter/ic_daohuo_sel@2x.png" |
| | | class="icon"></img> |
| | | <img v-if="item.key == 5" src="@/assets/images/LogisticsCenter/ic_dangqian@2x.png" class="icon"></img> |
| | | </div> |
| | | <div>{{ item.name }}</div> |
| | | </div> |
| | | <div class="item" v-for="ite, i in item.secondList"> |
| | | <div class="h2" v-if="ite.orderStatusDes"> |
| | | <div class="icon_wrap" v-if="i != 0"> |
| | | <image src="@/static/driver/ic_mostarted.png" class="icon"></image> |
| | | </div> |
| | | <div v-else class="icon_wrap"></div> |
| | | <div class="text" :class="{ placeholder3: k == 0 && i == 0 }"> |
| | | {{ ite.orderStatusDes }} |
| | | <text v-if="ite.tel">ï¼åè´§ä»åºçµè¯ï¼</text> |
| | | <text v-if="ite.tel" class="primaryColor">{{ ite.tel }}</text> |
| | | </div> |
| | | </div> |
| | | <div class="time">{{ ite.recordDate }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | import * as echarts from 'echarts' |
| | | import 'swiper/css/swiper.min.css' |
| | | import Swiper from 'swiper' |
| | | import Map from '@/components/Map.vue' |
| | | import chinaJSON from '@/assets/china.json' |
| | | import fahuoImg from '@/assets/images/LogisticsCenter/ic_fahuodi@2x.png' |
| | | import shouImg from '@/assets/images/LogisticsCenter/ic_huowu@2x.png' |
| | | import { |
| | | getStoreOperationList, |
| | | getStorearriveGoodsList, |
| | |
| | | getStoreenergyDataList, |
| | | getStorelastMonthOil, |
| | | getStoreTaskList, |
| | | |
| | | kztotalOutQtyNum, |
| | | kzorderInfo, |
| | | mapYearAndMonthOutList, |
| | | kzinventoryUseRate, |
| | | outAbilityUseRate, |
| | | tranportAbilityUseRate, |
| | | kzfactoryList, |
| | | arriveGoodsList |
| | | } from '@/api' |
| | | |
| | | const weekMap = ['æææ¥', 'ææä¸', 'ææäº', 'ææä¸', 'ææå', 'ææäº', 'ææå
',] |
| | |
| | | }) |
| | | } |
| | | |
| | | // |
| | | const mapList = ref([]) |
| | | const mapEchart = ref() |
| | | const initMap = () => { |
| | | var myChart = echarts.init(mapEchart.value) |
| | | echarts.registerMap('china', chinaJSON) |
| | | var points = [ |
| | | // ç¹åæ |
| | | { value: [117.1582, 36.8701], itemStyle: { color: '#6ae5e0' }, name: 'å±±ä¸', total: 2, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 }, |
| | | { value: [117.29, 32.0581], itemStyle: { color: '#6ae5e0' }, name: 'å®å¾½', total: 2, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 }, |
| | | { value: [114.3896, 30.6628], itemStyle: { color: '#6ae5e0' }, name: 'æ¹å', total: 5, bj: 0, yj: 0, yx: 5, tj: 0, dw: 0 }, |
| | | { value: [119.5313, 29.8773], itemStyle: { color: '#6ae5e0' }, name: 'æµæ±', total: 10, bj: 0, yj: 0, yx: 10, tj: 0, dw: 0 }, |
| | | { value: [113.12244, 23.009505], itemStyle: { color: '#6ae5e0' }, name: '广ä¸', total: 8, bj: 0, yj: 0, yx: 8, tj: 0, dw: 0 }, |
| | | { value: [103.9526, 30.7617], itemStyle: { color: '#6ae5e0' }, name: 'åå·', total: 18, bj: 0, yj: 0, yx: 18, tj: 0, dw: 0 } |
| | | { value: [117.1582, 36.8701, 100], itemStyle: { color: '#6ae5e0' }, name: 'å±±ä¸', total: 2, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 }, |
| | | { value: [117.29, 32.0581, 90], itemStyle: { color: '#6ae5e0' }, name: 'å®å¾½', total: 2, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 }, |
| | | { value: [114.3896, 30.6628, 1999], itemStyle: { color: '#6ae5e0' }, name: 'æ¹å', total: 5, bj: 0, yj: 0, yx: 5, tj: 0, dw: 0 }, |
| | | { value: [119.5313, 29.8773, 2], itemStyle: { color: '#6ae5e0' }, name: 'æµæ±', total: 10, bj: 0, yj: 0, yx: 10, tj: 0, dw: 0 }, |
| | | { value: [113.12244, 23.009505, 12], itemStyle: { color: '#6ae5e0' }, name: '广ä¸', total: 8, bj: 0, yj: 0, yx: 8, tj: 0, dw: 0 }, |
| | | { value: [103.9526, 30.7617, 1901], itemStyle: { color: '#fff' }, name: 'åå·', total: 18, bj: 0, yj: 0, yx: 18, tj: 0, dw: 0 } |
| | | ] |
| | | var lineToLf = [ |
| | | { name: '11', coords: [[110.81, 33.40], [116.55, 40.01]], lineStyle: { color: '#c1bb1f' } }, |
| | | { name: '22', coords: [[113.11, 28.40], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } }, |
| | | { name: '33', coords: [[106.44, 29.50], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } }, |
| | | { name: '44', coords: [[112.85, 38.95], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } }, |
| | | { name: '55', coords: [[82.78, 43.27], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } } |
| | | const mapData = [ |
| | | { name: 'å京å¸', value: 0 }, |
| | | { name: '天津å¸', value: 0 }, |
| | | { name: '䏿µ·å¸', value: 0 }, |
| | | { name: 'éåºå¸', value: 0 }, |
| | | { name: 'æ²³åç', value: 0 }, |
| | | { name: 'æ²³åç', value: 0 }, |
| | | { name: 'äºåç', value: 0 }, |
| | | { name: 'è¾½å®ç', value: 0 }, |
| | | { name: 'é»é¾æ±ç', value: 0 }, |
| | | { name: 'æ¹åç', value: 0 }, |
| | | { name: 'å®å¾½ç', value: 0 }, |
| | | { name: 'å±±ä¸ç', value: 0 }, |
| | | { name: 'æ°çç»´å¾å°èªæ²»åº', value: 0 }, |
| | | { name: 'æ±èç', value: 0 }, |
| | | { name: 'æµæ±ç', value: 0 }, |
| | | { name: 'æ±è¥¿ç', value: 0 }, |
| | | { name: 'æ¹åç', value: 0 }, |
| | | { name: '广西壮æèªæ²»åº', value: 0 }, |
| | | { name: 'çèç', value: 0 }, |
| | | { name: '山西ç', value: 0 }, |
| | | { name: 'å
èå¤èªæ²»åº', value: 0 }, |
| | | { name: 'é西ç', value: 0 }, |
| | | { name: 'åæç', value: 0 }, |
| | | { name: 'ç¦å»ºç', value: 0 }, |
| | | { name: 'è´µå·ç', value: 0 }, |
| | | { name: '广ä¸ç', value: 0 }, |
| | | { name: 'éæµ·ç', value: 0 }, |
| | | { name: '西èèªæ²»åº', value: 0 }, |
| | | { name: 'å®å¤åæèªæ²»åº', value: 0 }, |
| | | { name: 'åå·ç', value: 0 }, |
| | | { name: 'å®å¤ç', value: 0 }, |
| | | { name: 'æµ·åç', value: 0 }, |
| | | { name: 'å°æ¹¾ç', value: 0 }, |
| | | { name: '馿¸¯ç¹å«è¡æ¿åº', value: 0 }, |
| | | { name: 'æ¾³é¨ç¹å«è¡æ¿åº', value: 0 }, |
| | | ] |
| | | mapData.forEach(item => { |
| | | item.monthNum = 0 |
| | | item.yearNum = 0 |
| | | mapList.value.forEach(ite => { |
| | | if (item.name == ite.name) { |
| | | item.value = ite.value |
| | | item.monthNum = ite.monthNum |
| | | item.yearNum = ite.yearNum |
| | | } |
| | | }) |
| | | }) |
| | | |
| | | const option = { |
| | | backgroundColor: 'transparent', // è®¾ç½®èæ¯è²éæ |
| | | // å¿
须设置 |
| | | tooltip: { |
| | | show: false |
| | | //æ°æ®å段 |
| | | visualMap: { |
| | | type: 'piecewise', |
| | | pieces: [ |
| | | { min: 100000, max: 99999999999, label: 'åºåºé10w以ä¸', color: '#be6f2b' }, |
| | | { min: 50000, max: 100000, label: 'åºåºé5-10w', color: '#c39332' }, |
| | | { min: 20000, max: 50000, label: 'åºåºé2-5w', color: '#5ecbaf' }, |
| | | { min: -1, max: 20000, label: 'åºåºé2w以ä¸', color: '#325a9b' }, |
| | | ], |
| | | itemWidth: 22, |
| | | itemHeight: 22, |
| | | textStyle: { |
| | | color: '#fff', // ææ¬é¢è² |
| | | fontSize: 14, // åä½å¤§å° |
| | | }, |
| | | }, |
| | | // å°å¾é´å½±é
ç½® |
| | | // æ¬æµ®çª |
| | | tooltip: { |
| | | trigger: 'item', |
| | | backgroundColor: 'rgba(0,0,0,0.8)', //è®¾ç½®èæ¯å¾ç rgbaæ ¼å¼ |
| | | color: '#fff', |
| | | borderWidth: '1', //è¾¹æ¡å®½åº¦è®¾ç½®1 |
| | | borderColor: 'gray', //设置边æ¡é¢è² |
| | | textStyle: { |
| | | color: '#fff', //设置æåé¢è² |
| | | }, |
| | | extraCssText: 'width:120px;height:40px', // 设置æç¤ºæ¡å®½é«çcssæ ·å¼ |
| | | formatter: function (params) { |
| | | return `${params.name}: <br /> ${params.value || 0}è¾` |
| | | }, |
| | | }, |
| | | geo: { |
| | | map: 'china', |
| | | // è¿éå¿
é¡»å®ä¹ï¼ä¸ç¶åé¢serieséé¢ä¸çæ |
| | | tooltip: { |
| | | show: false |
| | | }, |
| | | // è¿ä¸ªæ¯éç¹ ââ è¿é设置为å°å¾çé´å½± |
| | | map: 'china', // 表示ä¸å½å°å¾ |
| | | roam: false, // ç¦æ¢ææ½ |
| | | label: { |
| | | show: false |
| | | // æ å¿ä¿¡æ¯ |
| | | show: false, // æ¯å¦æ¾ç¤ºå¯¹åºå°å |
| | | }, |
| | | zoom: 1.6, |
| | | silent: true, // ä¸ååºé¼ æ æ¶é´ |
| | | show: true, |
| | | roam: false, // å°å¾ç¼©æ¾å平移 |
| | | aspectScale: 0.75, // scale å°å¾çé¿å®½æ¯ |
| | | silent: true, // ç¦æ¢hoverææ |
| | | zoom: 1.4, // å°å¾æ¯ä¾ |
| | | aspectScale: 0.9, // æ¯ä¾ |
| | | center: [105.194115019531, 36.582111640625], // å°å¾ä¸å¿ä½ç½®ï¼ æ¤å¤ç纬度ä¸ä¸é¢çcenterç¸å·®1度æ¯å½¢æé´å½±çè·ç¦»ï¼å¯èªå·±éæè°æ´ |
| | | itemStyle: { |
| | | borderColor: '#2d5f9c', |
| | | borderWidth: 1, |
| | | areaColor: '#2d5f9c', |
| | | shadowColor: 'rgba(1,34,73,0.48)', |
| | | shadowBlur: 10, |
| | | shadowOffsetX: -10, // |
| | | shadowOffsetY: 10 |
| | | }, |
| | | select: { |
| | | disabled: true |
| | | areaColor: '#152e4a', //å°å¾é´å½±çé¢è² |
| | | borderColor: '#f7f7f7', // ç份边æ¡é¢è² |
| | | borderWidth: 0.1, // ç份边æ¡å®½åº¦ |
| | | // shadowBlur: 5, // ç份边æ¡èç¦ |
| | | }, |
| | | emphasis: { |
| | | disabled: true, |
| | | areaColor: '#00F1FF' |
| | | show: false, |
| | | }, |
| | | // å°å¾åºåçå¤è¾¹å½¢ å¾å½¢æ ·å¼ é´å½±ææ |
| | | // zå¼å°çå¾å½¢ä¼è¢«zå¼å¤§çå¾å½¢è¦ç |
| | | top: '30.2%', |
| | | left: 'center', |
| | | // å»é¤å海诸å²é´å½± series mapé颿²¡ææ¤å±æ§ |
| | | regions: [{ |
| | | name: 'åæµ·è¯¸å²', |
| | | selected: false, |
| | | emphasis: { |
| | | disabled: true |
| | | //å°å¾çé´å½±ä¸æ¾ç¤ºåæ²è¯¸å² |
| | | regions: [ |
| | | { |
| | | name: 'åæµ·è¯¸å²', |
| | | itemStyle: { |
| | | // éèå°å¾ |
| | | normal: { |
| | | opacity: 0, // 为 0 æ¶ä¸ç»å¶è¯¥å¾å½¢ |
| | | }, |
| | | emphasis: { |
| | | opacity: 0, |
| | | }, |
| | | }, |
| | | label: { |
| | | show: false, // éèæå |
| | | }, |
| | | }, |
| | | itemStyle: { |
| | | areaColor: '#00000000', |
| | | borderColor: '#00000000' |
| | | } |
| | | }], |
| | | z: 1 |
| | | ], |
| | | }, |
| | | //é
ç½®å±æ§ |
| | | series: [ |
| | | // å°å¾é
ç½® |
| | | { |
| | | type: 'map', |
| | | map: 'china', |
| | | zoom: 1.6, |
| | | tooltip: { |
| | | show: false |
| | | }, |
| | | label: { |
| | | show: true, // æ¾ç¤ºç份åç§° |
| | | color: '#fff', |
| | | fontSize: 13, |
| | | shadowColor: '#fff', |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 2, |
| | | shadowOffsetY: 2, |
| | | textBorderColor: '#fff', |
| | | // rotate: 90, |
| | | align: 'center' |
| | | }, |
| | | top: '28%', |
| | | left: 'center', |
| | | aspectScale: 0.75, |
| | | roam: false, // å°å¾ç¼©æ¾å平移 |
| | | itemStyle: { |
| | | borderColor: '#4278a3', // çåç线é¢è² é´å½±ææç |
| | | borderWidth: 1, |
| | | areaColor: '#1d3f71', |
| | | opacity: 1 |
| | | }, |
| | | // å»é¤éä¸ç¶æ |
| | | select: { |
| | | disabled: true |
| | | }, |
| | | emphasis: { // èç¦åé¢è² |
| | | disabled: false, // å¼å¯é«äº® |
| | | zoom: 1.4, |
| | | aspectScale: 0.9, // æ¯ä¾ |
| | | zlevel: 1, // 设置å°å¾çå±çº§ï¼å°è¯¥å°å¾ä¸ç§»ï¼ç±»ä¼¼z-indexï¼ |
| | | emphasis: { |
| | | // é¼ æ hoveræ¯å¦æ¾ç¤ºå
容ï¼å¯èªå·±è°è |
| | | label: { |
| | | align: 'center', |
| | | color: '#04CFF5' |
| | | show: true, |
| | | color: '#fff', |
| | | }, |
| | | itemStyle: { |
| | | color: '#ffffff', |
| | | areaColor: '#3c87b2'// é´å½±ææ é¼ æ ç§»å¨ä¸å»çé¢è² |
| | | } |
| | | }, |
| | | z: 2 |
| | | }, |
| | | // ç¹ |
| | | { |
| | | name: 'companyPoint', |
| | | type: 'effectScatter', |
| | | coordinateSystem: 'geo', |
| | | showEffectOn: 'render', |
| | | // zlevel: 2, // zlevelç¨äº Canvas åå± ç¸åçç»å¶å¨åä¸ä¸ªcanvasä¸ |
| | | rippleEffect: { |
| | | number: 3, // 波纹æ°é |
| | | period: 10, // å¨ç»å¨æ æ°å¼è¶å¤§ï¼æ³¢å¨è¶æ
¢ |
| | | scale: 3.5, // å¨ç»ä¸æ³¢çº¹çæå¤§ç¼©æ¾æ¯ä¾ |
| | | brushType: 'stroke' // 波纹çç»å¶æ¹å¼ stroke fill |
| | | show: true, |
| | | color: '#00114F', // é«äº®æåé¢è² |
| | | borderColor: '#a4d0ec', // é«äº®è¾¹æ¡é¢è² |
| | | areaColor: '#63d5c1', //é«äº®åºåé¢è² |
| | | }, |
| | | }, |
| | | label: { |
| | | // å°å¾æ 注 |
| | | show: false, |
| | | triggerOn: 'click', |
| | | position: 'right', |
| | | formatter: '{b}', |
| | | color: '#97e9e1', |
| | | fontSize: 14 |
| | | }, |
| | | symbol: 'circle', |
| | | symbolSize: 8, |
| | | data: points, |
| | | tooltip: { |
| | | show: true, |
| | | triggerOn: 'click', |
| | |
| | | <span class="dot bj"></span> |
| | | <span class="item-state-num"> |
| | | <span class="text">æ¬æåºåºéï¼</span> |
| | | <span class="num">${params.data.total}䏿¯</span> |
| | | <span class="num">${params.data.monthNum}䏿¯</span> |
| | | </span> |
| | | </div> |
| | | <div class="item-state-con"> |
| | | <span class="dot yj"></span> |
| | | <span class="item-state-num"> |
| | | <span class="text">æ¬å¹´åºåºé</span> |
| | | <span class="num">${params.data.yx}䏿¯</span> |
| | | <span class="text">æ¬å¹´åºåºéï¼</span> |
| | | <span class="num">${params.data.yearNum}䏿¯</span> |
| | | </span> |
| | | </div> |
| | | </div>` |
| | | } |
| | | }, |
| | | z: 4 |
| | | itemStyle: { |
| | | borderColor: '#a4d0ec', // ç份边æ¡é¢è² |
| | | borderWidth: 1, // ç份边æ¡å®½åº¦ |
| | | // shadowBlur: 5, // ç份边æ¡èç¦ |
| | | areaColor: '#3c5997', |
| | | }, |
| | | center: [105.194115019531, 35.582111640625], // 设置å°å¾ä¸å¿ |
| | | data: mapData, |
| | | }, |
| | | // å°å¾çº¿çå¨ç»ææ |
| | | // { |
| | | // name: 'arrowline', |
| | | // type: 'lines', |
| | | // // zlevel: 1, |
| | | // effect: { |
| | | // show: true, |
| | | // period: 3, // ç®å¤´æåé度ï¼å¼è¶å°é度è¶å¿« |
| | | // trailLength: 0.1, // ç¹æå°¾è¿¹é¿åº¦[0,1]å¼è¶å¤§ï¼å°¾è¿¹è¶é¿é |
| | | // symbol: 'arrow', // ç®å¤´å¾æ |
| | | // symbolSize: 6 // 徿 å¤§å° |
| | | // }, |
| | | // lineStyle: { |
| | | // color: '#1DE9B6', |
| | | // width: 2, // 线æ¡å®½åº¦ |
| | | // opacity: 0.1, // 尾迹线æ¡éæåº¦ |
| | | // curveness: 0.2 // å°¾è¿¹çº¿æ¡æ²ç´åº¦ |
| | | // }, |
| | | // data: lineToLf, |
| | | // z: 3 |
| | | // } |
| | | ] |
| | | ], |
| | | } |
| | | myChart.setOption(option) |
| | | window.addEventListener('resize', function () {//æ§è¡ |
| | | myChart.resize() |
| | | }) |
| | | } |
| | | const initEnergy = (list) => { |
| | | const getMap = () => { |
| | | mapYearAndMonthOutList({ |
| | | factoryCode: activeCity.value.code |
| | | }).then(res => { |
| | | const temp = res.data || [] |
| | | mapList.value = temp.map(item => { |
| | | item.value = item.monthNum |
| | | item.name = item.provinceName |
| | | return item |
| | | }) |
| | | initMap() |
| | | }) |
| | | } |
| | | const initEnergy = () => { |
| | | var myChart = echarts.init(document.querySelector('.energyRef')) |
| | | // ç»å¶å¾è¡¨ |
| | | myChart.setOption({ |
| | |
| | | axisLine: { |
| | | show: false |
| | | }, |
| | | data: list.map(i => i.dateStr) |
| | | data: dataList1.value.map(i => i.dateStr) |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | data: list.map(i => i.inTransitNum), |
| | | data: dataList1.value.map(i => i.waitNum), |
| | | itemStyle: { |
| | | normal: { |
| | | color: { |
| | |
| | | color: '#000000', |
| | | fontSize: 10 |
| | | }, |
| | | data: list.map(i => i.inTransitNum), |
| | | data: dataList1.value.map(i => i.ingNum), |
| | | itemStyle: { |
| | | normal: { |
| | | color: { |
| | |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | data: list.map(i => i.arriveNum) |
| | | data: dataList1.value.map(i => i.doneNum) |
| | | } |
| | | ] |
| | | }) |
| | | myChart.on('click', function (params) { |
| | | console.log(params.name) |
| | | // console.log(params.seriesName) |
| | | // console.log(params.name) |
| | | const item = dataList1.value.find(i => i.dateStr == params.name) |
| | | // console.log(params); |
| | | active1List.value = params.seriesName == 'å¨é' ? item.ingList : params.seriesName == 'å°è´§' ? item.doneList : item.waitList |
| | | showModal1.value = true |
| | | }) |
| | | window.addEventListener('resize', function () {//æ§è¡ |
| | | myChart.resize() |
| | | }) |
| | | } |
| | | const showModal1 = ref(false) |
| | | const active1List = ref([]) |
| | | |
| | | const dataList1 = ref([]) |
| | | const getData1 = () => { |
| | | getStorearriveGoodsList().then(res => { |
| | | initEnergy(res.data || []) |
| | | getStorearriveGoodsList({ |
| | | factoryCode: activeCity.value.code |
| | | }).then(res => { |
| | | dataList1.value = res.data || [] |
| | | initEnergy() |
| | | }) |
| | | } |
| | | |
| | |
| | | const showModal = ref(false) |
| | | const modalInfo = ref({}) |
| | | const modalTab = ref(0) |
| | | const pager = ref({ |
| | | page: 0, |
| | | rows: 10 |
| | | }) |
| | | const modalTabClick = (val) => { |
| | | modalTab.value = val |
| | | } |
| | | const taskClick = (item) => { |
| | | modalInfo.value = item |
| | | showModal.value = true |
| | | kzorderInfo({ contractNumber: item.contractNumber }).then(res => { |
| | | modalInfo.value = res.data |
| | | showModal.value = true |
| | | console.log('modalInfo.value', modalInfo.value) |
| | | nextTick(() => { |
| | | initGdMap() |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | |
| | | const mapContainer = ref(null) |
| | | function distance(obj) { |
| | | const lat1 = obj.deliveryLat |
| | | const lng1 = obj.deliveryLon |
| | | const lat2 = obj.receiveLat |
| | | const lng2 = obj.receiveLon |
| | | const radLat1 = rad(lat1) |
| | | const radLat2 = rad(lat2) |
| | | const a = radLat1 - radLat2 |
| | | const b = rad(lng1) - rad(lng2) |
| | | const Haversin = Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), |
| | | 2) |
| | | const radius = 6378137 // å°çåå¾ |
| | | return 2 * radius * Math.asin(Math.sqrt(Haversin)) |
| | | } |
| | | function rad(d) { |
| | | return d * Math.PI / 180.0 |
| | | } |
| | | const initGdMap = () => { |
| | | const obj = modalInfo.value |
| | | let scale = 5 |
| | | console.log((obj.deliveryLon + obj.receiveLon)) |
| | | const distancet = distance(obj) |
| | | if (distancet > 1200000) { |
| | | scale = 3 |
| | | } else if (distancet < 1200000 && distancet > 500000) { |
| | | scale = 4 |
| | | } else if (distancet < 500000) { |
| | | scale = 5 |
| | | } else { |
| | | scale = 5 |
| | | } |
| | | console.log('distancet', distancet) |
| | | |
| | | const map = new AMap.Map(mapContainer.value, { |
| | | zoom: scale, // åå§ç¼©æ¾çº§å« |
| | | center: [(Number(obj.deliveryLon) + Number(obj.receiveLon)) / 2, (Number(obj.deliveryLat) + Number(obj.receiveLat)) / 2], // åå§ä¸å¿ç¹ï¼åäº¬åæ ï¼ |
| | | }) |
| | | AMap.plugin(['AMap.ToolBar'], () => { |
| | | const toolbar = new AMap.ToolBar() |
| | | map.addControl(toolbar) |
| | | }) |
| | | const marker1 = new AMap.Marker({ |
| | | position: [obj.deliveryLon, obj.deliveryLat], // æ è®°ç¹1åæ |
| | | icon: new AMap.Icon({ |
| | | size: new AMap.Size(28, 32), // 徿 å¤§å° |
| | | image: fahuoImg, // 徿 å¾çURL |
| | | imageSize: new AMap.Size(28, 32), // 徿 å®é
å¤§å° |
| | | }), |
| | | title: 'æ è®°ç¹1', // é¼ æ æ¬åæ¶æ¾ç¤ºçæ é¢ |
| | | }) |
| | | map.add(marker1) |
| | | const marker2 = new AMap.Marker({ |
| | | position: [obj.receiveLon, obj.receiveLat], // æ è®°ç¹1åæ |
| | | icon: new AMap.Icon({ |
| | | size: new AMap.Size(28, 32), // 徿 å¤§å° |
| | | image: shouImg, // 徿 å¾çURL |
| | | imageSize: new AMap.Size(28, 32), // 徿 å®é
å¤§å° |
| | | }), |
| | | title: 'æ è®°ç¹1', // é¼ æ æ¬åæ¶æ¾ç¤ºçæ é¢ |
| | | }) |
| | | map.add(marker2) |
| | | // ç»å¶è½¨è¿¹ |
| | | const polylineList = obj.gisList[0].gisList || [] |
| | | |
| | | const polyline = new AMap.Polyline({ |
| | | path: [ |
| | | polylineList.map(i => { |
| | | return [i.lon, i.lat] |
| | | }) |
| | | ], |
| | | strokeColor: 'red', // 线çé¢è² |
| | | strokeWeight: 3, // 线ç宽度 |
| | | strokeOpacity: 0.8, // 线çéæåº¦ |
| | | strokeStyle: 'solid', // çº¿çæ ·å¼ |
| | | lineJoin: 'round', // æçº¿æç¹çæ ·å¼ |
| | | }) |
| | | map.add(polyline) |
| | | } |
| | | const getData2 = () => { |
| | | getStoreTaskList({ code: taskCode.value }).then(res => { |
| | | let temp = res.data || [] |
| | | // temp = temp.splice(0, 5) |
| | | |
| | | getStoreTaskList({ |
| | | pager: pager.value, |
| | | parameters: { |
| | | contractNumber: taskCode.value, |
| | | facrotyCodeList: activeCity.value.code ? [activeCity.value.code] : [] |
| | | } |
| | | }).then(res => { |
| | | let temp = res.data.rows || [] |
| | | transportTask.value = temp.map(item => { |
| | | item.taskDate = item.taskDate.slice(5, 16) |
| | | if (item.transportDate) { |
| | | item.transportDate = item.transportDate.slice(5, 16) |
| | | } |
| | | return item |
| | | }) |
| | | }) |
| | |
| | | |
| | | const cneterData = ref({}) |
| | | const showPro = ref(false) |
| | | const cityList = ref([ |
| | | { name: 'å
¨ç', id: 0 }, |
| | | { name: 'åè¥ä»', id: 1 }, |
| | | { name: 'èæ¹ä»', id: 2 }, |
| | | { name: 'æ»å·ä»', id: 3 }, |
| | | { name: 'èå ä»', id: 4 }, |
| | | ]) |
| | | const activeCity = ref({ name: 'å
¨ç', id: 0 }) |
| | | const activeTab1 = ref(0) |
| | | const cityList = ref() |
| | | const getCity = () => { |
| | | kzfactoryList().then(res => { |
| | | cityList.value = res.data |
| | | }) |
| | | } |
| | | const activeCity = ref({ name: 'å
¨ç', code: '' }) |
| | | const colors = ['#0193FE', '#FFB642'] |
| | | const StockOutData = ref([]) |
| | | const cityClick = (item) => { |
| | | activeCity.value = item |
| | | showPro.value = false |
| | | cneterData.value = {} |
| | | setTimeout(() => { |
| | | getData3() |
| | | }, 400) |
| | | changeCity() |
| | | } |
| | | const initEchart1 = () => { |
| | | const myChart = echarts.init(document.getElementById('echart1')) |
| | | |
| | | const option = { |
| | | tooltip: { |
| | | trigger: 'item' |
| | |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | data: StockOutData.value |
| | | data: StockOutData.value.arr |
| | | } |
| | | ] |
| | | } |
| | |
| | | myChart.resize() |
| | | }) |
| | | } |
| | | const getStockOut = () => { |
| | | let arr = [] |
| | | arr.push({ name: 'çå
', value: (cneterData.value.yearProvinceRata * 100).toFixed(0) + '%' }) |
| | | arr.push({ name: 'çå¤', value: ((1 - cneterData.value.yearProvinceRata) * 100).toFixed(0) + '%' }) |
| | | arr.sort((a, b) => b.value - a.value) |
| | | StockOutData.value = arr |
| | | initEchart1() |
| | | } |
| | | const tab1Click = () => { |
| | | activeTab1.value = val |
| | | |
| | | const activeTab1 = ref(0) |
| | | const StockOutData = ref({}) |
| | | const getStockOut = () => { |
| | | kztotalOutQtyNum({ type: activeTab1.value, factoryCode: activeCity.value.code }).then(res => { |
| | | if (res.code == 200) { |
| | | let obj = res.data |
| | | obj.currentNum = (obj.currentOutNum + obj.currentInNum).toFixed(0) * 1 |
| | | obj.lastNum = (obj.lastOutNum + obj.lastInNum).toFixed(0) * 1 |
| | | // obj.sameNum = (obj.sameOutNum + obj.sameInNum).toFixed(0) |
| | | let arr = [] |
| | | arr.push({ name: 'çå
', value: obj.currentInNum, rate: obj.currentInNum == 0 && obj.currentOutNum == 0 ? 0 : (obj.currentInNum / (obj.currentInNum + obj.currentOutNum) * 100).toFixed(0) + '%' }) |
| | | arr.push({ name: 'çå¤', value: obj.currentOutNum, rate: obj.currentInNum == 0 && obj.currentOutNum == 0 ? 0 : (obj.currentOutNum / (obj.currentInNum + obj.currentOutNum) * 100).toFixed(0) + '%' }) |
| | | obj.arr = arr |
| | | |
| | | StockOutData.value = obj |
| | | initEchart1() |
| | | } |
| | | |
| | | }) |
| | | } |
| | | const tab1Click = (val) => { |
| | | activeTab1.value = val |
| | | getStockOut() |
| | | } |
| | | const getData3 = () => { |
| | | getStorecenterData().then(res => { |
| | | cneterData.value = res.data || {} |
| | | getStockOut() |
| | | }) |
| | | } |
| | | |
| | | const activeTabs = ref(0) |
| | | const dataList4 = ref([]) |
| | | const initEchart4 = () => { |
| | | // åºäºåå¤å¥½çdomï¼åå§åechartså®ä¾ |
| | | const myChart = echarts.init(document.getElementById('echart4')) |
| | | // ç»å¶å¾è¡¨ |
| | | myChart.setOption({ |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | backgroundColor: '#091123', |
| | | axisPointer: { |
| | | type: 'line' |
| | | }, |
| | | // formatter: function (params) { |
| | | // setTimeout(() => { |
| | | // }) |
| | | // return ` |
| | | // <div style="background-color: #091123;margin: -12px;padding: 14px;border: 2px solid rgba(1,217,254,0.5);color: #fff;"> |
| | | // <div>${params[0].name}æ»éå®é¢(ä¸å
)</div> |
| | | // <div style="display: flex;align-items: center;"> |
| | | // <div style="width: 10px;height: 10px;border-radius: 50%;background-color: #ebbf40;"></div> |
| | | // <div style="margin: 0 4px 0 6px;">æ»éå®</div> |
| | | // <span style="color: #ebbf40;">${params[0].value}</span> |
| | | // </div> |
| | | // </div> |
| | | // ` |
| | | // } |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: dataList4.value.map(i => i.dateStr) |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: '䏿¯', |
| | | nameTextStyle: { |
| | | padding: [0, 0, 0, -16] // å个æ°ååå«ä¸ºä¸å³ä¸å·¦ä¸åä½ç½®è·ç¦» |
| | | }, |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | //è¿éè¾å
¥çº¿æ¡çæ ·å¼ |
| | | color: 'rgba(255,255,255,0.14)', |
| | | type: 'dashed', |
| | | }, |
| | | splitNumber: 4 |
| | | } |
| | | }, |
| | | legend: { |
| | | itemGap: 24, |
| | | icon: 'rect', |
| | | right: '12px', |
| | | top: '0', |
| | | itemWidth: 16, |
| | | itemHeight: 2, |
| | | textStyle: { |
| | | color: '#fff', |
| | | borderColor: '#fff' |
| | | }, |
| | | data: ['æ»å
¥åºé', 'æ»åºåºé', 'åºåé'] |
| | | }, |
| | | grid: { |
| | | top: '18%', |
| | | left: '0%', |
| | | right: '2%', |
| | | bottom: '2%', |
| | | containLabel: true |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'æ»å
¥åºé', |
| | | data: dataList4.value.map(item => { |
| | | return { |
| | | name: item.dateStr, |
| | | value: item.totalInNum, |
| | | } |
| | | }), |
| | | type: 'line', |
| | | areaStyle: { |
| | | normal: { |
| | | color: { |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [ |
| | | { |
| | | offset: 0, |
| | | color: "#4191f6" // 0% å¤çé¢è² |
| | | }, |
| | | { |
| | | offset: .4, |
| | | color: "#203d79" // 0% å¤çé¢è² |
| | | }, |
| | | { |
| | | offset: 1, |
| | | color: "#1b1b12" // 100% å¤çé¢è² |
| | | }], |
| | | globalCoord: false // 缺ç为 false |
| | | } |
| | | } |
| | | }, |
| | | lineStyle: { // çº¿æ¡æ ·å¼ |
| | | color: { |
| | | type: 'linear', |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [{ |
| | | offset: 0, color: '#4191f6' // 0% å¤çé¢è² |
| | | }, { |
| | | offset: 1, color: '#4191f6' // 100% å¤çé¢è² |
| | | }], |
| | | }, |
| | | width: 1.5, // 线æ¡ç²ç» |
| | | }, |
| | | symbol: 'circle', |
| | | symbolSize: 4, |
| | | itemStyle: { |
| | | color: "#4190f4", |
| | | borderColor: "rgba(255,255,255,.3)", |
| | | borderWidth: 4, |
| | | }, |
| | | smooth: true |
| | | }, |
| | | { |
| | | name: 'æ»åºåºé', |
| | | data: dataList4.value.map(item => { |
| | | return { |
| | | name: item.dateStr, |
| | | value: item.totalOutNum, |
| | | } |
| | | }), |
| | | type: 'line', |
| | | areaStyle: { |
| | | normal: { |
| | | color: { |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [{ |
| | | offset: 0, |
| | | color: "rgba(192, 156, 53,.7)" // 0% å¤çé¢è² |
| | | }, { |
| | | offset: 1, |
| | | color: "#1b1b12" // 100% å¤çé¢è² |
| | | }], |
| | | globalCoord: false // 缺ç为 false |
| | | } |
| | | } |
| | | }, |
| | | lineStyle: { // çº¿æ¡æ ·å¼ |
| | | color: { |
| | | type: 'linear', |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [{ |
| | | offset: 0, color: '#F3BD00' // 0% å¤çé¢è² |
| | | }, { |
| | | offset: 1, color: '#F3BD00' // 100% å¤çé¢è² |
| | | }], |
| | | }, |
| | | width: 2, // 线æ¡ç²ç» |
| | | }, |
| | | symbol: 'circle', |
| | | symbolSize: 4, |
| | | itemStyle: { |
| | | color: "#F3BD00", |
| | | borderColor: "rgba(255,255,255,.3)", |
| | | borderWidth: 4, |
| | | }, |
| | | smooth: true |
| | | }, |
| | | { |
| | | name: 'åºåé', |
| | | data: dataList4.value.map(item => { |
| | | return { |
| | | name: item.dateStr, |
| | | value: item.stockNum, |
| | | } |
| | | }), |
| | | type: 'line', |
| | | areaStyle: { |
| | | normal: { |
| | | color: { |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [{ |
| | | offset: 0, |
| | | color: "rgba(218, 233, 250)" // 0% å¤çé¢è² |
| | | }, { |
| | | offset: 1, |
| | | color: "#1b1b12" // 100% å¤çé¢è² |
| | | }], |
| | | globalCoord: false // 缺ç为 false |
| | | } |
| | | } |
| | | }, |
| | | lineStyle: { // çº¿æ¡æ ·å¼ |
| | | color: { |
| | | type: 'linear', |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [{ |
| | | offset: 0, color: '#fff' // 0% å¤çé¢è² |
| | | }, { |
| | | offset: 1, color: '#fff' // 100% å¤çé¢è² |
| | | }], |
| | | }, |
| | | width: 2, // 线æ¡ç²ç» |
| | | }, |
| | | symbol: 'circle', |
| | | symbolSize: 4, |
| | | itemStyle: { |
| | | color: "#fff", |
| | | borderColor: "rgba(255,255,255,.3)", |
| | | borderWidth: 4, |
| | | }, |
| | | smooth: true |
| | | }, |
| | | ] |
| | | }) |
| | | |
| | | window.addEventListener('resize', function () {//æ§è¡ |
| | | myChart.resize() |
| | | }) |
| | | } |
| | | const tabsClick4 = (tab) => { |
| | | activeTabs.value = tab |
| | | getData4() |
| | | } |
| | | const getData4 = () => { // è¿éåè¿è¥ |
| | | getStoreOperationList({ queryType: activeTabs.value }).then(res => { |
| | | console.log('res', res) |
| | | dataList4.value = res.data || [] |
| | | // initEchart4() |
| | | }) |
| | | } |
| | | |
| | | const dataList5 = ref([]) |
| | | const data5 = ref({}) |
| | | const data6 = ref({}) |
| | | const data7 = ref({}) |
| | | const initEchart5 = () => { |
| | | // åºäºåå¤å¥½çdomï¼åå§åechartså®ä¾ |
| | | const myChart = echarts.init(document.getElementById('echart5')) |
| | |
| | | itemGap: 12, |
| | | // icon: 'circle', |
| | | right: '16%', |
| | | top: '1%', |
| | | top: '0%', |
| | | data: ['æ»åºå', 'å½ååºå', 'åºåå©ç¨ç'], |
| | | itemWidth: 20, |
| | | itemHeight: 10, |
| | |
| | | axisTick: { |
| | | show: false, |
| | | }, |
| | | data: dataList5.value.map(i => i.placeName), |
| | | data: data5.value.detailList.map(i => i.factoryName), |
| | | }], |
| | | yAxis: [ |
| | | { |
| | |
| | | color: '#869CC9', |
| | | }, |
| | | name: '䏿¯', |
| | | nameGap: 24, |
| | | nameGap: 16, |
| | | type: 'value', |
| | | axisLabel: { |
| | | show: true, |
| | |
| | | { |
| | | type: 'value', |
| | | name: '%', |
| | | nameGap: 24, |
| | | nameGap: 16, |
| | | min: 0, |
| | | max: 100, |
| | | interval: 25, |
| | |
| | | }, |
| | | barBorderRadius: [30, 30, 0, 0], |
| | | }, |
| | | data: dataList5.value.map(i => i.totalStockNum) |
| | | data: data5.value.detailList.map(i => i.totalNum) |
| | | }, |
| | | { |
| | | name: 'å½ååºå', |
| | |
| | | }, |
| | | barBorderRadius: [30, 30, 0, 0], |
| | | }, |
| | | data: dataList5.value.map(i => i.nowStockNum) |
| | | data: data5.value.detailList.map(i => i.currentNum) |
| | | }, |
| | | { |
| | | name: 'åºåå©ç¨ç', |
| | |
| | | color: '#fff', |
| | | // formatter: '{c}' + '%', |
| | | }, |
| | | data: dataList5.value.map(i => i.stockRataNum) |
| | | data: data5.value.detailList.map(i => i.useRate) |
| | | } |
| | | ] |
| | | }) |
| | |
| | | legend: { |
| | | itemGap: 12, |
| | | // icon: 'circle', |
| | | right: '16%', |
| | | top: '1%', |
| | | right: '10%', |
| | | top: '0', |
| | | data: ['åºåºè½å', '彿¥åºåºé', 'åºåå©ç¨ç'], |
| | | itemWidth: 20, |
| | | itemHeight: 10, |
| | |
| | | axisTick: { |
| | | show: false, |
| | | }, |
| | | data: dataList5.value.map(i => i.placeName), |
| | | data: data6.value.detailList.map(i => i.factoryName), |
| | | }], |
| | | yAxis: [ |
| | | { |
| | |
| | | color: '#869CC9', |
| | | }, |
| | | name: '䏿¯', |
| | | nameGap: 24, |
| | | nameGap: 16, |
| | | type: 'value', |
| | | axisLabel: { |
| | | show: true, |
| | |
| | | { |
| | | type: 'value', |
| | | name: '%', |
| | | nameGap: 24, |
| | | nameGap: 16, |
| | | min: 0, |
| | | max: 100, |
| | | interval: 25, |
| | |
| | | { |
| | | name: 'åºåºè½å', |
| | | type: 'bar', |
| | | barWidth: 10, |
| | | barWidth: 14, |
| | | barGap: '60%', |
| | | label: { |
| | | show: false, |
| | |
| | | }, |
| | | barBorderRadius: [30, 30, 0, 0], |
| | | }, |
| | | data: dataList5.value.map(i => i.totalStockNum), |
| | | data: data6.value.detailList.map(i => i.totalNum), |
| | | barGap: '-100%' // 设置æ±åå®å
¨éå |
| | | |
| | | }, |
| | | { |
| | | name: '彿¥åºåºé', |
| | | type: 'bar', |
| | | barWidth: 10, |
| | | barWidth: 14, |
| | | label: { |
| | | show: false, |
| | | position: 'top', |
| | |
| | | }, |
| | | barBorderRadius: [30, 30, 0, 0], |
| | | }, |
| | | data: dataList5.value.map(i => i.nowStockNum), |
| | | data: data6.value.detailList.map(i => i.currentNum), |
| | | barGap: '-100%' // 设置æ±åå®å
¨éå |
| | | }, |
| | | { |
| | |
| | | color: '#fff', |
| | | // formatter: '{c}' + '%', |
| | | }, |
| | | data: dataList5.value.map(i => i.stockRataNum) |
| | | data: data6.value.detailList.map(i => i.useRate) |
| | | } |
| | | ] |
| | | }) |
| | |
| | | itemGap: 12, |
| | | // icon: 'circle', |
| | | right: '16%', |
| | | top: '1%', |
| | | top: '0%', |
| | | data: ['æ»åºå', 'å½ååºå', 'åºåå©ç¨ç'], |
| | | itemWidth: 20, |
| | | itemHeight: 10, |
| | |
| | | axisTick: { |
| | | show: false, |
| | | }, |
| | | data: dataList5.value.map(i => i.placeName), |
| | | data: data7.value.detailList.map(i => i.factoryName), |
| | | }], |
| | | yAxis: [ |
| | | { |
| | |
| | | color: '#869CC9', |
| | | }, |
| | | name: '䏿¯', |
| | | nameGap: 24, |
| | | nameGap: 16, |
| | | type: 'value', |
| | | axisLabel: { |
| | | show: true, |
| | |
| | | { |
| | | type: 'value', |
| | | name: '%', |
| | | nameGap: 24, |
| | | nameGap: 16, |
| | | min: 0, |
| | | max: 100, |
| | | interval: 25, |
| | |
| | | }, |
| | | barBorderRadius: [30, 30, 0, 0], |
| | | }, |
| | | data: dataList5.value.map(i => i.totalStockNum) |
| | | data: data7.value.detailList.map(i => i.totalNum) |
| | | }, |
| | | { |
| | | name: 'å½ååºå', |
| | |
| | | }, |
| | | barBorderRadius: [30, 30, 0, 0], |
| | | }, |
| | | data: dataList5.value.map(i => i.nowStockNum) |
| | | data: data7.value.detailList.map(i => i.currentNum) |
| | | }, |
| | | { |
| | | name: 'åºåå©ç¨ç', |
| | |
| | | color: '#fff', |
| | | // formatter: '{c}' + '%', |
| | | }, |
| | | data: dataList5.value.map(i => i.stockRataNum) |
| | | data: data7.value.detailList.map(i => i.useRate) |
| | | } |
| | | ] |
| | | }) |
| | |
| | | }) |
| | | } |
| | | const getData5 = () => { |
| | | getStoreenergyDataList({ queryType: activeTabs.value }).then(res => { |
| | | console.log('res', res) |
| | | dataList5.value = res.data || [] |
| | | kzinventoryUseRate().then(res => { |
| | | data5.value = res.data |
| | | data5.value.detailList.forEach(item => { |
| | | item.useRate = item.useRate * 100 |
| | | }) |
| | | initEchart5() |
| | | }) |
| | | outAbilityUseRate().then(res => { |
| | | data6.value = res.data |
| | | data6.value.detailList.forEach(item => { |
| | | item.useRate = item.useRate * 100 |
| | | }) |
| | | initEchart6() |
| | | }) |
| | | tranportAbilityUseRate().then(res => { |
| | | data7.value = res.data |
| | | data7.value.detailList.forEach(item => { |
| | | item.useRate = item.useRate * 100 |
| | | }) |
| | | initEchart7() |
| | | }) |
| | | |
| | | // initEchart6() |
| | | // initEchart7() |
| | | |
| | | } |
| | | |
| | | |
| | | const autoplayFlag = (list = [], leng = 4, time = 2000) => { |
| | | if (list.length > leng) { |
| | |
| | | }) |
| | | } |
| | | |
| | | const initData = () => { |
| | | const changeCity = () => { |
| | | getData1() |
| | | getStockOut() |
| | | getMap() |
| | | getData2() |
| | | getData3() |
| | | getData4() |
| | | getData5() |
| | | } |
| | | |
| | | onMounted(() => { |
| | | initData() |
| | | |
| | | initMap() |
| | | // initEchart2() |
| | | // initEchart3() |
| | | // initEchart4() |
| | | // initEchart5() |
| | | getCity() |
| | | changeCity() |
| | | getData5() |
| | | setTimeout(() => { |
| | | loopFn1() |
| | | }, 12000) |
| | |
| | | |
| | | .second_title { |
| | | margin-bottom: 10px; |
| | | |
| | | input { |
| | | font-size: 12px; |
| | | } |
| | | } |
| | | |
| | | .list_wrap { |
| | |
| | | text-overflow: ellipsis; |
| | | } |
| | | |
| | | .status { |
| | | flex: 5; |
| | | } |
| | | } |
| | | |
| | | .avtive { |
| | | background: rgba(1, 171, 254, 0.2); |
| | | color: #01D9FE; |
| | | font-weight: 600; |
| | | } |
| | | |
| | | .header { |
| | |
| | | margin-right: 4px; |
| | | display: flex; |
| | | position: relative; |
| | | |
| | | .node { |
| | | position: absolute; |
| | | left: 69%; |
| | | top: -20px; |
| | | width: 22px; |
| | | height: 70px; |
| | | z-index: 999; |
| | | overflow: hidden; |
| | | |
| | | .node_icon { |
| | | background-color: #051623; |
| | | height: 16px; |
| | | |
| | | .icon { |
| | | background-color: #25333f; |
| | | height: 16px; |
| | | width: 16px; |
| | | position: absolute; |
| | | top: 20px; |
| | | right: -8px; |
| | | border-radius: 50%; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .icon2 { |
| | | right: 12px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .box { |
| | |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | z-index: 99; |
| | | z-index: 9999; |
| | | |
| | | .tag { |
| | | position: absolute; |
| | |
| | | /* transform: scale(.2); */ |
| | | } |
| | | |
| | | .list { |
| | | .modal1 { |
| | | width: 500px; |
| | | height: 224px; |
| | | background: rgba(0, 86, 255, 0.1); |
| | | backdrop-filter: blur(5px); |
| | | padding: 12px 30px; |
| | | position: absolute; |
| | | left: 24px; |
| | | bottom: 10px; |
| | | top: 36px; |
| | | left: 12px; |
| | | border: 1px solid #4ba7f7; |
| | | |
| | | .item { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 15px; |
| | | color: #D2E0FF; |
| | | margin-top: 20px; |
| | | .icon { |
| | | width: 22px; |
| | | height: 22px; |
| | | background: rgba(255, 125, 9, 0.8); |
| | | margin-right: 12px; |
| | | } |
| | | .icon2{ |
| | | background: rgba(254,175,1,0.8); |
| | | } |
| | | .icon3{ |
| | | background: rgba(9,250,205,0.8); |
| | | } |
| | | .icon4{ |
| | | background: #225BA1; |
| | | .list { |
| | | height: 192px; |
| | | overflow: auto; |
| | | |
| | | .line { |
| | | display: flex; |
| | | align-items: center; |
| | | height: 32px; |
| | | color: #fff; |
| | | font-size: 12px; |
| | | |
| | | &:nth-of-type(2n) { |
| | | background: rgba(134, 156, 201, 0.05); |
| | | } |
| | | |
| | | .item { |
| | | flex: 2; |
| | | } |
| | | } |
| | | |
| | | .head { |
| | | font-weight: 500; |
| | | font-size: 13px; |
| | | color: #01D9FE; |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |
| | |
| | | top: 20%; |
| | | left: 50%; |
| | | transform: translate(-50%, 0); |
| | | z-index: 999; |
| | | z-index: 99999; |
| | | padding: 24px; |
| | | |
| | | #map-container { |
| | | width: 300px; |
| | | height: 180px; |
| | | position: absolute; |
| | | top: 220px; |
| | | right: 10px; |
| | | z-index: 999999; |
| | | :deep(.amap-markers){ |
| | | left: -12px !important; |
| | | top: -32px !important; |
| | | } |
| | | } |
| | | |
| | | .title_head { |
| | | display: flex; |
| | |
| | | .info { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | background-color: #0d2845; |
| | | border-radius: 4px; |
| | | padding: 10px 20px 0; |
| | | margin-bottom: 16px; |
| | | |
| | | .item { |
| | | display: flex; |
| | |
| | | } |
| | | } |
| | | |
| | | .tabs { |
| | | display: flex; |
| | | border-bottom: 1px solid rgba(255, 255, 255, 0.16); |
| | | margin: 0 -24px; |
| | | margin-bottom: 20px; |
| | | padding-left: 12px; |
| | | |
| | | .tab { |
| | | color: #869CC9; |
| | | font-size: 14px; |
| | | margin-left: 12px; |
| | | height: 42px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | border-bottom: 2px solid #06182e; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .active { |
| | | font-weight: 500; |
| | | font-size: 15px; |
| | | color: #00F2F3; |
| | | border-bottom: 2px solid #00F2F3; |
| | | } |
| | | } |
| | | |
| | | .ht_info { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | padding: 10px 10px 0; |
| | | background-color: #0d2845; |
| | | margin-bottom: 20px; |
| | | |
| | | .item { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 13px; |
| | | width: 55%; |
| | | margin-bottom: 8px; |
| | | |
| | | &:nth-of-type(2n+1) { |
| | | width: 45%; |
| | | } |
| | | |
| | | .la { |
| | | color: #01D9FE; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .tab1 { |
| | | .title { |
| | | .logistics_wrap { |
| | | .m_title { |
| | | display: flex; |
| | | align-items: center; |
| | | font-style: 16px; |
| | |
| | | } |
| | | } |
| | | |
| | | .item { |
| | | display: flex; |
| | | margin-left: 6px; |
| | | .fu_list { |
| | | height: 310px; |
| | | margin-top: 20px; |
| | | overflow: auto; |
| | | |
| | | &:nth-last-child(1) { |
| | | .content { |
| | | .time { |
| | | padding-bottom: 0; |
| | | |
| | | .fu_item { |
| | | .item_title { |
| | | margin-bottom: 6px; |
| | | |
| | | .icon { |
| | | width: 36px; |
| | | display: flex; |
| | | |
| | | img { |
| | | width: 20px; |
| | | height: 20px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .separate { |
| | | height: calc(100% - 125px); |
| | | width: 1px; |
| | | border: 1px dashed #CCCCCC; |
| | | position: absolute; |
| | | left: 26px; |
| | | top: 51px; |
| | | z-index: -1; |
| | | } |
| | | |
| | | .title { |
| | | font-weight: 500; |
| | | font-size: 16px; |
| | | color: #222222; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .line { |
| | | display: flex; |
| | | margin-bottom: 12px; |
| | | |
| | | .label { |
| | | color: #becbe9; |
| | | margin-right: 20px; |
| | | } |
| | | |
| | | .val {} |
| | | } |
| | | |
| | | .item_title { |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | | display: flex; |
| | | align-items: center; |
| | | display: flex; |
| | | |
| | | .icon {} |
| | | } |
| | | |
| | | .icon_wrap { |
| | | width: 24px; |
| | | margin-right: 10px; |
| | | margin-right: 15px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | |
| | | .dian { |
| | | width: 12px; |
| | | height: 12px; |
| | | } |
| | | |
| | | .dian_ac { |
| | | .icon { |
| | | width: 24px; |
| | | height: 24px; |
| | | } |
| | | |
| | | .line { |
| | | width: 1px; |
| | | height: 100%; |
| | | border: 1px dashed #8a9bc5; |
| | | position: relative; |
| | | z-index: 2; |
| | | } |
| | | } |
| | | |
| | | .content { |
| | | font-size: 13px; |
| | | color: #D2E0FF; |
| | | |
| | | .status { |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | margin-bottom: 5px; |
| | | color: #fff; |
| | | } |
| | | .item { |
| | | position: relative; |
| | | color: #b1bfdc; |
| | | margin-bottom: 15px; |
| | | |
| | | .text { |
| | | margin-bottom: 4px; |
| | | color: #b1bfdc; |
| | | } |
| | | |
| | | .icon { |
| | | width: 10px; |
| | | height: 10px; |
| | | position: relative; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .h2 { |
| | | display: flex; |
| | | align-items: center; |
| | | height: 24px; |
| | | } |
| | | |
| | | .h1 {} |
| | | |
| | | .time { |
| | | padding-left: 39px; |
| | | font-size: 12px; |
| | | padding-bottom: 12px; |
| | | margin-top: 3px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | |
| | | } |
| | | |
| | |
| | | height: 100%; |
| | | top: 0; |
| | | left: 0; |
| | | z-index: 99; |
| | | z-index: 9999; |
| | | background-color: rgba(0, 0, 0, 0.1); |
| | | /* background-color: red; */ |
| | | } |
| | |
| | | align-items: center; |
| | | font-size: 14px; |
| | | color: #869CC9; |
| | | width: 96px; |
| | | width: 110px; |
| | | height: 28px; |
| | | border-radius: 14px; |
| | | border: 1px solid #869CC9; |
| | |
| | | <div class="modal_bg" v-if="showWorkModal" @click="showWorkModal = false"></div> |
| | | </div> |
| | | <div class="center_box_two"> |
| | | <!-- <div v-if="data4.videoIndexCodes && data4.videoIndexCodes.length > 0" class="videos"> |
| | | <div v-if="data4.videoIndexCodes && data4.videoIndexCodes.length > 0" class="videos"> |
| | | <Videos :href="data4.videoPluginUrl" :indexCodes="data4.videoIndexCodes" /> |
| | | </div> --> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="line header"> |
| | | <div>æå°åç§°</div> |
| | |
| | | let layout = "1x4" //playModeæå®æ¨¡å¼çå¸å± |
| | | let enableHTTPS = 1 //æ¯å¦å¯ç¨HTTPSåè®®ä¸ç»¼åå®é²ç®¡çå¹³å°äº¤äºï¼è¿éæ»æ¯å¡«1 |
| | | let encryptedFields = 'secret' //å å¯å段ï¼é»è®¤å å¯é¢å为secret |
| | | let showToolbar = 1 //æ¯å¦æ¾ç¤ºå·¥å
·æ ï¼0-䏿¾ç¤ºï¼é0-æ¾ç¤º |
| | | let showToolbar = 0 //æ¯å¦æ¾ç¤ºå·¥å
·æ ï¼0-䏿¾ç¤ºï¼é0-æ¾ç¤º |
| | | let showSmart = 0 //æ¯å¦æ¾ç¤ºæºè½ä¿¡æ¯ï¼å¦é
置移å¨ä¾¦æµåç»é¢ä¸ç线æ¡ï¼ï¼0-䏿¾ç¤ºï¼é0-æ¾ç¤º |
| | | // let buttonIDs = "0,16,256,257,258,259,260,513,514,515,516,517,768" //èªå®ä¹å·¥å
·æ¡æé® |
| | | oWebControl.value.JS_RequestInterface({ |
| | |
| | | encryptedFields: encryptedFields, //å å¯å段 |
| | | showToolbar: showToolbar, //æ¯å¦æ¾ç¤ºå·¥å
·æ |
| | | showSmart: showSmart, //æ¯å¦æ¾ç¤ºæºè½ä¿¡æ¯ |
| | | buttonIDs: buttonIDs //èªå®ä¹å·¥å
·æ¡æé® |
| | | // buttonIDs: buttonIDs //èªå®ä¹å·¥å
·æ¡æé® |
| | | }) |
| | | }).then(function (oData) { |
| | | console.log('åå§åæå') |
| | |
| | | server: { |
| | | proxy: { |
| | | "/gateway_interface": { |
| | | // target: "http://192.168.0.103:10010", |
| | | target: "http://10.50.250.253:8088/gateway_interface", |
| | | target: "http://192.168.0.104:10010", |
| | | // target: "http://10.50.250.253:8088/gateway_interface", |
| | | // target: "http://192.168.0.173/gateway_interface", |
| | | changeOrigin: true, |
| | | rewrite: (path) => path.replace(/^\/gateway_interface/, ""), |