cxc/data_visual
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

gantt

Browse Source
This commit is contained in:
cxc
2022-12-01 13:53:11 +08:00
parent 7cbdcb9916
commit ef5911f069
33 changed files with 352 additions and 674 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -21,3 +21,5 @@ pnpm-debug.log*
*.njsproj
*.sln
*.sw?
*.7z
*.zip

1
apps/com.awspaas.user.apps.cmp/screen/css/253.acfc2f5c.css
View File

@ -1 +0,0 @@
#container[data-v-4939489c]{width:916px;height:580px}

1
apps/com.awspaas.user.apps.cmp/screen/css/36.1dd31ba2.css
View File

File diff suppressed because one or more lines are too long

1
apps/com.awspaas.user.apps.cmp/screen/css/513.07ea7585.css
View File

@ -1 +0,0 @@
.monitor-item[data-v-73d5f491]{overflow:hidden;background-image:url(../../../../apps/com.awspaas.user.apps.cmp/screen/img/monitor.04a2160d.png);background-size:100% 100%}.monitor-item .video-wrap[data-v-73d5f491]{background-color:#333;position:relative;margin-top:10%;width:98%;height:65%}.monitor-item .video-wrap .monitor-screen[data-v-73d5f491]{width:100%;height:100%}.monitor-item .video-wrap .overlay[data-v-73d5f491]{z-index:99;position:absolute;left:0;top:0;width:100%;height:100%}.monitor-item .controls[data-v-73d5f491]{width:100%}.monitor-item .controls .fullscreen[data-v-73d5f491],.monitor-item .controls .playbtn[data-v-73d5f491]{font-size:40px;color:#fff}.monitor-item .controls img[data-v-73d5f491]{width:28px;height:28px}.monitor-item .desc[data-v-73d5f491]{font-family:PingFangSC-Medium;font-size:16px;color:#fff;letter-spacing:0;line-height:24px;text-shadow:0 0 7px #158eff;font-weight:500}

1
apps/com.awspaas.user.apps.cmp/screen/css/934.b4689663.css
View File

File diff suppressed because one or more lines are too long

3
apps/com.awspaas.user.apps.cmp/screen/css/app.c844b777.css
View File

File diff suppressed because one or more lines are too long

BIN
apps/com.awspaas.user.apps.cmp/screen/img/bg@3x.e76e19cf.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.1 MiB

BIN
apps/com.awspaas.user.apps.cmp/screen/img/monitor.04a2160d.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 914 KiB

BIN
apps/com.awspaas.user.apps.cmp/screen/img/people-count@3x.447d37fb.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 166 KiB

2
apps/com.awspaas.user.apps.cmp/screen/js/253.3a284f19.js
View File

@ -1,2 +0,0 @@
"use strict";(self["webpackChunkdata_visual_webpack"]=self["webpackChunkdata_visual_webpack"]||[]).push([[253],{2253:function(a,t,e){e.r(t),e.d(t,{default:function(){return p}});var n=e(3396),s=e(70);const o={id:"container"};var c={__name:"AMap",setup(a){const t=a=>{parent.postMessage({type:"marker-clicked",proid:a.target.getExtData().proid})},e=(a,e)=>{for(const n of e){const e=n.MAP.split(",")[1],s=n.MAP.split(",")[0],o=new AMap.Marker({position:[e,s],map:a,extData:{proid:n.PROID}});o.on("click",t)}};return(0,n.bv)((async()=>{var a=new AMap.Map("container",{mapStyle:"amap://styles/25ad310ebf2a324fcc74707a92a4d0dc",zoom:24,resizeEnable:!0,center:[111.986715,40.740616]});window.addEventListener("message",(t=>{console.log(t.data);const e=t.data.coordinate,n=e.split(",")[1],s=e.split(",")[0];a.setZoomAndCenter(24,[n,s])}));const t=await s.ZP.get("tette");e(a,t)})),(0,n.Ah)((()=>{marker.off("click",t)})),(a,t)=>((0,n.wg)(),(0,n.iD)("div",o))}},r=e(89);const i=(0,r.Z)(c,[["__scopeId","data-v-4939489c"]]);var p=i}}]);
//# sourceMappingURL=253.3a284f19.js.map

1
apps/com.awspaas.user.apps.cmp/screen/js/253.3a284f19.js.map
View File

File diff suppressed because one or more lines are too long

26
apps/com.awspaas.user.apps.cmp/screen/js/36.296c14be.js
View File

File diff suppressed because one or more lines are too long

1
apps/com.awspaas.user.apps.cmp/screen/js/36.296c14be.js.map
View File

File diff suppressed because one or more lines are too long

2
apps/com.awspaas.user.apps.cmp/screen/js/513.3f0571ff.js
View File

@ -1,2 +0,0 @@
(self["webpackChunkdata_visual_webpack"]=self["webpackChunkdata_visual_webpack"]||[]).push([[513],{3013:function(r){r.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},260:function(r,t,n){"use strict";var e,o,i,a=n(3013),y=n(9781),p=n(7854),f=n(614),u=n(111),c=n(2597),d=n(648),s=n(6330),A=n(8880),h=n(8052),v=n(3070).f,T=n(7976),l=n(9518),g=n(7674),_=n(5112),w=n(9711),x=n(9909),I=x.enforce,O=x.get,R=p.Int8Array,b=R&&R.prototype,C=p.Uint8ClampedArray,E=C&&C.prototype,U=R&&l(R),k=b&&l(b),P=Object.prototype,F=p.TypeError,M=_("toStringTag"),V=w("TYPED_ARRAY_TAG"),Y="TypedArrayConstructor",j=a&&!!g&&"Opera"!==d(p.opera),m=!1,B={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},D={BigInt64Array:8,BigUint64Array:8},L=function(r){if(!u(r))return!1;var t=d(r);return"DataView"===t||c(B,t)||c(D,t)},S=function(r){var t=l(r);if(u(t)){var n=O(t);return n&&c(n,Y)?n[Y]:S(t)}},G=function(r){if(!u(r))return!1;var t=d(r);return c(B,t)||c(D,t)},N=function(r){if(G(r))return r;throw F("Target is not a typed array")},W=function(r){if(f(r)&&(!g||T(U,r)))return r;throw F(s(r)+" is not a typed array constructor")},Z=function(r,t,n,e){if(y){if(n)for(var o in B){var i=p[o];if(i&&c(i.prototype,r))try{delete i.prototype[r]}catch(a){try{i.prototype[r]=t}catch(f){}}}k[r]&&!n||h(k,r,n?t:j&&b[r]||t,e)}},q=function(r,t,n){var e,o;if(y){if(g){if(n)for(e in B)if(o=p[e],o&&c(o,r))try{delete o[r]}catch(i){}if(U[r]&&!n)return;try{return h(U,r,n?t:j&&U[r]||t)}catch(i){}}for(e in B)o=p[e],!o||o[r]&&!n||h(o,r,t)}};for(e in B)o=p[e],i=o&&o.prototype,i?I(i)[Y]=o:j=!1;for(e in D)o=p[e],i=o&&o.prototype,i&&(I(i)[Y]=o);if((!j||!f(U)||U===Function.prototype)&&(U=function(){throw F("Incorrect invocation")},j))for(e in B)p[e]&&g(p[e],U);if((!j||!k||k===P)&&(k=U.prototype,j))for(e in B)p[e]&&g(p[e].prototype,k);if(j&&l(E)!==k&&g(E,k),y&&!c(k,M))for(e in m=!0,v(k,M,{get:function(){return u(this)?this[V]:void 0}}),B)p[e]&&A(p[e],V,e);r.exports={NATIVE_ARRAY_BUFFER_VIEWS:j,TYPED_ARRAY_TAG:m&&V,aTypedArray:N,aTypedArrayConstructor:W,exportTypedArrayMethod:Z,exportTypedArrayStaticMethod:q,getTypedArrayConstructor:S,isView:L,isTypedArray:G,TypedArray:U,TypedArrayPrototype:k}},8544:function(r,t,n){var e=n(7293);r.exports=!e((function(){function r(){}return r.prototype.constructor=null,Object.getPrototypeOf(new r)!==r.prototype}))},9518:function(r,t,n){var e=n(2597),o=n(614),i=n(7908),a=n(6200),y=n(8544),p=a("IE_PROTO"),f=Object,u=f.prototype;r.exports=y?f.getPrototypeOf:function(r){var t=i(r);if(e(t,p))return t[p];var n=t.constructor;return o(n)&&t instanceof n?n.prototype:t instanceof f?u:null}},8675:function(r,t,n){"use strict";var e=n(260),o=n(6244),i=n(9303),a=e.aTypedArray,y=e.exportTypedArrayMethod;y("at",(function(r){var t=a(this),n=o(t),e=i(r),y=e>=0?e:n+e;return y<0||y>=n?void 0:t[y]}))},4590:function(r,t,n){"use strict";var e=n(260),o=n(9671).findLastIndex,i=e.aTypedArray,a=e.exportTypedArrayMethod;a("findLastIndex",(function(r){return o(i(this),r,arguments.length>1?arguments[1]:void 0)}))},3408:function(r,t,n){"use strict";var e=n(260),o=n(9671).findLast,i=e.aTypedArray,a=e.exportTypedArrayMethod;a("findLast",(function(r){return o(i(this),r,arguments.length>1?arguments[1]:void 0)}))},6371:function(r,t,n){"use strict";n.r(t),n.d(t,{default:function(){return y}});var e=n(3396),o=n(6552),i={__name:"monitor-detail",setup(r){return(r,t)=>((0,e.wg)(),(0,e.j4)(o.Z,{width:"1900",height:"960"}))}};const a=i;var y=a}}]);
//# sourceMappingURL=513.3f0571ff.js.map

1
apps/com.awspaas.user.apps.cmp/screen/js/513.3f0571ff.js.map
View File

File diff suppressed because one or more lines are too long

378
apps/com.awspaas.user.apps.cmp/screen/js/552.0b2e0beb.js
View File

File diff suppressed because one or more lines are too long

1
apps/com.awspaas.user.apps.cmp/screen/js/552.0b2e0beb.js.map
View File

File diff suppressed because one or more lines are too long

2
apps/com.awspaas.user.apps.cmp/screen/js/589.0b579ff4.js
View File

File diff suppressed because one or more lines are too long

1
apps/com.awspaas.user.apps.cmp/screen/js/589.0b579ff4.js.map
View File

File diff suppressed because one or more lines are too long

2
apps/com.awspaas.user.apps.cmp/screen/js/70.805995c3.js
View File

File diff suppressed because one or more lines are too long

1
apps/com.awspaas.user.apps.cmp/screen/js/70.805995c3.js.map
View File

File diff suppressed because one or more lines are too long

2
apps/com.awspaas.user.apps.cmp/screen/js/934.4353ee49.js
View File

File diff suppressed because one or more lines are too long

1
apps/com.awspaas.user.apps.cmp/screen/js/934.4353ee49.js.map
View File

File diff suppressed because one or more lines are too long

2
apps/com.awspaas.user.apps.cmp/screen/js/app.56b2db36.js
View File

File diff suppressed because one or more lines are too long

1
apps/com.awspaas.user.apps.cmp/screen/js/app.56b2db36.js.map
View File

File diff suppressed because one or more lines are too long

8
apps/com.awspaas.user.apps.cmp/screen/js/chunk-vendors.0836519a.js
View File

File diff suppressed because one or more lines are too long

1
apps/com.awspaas.user.apps.cmp/screen/js/chunk-vendors.0836519a.js.map
View File

File diff suppressed because one or more lines are too long

1
package.json
View File

@ -18,6 +18,7 @@
"echarts": "^5.3.3",
"element-plus": "^2.2.19",
"flv.js": "^1.6.2",
"lodash-es": "^4.17.21",
"vue": "^3.2.13",
"vue-router": "^4.1.5"
},

