From f1bc584fb51ea39cbda9590275c92e3246737561 Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期一, 20 一月 2025 18:22:52 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/index.vue | 627 ++++++++-------- src/views/flowable/task/myProcess/send/index.vue | 251 ++++-- src/store/modules/user.js | 5 src/views/flowable/task/myProcess/detail/index.vue | 82 + src/api/projectEngineering/projectInfo.js | 7 src/views/components/noticeTable.vue | 27 src/components/Process/style/flow-viewer.scss | 4 src/views/components/Map/index.vue | 982 ++++++++++++++------------- src/views/projectProcess/detail/index.vue | 141 +++ src/views/flowable/expression/index.vue | 6 src/views/projectProcess/index.vue | 2 src/plugins/auth.js | 1 12 files changed, 1,228 insertions(+), 907 deletions(-) diff --git a/src/api/projectEngineering/projectInfo.js b/src/api/projectEngineering/projectInfo.js index c78ede9..3551250 100644 --- a/src/api/projectEngineering/projectInfo.js +++ b/src/api/projectEngineering/projectInfo.js @@ -73,3 +73,10 @@ data: data }) } +export function searchByKey(data) { + return request({ + url: '/project/info/searchByKey', + method: 'get', + params: data + }) +} diff --git a/src/components/Process/style/flow-viewer.scss b/src/components/Process/style/flow-viewer.scss index 91c5d9b..6628d1e 100644 --- a/src/components/Process/style/flow-viewer.scss +++ b/src/components/Process/style/flow-viewer.scss @@ -7,7 +7,9 @@ .flowMsgPopover { display: none; } - +.bjs-powered-by { + display: none; +} .tipBox { width: 180px; background: #fff; diff --git a/src/plugins/auth.js b/src/plugins/auth.js index 6c6bc24..799b1ba 100644 --- a/src/plugins/auth.js +++ b/src/plugins/auth.js @@ -15,6 +15,7 @@ function authRole(role) { const super_admin = "admin"; const roles = store.getters && store.getters.roles + console.log("褰撳墠鐢ㄦ埛瑙掕壊", roles) if (role && role.length > 0) { return roles.some(v => { return super_admin === v || v === role diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 115cb18..7906a53 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -9,6 +9,7 @@ avatar: '', deptId: null, roles: [], + roleIds: [], permissions: [] }, @@ -27,6 +28,9 @@ }, SET_ROLES: (state, roles) => { state.roles = roles + }, + SET_ROLE_IDS: (state, roleIds) => { + state.roleIds = roleIds }, SET_DEPT: (state, deptId) => { state.deptId = deptId @@ -67,6 +71,7 @@ commit('SET_ROLES', ['ROLE_DEFAULT']) } commit('SET_ID', user.userId) + commit('SET_ROLE_IDS', user.roles.map(role => role.roleId)) commit('SET_NAME', user.userName) commit('SET_DEPT', user.deptId) commit('SET_AVATAR', avatar) diff --git a/src/views/components/Map/index.vue b/src/views/components/Map/index.vue index a9fee43..c81f182 100644 --- a/src/views/components/Map/index.vue +++ b/src/views/components/Map/index.vue @@ -1,33 +1,33 @@ <template> - <div :id="id" ref="contentRef" style="height: 100%; width: 100%"> - <div - v-if="isShowControl" - :class="controlPosition" - class="control-container bottom-right" - > - <div - v-for="item in controlMapping" - :key="item.id" - class="control-content" - > - <template v-if="item.children"> - <div - v-for="child in item.children" - :key="child.id" - class="control-item" - @click="child.event" - > - <img :src="child.img" /> - </div> - </template> - <template v-else> - <div class="control-item" @click="item.event"> - <img :src="item.img" /> - </div> - </template> - </div> - </div> + <div :id="id" ref="contentRef" style="height: 100%; width: 100%"> + <div + v-if="isShowControl" + :class="controlPosition" + class="control-container bottom-right" + > + <div + v-for="item in controlMapping" + :key="item.id" + class="control-content" + > + <template v-if="item.children"> + <div + v-for="child in item.children" + :key="child.id" + class="control-item" + @click="child.event" + > + <img :src="child.img" /> + </div> + </template> + <template v-else> + <div class="control-item" @click="item.event"> + <img :src="item.img" /> + </div> + </template> + </div> </div> + </div> </template> <script> import Location from "@/assets/images/location.png"; @@ -36,426 +36,470 @@ import PlusImg from "@/assets/images/plus.png"; import FullScreenImg from "@/assets/images/fullScreen.png"; import PositionImg from "@/assets/images/position.png"; +var infoWin; export default { - data() { - return { - zoom: 15, - map: null, - contentRef: {}, - infoWin: {}, - defaultMaskInfo: {}, - mapKey: "ffb871cd7ca48883db3b04cfd00d469f", - controlMapping: [ - { - id: "瀹氫綅", - img: PositionImg, - event: this.getCurrentPosition, - }, - { - id: "缂╂斁", - children: [ - { - id: "鏀惧ぇ", - img: PlusImg, - event: this.zoomIn, - }, - { - id: "缂╁皬", - img: MinusImg, - event: this.zoomOut, - }, - ], - }, - { - id: "鍏ㄥ睆", - img: FullScreenImg, - event: this.fullScreen, - }, - ], + data() { + return { + zoom: 15, + map: null, + contentRef: {}, + infoWin: {}, + defaultMaskInfo: {}, + mapKey: "ffb871cd7ca48883db3b04cfd00d469f", + controlMapping: [ + { + id: "瀹氫綅", + img: PositionImg, + event: this.getCurrentPosition, + }, + { + id: "缂╂斁", + children: [ + { + id: "鏀惧ぇ", + img: PlusImg, + event: this.zoomIn, + }, + { + id: "缂╁皬", + img: MinusImg, + event: this.zoomOut, + }, + ], + }, + { + id: "鍏ㄥ睆", + img: FullScreenImg, + event: this.fullScreen, + }, + ], + }; + }, + props: { + id: String, + mapList: Array, + listType: Boolean, + isShowControl: Boolean, + controlPosition: Object, + isImmediateLoad: { type: Boolean, default: true }, + mapType: Boolean, + }, + + created() { + this.defaultMaskInfo = { + lon: this.$props.mapList[0]?.lon + ? this.$props.mapList[0].lon + : "105.37281", + lat: this.$props.mapList[0]?.lat + ? this.$props.mapList[0].lat + : "30.87145", + name: this.$props.mapList[0]?.name ? this.$props.mapList[0].name : "鍒涘缓", + }; + if (this.$props.isImmediateLoad) this.onLoad(); + }, + methods: { + async onLoad() { + const scripts = document.body.querySelectorAll("script"); + if (!this.mapKey) { + // const res = await getDicts('map_key') + // mapKey = res[0].dictLabel + this.mapKey = "ffb871cd7ca48883db3b04cfd00d469f"; + } + + const scriptSrc = `http://api.tianditu.gov.cn/api?v=4.0&tk=${this.mapKey}`; + const mapScript = Array.from(scripts).find((item) => { + return item.getAttribute("src") === scriptSrc; + }); + + if (!mapScript) { + // 鍒涘缓script鏍囩 + const script = document.createElement("script"); + // 璁剧疆API鐨刄RL + script.src = scriptSrc; + script.type = "text/javascript"; + // 灏唖cript鏍囩娣诲姞鍒癏TML涓� + document.body.appendChild(script); + script.onload = () => { + this.initTianMap(); }; - }, - props: { - id: String, - mapList: Array, - listType: Boolean, - isShowControl: Boolean, - controlPosition: Object, - isImmediateLoad: { type: Boolean, default: true }, - mapType: Boolean, + } else { + this.initTianMap(); + } }, - created() { - this.defaultMaskInfo = { - lon: this.$props.mapList[0]?.lon - ? this.$props.mapList[0].lon - : "105.37281", - lat: this.$props.mapList[0]?.lat - ? this.$props.mapList[0].lat - : "30.87145", - name: this.$props.mapList[0]?.name ? this.$props.mapList[0].name : "鍒涘缓", - }; - if (this.$props.isImmediateLoad) this.onLoad(); + initTianMap() { + var T = window.T; + setTimeout(async () => { + // this.map = new T.Map(this.id, { + // projection: "EPSG:4326", + // }); + this.map = new T.Map(this.id); + this.map.centerAndZoom( + new T.LngLat(this.defaultMaskInfo.lon, this.defaultMaskInfo.lat), + this.zoom + ); + if (!this.$props.listType) { + // 娓呴櫎涔嬪墠鐨勬爣璁� + // map && map.clearOverLays() + //form琛ㄥ崟涓槸鍚︽湁鍧愭爣锛屾湁鍒欏畾浣嶅埌瀵瑰簲浣嶇疆锛屾病鏈夊垯浣跨敤榛樿鐨� + // 104.65417 28.75572 娴嬭瘯鏁版嵁 + // 鍥涘窛鐪佸疁瀹惧競缈犲睆鍖哄ぇ瑙傛ゼ琛楅亾澶栧崡琛�71 + if (this.$props.mapList[0].addr) { + const { lng: lon, lat } = await this.getGeocode( + this.$props.mapList[0].addr + ); + this.defaultMaskInfo.lon = String(lon); + this.defaultMaskInfo.lat = String(lat); + } + + this.map && this.makeDefaultMask(this.defaultMaskInfo); + this.addEvent(this.map, "click", (e) => this.mapClick(e)); + } else { + this.$props.mapList.length && this.makeAllMask(this.$props.mapList); + } + }, 1500); }, - methods: { - async onLoad() { - const scripts = document.body.querySelectorAll("script"); - if (!this.mapKey) { - // const res = await getDicts('map_key') - // mapKey = res[0].dictLabel - this.mapKey = "ffb871cd7ca48883db3b04cfd00d469f"; - } - const scriptSrc = `http://api.tianditu.gov.cn/api?v=4.0&tk=${this.mapKey}`; - const mapScript = Array.from(scripts).find((item) => { - return item.getAttribute("src") === scriptSrc; - }); + zoomIn() { + this.map && this.map.zoomIn(); + }, - if (!mapScript) { - // 鍒涘缓script鏍囩 - const script = document.createElement("script"); - // 璁剧疆API鐨刄RL - script.src = scriptSrc; - script.type = "text/javascript"; - // 灏唖cript鏍囩娣诲姞鍒癏TML涓� - document.body.appendChild(script); - script.onload = () => { - this.initTianMap(); - }; - } else { - this.initTianMap(); - } - }, + zoomOut() { + this.map && this.map.zoomOut(); + }, - initTianMap() { - var T = window.T; - setTimeout(async () => { - // this.map = new T.Map(this.id, { - // projection: "EPSG:4326", - // }); - this.map = new T.Map(this.id); - this.map.centerAndZoom( - new T.LngLat(this.defaultMaskInfo.lon, this.defaultMaskInfo.lat), - this.zoom - ); - if (!this.$props.listType) { - // 娓呴櫎涔嬪墠鐨勬爣璁� - // map && map.clearOverLays() - //form琛ㄥ崟涓槸鍚︽湁鍧愭爣锛屾湁鍒欏畾浣嶅埌瀵瑰簲浣嶇疆锛屾病鏈夊垯浣跨敤榛樿鐨� - // 104.65417 28.75572 娴嬭瘯鏁版嵁 - // 鍥涘窛鐪佸疁瀹惧競缈犲睆鍖哄ぇ瑙傛ゼ琛楅亾澶栧崡琛�71 - if (this.$props.mapList[0].addr) { - const { lng: lon, lat } = await this.getGeocode( - this.$props.mapList[0].addr - ); - this.defaultMaskInfo.lon = String(lon); - this.defaultMaskInfo.lat = String(lat); - } + fullScreen() { + this.map && this.contentRef?.requestFullscreen(); + }, - this.map && this.makeDefaultMask(this.defaultMaskInfo); - this.addEvent(this.map, "click", (e) => this.mapClick(e)); - } else { - this.$props.mapList.length && this.makeAllMask(this.$props.mapList); - } - }, 1500); - }, + getCurrentPosition() { + // if (navigator.geolocation) { + // ElMessage.warning("璇ュ姛鑳芥殏鏈紑鍙�"); + // // TODO 鍦板浘瀹氫綅 + // // navigator.geolocation.getCurrentPosition(function (position) { + // // var latitude = position.coords.latitude + // // var longitude = position.coords.longitude + // // + // // moveTo(String(longitude), String(latitude)) + // // }) + // } else { + // ElMessage.warning("褰撳墠娴忚鍣ㄤ笉鏀寔瀹氫綅鍔熻兘"); + // } + }, - zoomIn() { - this.map && this.map.zoomIn(); - }, + moveTo(lon, lat) { + this.map && this.map.panTo(new T.LngLat(lon, lat)); + }, + // 榛樿鐨勭偣鏍囪 + makeDefaultMask(mapInfo) { + const { name, lon, lat } = mapInfo; + const option = { + text: name, + offset: [-35, -45], + labelBg: "#3369FF", + labelColor: "#fff", + labelClick: this.labelClick, + }; + // 娓呴櫎涔嬪墠鐨勬爣璁� + this.map && this.map.clearOverLays(); + this.map.panTo(new T.LngLat(lon, lat)); + this.makeMask(lon, lat, { labelOptions: option }); + }, - zoomOut() { - this.map && this.map.zoomOut(); - }, + // 鍦板浘鐐瑰嚮浜嬩欢 + mapClick(e) { + e.originalEvent.stopPropagation(); - fullScreen() { - this.map && this.contentRef?.requestFullscreen(); - }, + const { lat, lng: lon } = e.lnglat; - getCurrentPosition() { - if (navigator.geolocation) { - ElMessage.warning("璇ュ姛鑳芥殏鏈紑鍙�"); - // TODO 鍦板浘瀹氫綅 - // navigator.geolocation.getCurrentPosition(function (position) { - // var latitude = position.coords.latitude - // var longitude = position.coords.longitude - // - // moveTo(String(longitude), String(latitude)) - // }) - } else { - ElMessage.warning("褰撳墠娴忚鍣ㄤ笉鏀寔瀹氫綅鍔熻兘"); - } - }, + this.makeDefaultMask({ + ...this.defaultMaskInfo, + lon: String(lon), + lat: String(lat), + }); + this.getReverseGeocode(e).then((addr) => { + this.$emit("mapClick", { + e, + addr, + }); + }); + console.log("鐐瑰嚮浜嬩欢", e); + }, - moveTo(lon, lat) { - this.map && this.map.panTo(new T.LngLat(lon, lat)); - }, + // 閫嗗湴鐞嗙紪鐮� 鑾峰彇鍦板潃 + getReverseGeocode(e) { + return new Promise((resolve) => { + const geocode = new T.Geocoder(); + geocode.getLocation(e.lnglat, (result) => { + if (result.status === "0") { + resolve(result.getAddress()); + } + }); + }); + }, - // 榛樿鐨勭偣鏍囪 - makeDefaultMask(mapInfo) { - const { name, lon, lat } = mapInfo - const option = { - text: name, - offset: [-35, -45], - labelBg: "#3369FF", - labelColor: "#fff", - labelClick: this.labelClick, - }; - // 娓呴櫎涔嬪墠鐨勬爣璁� - this.map && this.map.clearOverLays(); - this.map.panTo(new T.LngLat(lon, lat)); - this.makeMask(lon, lat, { labelOptions: option }); - }, + // 鍦扮悊缂栫爜 + getGeocode(addr) { + return new Promise((resolve) => { + const geocoder = new T.Geocoder(); + geocoder.getPoint(addr, (result) => { + if (result.status === "0") { + resolve(result.getLocationPoint()); + } + }); + }); + }, - // 鍦板浘鐐瑰嚮浜嬩欢 - mapClick(e) { - e.originalEvent.stopPropagation(); - - const { lat, lng: lon } = e.lnglat; - - this.makeDefaultMask({ - ...this.defaultMaskInfo, - lon: String(lon), - lat: String(lat), - }); - this.getReverseGeocode(e).then((addr) => { - this.$emit("mapClick", { - e, - addr, - }); - }); - console.log("鐐瑰嚮浜嬩欢", e); - }, - - // 閫嗗湴鐞嗙紪鐮� 鑾峰彇鍦板潃 - getReverseGeocode(e) { - return new Promise((resolve) => { - const geocode = new T.Geocoder(); - geocode.getLocation(e.lnglat, (result) => { - if (result.status === "0") { - resolve(result.getAddress()); - } - }); - }); - }, - - // 鍦扮悊缂栫爜 - getGeocode(addr) { - return new Promise((resolve) => { - const geocoder = new T.Geocoder(); - geocoder.getPoint(addr, (result) => { - if (result.status === "0") { - resolve(result.getLocationPoint()); - } - }); - }); - }, - - // 鐢熸垚鐐逛綅鍐呭 - // 鐢熸垚鐐逛綅鍐呭 - generateContent(row, random) { - if (row) { - return ` + // 鐢熸垚鐐逛綅鍐呭 + // 鐢熸垚鐐逛綅鍐呭 + generateContent(row, random) { + if (row) { + return ` <div class="map-window-info"> <div class='title-block'> <div class="title truncate-content"> ${row.projectName ?? "鏆傛棤鏁版嵁"} </div> <div class='close-btn close-btn-${random}'> - 脳 </div> </div> <div class="detail-info"> - <span class="truncate-content">鎬绘姇璧勶細${row.totalMoney ?? "鏆傛棤鏁版嵁" - }</span> + <span class="truncate-content">鎬绘姇璧勶細${row.totalMoney || ""}</span> <span class="truncate-content"> - 椤圭洰鐘舵�侊細 + 椤圭洰鐘舵�侊細${this.showProjectStatusStr(row.projectStatus)} </span> <span class="truncate-content"> 椤圭洰鍦板潃锛�${row.projectAddr ?? "鏆傛棤鏁版嵁"} </span> </div> </div>`; - } else { - return `<div style="display: flex; justify-content:center; align-items:center; opacity: 0;"> + } else { + return `<div style="display: flex; justify-content:center; align-items:center; opacity: 0;"> </div>`; - } - }, - - // 鍞竴鏍囪瘑 - getUniqueId() { - return Math.random().toString(36).substr(2) + Date.now(); - }, - - markerMouseover(_e, infoWin, info, random) { - // 鐐逛綅鏍囪绉诲叆鏄剧ず涓嶅悓鍐呭 - if (this.$props.isShowControl) { - infoWin.setContent(this.generateContent(info, random)); - const contentWrapper = document.querySelector( - ".tdt-infowindow-content-wrapper" - ); - if (contentWrapper) { - contentWrapper.style.opacity = "1"; - } - // 鏌ユ壘鍒伴偅涓猧nfo 鐣岄潰 - // const allCloseBtn = document.querySelectorAll(`.close-btn-${random}`); - // allCloseBtn[allCloseBtn.length - 1].onclick = (_e) => { - // infoWin.setContent(generateContent()); - // }; - } - }, - - markerMouseout(_e, infoWin) { - infoWin.setContent(this.generateContent()); - const contentWrapper = document.querySelector( - ".tdt-infowindow-content-wrapper" - ); - if (contentWrapper) { - contentWrapper.style.opacity = "0"; - } - }, - - // 鎵撴爣璁� - makeMask(lon, lat, options) { - - const { markerOptions, labelOptions } = options; - console.log("options", markerOptions, labelOptions); - const icon = new T.Icon({ - iconUrl: Location, - iconSize: new T.Point(19, 27), - iconAnchor: new T.Point(10, 25), - }); - var marker = new T.Marker(new T.LngLat(lon, lat), { - icon, - id: markerOptions?.id, - }); - - this.map && this.map.addOverLay(marker); - const label = new T.Label({ - text: labelOptions.text, - position: new T.LngLat(lon, lat), - offset: new T.Point(...labelOptions.offset), - id: labelOptions?.id, - }); - - labelOptions.labelBg && label.setBackgroundColor(labelOptions.labelBg); - labelOptions.labelColor && label.setFontColor(labelOptions.labelColor); - //鍒涘缓鍦板浘鏂囨湰瀵硅薄 - if (!this.$props.mapType) { - this.map && this.map.addOverLay(label); - } - markerOptions?.markerClick && - this.addEvent(marker, "click", (e) => markerOptions.markerClick(label, e)); - labelOptions?.labelClick && - this.addEvent(label, "click", (e) => labelOptions.labelClick(label, e)); - - const lnglat = new T.LngLat(lon, lat); - const infoWin = new T.InfoWindow(this.generateContent(), { - id: markerOptions?.id, - offset: new T.Point(0, -15), - closeButton: false, - }); - - infoWin.setLngLat(lnglat); - // 鍚戝湴鍥句笂娣诲姞淇℃伅绐楀彛 - if (this.$props.mapType) { - this.map && this.map.addOverLay(infoWin); - } - - this.addEvent(marker, "mouseover", (e) => - this.markerMouseover(e, infoWin, labelOptions, this.getUniqueId()) - ); - this.addEvent(marker, "mouseout", (e) => this.markerMouseout(e, infoWin)); - }, - - // 鏍囪鎵�鏈夌偣 - makeAllMask(mapList) { - var _this = this; - this.mapList.map((item) => { - const config = { - markerOptions: { - id: item.id, - markerClick: _this.markerClick, - }, - labelOptions: { - text: item.name, - offset: [-45, -45], - id: item.id, - markerClick: _this.labelClick, - }, - }; - _this.makeMask(item.lon, item.lat, config); - }); - }, - - // 閫氱敤娣诲姞浜嬩欢鐨勬柟娉� - addEvent(component, name, func) { - // 绉诲嚭浜嬩欢 - this.removeEvent(component, name, func); - // 娣诲姞浜嬩欢 - component.addEventListener(name, func); - }, - - // 閫氱敤绉诲嚭浜嬩欢鐨勬柟娉� - removeEvent(component, name, func) { - component.removeEventListener(name, func); - }, - - //鏍囪鐐瑰嚮浜嬩欢 - markerClick(currentLabel, e) { - const id = e.target.options.id; - this.currentLabelStyleChange(currentLabel); - console.log("鐐瑰嚮浜嬩欢", e, currentLabel); - this.getReverseGeocode(e).then((addr) => { - this.$emit( - "markClick", - id - ? this.$props.mapList?.find((item) => item.id === id) - : { e, addr: addr } - ); - }); - }, - - // label鐐瑰嚮浜嬩欢 - labelClick(currentLabel, e) { - console.log("瑙﹀彂鐐瑰嚮浜嬩欢") - const id = e.target.options.id; - this.currentLabelStyleChange(currentLabel); - this.getReverseGeocode(e).then((addr) => { - this.$emit( - "labelClick", - id - ? this.$props.mapList?.find((item) => { - return String(item.id) === String(id); - }) - : { e, addr: addr } - ); - }); - }, - - currentLabelStyleChange(currentLabel) { - this.$emit("currentLabelStyleChange", currentLabel); - }, - - resizeMap() { - this.map.checkResize(); - }, + } }, - watch: { - listType: { - handler(val) { - if (val) { - this.map && this.map.clearOverLays(); - if (this.$props.mapList.length && T) { - this.makeAllMask(this.$props.mapList); - } - } - }, - }, + showProjectStatusStr(status) { + switch (status) { + case "1": + return "鍌ㄥ椤圭洰"; + case "2": + return "鍓嶆湡椤圭洰"; + case "3": + return "瀹炴柦椤圭洰"; + case "4": + return "绔e伐椤圭洰"; + case "5": + return "寮傚父椤圭洰"; + + default: + return "寮傚父椤圭洰"; + } }, + // 鍞竴鏍囪瘑 + getUniqueId() { + return Math.random().toString(36).substr(2) + Date.now(); + }, + + markerMouseover(_e, info, random, markerOptions) { + if (infoWin) this.map.removeOverLay(infoWin); + // 鐐逛綅鏍囪绉诲叆鏄剧ず涓嶅悓鍐呭 + if (this.$props.isShowControl) { + infoWin = new T.InfoWindow(); + infoWin.setContent(this.generateContent(info, random)); + infoWin.setLngLat(_e.lnglat); + // 鍚戝湴鍥句笂娣诲姞淇℃伅绐楀彛 + // if (this.$props.mapType) { + this.map && this.map.addOverLay(infoWin); + // } + + // const contentWrapper = document.querySelector( + // ".tdt-infowindow-content-wrapper" + // ); + // if (contentWrapper) { + // contentWrapper.style.opacity = "1"; + // } + // 鏌ユ壘鍒伴偅涓猧nfo 鐣岄潰 + // const allCloseBtn = document.querySelectorAll(`.close-btn-${random}`); + // allCloseBtn[allCloseBtn.length - 1].onclick = (_e) => { + // infoWin.setContent(generateContent()); + // }; + } + }, + + markerMouseout(_e) { + // infoWin.setContent(this.generateContent()); + // const contentWrapper = document.querySelector( + // ".tdt-infowindow-content-wrapper" + // ); + // if (contentWrapper) { + // contentWrapper.style.opacity = "0"; + // } + // this.map.removeOverLay(infoWin); + }, + + // 鎵撴爣璁� + makeMask(lon, lat, options) { + if (lon && lat) { + const { markerOptions, labelOptions } = options; + + const icon = new T.Icon({ + iconUrl: Location, + iconSize: new T.Point(19, 27), + iconAnchor: new T.Point(10, 25), + }); + + var marker = new T.Marker(new T.LngLat(lon, lat), { + icon, + id: markerOptions?.id, + }); + + this.map && this.map.addOverLay(marker); + const label = new T.Label({ + text: labelOptions.text, + position: new T.LngLat(lon, lat), + offset: new T.Point(...labelOptions.offset), + id: labelOptions?.id, + }); + + labelOptions.labelBg && label.setBackgroundColor(labelOptions.labelBg); + labelOptions.labelColor && label.setFontColor(labelOptions.labelColor); + //鍒涘缓鍦板浘鏂囨湰瀵硅薄 + if (!this.$props.mapType) { + this.map && this.map.addOverLay(label); + } + markerOptions?.markerClick && + this.addEvent(marker, "click", (e) => + markerOptions.markerClick(label, e) + ); + labelOptions?.labelClick && + this.addEvent(label, "click", (e) => + labelOptions.labelClick(label, e) + ); + + this.addEvent(marker, "mouseover", (e) => + this.markerMouseover(e, options, this.getUniqueId(), markerOptions) + ); + this.addEvent(marker, "mouseout", (e) => this.markerMouseout(e)); + } + }, + + // 鏍囪鎵�鏈夌偣 + makeAllMask(mapList) { + // 娓呴櫎涔嬪墠鐨勬爣璁� + this.map && this.map.clearOverLays(); + var minX = mapList[0].longitude; + var maxX = mapList[0].longitude; + var minY = mapList[0].latitude; + var maxY = mapList[0].latitude; + var _this = this; + mapList.map((item) => { + const config = { + markerOptions: { + id: item.id, + // markerClick: _this.markerClick, + }, + labelOptions: { + text: item.projectName, + offset: [-45, -45], + id: item.id, + // markerClick: _this.labelClick, + }, + projectName: item.projectName, + totalMoney: item.yearInvestAmount + ? item.yearInvestAmount + "鍏�" + : "鏆傛棤鏁版嵁", + projectAddr: item.projectAddress, + projectStatus: item.usedStatus, + }; + _this.makeMask(item.longitude, item.latitude, config); + if (item.longitude && item.longitude > maxX) { + maxX = item.longitude; + } + if (item.longitude && item.longitude < minX) { + minX = item.longitude; + } + if (item.latitude && item.latitude > maxY) { + maxY = item.latitude; + } + if (item.latitude && item.latitude < minY) { + minY = item.latitude; + } + }); + this.moveTo( + (parseFloat(maxX) + parseFloat(minX)) / 2, + (parseFloat(maxY) + parseFloat(minY)) / 2 + ); + }, + + // 閫氱敤娣诲姞浜嬩欢鐨勬柟娉� + addEvent(component, name, func) { + // 绉诲嚭浜嬩欢 + this.removeEvent(component, name, func); + // 娣诲姞浜嬩欢 + component.addEventListener(name, func); + }, + + // 閫氱敤绉诲嚭浜嬩欢鐨勬柟娉� + removeEvent(component, name, func) { + component.removeEventListener(name, func); + }, + + //鏍囪鐐瑰嚮浜嬩欢 + markerClick(currentLabel, e) { + const id = e.target.options.id; + this.currentLabelStyleChange(currentLabel); + console.log("鐐瑰嚮浜嬩欢", e, currentLabel); + this.getReverseGeocode(e).then((addr) => { + this.$emit( + "markClick", + id + ? this.$props.mapList?.find((item) => item.id === id) + : { e, addr: addr } + ); + }); + }, + + // label鐐瑰嚮浜嬩欢 + labelClick(currentLabel, e) { + console.log("瑙﹀彂鐐瑰嚮浜嬩欢"); + const id = e.target.options.id; + this.currentLabelStyleChange(currentLabel); + this.getReverseGeocode(e).then((addr) => { + this.$emit( + "labelClick", + id + ? this.$props.mapList?.find((item) => { + return String(item.id) === String(id); + }) + : { e, addr: addr } + ); + }); + }, + + currentLabelStyleChange(currentLabel) { + this.$emit("currentLabelStyleChange", currentLabel); + }, + + resizeMap() { + this.map.checkResize(); + }, + }, + watch: { + listType: { + handler(val) { + if (val) { + this.map && this.map.clearOverLays(); + if (this.$props.mapList.length && T) { + this.makeAllMask(this.$props.mapList); + } + } + }, + }, + }, beforeDestroy() { this.map = null; - } + }, }; // const emits = defineEmits<{ @@ -467,112 +511,112 @@ </script> <style lang="scss" scoped> :deep(.tdt-label) { - border-radius: 15px; - color: var(--el-color-primary); - cursor: pointer; + border-radius: 15px; + color: var(--el-color-primary); + cursor: pointer; } // #53547f :deep(.tdt-bar a, .tdt-bar a:hover) { - border-bottom: 0; - color: #53547f; + border-bottom: 0; + color: #53547f; } :deep(.tdt-touch .tdt-control-zoom-in) { - font-size: 18px; + font-size: 18px; } :deep(.tdt-bar) { - border-radius: 3px; - box-shadow: 5px 0px 12px 0px rgb(0 0 0 / 0.03); + border-radius: 3px; + box-shadow: 5px 0px 12px 0px rgb(0 0 0 / 0.03); } .tdt-bar a.tdt-disabled, .tdt-bar a:hover { - background-color: #f4f4f4; + background-color: #f4f4f4; } .control-container { - position: absolute; - display: flex; - flex-direction: column; - gap: 10px; - z-index: 999; + position: absolute; + display: flex; + flex-direction: column; + gap: 10px; + z-index: 999; } .top-left { - top: 10px; - left: 10px; + top: 10px; + left: 10px; } .top-right { - top: 10px; - right: 10px; + top: 10px; + right: 10px; } .bottom-left { - bottom: 10px; - left: 10px; + bottom: 10px; + left: 10px; } .bottom-right { - bottom: 10px; - right: 10px; + bottom: 10px; + right: 10px; } .control-content { - border-radius: 3px; - box-shadow: 5px 0px 12px 0px rgb(0 0 0 / 0.03); - background-color: #fff; + border-radius: 3px; + box-shadow: 5px 0px 12px 0px rgb(0 0 0 / 0.03); + background-color: #fff; } .control-item { - box-sizing: border-box; - width: 30px; - height: 30px; - line-height: 28px; - padding: 0 9px; + box-sizing: border-box; + width: 30px; + height: 30px; + line-height: 28px; + padding: 0 9px; - img { - display: inline-block; - } + img { + display: inline-block; + } } .control-item:hover { - background-color: #f4f4f4; + background-color: #f4f4f4; } </style> <style lang="scss"> .map-window-info { - padding: 0 20px; - width: 300px; - cursor: default; + padding: 0 20px; + width: 300px; + cursor: default; - .title { - color: #3369ff; - font-size: 18px; - margin-bottom: 13px; - } + .title { + color: #3369ff; + font-size: 18px; + margin-bottom: 13px; + } - .detail-info { - display: flex; - flex-direction: column; - color: #7e809c; - font-size: 12px; - gap: 8px; - } + .detail-info { + display: flex; + flex-direction: column; + color: #7e809c; + font-size: 12px; + gap: 8px; + } } .title-block { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; - .close-btn { - font-size: 18px; - color: #d8dde6; - cursor: pointer; - z-index: 999999; - } + .close-btn { + font-size: 18px; + color: #d8dde6; + cursor: pointer; + z-index: 999999; + } } //.tdt-control-copyright { @@ -580,10 +624,10 @@ //} .tdt-infowindow-tip-container { - opacity: 0; + opacity: 1; } .tdt-infowindow-content-wrapper { - opacity: 0; + opacity: 1; } </style> diff --git a/src/views/components/noticeTable.vue b/src/views/components/noticeTable.vue index 4789ab9..76ca576 100644 --- a/src/views/components/noticeTable.vue +++ b/src/views/components/noticeTable.vue @@ -20,6 +20,7 @@ </div> </div> <el-table + v-loading="tableLoading" :data="tableData" :header-cell-style="{ background: '#F5F7FC', @@ -69,12 +70,12 @@ <div style="width: 100%;display: flex;flex-direction: row-reverse;align-items: center"> <pagination style="width: 100%" - v-show="total >= 0" + v-show="total > 0" :page-sizes="[4]" :limit="queryParams.pageSize" - :page="queryParams.pageNum" + :page="queryParams.currentPage" :total="total" - @pagination="getList" + @pagination="pageChange" /> </div> </div> @@ -86,10 +87,11 @@ export default { data() { return { + tableLoading: false, currentTab: "process", total: 0, queryParams: { - pageNum: 1, + currentPage: 1, pageSize: 4, }, tableData: [], @@ -164,21 +166,26 @@ this.getList(); }, methods: { + pageChange(data) { + this.queryParams.currentPage = data.page + this.getList() + }, async getList() { var resp; - this.total = 0; - this.tableData = []; + this.tableLoading = true if (this.currentTab == "process") { resp = await getProjectProcessTodo(this.queryParams); if (resp.code === 200) { this.total = resp.total; this.tableData = resp.taskList; + this.tableLoading = false } } else { resp = await getProjectPlanToDoList(this.queryParams); if (resp.code === 200) { this.total = resp.total; this.tableData = resp.data; + this.tableLoading = false } } }, @@ -187,11 +194,13 @@ const resp = await getDetailByProcessInsId({ processDefId: row.processDefId, processInsId: row.processInsId }); if (resp.code === 200 && resp.data.length > 0) { const projectProcess = resp.data[0] + sessionStorage.removeItem("projectProDetail") this.$router.push({ path: '/projectFlow/detail', query: { projectId: projectProcess.projectId, - processDefId: row.processDefId + processDefId: row.processDefId, + processName: row.processName } }) } @@ -210,11 +219,13 @@ const resp = await getDetailByProcessInsId({ processDefId: row.processDefId, processInsId: row.processInsId }); if (resp.code === 200 && resp.data.length > 0) { const projectProcess = resp.data[0] + sessionStorage.removeItem("projectProDetail") this.$router.push({ path: '/projectFlow/detail', query: { projectId: projectProcess.projectId, - processDefId: row.processDefId + processDefId: row.processDefId, + processName: row.processName } }) } diff --git a/src/views/flowable/expression/index.vue b/src/views/flowable/expression/index.vue index b570b4b..f381207 100644 --- a/src/views/flowable/expression/index.vue +++ b/src/views/flowable/expression/index.vue @@ -73,7 +73,6 @@ <el-table v-loading="loading" :data="expressionList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> - <el-table-column label="涓婚敭" align="center" prop="id" /> <el-table-column label="鍚嶇О" align="center" prop="name" /> <el-table-column label="琛ㄨ揪寮忓唴瀹�" align="center" prop="expression" /> <el-table-column label="鎸囧畾绫诲瀷" align="center" prop="dataType" > @@ -81,6 +80,7 @@ <dict-tag :options="dict.type.exp_data_type" :value="scope.row.dataType"/> </template> </el-table-column> + <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" /> <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button @@ -110,7 +110,7 @@ /> <!-- 娣诲姞鎴栦慨鏀规祦绋嬭揪寮忓璇濇 --> - <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> + <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false" :destroy-on-close="true" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="鍚嶇О" prop="name"> <el-input v-model="form.name" placeholder="璇疯緭鍏ヨ〃杈惧紡鍚嶇О" /> @@ -244,7 +244,7 @@ handleAdd() { this.reset(); this.open = true; - this.title = "娣诲姞娴佺▼杈惧紡"; + this.title = "娣诲姞娴佺▼琛ㄨ揪寮�"; }, /** 淇敼鎸夐挳鎿嶄綔 */ handleUpdate(row) { diff --git a/src/views/flowable/task/myProcess/detail/index.vue b/src/views/flowable/task/myProcess/detail/index.vue index 3bde1b8..ca06721 100644 --- a/src/views/flowable/task/myProcess/detail/index.vue +++ b/src/views/flowable/task/myProcess/detail/index.vue @@ -10,39 +10,30 @@ <!--琛ㄥ崟淇℃伅--> <el-tab-pane label="琛ㄥ崟淇℃伅" name="1"> <!--鍒濆鍖栨祦绋嬪姞杞借〃鍗曚俊鎭�--> - <el-col :span="16" :offset="4"> + <el-col :span="16" :offset="4" v-loading="formLoading" class="tab-min-height"> <div v-if="formDataList && formDataList.length > 0"> <div v-for="(formDataObj, index) in formDataList" :key="index" class="form-warp" style="position: relative"> <div v-if="formDataObj.current"> - <!-- 褰撳墠鑺傜偣鍙崗鍚屻�佽浆鍔炵瓑鎿嶄綔 --> - <div style="position: absolute; top: 4px; right: 4px; display: flex;justify-content: center; align-items: center;"> - <el-button size="small" type="primary" @click="submitForm">纭骞舵彁浜�</el-button> - <el-button size="small" type="primary" disabled @click="submitForm">鍗忓悓鍔炵悊(鍔熻兘寮�鍙戜腑)</el-button> - <el-button size="small" type="primary" @click="openDelegation(formDataList[0].beforeNodeName)">杞姙</el-button> - </div> - <div style="margin-bottom: 15px;color: #E6A23C">褰撳墠闃舵锛�<span style="color: #409EFF">{{formDataObj.beforeNodeName}}</span></div> + <div class="current">褰撳墠闃舵锛�<span>{{formDataObj.beforeNodeName}}</span></div> </div> <div v-else-if="formDataList.length > 1"> - <!-- 鍓嶇疆鑺傜偣鍙┏鍥� --> - <div style="position: absolute; top: 4px; right: 4px"> - <el-button type="danger" size="small" @click="openRejectTask(formDataObj.beforeNodeDefId)">椹� 鍥�</el-button> - </div> - <div style="margin-bottom: 15px;color: #E6A23C">鍓嶇疆闃舵锛�<span style="color: #F56C6C">{{formDataObj.beforeNodeName}}</span></div> + <div class="before">鍓嶇疆闃舵锛�<span>{{formDataObj.beforeNodeName}}</span></div> </div> - <div v-if="formDataObj.formJson !== null && formDataObj.formJson !== ''"> - <v-form-render :form-data="formDataObj.formJson" :ref="'form' + index"/> + <div v-if="formDataObj != null && formDataObj.formJsonObj != null"> + <v-form-render :form-data="formDataObj.formJsonObj.formJson" :ref="'form' + index"/> </div> <div v-else> <el-alert - title="鑺傜偣鏈粦瀹氳〃鍗�" + title="鏈粦瀹氳〃鍗�" type="warning" :closable="false" > </el-alert> </div> <div v-if="formDataList.length <= 1"> + <div class="before_none">鍓嶇疆闃舵锛�<span>涓嶅瓨鍦ㄥ墠缃樁娈�</span></div> <el-alert - title="涓嶅瓨鍦ㄥ墠缃妭鐐�" + title="涓嶅瓨鍦ㄥ墠缃樁娈�" type="warning" :closable="false" > @@ -104,7 +95,9 @@ </el-tab-pane> <!--娴佺▼鍥�--> <el-tab-pane label="娴佺▼鍥�" name="3"> - <bpmn-viewer :flowData="flowData" :procInsId="taskForm.procInsId"/> + <div class="tab-min-height" v-loading="imgLoading"> + <bpmn-viewer :flowData="flowData" :procInsId="taskForm.procInsId"/> + </div> </el-tab-pane> </el-tabs> </el-card> @@ -126,6 +119,8 @@ props: {}, data() { return { + formLoading: false, // 鍔犺浇琛ㄥ崟 + imgLoading: false, // 鍔犺浇娴佺▼鍥� projectName: '', flowName: '', // 妯″瀷xml鏁版嵁 @@ -158,12 +153,14 @@ this.flowName = this.$route.query && this.$route.query.flowName; // 娴佺▼浠诲姟閲嶈幏鍙栧彉閲忚〃鍗� this.processVariables( this.taskForm.taskId) - this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId); + this.getFlowRecordList(this.taskForm.procInsId); }, methods: { handleClick(tab, event) { if (tab.name === '3'){ - flowXmlAndNode({procInsId:this.taskForm.procInsId,deployId:this.taskForm.deployId}).then(res => { + this.imgLoading = true + flowXmlAndNode({processInsId:this.taskForm.procInsId,deployId:this.taskForm.deployId}).then(res => { + this.imgLoading = false this.flowData = res.data; }) } @@ -183,9 +180,9 @@ } }, /** 娴佺▼娴佽浆璁板綍 */ - getFlowRecordList(procInsId, deployId) { + getFlowRecordList(procInsId) { const that = this - const params = {procInsId: procInsId, deployId: deployId} + const params = {procInsId: procInsId} flowRecord(params).then(res => { that.flowRecordList = res.data.flowList; }).catch(res => { @@ -195,6 +192,7 @@ /** 鑾峰彇娴佺▼鍙橀噺鍐呭 */ processVariables(taskId) { if (taskId) { + this.formLoading = true // 鎻愪氦娴佺▼鐢宠鏃跺~鍐欑殑琛ㄥ崟瀛樺叆浜嗘祦绋嬪彉閲忎腑鍚庣画浠诲姟澶勭悊鏃堕渶瑕佸睍绀� flowTaskFormDetail(taskId).then(res => { this.formDataList = res.data @@ -203,7 +201,6 @@ this.formDataList.forEach((formDataObj, index) => { console.log("琛ㄥ崟鏁版嵁鍒楄〃", formDataObj.formJson) let that = this - console.log(eval("that.$refs.form" + index)[0]) if (formDataObj.formJsonObj) { eval("that.$refs.form" + index)[0].setFormJson(formDataObj.formJsonObj.formJson); @@ -216,6 +213,7 @@ // this.formJson = this.formDataList[0].formJsonObj.formJson }) } + this.formLoading = false // this.$nextTick(() => { // // 鍥炴樉琛ㄥ崟 // this.$refs.vFormRef.setFormJson(res.data.formJson); @@ -283,4 +281,42 @@ margin-bottom: 20px; box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em; } +.before { + span { + color: #F56C6C + } + margin-bottom: 15px; + color: #E6A23C +} +.before_none { + span { + color: #F56C6C + } + margin-bottom: 15px; + margin-top: 15px; + color: #E6A23C +} +.reject-but { + position: absolute; + top: 4px; + right: 4px +} +.current { + span { + color: #409EFF + } + margin-bottom: 15px; + color: #E6A23C +} +.op-list { + position: absolute; + top: 4px; + right: 4px; + display: flex; + justify-content: center; + align-items: center; +} +.tab-min-height { + min-height: 500px; +} </style> diff --git a/src/views/flowable/task/myProcess/send/index.vue b/src/views/flowable/task/myProcess/send/index.vue index dc0243c..b3eaa13 100644 --- a/src/views/flowable/task/myProcess/send/index.vue +++ b/src/views/flowable/task/myProcess/send/index.vue @@ -10,39 +10,40 @@ <!--琛ㄥ崟淇℃伅--> <el-tab-pane label="琛ㄥ崟淇℃伅" name="1"> <!--鍒濆鍖栨祦绋嬪姞杞借〃鍗曚俊鎭�--> - <el-col :span="16" :offset="4"> + <el-col :span="16" :offset="4" v-loading="formLoading" class="tab-min-height"> <div v-if="formDataList && formDataList.length > 0"> <div v-for="(formDataObj, index) in formDataList" :key="index" class="form-warp" style="position: relative"> <div v-if="formDataObj.current"> <!-- 褰撳墠鑺傜偣鍙崗鍚屻�佽浆鍔炵瓑鎿嶄綔 --> - <div style="position: absolute; top: 4px; right: 4px; display: flex;justify-content: center; align-items: center;"> - <el-button size="small" type="primary" @click="submitForm">纭骞舵彁浜�</el-button> + <div class="op-list"> + <el-button size="small" type="primary" :disabled="submitLoading" v-loading="submitLoading" @click="submitForm">纭骞舵彁浜�</el-button> <el-button size="small" type="primary" disabled @click="submitForm">鍗忓悓鍔炵悊(鍔熻兘寮�鍙戜腑)</el-button> <el-button size="small" type="primary" @click="openDelegation(formDataList[0].beforeNodeName)">杞姙</el-button> </div> - <div style="margin-bottom: 15px;color: #E6A23C">褰撳墠闃舵锛�<span style="color: #409EFF">{{formDataObj.beforeNodeName}}</span></div> + <div class="current">褰撳墠闃舵锛�<span>{{formDataObj.beforeNodeName}}</span></div> </div> <div v-else-if="formDataList.length > 1"> <!-- 鍓嶇疆鑺傜偣鍙┏鍥� --> - <div style="position: absolute; top: 4px; right: 4px"> - <el-button type="danger" size="small" @click="openRejectTask(formDataObj.beforeNodeDefId)">椹� 鍥�</el-button> + <div class="reject-but"> + <el-button type="danger" size="small" @click="openRejectTask(formDataObj.beforeNodeName)">椹� 鍥�</el-button> </div> - <div style="margin-bottom: 15px;color: #E6A23C">鍓嶇疆闃舵锛�<span style="color: #F56C6C">{{formDataObj.beforeNodeName}}</span></div> + <div class="before">鍓嶇疆闃舵锛�<span>{{formDataObj.beforeNodeName}}</span></div> </div> - <div v-if="formDataObj.formJson !== null && formDataObj.formJson !== ''"> - <v-form-render :form-data="formDataObj.formJson" :ref="'form' + index"/> + <div v-if="formDataObj != null && formDataObj.formJsonObj != null"> + <v-form-render :form-data="formDataObj.formJsonObj.formJson" :ref="'form' + index"/> </div> <div v-else> <el-alert - title="鑺傜偣鏈粦瀹氳〃鍗�" + title="鏈粦瀹氳〃鍗�" type="warning" :closable="false" > </el-alert> </div> <div v-if="formDataList.length <= 1"> + <div class="before_none">鍓嶇疆闃舵锛�<span>涓嶅瓨鍦ㄥ墠缃樁娈�</span></div> <el-alert - title="涓嶅瓨鍦ㄥ墠缃妭鐐�" + title="涓嶅瓨鍦ㄥ墠缃樁娈�" type="warning" :closable="false" > @@ -54,7 +55,9 @@ </el-tab-pane> <!--娴佺▼鍥�--> <el-tab-pane label="娴佺▼鍥�" name="2"> - <bpmn-viewer :flowData="flowData" :procInsId="procInsId"/> + <div v-loading="imgLoading" class="tab-min-height"> + <bpmn-viewer :flowData="flowData" :procInsId="procInsId"/> + </div> </el-tab-pane> </el-tabs> <!--閫夋嫨娴佺▼鎺ユ敹浜�--> @@ -70,7 +73,7 @@ <el-dialog - :title="`椹冲洖锛歚 + rejectForm.projectName" + :title="`椹冲洖锛歚 + rejectForm.taskName" :visible.sync="rejectShow" width="950px" :destroy-on-close="true" @@ -85,7 +88,7 @@ </el-input> </div> <div class="opBut"> - <el-button type="danger" size="small" @click="rejectTask">椹冲洖</el-button> + <el-button type="danger" size="small" :disabled="rejectLoading" v-loading="rejectLoading" @click="rejectTask">椹冲洖</el-button> </div> </el-dialog> @@ -152,7 +155,7 @@ </el-form> </div> <div class="opBut"> - <el-button type="danger" size="small" @click="delegation">杞� 鍔�</el-button> + <el-button type="danger" size="small" :disabled="delegationButLoading" v-loading="delegationButLoading" @click="delegation">杞� 鍔�</el-button> </div> </el-dialog> @@ -184,6 +187,11 @@ props: {}, data() { return { + rejectLoading: false, // 椹冲洖鎸夐挳鍔犺浇 + submitLoading: false, // 鎻愪氦鎸夐挳鍔犺浇 + delegationButLoading: false, // 杞姙鎸夐挳鍔犺浇 + formLoading: false, // 鍔犺浇褰撳墠鍠濆墠缃妭鐐规暟鎹� + imgLoading: false, // 鍔犺浇娴佺▼鍥� roleKey: 'role', deptKey: 'dept', multUserKey: 0, @@ -209,7 +217,9 @@ taskId: '', peopleType: '', targetId: '', - taskName: '' + taskName: '', + processInsId: '', + projectId: '', }, delegationShow: false, // 杞姙鏄剧ず rejectShow: false, // 椹冲洖鏄剧ず @@ -244,7 +254,7 @@ rejectForm: { comment: '', // 瀹℃牳鎰忚 taskId: '', - // rejectedTaskDefKey: '' // 琚┏鍥炵殑浠诲姟key + taskName: '' // 琚┏鍥炵殑浠诲姟k } }; }, @@ -305,8 +315,13 @@ cancelButtonText: '鍙栨秷', type: 'warning' }).then(() => { + this.delegationForm.projectId = this.goBackParams.projectId + this.delegationForm.processInsId = this.procInsId + this.delegationButLoading = true taskDelegation(this.delegationForm).then(res => { this.$message.success("宸插彂璧疯浆鍔炵敵璇�") + this.delegationButLoading = false + this.delegationShow = false this.goBack() }) }).catch(() => { @@ -434,19 +449,36 @@ this.delegationShow = true }, rejectTask() { - rejectTask(this.rejectForm).then(res => { - this.rejectShow = false - this.$message.success("椹冲洖鎴愬姛") - }) + this.$confirm(`纭畾瑕侀┏鍥炰换鍔°��${this.rejectForm.taskName}銆戝悧?`, '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + this.rejectLoading = true + rejectTask(this.rejectForm).then(res => { + this.rejectShow = false + this.$message.success("椹冲洖鎴愬姛") + this.goBack() + }) + }).catch((err) => { + console.log(err) + this.$message({ + type: 'info', + message: '宸插彇椹冲洖浜ゆ搷浣�' + }); + }); + }, - openRejectTask(rejectedTaskDefKey) { - // this.rejectForm.rejectedTaskDefKey = rejectedTaskDefKey; + openRejectTask(taskName) { + this.rejectForm.taskName = taskName; this.rejectForm.taskId = this.taskId; this.rejectShow = true }, handleClick(tab, event) { if (tab.name === '2'){ + this.imgLoading = true flowXmlAndNode({procInsId:this.procInsId,deployId:this.deployId}).then(res => { + this.imgLoading = false this.flowData = res.data; }) } @@ -454,13 +486,13 @@ /** 娴佺▼琛ㄥ崟鏁版嵁 */ getFlowFormData(taskId) { const params = {taskId: taskId} + this.formLoading = true flowTaskForm(params).then(res => { this.formDataList = res.data if (this.formDataList && this.formDataList.length > 0) { this.$nextTick(() => { this.formDataList.forEach((formDataObj, index) => { let that = this - console.log(eval("that.$refs.form" +index)) if (eval("that.$refs.form" +index) && formDataObj.formJsonObj) { eval("that.$refs.form" +index)[0].setFormJson(formDataObj.formJsonObj.formJson); eval("that.$refs.form" +index)[0].setFormData(formDataObj.formJsonObj); @@ -470,8 +502,8 @@ this.formJson = this.formDataList[0].formJsonObj.formJson } }) - } + this.formLoading = false // if (res.data.formJson) { // // 鍥炴樉琛ㄥ崟 // this.$refs.vFormRef.setFormJson(res.data.formJson); @@ -511,54 +543,86 @@ }, /** 鐢宠娴佺▼琛ㄥ崟鏁版嵁鎻愪氦 */ submitForm() { - let that = this - eval("that.$refs.form" +0)[0].getFormData().then(formData => { - // 鏍规嵁褰撳墠浠诲姟鎴栬�呮祦绋嬭璁¢厤缃殑涓嬩竴姝ヨ妭鐐� todo 鏆傛椂鏈秹鍙婂埌鑰冭檻缃戝叧銆佽〃杈惧紡鍜屽鑺傜偣鎯呭喌 - getNextFlowNodeByStart({deploymentId: this.deployId, variables: formData}).then(res => { - const data = res.data; - if (data) { - this.formData = formData; - if (data.dataType === 'dynamic') { - if (data.type === 'assignee') { // 鎸囧畾浜哄憳 - this.checkSendUser = true; - this.checkType = "single"; - } else if (data.type === 'candidateUsers') { // 鍊欓�変汉鍛�(澶氫釜) - this.checkSendUser = true; - this.checkType = "multiple"; - } else if (data.type === 'candidateGroups') { // 鎸囧畾缁�(鎵�灞炶鑹叉帴鏀朵换鍔�) - this.checkSendRole = true; - } else { // 浼氱 - // 娴佺▼璁捐鎸囧畾鐨� elementVariable 浣滀负浼氱浜哄憳鍒楄〃 - this.multiInstanceVars = data.vars; - this.checkSendUser = true; - this.checkType = "multiple"; - } - this.taskOpen = true; - this.taskTitle = "閫夋嫨浠诲姟鎺ユ敹"; - } else { - if (this.procDefId) { - const param = { - formJson: this.formJson, - } - // 澶嶅埗瀵硅薄鐨勫睘鎬у�肩粰鏂扮殑瀵硅薄 - Object.assign(param, formData); - // 瀹屾垚浠诲姟 - completeSubmitFormTask(this.taskId, param).then(res => { - this.$modal.msgSuccess(res.msg); - this.goBack(); - }) - // // 鍚姩娴佺▼骞跺皢琛ㄥ崟鏁版嵁鍔犲叆娴佺▼鍙橀噺 - // definitionStart(this.procDefId, param).then(res => { - // this.$modal.msgSuccess(res.msg); - // this.goBack(); - // }) - } + this.$confirm(`纭畾瑕佹彁浜や换鍔°��${this.processName}銆戝悧?`, '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + this.submitLoading = true + let that = this + if (eval("that.$refs.form" +0)) { + eval("that.$refs.form" +0)[0].getFormData().then(formData => { + this.formData = formData + const param = { + formJson: this.formJson, } - } - }) - }).catch(error => { - // this.$modal.msgError(error) - }) + // 澶嶅埗瀵硅薄鐨勫睘鎬у�肩粰鏂扮殑瀵硅薄 + Object.assign(param, formData); + // 瀹屾垚浠诲姟 + completeSubmitFormTask(this.taskId, param).then(res => { + this.$modal.msgSuccess(res.msg); + this.submitLoading = false + this.goBack(); + }) + }) + } else { + // 娌″叧鑱旇〃鍗曠洿鎺ヤ紶绌� + completeSubmitFormTask(this.taskId, {}).then(res => { + this.$modal.msgSuccess(res.msg); + this.submitLoading = false + this.goBack(); + }) + } + + // let that = this + // eval("that.$refs.form" +0)[0].getFormData().then(formData => { + // // 鏍规嵁褰撳墠浠诲姟鎴栬�呮祦绋嬭璁¢厤缃殑涓嬩竴姝ヨ妭鐐� todo 鏆傛椂鏈秹鍙婂埌鑰冭檻缃戝叧銆佽〃杈惧紡鍜屽鑺傜偣鎯呭喌 + // getNextFlowNodeByStart({deploymentId: this.deployId, variables: formData}).then(res => { + // const data = res.data; + // if (data) { + // this.formData = formData; + // if (data.dataType === 'dynamic') { + // if (data.type === 'assignee') { // 鎸囧畾浜哄憳 + // this.checkSendUser = true; + // this.checkType = "single"; + // } else if (data.type === 'candidateUsers') { // 鍊欓�変汉鍛�(澶氫釜) + // this.checkSendUser = true; + // this.checkType = "multiple"; + // } else if (data.type === 'candidateGroups') { // 鎸囧畾缁�(鎵�灞炶鑹叉帴鏀朵换鍔�) + // this.checkSendRole = true; + // } else { // 浼氱 + // // 娴佺▼璁捐鎸囧畾鐨� elementVariable 浣滀负浼氱浜哄憳鍒楄〃 + // this.multiInstanceVars = data.vars; + // this.checkSendUser = true; + // this.checkType = "multiple"; + // } + // this.taskOpen = true; + // this.taskTitle = "閫夋嫨浠诲姟鎺ユ敹"; + // } else { + // if (this.procDefId) { + // const param = { + // formJson: this.formJson, + // } + // // 澶嶅埗瀵硅薄鐨勫睘鎬у�肩粰鏂扮殑瀵硅薄 + // Object.assign(param, formData); + // // 瀹屾垚浠诲姟 + // completeSubmitFormTask(this.taskId, param).then(res => { + // this.$modal.msgSuccess(res.msg); + // this.goBack(); + // }) + // } + // } + // } + // }) + // }) + }).catch((err) => { + console.log(err) + this.$message({ + type: 'info', + message: '宸插彇娑堟彁浜ゆ搷浣�' + }); + }); + }, /** 閲嶇疆琛ㄥ崟 */ resetForm() { @@ -635,7 +699,6 @@ width: 800px; padding: 15px; } - .clearfix:before, .clearfix:after { display: table; @@ -644,20 +707,16 @@ .clearfix:after { clear: both } - .box-card { width: 100%; margin-bottom: 20px; } - .el-tag + .el-tag { margin-left: 10px; } - .my-label { background: #E1F3D8; } - .form-warp { min-width: 700px; padding: 20px; @@ -665,4 +724,42 @@ margin-bottom: 20px; box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em; } +.before { + span { + color: #F56C6C + } + margin-bottom: 15px; + color: #E6A23C +} +.before_none { + span { + color: #F56C6C + } + margin-bottom: 15px; + margin-top: 15px; + color: #E6A23C +} +.reject-but { + position: absolute; + top: 4px; + right: 4px +} +.current { + span { + color: #409EFF + } + margin-bottom: 15px; + color: #E6A23C +} +.op-list { + position: absolute; + top: 4px; + right: 4px; + display: flex; + justify-content: center; + align-items: center; +} +.tab-min-height { + min-height: 500px; +} </style> diff --git a/src/views/index.vue b/src/views/index.vue index 513d018..d015b96 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -1,145 +1,135 @@ <template> - <div class="home"> - <div class="overview"> - <div class="overview-top"> - <div class="title">椤圭洰鎬昏</div> - <div class="qurey"> - <el-form ref="queryFormRef" :model="queryParams"> - <div class="search_from"> - <el-form-item label="鏃ユ湡"> - <el-date-picker - style="width: 300px" - v-model="timeMerge" - clearable - end-placeholder="缁撴潫鏃堕棿" - format="YYYY-MM-DD" - placeholder="璇烽�夋嫨鏃ユ湡" - size="default" - start-placeholder="寮�濮嬫椂闂�" - type="daterange" - value-format="YYYY-MM-DD" - @change="dataPickerChange" - /> - </el-form-item> - <el-form-item label="琛屾斂鍖哄垝"> - <el-select - v-model="queryParams.area" - clearable - placeholder="璇烽�夋嫨鍖哄垝" - style="width: 180px" - > - <el-option - v-for="item in sys_administrative_divisions" - :key="item.value" - :label="item.label" - :value="item.value" - /> - </el-select> - </el-form-item> - <el-form-item - label="鎶曡祫閲戦" - style="margin-right: 50px" - > - <div class="from_input"> - <el-input - v-model="queryParams.start" - clearable - placeholder="璇疯緭鍏�" - style="width: 100px" - type="number" - /> - 鑷� - <el-input - v-model="queryParams.end" - clearable - placeholder="璇疯緭鍏�" - style="width: 100px" - type="number" - /> - </div> - </el-form-item> - <el-form-item style="margin-right: 20px"> - <el-button - icon="Search" - type="primary" - @click="handleQuery" - >鎼滅储</el-button - > - <el-button icon="Refresh" @click="resetQuery" - >閲嶇疆</el-button - > - </el-form-item> - </div> - </el-form> + <div class="home"> + <div class="overview"> + <div class="overview-top"> + <div class="title">椤圭洰鎬昏</div> + <div class="qurey"> + <el-form ref="queryFormRef" :model="queryParams"> + <div class="search_from"> + <el-form-item label="鏃ユ湡"> + <el-date-picker + style="width: 300px" + v-model="timeMerge" + clearable + end-placeholder="缁撴潫鏃堕棿" + format="YYYY-MM-DD" + placeholder="璇烽�夋嫨鏃ユ湡" + size="default" + start-placeholder="寮�濮嬫椂闂�" + type="daterange" + value-format="YYYY-MM-DD" + @change="dataPickerChange" + /> + </el-form-item> + <el-form-item label="琛屾斂鍖哄垝"> + <el-select + v-model="queryParams.area" + clearable + placeholder="璇烽�夋嫨鍖哄垝" + style="width: 180px" + > + <el-option + v-for="item in sys_administrative_divisions" + :key="item.value" + :label="item.label" + :value="item.value" + /> + </el-select> + </el-form-item> + <el-form-item label="鎶曡祫閲戦" style="margin-right: 50px"> + <div class="from_input"> + <el-input + v-model="queryParams.start" + clearable + placeholder="璇疯緭鍏�" + style="width: 100px" + type="number" + /> + 鑷� + <el-input + v-model="queryParams.end" + clearable + placeholder="璇疯緭鍏�" + style="width: 100px" + type="number" + /> </div> + </el-form-item> + <el-form-item style="margin-right: 20px"> + <el-button icon="Search" type="primary" @click="handleQuery" + >鎼滅储</el-button + > + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> </div> - <!-- 缁熻鎯呭喌 --> - <ProjectOverview - :calculation="calculation" - :countExceptionProjectData="countExceptionProjectData" - /> + </el-form> </div> - <!-- 浠e姙浜嬮」 --> - <div class="flex"> - <div class="flex_card"> - <el-card> - <NoticeTable style="height: 340px" /> - </el-card> - </div> - <!-- 娑堟伅閫氱煡 --> - <div class="flex_card"> - <el-card> - <TidingsTable style="height: 340px" /> - </el-card> - </div> - <!-- 鍦板浘 --> - </div> - <div style="margin-top: 10px"> - <el-card> - <div> - <div class="search-form"> - <el-form :model="searchForm" inline size="small"> - <el-form-item label=" "> - <el-input - v-model="searchForm.name" - clearable - placeholder="璇疯緭鍏ラ」鐩悕绉版垨椤圭洰浠g爜" - style="width: 180px" - /> - </el-form-item> - <el-form-item style="margin-right: 0px"> - <el-button - clearable - @clear="searchList" - icon="Search" - type="primary" - @click="searchList" - >鎼滅储</el-button - > - <el-button icon="Refresh" @click="mapQuery" - >閲嶇疆</el-button - > - </el-form-item> - </el-form> - </div> - <div class="map_div"> - <Map - id="DangerSourceId" - ref="mapRef" - :is-show-control="true" - :list-type="true" - :map-list="tableDatas" - :map-type="true" - class="w-full h-full border-r border-[#DBDEEA]" - @label-click="showDetails" - @mark-click="showDetails" - @current-label-style-change="labelStyleChange" - /> - </div> - </div> - </el-card> - </div> + </div> + <!-- 缁熻鎯呭喌 --> + <ProjectOverview + :calculation="calculation" + :countExceptionProjectData="countExceptionProjectData" + /> </div> + <!-- 寰呭姙浜嬮」 --> + <div class="flex"> + <div class="flex_card"> + <el-card> + <NoticeTable style="height: 340px" /> + </el-card> + </div> + <!-- 娑堟伅閫氱煡 --> + <div class="flex_card"> + <el-card> + <TidingsTable style="height: 340px" /> + </el-card> + </div> + <!-- 鍦板浘 --> + </div> + <div style="margin-top: 10px"> + <el-card> + <div> + <div class="search-form"> + <el-form :model="searchForm" inline size="small"> + <el-form-item label=""> + <el-input + v-model="searchForm.name" + clearable + placeholder="璇疯緭鍏ラ」鐩悕绉版垨椤圭洰浠g爜" + style="width: 240px" + /> + </el-form-item> + <el-form-item style="margin-right: 0px"> + <el-button + clearable + @clear="searchList" + icon="Search" + type="primary" + @click="searchList" + >鎼滅储</el-button + > + <el-button icon="Refresh" @click="mapQuery">閲嶇疆</el-button> + </el-form-item> + </el-form> + </div> + <div class="map_div"> + <Map + id="DangerSourceId" + ref="mapRef" + :is-show-control="true" + :list-type="false" + :map-list="tableDatas" + :map-type="true" + class="w-full h-full border-r border-[#DBDEEA]" + @label-click="showDetails" + @mark-click="showDetails" + @current-label-style-change="labelStyleChange" + /> + </div> + </div> + </el-card> + </div> + </div> </template> <script> @@ -148,235 +138,236 @@ import NoticeTable from "./components/noticeTable.vue"; import TidingsTable from "./components/tidingsTable.vue"; import Map from "./components/Map/index.vue"; -import { getCalculatioln, getAbnormalData } from '@/api/login'; +import { getCalculatioln, getAbnormalData } from "@/api/login"; +import { searchByKey } from "@/api/projectEngineering/projectInfo"; export default { - name: "Index", - data() { - return { - queryParams: {}, - timeMerge: [], - sys_administrative_divisions: [], - countExceptionProjectData: {}, - searchForm: {}, - tableDatas: [ - { - name: "灏勬椽甯�", - value: 105.37281, - lat: 30.87145, - lon: 105.37281, - id: "222222222", - }, - { - name: "xxxx", - value: 105.22332, - lat: 31.52421, - lon: 106.22332, - id: "11112", - }, - ], - calculation: [ - { text: '鍌�', mun: 0, statistics: '', statisticsMun: '0' }, - { text: '寤�', mun: 0, statistics: '', statisticsMun: '0' }, - { text: '鐪�', mun: 0, statistics: '', statisticsMun: '0' }, - { text: '甯�', mun: 0, statistics: '', statisticsMun: '0' }, - { text: '鏂�', mun: 0, statistics: '', statisticsMun: '0' }, - { text: '绔�', mun: 0, statistics: '', statisticsMun: '0' }, - { text: '鍘�', mun: 0, statistics: '', statisticsMun: '0' }, - { text: '鏅�', mun: 0, statistics: '', statisticsMun: '0' } - ] - }; + name: "Index", + data() { + return { + queryParams: {}, + timeMerge: [], + sys_administrative_divisions: [], + countExceptionProjectData: {}, + searchForm: {}, + tableDatas: [], + calculation: [ + { text: "鍌�", mun: 0, statistics: "", statisticsMun: "0" }, + { text: "寤�", mun: 0, statistics: "", statisticsMun: "0" }, + { text: "鐪�", mun: 0, statistics: "", statisticsMun: "0" }, + { text: "甯�", mun: 0, statistics: "", statisticsMun: "0" }, + { text: "鏂�", mun: 0, statistics: "", statisticsMun: "0" }, + { text: "绔�", mun: 0, statistics: "", statisticsMun: "0" }, + { text: "鍘�", mun: 0, statistics: "", statisticsMun: "0" }, + { text: "鏅�", mun: 0, statistics: "", statisticsMun: "0" }, + ], + }; + }, + components: { + SvgIcon, + ProjectOverview, + NoticeTable, + TidingsTable, + Map, + }, + created() { + this.handleQuery(); + this.searchList(); + }, + methods: { + dataPickerChange(val) { + if (!val) { + this.queryParams.startTime = ""; + this.queryParams.endTime = ""; + return; + } + + this.queryParams.startTime = this.timeMerge[0]; + this.queryParams.endTime = this.timeMerge[1]; }, - components: { - SvgIcon, - ProjectOverview, - NoticeTable, - TidingsTable, - Map, + handleQuery() { + const obj = { + startDate: this.queryParams.startTime, + endDate: this.queryParams.endTime, + areaCode: this.queryParams.area, + minInvestment: this.queryParams.start, + maxInvestment: this.queryParams.end, + }; + + getCalculatioln(obj).then((res) => { + const arr = res.data.proPhaseCountVO?.concat(res.data.impTypeCountVO); + const newArr = arr.map((item) => ({ + text: item.text, + mun: item.count, + statistics: item.type, + statisticsMun: item.amount, + })); + // 鍒涘缓涓�涓璞★紝浠ヤ究鏍规嵁 text 灞炴�у揩閫熸煡鎵� newArr 涓殑瀵硅薄 + const newArrLookup = newArr.reduce((lookup, item) => { + lookup[item.text] = item; + return lookup; + }, {}); + + // 鏇存柊 calculation 鏁扮粍锛屼繚鎸佸叾鍘熷椤哄簭 + this.calculation = this.calculation.map((item) => { + const newItem = newArrLookup[item.text]; + return newItem ? newItem : item; // 濡傛灉 newItem 瀛樺湪锛屽垯杩斿洖 newItem锛屽惁鍒欒繑鍥炲師濮� item + }); + }); + + this.abnormalData(obj); }, - created() { - this.handleQuery() + + // 鍦板浘鎼滅储 + searchList() { + var _this = this; + searchByKey({ wordKey: this.searchForm.name }).then((res) => { + if (res.code == 200) { + if (res.data.length > 0) { + // this.$refs["mapRef"].showProjectInfo(res.data); + // _this.tableDatas = res.data; + setTimeout(() => { + _this.$refs["mapRef"].makeAllMask(res.data); + }, 2000); + } else { + _this.$message.error("鏈煡璇㈠埌瀵瑰簲椤圭洰"); + } + } else { + _this.$message.error(res.msg); + } + }); }, - methods: { - dataPickerChange(val) { - if (!val) { - this.queryParams.startTime = ""; - this.queryParams.endTime = ""; - return; - } - - this.queryParams.startTime = this.timeMerge[0]; - this.queryParams.endTime = this.timeMerge[1]; - }, - handleQuery() { - const obj = { - startDate: this.queryParams.startTime, - endDate: this.queryParams.endTime, - areaCode: this.queryParams.area, - minInvestment: this.queryParams.start, - maxInvestment: this.queryParams.end, - }; - - getCalculatioln(obj).then((res) => { - - const arr = res.data.proPhaseCountVO?.concat(res.data.impTypeCountVO); - const newArr = arr.map((item) => ({ - text: item.text, - mun: item.count, - statistics: item.type, - statisticsMun: item.amount, - })); - // 鍒涘缓涓�涓璞★紝浠ヤ究鏍规嵁 text 灞炴�у揩閫熸煡鎵� newArr 涓殑瀵硅薄 - const newArrLookup = newArr.reduce((lookup, item) => { - lookup[item.text] = item; - return lookup; - }, {}); - - // 鏇存柊 calculation 鏁扮粍锛屼繚鎸佸叾鍘熷椤哄簭 - this.calculation = this.calculation.map((item) => { - const newItem = newArrLookup[item.text]; - return newItem ? newItem : item; // 濡傛灉 newItem 瀛樺湪锛屽垯杩斿洖 newItem锛屽惁鍒欒繑鍥炲師濮� item - }); - - }); - - this.abnormalData(obj); - }, - - // 鑾峰彇寮傚父鏁版嵁 - async abnormalData(obj) { - const res = await getAbnormalData(obj); - this.countExceptionProjectData = res.data; - }, - - //鍦板浘璇︽儏 - showDetails(row) { - console.log(row); - }, - - labelStyleChange(currentLabel) { - if (lastLabel) { - lastLabel.setBackgroundColor("#fff"); - lastLabel.setFontColor("var(--el-color-primary)"); - } - currentLabel.setBackgroundColor("var(--el-color-primary)"); - currentLabel.setFontColor("#fff"); - lastLabel = currentLabel; - }, - resetQuery() { - this.queryParams = { - area: "", - start: "", - end: "", - startTime: "", - endTime: "", - }; - this.timeMerge = []; - this.handleQuery(); - }, - - // 鍦板浘鎼滅储 - async searchList() { - // await search() - this.mapRef.moveTo(105.37281, 30.87145); - }, - mapQuery() { }, + // 鑾峰彇寮傚父鏁版嵁 + async abnormalData(obj) { + const res = await getAbnormalData(obj); + this.countExceptionProjectData = res.data; }, + + //鍦板浘璇︽儏 + showDetails(row) { + console.log(row); + }, + + labelStyleChange(currentLabel) { + if (lastLabel) { + lastLabel.setBackgroundColor("#fff"); + lastLabel.setFontColor("var(--el-color-primary)"); + } + currentLabel.setBackgroundColor("var(--el-color-primary)"); + currentLabel.setFontColor("#fff"); + lastLabel = currentLabel; + }, + resetQuery() { + this.queryParams = { + area: "", + start: "", + end: "", + startTime: "", + endTime: "", + }; + this.timeMerge = []; + this.handleQuery(); + }, + mapQuery() {}, + }, }; </script> <style scoped lang="scss"> .home { - padding: 10px; - background-color: #f3f7fc; - min-height: calc(100vh - 85px); - overflow-x: auto; + padding: 10px; + background-color: #f3f7fc; + min-height: calc(100vh - 85px); + overflow-x: auto; - .overview { - padding: 10px 0 0 10px; - height: 280px; - min-width: 1600px; - background-color: #fff; - border-radius: 6px; + .overview { + padding: 10px 0 0 10px; + height: 280px; + min-width: 1600px; + background-color: #fff; + border-radius: 6px; - .overview-top { - display: flex; - justify-content: space-between; + .overview-top { + display: flex; + justify-content: space-between; - .title { - font-size: 16px; - } + .title { + font-size: 16px; + } - .qurey { - font-size: 12px; - font-weight: 100; - } - } + .qurey { + font-size: 12px; + font-weight: 100; + } } + } - .search-form { - display: flex; - justify-content: flex-end; - } + .search-form { + padding: 5px; + position: absolute; + z-index: 999; + display: flex; + justify-content: flex-end; + } } // ::v-deep .el-form-item { // display: inline-block !important; // margin-right: 10px; // } ::v-deep .el-form-item--medium .el-form-item__content { - display: inline-block !important; + display: inline-block !important; } ::v-deep .el-form-item__label { - font-size: 12px; - font-weight: 400; + font-size: 12px; + font-weight: 400; } ::v-deep .el-button { - font-size: 12px; + font-size: 12px; } ::v-deep.el-input__inner { - font-size: 12px; - height: 32px; + font-size: 12px; + height: 32px; } ::v-deep.el-range-input { - font-size: 12px; + font-size: 12px; } ::v-deep.el-select__placeholder { - font-size: 12px; + font-size: 12px; } -::v-deep input[type='number']::-webkit-inner-spin-button, -input[type='number']::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; +::v-deep input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; } -input[type='number'] { - -moz-appearance: textfield; +input[type="number"] { + -moz-appearance: textfield; } .search_from { - display: flex; - justify-self: justify-end; - gap: 10px; + display: flex; + justify-self: justify-end; + gap: 10px; } .flex { - display: flex; - gap: 2%; + display: flex; + gap: 2%; } .flex_card { - width: 49%; - margin: 10px 0px; + width: 49%; + margin: 10px 0px; } .from_input { - display: flex; - gap: 10px; - font-size: 12px; + display: flex; + gap: 10px; + font-size: 12px; } .map_div { - display: flex; - width: 100%; - height: 500px; - border: #dbdeea; + display: flex; + width: 100%; + height: 500px; + border: #dbdeea; } </style> diff --git a/src/views/projectProcess/detail/index.vue b/src/views/projectProcess/detail/index.vue index adf4bc1..3f615c0 100644 --- a/src/views/projectProcess/detail/index.vue +++ b/src/views/projectProcess/detail/index.vue @@ -18,7 +18,7 @@ </div> <div class="search-warp"> <div @click="changeTab(1, 'all')" :class="{'item-warm': true, 'all-color': true, 'active': 1 === selectTabId}">鍏ㄩ儴浜嬮」<span v-if="detailData && detailData.statistics">锛坽{detailData.statistics.totalTaskNum}}锛�</span></div> - <div @click="changeTab(2, 'todo')" :class="{'item-warm': true, 'all-color': true, 'active': 2 === selectTabId}">浠e姙浜嬮」<span v-if="detailData && detailData.statistics">锛坽{detailData.statistics.todoTaskNum}}锛�</span></div> + <div @click="changeTab(2, 'todo')" :class="{'item-warm': true, 'all-color': true, 'active': 2 === selectTabId}">寰呭姙浜嬮」<span v-if="detailData && detailData.statistics">锛坽{detailData.statistics.todoTaskNum}}锛�</span></div> <div @click="changeTab(3, 'todo')" :class="{'item-warm': true, 'current-color': true, 'active': 3 === selectTabId}">褰撳墠鐜妭</div> <div @click="changeTab(4, 'remaining')" :class="{'item-warm': true, 'remaining-color': true, 'active': 4 === selectTabId}">鍓╀綑浜嬮」<span v-if="detailData && detailData.statistics">锛坽{detailData.statistics.remainingTaskNum}}锛�</span></div> <div @click="changeTab(5, 'timely')" :class="{'item-warm': true, 'timely-color': true, 'active': 5 === selectTabId}">鎸夋椂瀹屾垚锛�0锛�</div> @@ -26,7 +26,7 @@ <div @click="changeTab(7, 'willOvertime')" :class="{'item-warm': true, 'willOvertime-color': true, 'active': 7 === selectTabId}">涓存湡浜嬮」锛�0锛�</div> <div @click="changeTab(8, 'urge')" :class="{'item-warm': true, 'urge-color': true, 'active': 8 === selectTabId}">鐫e姙浜嬮」锛�0锛�</div> </div> - <div style="display: flex;justify-content: center;align-items: center;margin-top: 20px"> + <div style="display: flex;justify-content: center;align-items: center;margin-top: 20px; position: relative"> <el-form :inline="true" :model="queryParams" class="demo-form-inline"> <el-form-item label="浠诲姟鍚嶇О"> <el-input v-model="queryParams.taskName" placeholder="浠诲姟鍚嶇О"></el-input> @@ -35,6 +35,10 @@ <el-button type="primary" @click="search">鏌ヨ</el-button> </el-form-item> </el-form> + <div style="position: absolute; right: 0; top: 0"> + <el-button @click="openProcessImg" v-loading="imgLoading" type="primary">娴佺▼鍥�</el-button> + <el-button @click="openRecord" type="info" v-loading="recordLoading">娴佽浆璁板綍</el-button> + </div> </div> <div class="table"> <el-table @@ -115,6 +119,75 @@ </el-pagination> </div> </div> + + <el-dialog + :title="`${this.queryParams.processName}锛氭祦绋嬪浘`" + :visible.sync="processImgShow" + :fullscreen="true" + :close-on-click-modal="false" + :destroy-on-close="true" + > + <div> + <bpmn-viewer :flowData="flowData" :procInsId="queryParams.processInsId"/> + </div> + </el-dialog> + + <el-dialog + :title="`${this.queryParams.processName}锛氭祦杞褰昤" + :visible.sync="processRecordShow" + :fullscreen="true" + :close-on-click-modal="false" + :destroy-on-close="true" + > + <div> + <div class="block"> + <el-timeline> + <el-timeline-item + v-for="(item,index ) in flowRecordList" + :key="index" + :icon="setIcon(item.finishTime)" + :color="setColor(item.finishTime)" + > + <p style="font-weight: 700">{{item.taskName}} + <span v-if="item.comment && item.comment.type === '3'" style="color: red">(鎵ц浜嗛┏鍥�)</span> + <span v-if="item.overtime && item.overtime==='red'" style="color: red">(宸茶秴鏃�)</span> + <span v-if="item.overtime && item.overtime==='yellow'" style="color: orange">(鍗冲皢瓒呮椂)</span> + </p> + <el-card :body-style="{ padding: '10px' }"> + <el-descriptions class="margin-top" :column="1" size="small" border> + <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label"> + <template slot="label"><i class="el-icon-user"></i>鍔炵悊浜�</template> + {{item.assigneeName}} + <el-tag type="info" size="mini">{{item.deptName}}</el-tag> + </el-descriptions-item> + <el-descriptions-item v-if="item.candidate" label-class-name="my-label"> + <template slot="label"><i class="el-icon-user"></i>鍊欓�夊姙鐞�</template> + {{item.candidate}} + </el-descriptions-item> + <el-descriptions-item label-class-name="my-label"> + <template slot="label"><i class="el-icon-date"></i>鎺ユ敹鏃堕棿</template> + {{item.createTime}} + </el-descriptions-item> + <el-descriptions-item v-if="item.finishTime" label-class-name="my-label"> + <template slot="label"><i class="el-icon-date"></i>澶勭悊鏃堕棿</template> + {{item.finishTime}} + </el-descriptions-item> + <el-descriptions-item v-if="item.duration" label-class-name="my-label"> + <template slot="label"><i class="el-icon-time"></i>鑰楁椂</template> + {{item.duration}} + </el-descriptions-item> + <el-descriptions-item v-if="item.comment" label-class-name="my-label"> + <template slot="label"><i class="el-icon-tickets"></i>澶勭悊鎰忚</template> + {{item.comment.comment}} + </el-descriptions-item> + </el-descriptions> + </el-card> + </el-timeline-item> + </el-timeline> + </div> + </div> + </el-dialog> + </div> </template> @@ -124,11 +197,24 @@ getProjectProcessDetailTaskList, getTaskIsAuditing } from "@/api/projectProcess/projectProcess"; +import {flowXmlAndNode} from "@/api/flowable/definition"; +import BpmnViewer from '@/components/Process/viewer'; +import {flowRecord} from "@/api/flowable/finished"; export default { name: "Detail", + components: { + BpmnViewer + }, data() { return { + processRecordShow: false, // 娴佽浆璁板綍鏄剧ず + flowRecordList: [], // 娴佺▼娴佽浆鏁版嵁 + recordLoading: false, // 娴佽浆璁板綍鍔犺浇 + // 妯″瀷xml鏁版嵁 + flowData: {}, + processImgShow: false, // 娴佺▼鍥炬樉绀� + imgLoading: false, // 娴佺▼鍥惧姞杞� loading: false, tableLoading: false, detailData: {}, @@ -142,18 +228,21 @@ currentPage: 1, projectId: null, processDefId: null, + processInsId: null, + deployId: null, processName: '' // 娴佺▼鍚嶇О } } }, mounted() { console.log(this.$route.query, "鍙傛暟") - let params = JSON.parse(sessionStorage.getItem("projectProDetail")) console.log(params, "鍙傛暟") if (!params || ! params.projectId) { this.queryParams.projectId = this.$route.query.projectId this.queryParams.processDefId = this.$route.query.processDefId + this.queryParams.processInsId = this.$route.query.processInsId + this.queryParams.deployId = this.$route.query.deployId this.queryParams.processName = this.$route.query.processName sessionStorage.setItem("projectProDetail", JSON.stringify(this.queryParams)) } else { @@ -163,6 +252,43 @@ this.getProjectProcessInfo() }, methods: { + setIcon(val) { + if (val) { + return "el-icon-check"; + } else { + return "el-icon-time"; + } + }, + setColor(val) { + if (val) { + return "#2bc418"; + } else { + return "#b3bdbb"; + } + }, + openRecord() { + this.getFlowRecordList(this.queryParams.processInsId); + }, + openProcessImg() { + this.imgLoading = true + flowXmlAndNode({processInsId:this.queryParams.processInsId,deployId:this.queryParams.deployId}).then(res => { + this.imgLoading = false + this.processImgShow = true + this.$nextTick(() => { + this.flowData = res.data; + }) + }) + }, + /** 娴佺▼娴佽浆璁板綍 */ + getFlowRecordList(procInsId) { + const params = {procInsId: procInsId} + this.recordLoading = true + flowRecord(params).then(res => { + this.flowRecordList = res.data.flowList; + this.recordLoading = false + this.processRecordShow = true + }) + }, unitFormatter(row) { if (row.handlerType === 'USER') { return null; @@ -186,7 +312,7 @@ if (row.taskStatus !== '宸插畬鎴�') { return null } else { - return row.handlerName + return row.actualHandlerUserName } }, showHandle(row) { @@ -199,7 +325,7 @@ return row.handlerUnitId.indexOf(this.$store.state.user.deptId) !== -1 // return this.$store.state.user.name === '甯傚彂灞曟敼闈╁' || this.$store.state.user.name === '甯備綇寤哄眬' } else if (row.handlerType === "ROLE") { - return this.$auth.hasRole(row.handlerUnitName) + return row.handlerUnitId.some(roleId => this.$store.state.user.roleIds.indexOf(roleId) !== -1) } } else { return false @@ -256,11 +382,12 @@ this.getList() }, getList() { + this.tableLoading = true // 鑾峰彇浠诲姟鍒楄〃 getProjectProcessDetailTaskList(this.queryParams).then(res => { + this.tableLoading =false this.taskList = res.data this.total = res.total - this.tableLoading =false }) }, // 鏌ヨ璇︽儏 @@ -273,14 +400,12 @@ }) }, changeTab(id, event) { - this.tableLoading = true let beforeId = this.selectTabId this.selectTabId = id this.queryParams.taskType = event if (beforeId !== id) { this.getList() } - } } } diff --git a/src/views/projectProcess/index.vue b/src/views/projectProcess/index.vue index f33fa53..b16baeb 100644 --- a/src/views/projectProcess/index.vue +++ b/src/views/projectProcess/index.vue @@ -399,6 +399,8 @@ query: { projectId: row.id, processDefId: row.processDefId, + processInsId: row.processInsId, + deployId: row.deployId, processName: row.flowableProcessName } }) -- Gitblit v1.8.0