2
src/components/ChartContainer.vue
View File

@ -43,7 +43,7 @@ const { title } = toRefs(props);
.suffix {
position: absolute;
top: 50%;
right: 40px;
right: 38px;
transform: translateY(-50%);
}
}

71
src/views/Monitor/index.vue
View File

@ -1,5 +1,16 @@
<template>
<div class="wrap flex justify-between">
<div class="wrap flex justify-between relative">
<NConfigProvider :theme="darkTheme">
<n-tabs
type="segment"
class="absolute right-3 w-80"
style="top: -45px"
v-model:value="mode"
>
<n-tab-pane name="camera" tab="摄像头列表"></n-tab-pane>
<n-tab-pane name="image" tab="图片列表"></n-tab-pane>
</n-tabs>
</NConfigProvider>
<div class="monitor-switcher">
<div class="title">项目列表</div>
<!-- <input type="text" class="search" placeholder="搜索摄像头" /> -->
@ -26,7 +37,7 @@
</li>
</ul>
</div>
<div v-if="cameraList.length" class="monitor-list grid grid-cols-2">
<div v-if="mode === 'camera'" class="monitor-list grid grid-cols-2">
<Camera
v-for="(item, index) in cameraList"
:source="item.flvUrl"
@ -49,14 +60,17 @@
</div>
</div> -->
</div>
<div v-else class="monitor-list image-list grid grid-cols-2">
<div
v-else-if="mode === 'image'"
class="monitor-list image-list grid grid-cols-2"
>
<!-- <div :key="item"> -->
<n-image
:style="{
// width: `500px`,
height: `420px`,
}"
v-for="item in imageList.slice(0, 4)"
v-for="item in imageList.slice(imageIndexStart, 4)"
object-fit="cover"
class="image-item"
:img-props="{
@ -69,12 +83,9 @@
:src="`${protocol}//${host}/portal/r/${item}`"
width="100%"
></n-image>
<!-- src="http://120.48.8.98:13210/image/2022/11/14/bf5e0494e5334439934ca882be4837a5.jpg" -->
<!-- </div> -->
<!-- </div> -->
</div>
<div
v-if="cameraList.length"
v-if="cameraList.length && mode == 'camera'"
class="controls flex flex-col justify-end pb-8"
>
<el-pagination
@ -85,13 +96,19 @@
layout="pager"
:pager-count="5"
></el-pagination>
<!-- <div class="pages flex">
<div class="page active flex justify-center items-center">1</div>
<div class="page flex justify-center items-center">2</div>
<div class="page flex justify-center items-center">3</div>
<div class="page flex justify-center items-center">4</div>
<div class="page flex justify-center items-center">5</div>
</div> -->
</div>
<div
v-else-if="imageList.length && mode == 'image'"
class="controls flex flex-col justify-end pb-8"
>
<el-pagination
background
:total="imageList.length"
v-model:current-page="currentImagePage"
:page-size="4"
layout="pager"
:pager-count="5"
></el-pagination>
</div>
</div>
</template>
@ -100,13 +117,13 @@ import axios from "axios";
import { computed, onMounted, reactive, ref } from "vue";
import { ElPagination } from "element-plus";
import Camera from "./camera.vue";
import { NImage } from "naive-ui";
import { NImage, NTabs, NTabPane, NConfigProvider, darkTheme } from "naive-ui";
const protocol = ref("");
protocol.value = location.protocol;
const host = ref("");
host.value = location.host;
const mode = ref("camera");
const projectList = ref([]);
const cameraList = ref([]);
const imageList = ref([]);
@ -128,6 +145,15 @@ const currentPage = computed({
loadCameraList();
},
});
const imageIndexStart = ref(0);
const currentImagePage = computed({
get() {
return Math.floor(imageIndexStart.value / 4) + 1;
},
set(val) {
imageIndexStart.value = (val - 1) * 4;
},
});
const activeIndex = ref(0);
const loadProjectList = async () => {
@ -143,9 +169,9 @@ const loadCameraList = async () => {
});
cameraList.value = resp.data.rows;
total.value = resp.data.total;
if (total.value === 0) {
loadImageList();
}
// if (total.value === 0) {
// loadImageList();
// }
};
const loadImageList = async () => {
@ -161,6 +187,7 @@ const projectClicked = (index) => {
queryParams.query = proid;
queryParams.pageNum = 1;
loadCameraList();
loadImageList();
};
loadProjectList()
@ -172,6 +199,7 @@ loadProjectList()
queryParams.query = proid;
queryParams.pageNum = 1;
loadCameraList();
loadImageList();
});
</script>
<style lang="scss" scoped>
@ -250,6 +278,7 @@ loadProjectList()
.monitor-list {
// row-gap: 45px;
flex: 1;
column-gap: 45px;
// .monitor-item {
// width: 400px;
@ -281,7 +310,7 @@ loadProjectList()
// }
}
.image-list {
flex: 1;
// flex: 1;
margin-left: 80px;
// :deep(.image-item) {
// img {

498
src/views/Overview/Gantt.vue
View File

@ -1,12 +1,12 @@
<template>
<ChartContainer title="项目甘特图">
<template #suffix>
<n-config-provider :locale="zhCN" :theme="darkTheme">
<NRadioGroup v-model:value="mode">
<!-- <n-config-provider :locale="zhCN" :theme="darkTheme">
<NRadioGroup v-model:value="mode" @update:value="modeChanged">
<NRadioButton label="实际" :value="0"></NRadioButton>
<NRadioButton label="预期" :value="1"></NRadioButton>
</NRadioGroup>
</n-config-provider>
</n-config-provider> -->
</template>
<div id="gantt-chart"></div>
</ChartContainer>
@ -17,212 +17,218 @@ import ChartContainer from "../../components/ChartContainer.vue";
import { gantt } from "dhtmlx-gantt";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import {
NRadioGroup,
NRadioButton,
NConfigProvider,
darkTheme,
zhCN,
} from "naive-ui";
import { throttle } from "lodash-es";
// import {
// NRadioGroup,
// NRadioButton,
// NConfigProvider,
// darkTheme,
// zhCN,
// } from "naive-ui";
import { onMounted, ref } from "vue";
// import axios from "axios";
import axios from "axios";
dayjs.extend(duration);
// const projectList = ref([]);
const dataList = ref([]);
const mode = ref(0);
// const mode = ref(0);
const loadGanttData = async (proid) => {
// const resp = await axios.get(
// "./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectProgress&sid=" +
// sid +
// "&projectId=" +
// proid
// );
mode.value = 0;
const resp = {
data: [
{
PROID: "HT6YXM-202211142022110022",
UPDATEDATE: 1668416810000,
TASKTITLE: "三通一平",
RBDATE: "",
UPDATEUSER: "13066661111",
ANNEX: "",
TASKCONTENT: "完成场地三通一平",
TASKID: "RWJD-202211142022110023",
REDATE: "",
CREATEUSER: "13066661111",
ISEND: 0,
PROGRESS: "0",
RESP: "冯珊",
PAY: 0,
PRONAME: "cm测试",
ORGID: "bda44ef3-4588-4a3b-832a-bf4011689f59",
BINDID: "5eb71af6-4893-40f4-b6c2-8c6bdb0b9c41",
BDATE: 1668441600000,
EDATE: 1668614400000,
MILESTONEFLAG: 1,
PROCESSDEFID: "obj_8924ba5cac84443f94c35bf720890255",
CREATEDATE: 1668416810000,
REMARK: "",
STATUS: 0,
DAYS: 12,
ID: "ae5eef83-8ac2-4ddd-9fad-bcbdef80d86a",
},
{
PROID: "HT6YXM-202211142022110022",
UPDATEDATE: 1668416810000,
TASKTITLE: "基础建设",
RBDATE: "",
UPDATEUSER: "13066661111",
ANNEX: "",
TASKCONTENT: "基础建设",
TASKID: "RWJD-202211142022110024",
REDATE: "",
CREATEUSER: "13066661111",
ISEND: 0,
PROGRESS: "0",
RESP: "冯珊",
PAY: 0,
PRONAME: "cm测试",
ORGID: "bda44ef3-4588-4a3b-832a-bf4011689f59",
BINDID: "36b19646-4b1c-40b1-9e41-40c906885dcf",
BDATE: 1668700800000,
EDATE: 1668873600000,
MILESTONEFLAG: 1,
PROCESSDEFID: "obj_8924ba5cac84443f94c35bf720890255",
CREATEDATE: 1668416810000,
REMARK: "",
DAYS: 12,
STATUS: 0,
ID: "a49c227d-a609-4ab4-87ad-c33a67c3f75b",
},
{
PROID: "HT6YXM-202211142022110022",
UPDATEDATE: 1668416810000,
TASKTITLE: "主体50%",
RBDATE: "",
UPDATEUSER: "13066661111",
ANNEX: "",
TASKCONTENT: "主体50%",
TASKID: "RWJD-202211142022110025",
REDATE: "",
CREATEUSER: "13066661111",
ISEND: 0,
PROGRESS: "0",
RESP: "冯珊",
PAY: 0,
PRONAME: "cm测试",
ORGID: "bda44ef3-4588-4a3b-832a-bf4011689f59",
BINDID: "eefdf22f-2aff-4913-845c-b9f812160c62",
BDATE: 1668960000000,
EDATE: 1669046400000,
MILESTONEFLAG: 0,
PROCESSDEFID: "obj_8924ba5cac84443f94c35bf720890255",
CREATEDATE: 1668416810000,
REMARK: "",
STATUS: 0,
DAYS: 12,
ID: "d01c9a0a-cb43-434b-93d8-ce618680acea",
},
{
PROID: "HT6YXM-202211142022110022",
UPDATEDATE: 1668416810000,
TASKTITLE: "主体100%",
RBDATE: "",
UPDATEUSER: "13066661111",
ANNEX: "",
TASKCONTENT: "主体100%",
TASKID: "RWJD-202211142022110026",
REDATE: "",
CREATEUSER: "13066661111",
ISEND: 0,
PROGRESS: "0",
RESP: "冯珊",
PAY: 0,
PRONAME: "cm测试",
ORGID: "bda44ef3-4588-4a3b-832a-bf4011689f59",
BINDID: "d5316e62-9bf9-4bbf-952b-db3dcd35c00e",
BDATE: 1669132800000,
EDATE: 1669478400000,
MILESTONEFLAG: 1,
PROCESSDEFID: "obj_8924ba5cac84443f94c35bf720890255",
CREATEDATE: 1668416810000,
REMARK: "",
STATUS: 1,
DAYS: 12,
ID: "7df6796c-b084-40a5-9da7-2bd89615b527",
},
{
PROID: "HT6YXM-202211142022110022",
UPDATEDATE: 1668416810000,
TASKTITLE: "装修",
RBDATE: "",
UPDATEUSER: "13066661111",
ANNEX: "",
TASKCONTENT: "装修",
TASKID: "RWJD-202211142022110027",
REDATE: "",
CREATEUSER: "13066661111",
ISEND: 0,
PROGRESS: "45",
RESP: "冯珊",
PAY: 0,
PRONAME: "cm测试",
ORGID: "bda44ef3-4588-4a3b-832a-bf4011689f59",
BINDID: "a8180cde-4d00-43a2-9bb1-f84996fc1eb2",
BDATE: 1669564800000,
EDATE: 1669737600000,
MILESTONEFLAG: 1,
PROCESSDEFID: "obj_8924ba5cac84443f94c35bf720890255",
CREATEDATE: 1668416810000,
REMARK: "",
DAYS: 12,
STATUS: 2,
ID: "b3b3e39b-546e-43c8-8475-74d1e6c14c34",
},
],
};
const resp = await axios.get(
"./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectProgress&sid=" +
sid +
"&projectId=" +
proid
);
// mode.value = 0;
// const resp = {
// data: [
// {
// PROID: "HT6YXM-202211142022110022",
// UPDATEDATE: 1668416810000,
// TASKTITLE: "三通一平",
// RBDATE: "",
// UPDATEUSER: "13066661111",
// ANNEX: "",
// TASKCONTENT: "完成场地三通一平",
// TASKID: "RWJD-202211142022110023",
// REDATE: "",
// CREATEUSER: "13066661111",
// ISEND: 0,
// PROGRESS: "0",
// RESP: "冯珊",
// PAY: 0,
// PRONAME: "cm测试",
// ORGID: "bda44ef3-4588-4a3b-832a-bf4011689f59",
// BINDID: "5eb71af6-4893-40f4-b6c2-8c6bdb0b9c41",
// BDATE: "2022-11-20",
// EDATE: "2022-12-01",
// RBDATE: "2022-11-25",
// REDATE: "2022-12-05",
// MILESTONEFLAG: 1,
// PROCESSDEFID: "obj_8924ba5cac84443f94c35bf720890255",
// CREATEDATE: 1668416810000,
// REMARK: "",
// STATUS: 0,
// DAYS: 12,
// ID: "ae5eef83-8ac2-4ddd-9fad-bcbdef80d86a",
// },
// {
// PROID: "HT6YXM-202211142022110022",
// UPDATEDATE: 1668416810000,
// TASKTITLE: "基础建设",
// RBDATE: "",
// UPDATEUSER: "13066661111",
// ANNEX: "",
// TASKCONTENT: "基础建设",
// TASKID: "RWJD-202211142022110024",
// REDATE: "",
// CREATEUSER: "13066661111",
// ISEND: 0,
// PROGRESS: "0",
// RESP: "冯珊",
// PAY: 0,
// PRONAME: "cm测试",
// ORGID: "bda44ef3-4588-4a3b-832a-bf4011689f59",
// BINDID: "36b19646-4b1c-40b1-9e41-40c906885dcf",
// BDATE: "2022-11-20",
// EDATE: "2022-12-01",
// RBDATE: "2022-11-25",
// REDATE: "2022-12-05",
// MILESTONEFLAG: 1,
// PROCESSDEFID: "obj_8924ba5cac84443f94c35bf720890255",
// CREATEDATE: 1668416810000,
// REMARK: "",
// DAYS: 12,
// STATUS: 0,
// ID: "a49c227d-a609-4ab4-87ad-c33a67c3f75b",
// },
// {
// PROID: "HT6YXM-202211142022110022",
// UPDATEDATE: 1668416810000,
// TASKTITLE: "主体50%",
// RBDATE: "",
// UPDATEUSER: "13066661111",
// ANNEX: "",
// TASKCONTENT: "主体50%",
// TASKID: "RWJD-202211142022110025",
// REDATE: "",
// CREATEUSER: "13066661111",
// ISEND: 0,
// PROGRESS: "0",
// RESP: "冯珊",
// PAY: 0,
// PRONAME: "cm测试",
// ORGID: "bda44ef3-4588-4a3b-832a-bf4011689f59",
// BINDID: "eefdf22f-2aff-4913-845c-b9f812160c62",
// BDATE: "2022-11-20",
// EDATE: "2022-12-01",
// RBDATE: "2022-11-25",
// REDATE: "2022-12-05",
// MILESTONEFLAG: 0,
// PROCESSDEFID: "obj_8924ba5cac84443f94c35bf720890255",
// CREATEDATE: 1668416810000,
// REMARK: "",
// STATUS: 0,
// DAYS: 12,
// ID: "d01c9a0a-cb43-434b-93d8-ce618680acea",
// },
// {
// PROID: "HT6YXM-202211142022110022",
// UPDATEDATE: 1668416810000,
// TASKTITLE: "主体100%",
// RBDATE: "",
// UPDATEUSER: "13066661111",
// ANNEX: "",
// TASKCONTENT: "主体100%",
// TASKID: "RWJD-202211142022110026",
// REDATE: "",
// CREATEUSER: "13066661111",
// ISEND: 0,
// PROGRESS: "0",
// RESP: "冯珊",
// PAY: 0,
// PRONAME: "cm测试",
// ORGID: "bda44ef3-4588-4a3b-832a-bf4011689f59",
// BINDID: "d5316e62-9bf9-4bbf-952b-db3dcd35c00e",
// BDATE: "2022-11-20",
// EDATE: "2022-12-01",
// // RBDATE: "2022-11-25",
// // REDATE: "2022-12-05",
// RBDATE: null,
// REDATE: null,
// MILESTONEFLAG: 1,
// PROCESSDEFID: "obj_8924ba5cac84443f94c35bf720890255",
// CREATEDATE: 1668416810000,
// REMARK: "",
// STATUS: 1,
// DAYS: 12,
// ID: "7df6796c-b084-40a5-9da7-2bd89615b527",
// },
// {
// PROID: "HT6YXM-202211142022110022",
// UPDATEDATE: 1668416810000,
// TASKTITLE: "装修",
// RBDATE: "",
// UPDATEUSER: "13066661111",
// ANNEX: "",
// TASKCONTENT: "装修",
// TASKID: "RWJD-202211142022110027",
// REDATE: "",
// CREATEUSER: "13066661111",
// ISEND: 0,
// PROGRESS: "45",
// RESP: "冯珊",
// PAY: 0,
// PRONAME: "cm测试",
// ORGID: "bda44ef3-4588-4a3b-832a-bf4011689f59",
// BINDID: "a8180cde-4d00-43a2-9bb1-f84996fc1eb2",
// BDATE: "2022-12-01",
// EDATE: "2022-12-05",
// RBDATE: "2022-12-04",
// REDATE: "2022-12-05",
// MILESTONEFLAG: 1,
// PROCESSDEFID: "obj_8924ba5cac84443f94c35bf720890255",
// CREATEDATE: 1668416810000,
// REMARK: "",
// DAYS: 12,
// STATUS: 2,
// ID: "b3b3e39b-546e-43c8-8475-74d1e6c14c34",
// },
// ],
// };
dataList.value = resp.data;
parseData(dataList.value, mode.value);
// const ganttData = resp.data.map((el) => {
// return {
// id: el.ID,
// text: el.TASKTITLE,
// start_date: dayjs(el.BDATE).format("DD-MM-YYYY"),
// end_date: dayjs(el.EDATE).format("DD-MM-YYYY"),
// duration: parseInt(
// dayjs
// .duration(new Date(el.EDATE).getTime() - new Date(el.BDATE).getTime())
// .asDays()
// ),
// isMilestone: el.MILESTONEFLAG == 1,
// progress: parseInt(el.PROGRESS) / 100,
// percent: el.PROGRESS,
// status: el.STATUS,
// days: parseInt(el.DAYS),
// };
// });
// gantt.clearAll();
// gantt.parse({
// data: ganttData,
// });
parseData(dataList.value);
};
const parseData = (list, mode) => {
const parseData = (list) => {
const ganttData = list.map((el) => {
// let starts;
// let ends;
let startDate;
let endDate;
if (!el.RBDATE || !el.REDATE) {
startDate = dayjs(el.BDATE).valueOf();
endDate = dayjs(el.EDATE).valueOf();
} else {
const starts = [dayjs(el.RBDATE), dayjs(el.BDATE)];
const ends = [dayjs(el.REDATE), dayjs(el.BDATE)];
startDate = Math.min(...starts);
endDate = Math.max(...ends);
}
console.log(startDate, endDate);
return {
id: el.ID,
text: el.TASKTITLE,
start_date: dayjs(el.BDATE).format("DD-MM-YYYY"),
end_date: dayjs(el.EDATE).format("DD-MM-YYYY"),
start_date: dayjs(startDate).format("DD-MM-YYYY"),
end_date: dayjs(endDate).format("DD-MM-YYYY"),
duration: parseInt(
dayjs
.duration(new Date(el.EDATE).getTime() - new Date(el.BDATE).getTime())
.asDays()
),
isMilestone: el.MILESTONEFLAG == 1,
progress: parseInt(el.PROGRESS) / 100,
// progress: parseInt(el.PROGRESS) / 100,
percent: el.PROGRESS,
status: el.STATUS,
days: parseInt(el.DAYS),
@ -232,7 +238,83 @@ const parseData = (list, mode) => {
gantt.parse({
data: ganttData,
});
const setMultiBar = () => {
for (const item of list) {
if (!item.RBDATE || !item.REDATE) {
console.log("empty");
continue;
}
const starts = [dayjs(item.RBDATE), dayjs(item.BDATE)];
// const ends = [dayjs(item.REDATE), dayjs(item.BDATE)];
const startDate = Math.min(...starts);
// const endDate = Math.max(...ends);
const left = dayjs
.duration(dayjs(item.BDATE).diff(dayjs(startDate)))
.days();
const rLeft = dayjs
.duration(dayjs(item.RBDATE).diff(dayjs(startDate)))
.days();
const width = dayjs
.duration(dayjs(item.EDATE).diff(dayjs(item.BDATE)))
.days();
const rWidth = dayjs
.duration(dayjs(item.REDATE).diff(dayjs(item.RBDATE)))
.days();
const bar = document.querySelector(
`div[task_id="${item.ID}"].gantt_bar_task .gantt_task_content`
);
if (!bar) continue;
const exitRbar = document.querySelector(
`div[task_id="${item.ID}"].gantt_bar_task .gantt_task_content.rdate`
);
if (exitRbar) {
exitRbar.remove();
}
const rBar = bar.cloneNode(true);
bar.style.left = `${left * 70}px`;
rBar.style.left = `${rLeft * 70}px`;
bar.style.width = `${width * 70}px`;
rBar.style.width = `${rWidth * 70}px`;
rBar.style.textAlign = "right";
rBar.classList.add("rdate");
bar.innerHTML = "";
rBar.innerHTML = "";
document
.querySelector(`div[task_id="${item.ID}"].gantt_bar_task`)
.appendChild(rBar);
}
};
gantt.attachEvent("onDataRender", function () {
setMultiBar();
});
gantt.attachEvent("onTaskClick", function (id, e) {
nextTick(() => {
setMultiBar();
});
return true;
});
// gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
// //any custom logic here
// nextTick(() => {
// setMultiBar();
// });
// });
gantt.attachEvent(
"onGanttScroll",
throttle(() => {
// nextTick(() => {
setMultiBar();
// });
}, 200)
);
};
// const modeChanged = (mode) => {
// // console.log(val);
// parseData(dataList.value, mode);
// };
onMounted(async () => {
gantt.i18n.setLocale("cn");
gantt.config.columns = [
@ -240,18 +322,6 @@ onMounted(async () => {
name: "text",
label: "任务名称",
tree: false,
// width: 180,
// template: function (task) {
// if (task.priority == 1)
// return (
// "<div class='important'>" +
// task.text +
// " (" +
// task.users +
// ") </div>"
// );
// return task.text + " (" + task.users + ")";
// },
},
{ name: "start_date", label: "开始时间", align: "center" },
{ name: "duration", label: "持续时间", align: "center" },
@ -297,7 +367,7 @@ onMounted(async () => {
];
gantt.init("gantt-chart");
loadGanttData();
// loadGanttData();
// const resp = await axios.get(
// "./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=" + sid
@ -335,10 +405,10 @@ defineExpose({
.gantt_grid_head_add {
display: none;
}
:deep(.milestone) {
background-color: springgreen;
border: 1px solid springgreen;
}
// :deep(.milestone) {
// background-color: springgreen;
// border: 1px solid springgreen;
// }
:deep(.gantt_container) {
background-color: transparent;
border: 0px;
@ -375,6 +445,20 @@ defineExpose({
:deep(.gantt_task_cell) {
border: 0;
}
:deep(.gantt_bar_task) {
background-color: transparent;
border: none;
.gantt_task_content {
border-radius: 999px;
position: absolute;
// border: 1px solid tomato;
opacity: 0.3;
background-color: springgreen;
&.rdate {
background-color: palevioletred;
}
}
}
// 进度条
// :deep(.gantt_task_progress) {
// text-align: left;

8
src/views/Overview/ProjectDetail.vue
View File

@ -58,7 +58,9 @@
<div class="title ml-2">项目造价(元)</div>
</div>
<div class="content">
{{ parseInt(detailData.PROCOST).toLocaleString() }}
{{
detailData.PROCOST && parseInt(detailData.PROCOST).toLocaleString()
}}
</div>
</div>
<div class="detail-item flex flex-col justify-between py-2">
@ -67,7 +69,7 @@
<div class="title ml-2">合同额(元)</div>
</div>
<div class="content">
{{ parseInt(detailData.STCV).toLocaleString() }}
{{ detailData.STCV && parseInt(detailData.STCV).toLocaleString() }}
</div>
</div>
<div class="detail-item flex flex-col justify-between py-2">
@ -133,7 +135,7 @@
<div class="title ml-2">预算执行情况(元)</div>
</div>
<div class="content">
{{ parseInt(detailData.PAY).toLocaleString() }}
{{ detailData.PAY && parseInt(detailData.PAY).toLocaleString() }}
</div>
</div>
<!-- <div class="detail-item flex flex-col justify-between py-2">

4
vue.config.js
View File

@ -17,6 +17,6 @@ module.exports = defineConfig({
},
transpileDependencies: true,
lintOnSave: false,
// publicPath: "./",
// assetsDir: "../apps/com.awspaas.user.apps.cmp/screen",
publicPath: "./",
assetsDir: "../apps/com.awspaas.user.apps.cmp/screen",
});