flx:提交进度计划图轮播展示
This commit is contained in:
parent
ea49de0d6b
commit
d51a2a62a2
@ -4,7 +4,7 @@ NODE_ENV = 'development'
|
||||
# 本地环境接口地址(/api/index.ts文件中使用)
|
||||
# 后端本地
|
||||
# VITE_API_URL = 'http://192.168.34.155:19111'
|
||||
VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
|
||||
# VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
|
||||
# VITE_API_URL = 'http://192.168.34.221:28890' #雄哥本地
|
||||
# VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程
|
||||
# VITE_API_URL = 'http://192.168.34.221:28889'
|
||||
@ -47,7 +47,7 @@ VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
|
||||
# 包头化工
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:18000'
|
||||
# 包头化工(正式)
|
||||
# VITE_API_URL = 'http://219.147.96.219:9809'
|
||||
VITE_API_URL = 'http://219.147.96.219:9809'
|
||||
# 大连金笔
|
||||
# VITE_API_URL = 'http://101.43.164.214:11126'
|
||||
|
||||
|
||||
@ -133,12 +133,21 @@ export const GlobalStore = defineStore({
|
||||
json: getAssetsFile('file/file_json.png'),
|
||||
exe: getAssetsFile('file/file_exe.png')
|
||||
},
|
||||
schedulePlanFlag: false,
|
||||
schedulePlanTimeFlag: "",
|
||||
}),
|
||||
getters: {},
|
||||
actions: {
|
||||
setSchedulePlanTime(time: number|string) {
|
||||
this.schedulePlanTimeFlag = time;
|
||||
},
|
||||
setSchedulePlan(flag: boolean) {
|
||||
this.schedulePlanFlag = flag;
|
||||
},
|
||||
setShowDown(flag: boolean){
|
||||
console.log(flag);
|
||||
this.showDown = flag;
|
||||
this.schedulePlanFlag = !flag;
|
||||
},
|
||||
setShedulePlanImage(image: string, type: string|number){
|
||||
if(type == 1) {
|
||||
|
||||
@ -22,7 +22,9 @@ export interface GlobalState {
|
||||
schedulePlanImage2: string;
|
||||
showDown: boolean,
|
||||
fileImgTypeList: any[],
|
||||
fileImgMap: any
|
||||
fileImgMap: any,
|
||||
schedulePlanFlag: boolean,
|
||||
schedulePlanTimeFlag: string | number,
|
||||
}
|
||||
|
||||
/* themeConfigProp */
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
<div class="bottom-left">
|
||||
<el-scrollbar class="list-content">
|
||||
<div class="list-detail" v-for="item in memberCareList" :key="item.id">
|
||||
<div class="detail-pic">
|
||||
<!-- <div class="detail-pic">
|
||||
<el-image fit="cover" :preview-src-list="item.file.map((item: any) => item.url)" v-if="item.file.length > 0" :src="item.file[0].url" alt="" />
|
||||
</div>
|
||||
<div class="detail-text">
|
||||
</div> -->
|
||||
<div class="detail-text" @click="particularDetail(item)">
|
||||
<div class="title" :title="item.title">{{ item.title || " " }}</div>
|
||||
<div class="time">{{ item.createDate || " " }}</div>
|
||||
</div>
|
||||
@ -48,6 +48,7 @@ const BASEURL = import.meta.env.VITE_API_URL;
|
||||
// const companyName = reactive(COMPANY);
|
||||
let textTitle = ref("党建共建");
|
||||
|
||||
|
||||
const memberCareList = ref({} as any);
|
||||
//获取党建共建
|
||||
const getMemberCareList = async () => {
|
||||
@ -73,7 +74,7 @@ const getMemberCareList = async () => {
|
||||
});
|
||||
}
|
||||
};
|
||||
const particularDetail = (type: number) => {
|
||||
const particularDetail = (type: any) => {
|
||||
emits("openDialog", type);
|
||||
};
|
||||
onMounted(() => {
|
||||
@ -177,8 +178,10 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
.detail-text {
|
||||
width: 85%;
|
||||
// width: 85%;
|
||||
width: 95%;
|
||||
margin-left: 2%;
|
||||
cursor: pointer;
|
||||
.title {
|
||||
width: 94%;
|
||||
white-space: nowrap; //单行
|
||||
|
||||
@ -11,8 +11,8 @@
|
||||
fit="cover"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="detail-text">
|
||||
<div class="title" :title="item.title">115533{{ item.title || " " }}</div>
|
||||
<div class="detail-text" @click="particularDetail(item)">
|
||||
<div class="title" :title="item.title">{{ item.title || " " }}</div>
|
||||
<div class="time">{{ item.createDate || " " }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -30,6 +30,7 @@ import Card from "@/components/card.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getPartyBuildingGuidancePage } from "@/api/modules/guidancePartyBuilding";
|
||||
const emits = defineEmits(["openDialog"]);
|
||||
const store = GlobalStore();
|
||||
// const companyName = reactive(COMPANY);
|
||||
let textTitle = ref("学习园地");
|
||||
@ -60,6 +61,11 @@ const getMemberCareList = async () => {
|
||||
});
|
||||
}
|
||||
};
|
||||
const particularDetail = (row: any) => {
|
||||
emits("openDialog", {
|
||||
...row
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getMemberCareList();
|
||||
@ -109,6 +115,7 @@ onMounted(() => {
|
||||
.detail-text {
|
||||
width: 85%;
|
||||
margin-left: 2%;
|
||||
cursor: pointer;
|
||||
.title {
|
||||
width: 94%;
|
||||
white-space: nowrap; //单行
|
||||
|
||||
@ -23,10 +23,12 @@
|
||||
<div class="content-right">
|
||||
<div class="right-title">{{ detailData.title || detailData.articleTitle || "" }}</div>
|
||||
<div class="right-time">时间: {{ detailData.createDate || "" }}</div>
|
||||
<el-scrollbar class="right-textarea" ref="scrollBar">
|
||||
<el-scrollbar v-if="detailData.type != 4" class="right-textarea" ref="scrollBar">
|
||||
<div class="rich-text" v-html="detailData.content || detailData.articleContent || ''"></div>
|
||||
</el-scrollbar>
|
||||
<iframe v-else-if="detailData.file.length > 0" class="iframe_box" :src="perviewUp(detailData.file)" frameborder="0"></iframe>
|
||||
</div>
|
||||
<el-button @click="perview(detailData.file)" v-if="detailData.file.length > 0 && detailData.type == 4" class="preview" type="primary">预览</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notoDta" v-else>
|
||||
@ -36,11 +38,16 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, onMounted, reactive } from "vue";
|
||||
import { ref, watch, onMounted, reactive, computed } from "vue";
|
||||
import firstIcon from "@/assets/images/smartPartyBuilding/contentBox.png";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getPartyBuildingGuidancePage, getPartyBuildingGuidanceQueryById } from "@/api/modules/guidancePartyBuilding";
|
||||
import { isJSON } from "@/utils/util";
|
||||
import { encode } from "js-base64";
|
||||
import { ElMessage } from "element-plus";
|
||||
const store = GlobalStore();
|
||||
// 当前环境
|
||||
const BASEURL = import.meta.env.VITE_API_URL;
|
||||
|
||||
let selectTitle = ref("" as any);
|
||||
|
||||
@ -61,10 +68,12 @@ function searchChange(e: any) {
|
||||
// ts
|
||||
type Props = {
|
||||
currentListIndex?: any; // 传入当前文章类别
|
||||
dialogInfo?: any; // 传入当前文章类别
|
||||
};
|
||||
// withDefaults 定义默认值(传入的数据类型同默认值)
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
currentListIndex: 1
|
||||
currentListIndex: 1,
|
||||
dialogInfo: {}
|
||||
});
|
||||
|
||||
watch(
|
||||
@ -79,6 +88,26 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
const perviewUp = computed(() => {
|
||||
return (file: any) => {
|
||||
const row = file.length > 0 && file[0];
|
||||
console.log(row);
|
||||
if (!row) return ElMessage.error("没有要预览的文件!");
|
||||
let src = row.url.includes("http://") ? row.url : BASEURL + "/image/" + row.url;
|
||||
return `http://jxjzw.zhgdyun.com:8012/onlinePreview?url=${encodeURIComponent(encode(src))}`;
|
||||
// window.open(previewUrl, "_blank");
|
||||
}
|
||||
})
|
||||
|
||||
const perview = (file: any) => {
|
||||
const row = file.length > 0 && file[0];
|
||||
console.log(row);
|
||||
if (!row) return ElMessage.error("没有要预览的文件!");
|
||||
let src = row.url.includes("http://") ? row.url : BASEURL + "/image/" + row.url;
|
||||
const previewUrl = `http://jxjzw.zhgdyun.com:8012/onlinePreview?url=${encodeURIComponent(encode(src))}`;
|
||||
window.open(previewUrl, "_blank");
|
||||
}
|
||||
|
||||
function boxStyle(item: any) {
|
||||
if (item.isActive) {
|
||||
let choiseStyle = {
|
||||
@ -132,7 +161,16 @@ const getArticleDetail = async () => {
|
||||
const res: any = await getPartyBuildingGuidanceQueryById({ id: detailId.value });
|
||||
console.log("获取详情数据", res);
|
||||
if (res.success) {
|
||||
detailData.value = res.result;
|
||||
const resultFile = res.result.file && isJSON(res.result.file) ? JSON.parse(res.result.file) : [];
|
||||
detailData.value = {
|
||||
...res.result,
|
||||
file: resultFile.map((ele: any) => {
|
||||
return {
|
||||
...ele,
|
||||
url: ele.url.includes('http://') ? ele.url : BASEURL + '/image/' + ele.url
|
||||
};
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -160,17 +198,27 @@ const getArticleList = async () => {
|
||||
type: props.currentListIndex,
|
||||
title: selectTitle.value,
|
||||
pageNo: pageInfo.pageNo,
|
||||
pageSize: pageInfo.pageSize
|
||||
pageSize: pageInfo.pageSize,
|
||||
id: props.dialogInfo.id
|
||||
// id: "1902639182505844737"
|
||||
});
|
||||
console.log("获取党员活动、学习讲话、党员关怀", res);
|
||||
if (res.success && res.result.records.length !== 0) {
|
||||
let newArray = res.result.records.map((item: any) => {
|
||||
const resultFile = item.file && isJSON(item.file) ? JSON.parse(item.file) : [];
|
||||
return {
|
||||
id: item.id,
|
||||
title: item.title,
|
||||
createDate: item.createDate,
|
||||
isActive: false,
|
||||
content: item.content
|
||||
content: item.content,
|
||||
type: item.type,
|
||||
file: resultFile.map((ele: any) => {
|
||||
return {
|
||||
...ele,
|
||||
url: ele.url.includes('http://') ? ele.url : BASEURL + '/image/' + ele.url
|
||||
};
|
||||
})
|
||||
};
|
||||
});
|
||||
articleNewList.value = articleNewList.value.concat(newArray);
|
||||
@ -192,6 +240,11 @@ onMounted(async () => {
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.iframe_box {
|
||||
width: 100%;
|
||||
height: 440px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
:deep(.h-card .content) {
|
||||
background: none;
|
||||
}
|
||||
@ -283,6 +336,12 @@ onMounted(async () => {
|
||||
padding: 0 2%;
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.preview {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: -10px;
|
||||
}
|
||||
.content-right {
|
||||
height: 78%;
|
||||
.right-title {
|
||||
|
||||
@ -17,11 +17,11 @@
|
||||
</div>
|
||||
<div class="topRight">
|
||||
<div class="right-top">
|
||||
<rightTop></rightTop>
|
||||
<rightTop @open-dialog="openPeopleCountDialog"></rightTop>
|
||||
<div class="show-more" @click="openPeopleCountDialog(1)">更多</div>
|
||||
</div>
|
||||
<div class="right-center">
|
||||
<rightCenter></rightCenter>
|
||||
<rightCenter @open-dialog="openPeopleCountDialog"></rightCenter>
|
||||
<div class="show-more" @click="openPeopleCountDialog(2)">更多</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -36,7 +36,7 @@
|
||||
<div class="show-more" @click="openPeopleCountDialog(4)">更多</div>
|
||||
</div>
|
||||
<div class="bottomRight">
|
||||
<BottomRight></BottomRight>
|
||||
<BottomRight @open-dialog="openPeopleCountDialog"></BottomRight>
|
||||
<div class="show-more" @click="openPeopleCountDialog(3)">更多</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -62,6 +62,7 @@ import { relative } from "path";
|
||||
// 人员情况弹窗
|
||||
const partyBuildRef = ref();
|
||||
const openPeopleCountDialog = (type: any) => {
|
||||
// console.log("我是弹窗", type);
|
||||
partyBuildRef.value.openDialog(type);
|
||||
// console.log(partyBuildRef.value);
|
||||
};
|
||||
|
||||
@ -20,25 +20,25 @@
|
||||
<div class="box1">男党员</div>
|
||||
<div>{{ politicalData.menNum }}</div>
|
||||
<div>{{ politicalData.menNum }}/{{ politicalData.total }}</div>
|
||||
<div>{{ politicalData.menPercent * 100 }}%</div>
|
||||
<div>{{ politicalData.menPercent }}%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="box2">女党员</div>
|
||||
<div>{{ politicalData.womenNum }}</div>
|
||||
<div>{{ politicalData.womenNum }}/{{ politicalData.total }}</div>
|
||||
<div>{{ politicalData.womenPercent * 100 }}%</div>
|
||||
<div>{{ politicalData.womenPercent }}%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="box1">大专以上</div>
|
||||
<div>{{ politicalData.dzNum }}</div>
|
||||
<div>{{ politicalData.dzNum }}/{{ politicalData.total }}</div>
|
||||
<div>{{ politicalData.dzPercent * 100 }}%</div>
|
||||
<div>{{ politicalData.dzPercent }}%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="box3">少数民族</div>
|
||||
<div>{{ politicalData.ssNum }}</div>
|
||||
<div>{{ politicalData.ssNum }}/{{ politicalData.total }}</div>
|
||||
<div>{{ politicalData.ssPercent * 100 }}%</div>
|
||||
<div>{{ politicalData.ssPercent }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-article" v-if="dialogIndex != 99">
|
||||
<dialog-article :currentListIndex="dialogIndex" ref="dialogArticleRef"></dialog-article>
|
||||
<dialog-article :dialogInfo="dialogInfo" :currentListIndex="dialogIndex" ref="dialogArticleRef"></dialog-article>
|
||||
</div>
|
||||
<!-- <div class="political-outlook" v-if="dialogIndex === 4">
|
||||
<political-outlook></political-outlook>
|
||||
@ -40,8 +40,17 @@ function handleClick(event: any) {
|
||||
}
|
||||
let dialogIndex = ref(null as any);
|
||||
let dialogTitle = ref("" as any);
|
||||
function openDialog(type: any) {
|
||||
console.log("type", type);
|
||||
const dialogInfo = ref({} as any);
|
||||
function openDialog(row: any) {
|
||||
console.log("type", row);
|
||||
let type = -1;
|
||||
if(row.constructor === Object) {
|
||||
type = row.type;
|
||||
dialogInfo.value = row;
|
||||
} else {
|
||||
type = row;
|
||||
dialogInfo.value = {};
|
||||
}
|
||||
dialogIndex.value = type;
|
||||
showDialog.value = true;
|
||||
if (type === 1) {
|
||||
|
||||
@ -7,6 +7,12 @@
|
||||
<!-- loop autoplay -->
|
||||
<video v-if="item.fileType == 1" id="myVideo" :src="item.filePath" class="slideshow_videos" controls></video>
|
||||
<el-image class="images" v-else-if="item.fileType == 2" :src="item.filePath" fit="fill" />
|
||||
<div class="video_text" @click="particularDetail(item)">
|
||||
<el-tooltip class="item" effect="dark" :content="item.title" placement="bottom">
|
||||
<div class="white_ellipsis_2">{{ item.title }}</div>
|
||||
</el-tooltip>
|
||||
<div>{{ item.createDate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
@ -24,6 +30,13 @@ import { onMounted, reactive, ref, nextTick } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getPartyBuildingGuidanceList } from "@/api/modules/guidancePartyBuilding";
|
||||
const store = GlobalStore();
|
||||
const emits = defineEmits(["openDialog"]);
|
||||
const particularDetail = (row: any) => {
|
||||
emits("openDialog", {
|
||||
...row
|
||||
});
|
||||
};
|
||||
|
||||
const carousel = ref(null as any);
|
||||
const videoInfo = reactive({
|
||||
videoList: [] as any,
|
||||
@ -193,9 +206,27 @@ onMounted(() => {
|
||||
.el-carousel {
|
||||
height: 100%;
|
||||
}
|
||||
.white_ellipsis_2{
|
||||
overflow:hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.video_text {
|
||||
padding: 4px 16px;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
> div:last-child {
|
||||
color: #9f9f9f;
|
||||
font-size: 14px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
.videoBox {
|
||||
width: 100%;
|
||||
height: 82.255%;
|
||||
height: 56.255%;
|
||||
transform: translateY(-11px);
|
||||
:deep(.el-carousel__container) {
|
||||
height: 490px;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="detail-pic">
|
||||
<el-image fit="cover" :preview-src-list="item.file.map((item: any) => item.url)" v-if="item.file.length > 0" :src="item.file[0].url" alt="" />
|
||||
</div>
|
||||
<div class="detail-text">
|
||||
<div class="detail-text" @click="particularDetail(item)">
|
||||
<div class="title" :title="item.title">{{ item.title || " " }}</div>
|
||||
<div class="time">{{ item.createDate || " " }}</div>
|
||||
</div>
|
||||
@ -25,6 +25,7 @@ import Card from "@/components/card.vue";
|
||||
import { onMounted, ref, onUnmounted } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getPartyBuildingGuidancePage } from "@/api/modules/guidancePartyBuilding";
|
||||
const emits = defineEmits(["openDialog"]);
|
||||
const store = GlobalStore();
|
||||
const memberCareList = ref({} as any);
|
||||
// 当前环境
|
||||
@ -54,6 +55,12 @@ const getMemberCareList = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const particularDetail = (row: any) => {
|
||||
emits("openDialog", {
|
||||
...row
|
||||
});
|
||||
};
|
||||
|
||||
// const scrollArea = ref(null);
|
||||
// let timer = null;
|
||||
// const SCROLL_SPEED = 1; // 每次滚动的像素数，可以根据需要调整
|
||||
@ -135,6 +142,7 @@ onUnmounted(() => {
|
||||
.detail-text {
|
||||
width: 85%;
|
||||
margin-left: 2%;
|
||||
cursor: pointer;
|
||||
.title {
|
||||
width: 94%;
|
||||
white-space: nowrap; //单行
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
>
|
||||
<span class="change-video" v-if="showChangeVideo">更换视频</span>
|
||||
</el-upload> -->
|
||||
<video :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
|
||||
<video :src="fileToUrl(projectData.videoUrl)" class="videos" autoplay controls loop></video>
|
||||
</div>
|
||||
<div class="imgBox" v-if="showVideo == 3">
|
||||
<div class="imgs" @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false">
|
||||
@ -65,7 +65,7 @@
|
||||
<!-- <img :src="BASEURL + '/image/' + picUrl" alt="" /> -->
|
||||
<el-carousel trigger="click" :interval="5000">
|
||||
<el-carousel-item v-for="item in picUrl" :key="item.id">
|
||||
<div class="bg_top" :style="`background-image: url(${item.url})`"></div>
|
||||
<div class="bg_top" :style="`background-image: url(${fileToUrl(item.url)})`"></div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
@ -77,7 +77,7 @@
|
||||
<script setup lang="ts">
|
||||
import { isJSON } from "@/utils/util";
|
||||
import Card from "@/components/card.vue";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { ref, onMounted, watch, computed } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
@ -205,6 +205,12 @@ const uploadSuccess = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const fileToUrl = computed(() => {
|
||||
return (file: any) => {
|
||||
return file.includes("http://") ? file : BASEURL + '/image/' + file;
|
||||
}
|
||||
})
|
||||
|
||||
// 视频文件上传 之前
|
||||
function handleBeforeUploadVideo(file: any) {
|
||||
console.log(file, "上传之前");
|
||||
|
||||
@ -12,19 +12,19 @@
|
||||
<div class="box1">男党员</div>
|
||||
<div>{{ politicalData.menNum }}</div>
|
||||
<div>{{ politicalData.menNum }}/{{ politicalData.total }}</div>
|
||||
<div>{{ politicalData.menPercent * 100 }}%</div>
|
||||
<div>{{ politicalData.menPercent }}%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="box2">女党员</div>
|
||||
<div>{{ politicalData.womenNum }}</div>
|
||||
<div>{{ politicalData.womenNum }}/{{ politicalData.total }}</div>
|
||||
<div>{{ politicalData.womenPercent * 100 }}%</div>
|
||||
<div>{{ politicalData.womenPercent }}%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="box3">少数民族</div>
|
||||
<div>{{ politicalData.ssNum }}</div>
|
||||
<div>{{ politicalData.ssNum }}/{{ politicalData.total }}</div>
|
||||
<div>{{ politicalData.ssPercent * 100 }}%</div>
|
||||
<div>{{ politicalData.ssPercent }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
<div class="bottom-left">
|
||||
<el-scrollbar class="list-content">
|
||||
<div class="list-detail" v-for="item in memberCareList" :key="item.id">
|
||||
<div class="detail-pic">
|
||||
<!-- <div class="detail-pic">
|
||||
<img v-if="JSON.parse(item.file)[0]" :src="JSON.parse(item.file)[0].url" alt="" />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="detail-text">
|
||||
<div class="title" :title="item.title">{{ item.title || " " }}</div>
|
||||
<div class="time">{{ item.createDate || " " }}</div>
|
||||
|
||||
@ -699,9 +699,13 @@ watch(
|
||||
console.log("findIndex", findIndex);
|
||||
if (findIndex != -1) {
|
||||
showDownInfo.showDownIndex = findIndex;
|
||||
showDownInfo.timer = setTimeout(() => {
|
||||
showDwonRouterLink();
|
||||
}, 30000);
|
||||
if(menuList.value[showDownInfo.showDownIndex].modulePath == "/schedulePlan" && store.schedulePlanFlag){
|
||||
|
||||
} else {
|
||||
showDownInfo.timer = setTimeout(() => {
|
||||
showDwonRouterLink();
|
||||
}, 30000);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
clearInterval(showDownInfo.timer);
|
||||
@ -713,6 +717,16 @@ watch(
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => store.schedulePlanTimeFlag,
|
||||
() => {
|
||||
showDwonRouterLink();
|
||||
},
|
||||
{
|
||||
// immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
|
||||
const showDwonRouterLink = () => {
|
||||
if (showDownInfo.timer) clearInterval(showDownInfo.timer);
|
||||
@ -726,6 +740,7 @@ const showDwonRouterLink = () => {
|
||||
itemList.value = path.menuList;
|
||||
router.push(path.modulePath);
|
||||
|
||||
if(path.modulePath == "/schedulePlan" && store.schedulePlanFlag) return
|
||||
showDownInfo.timer = setTimeout(() => {
|
||||
showDwonRouterLink();
|
||||
}, 30000);
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
v-loading.fullscreen.lock="userInfo.isLoading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
@mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"
|
||||
>
|
||||
<table>
|
||||
<thead>
|
||||
@ -56,6 +57,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
id="tbody_table"
|
||||
:class="{
|
||||
tbody_table: milestoneList.length == 0,
|
||||
myTbody: !props.showDwon,
|
||||
@ -127,11 +129,14 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, onMounted, watch, onUpdated, nextTick, computed } from "vue";
|
||||
import { reactive, ref, onMounted, watch, onUpdated, nextTick, computed, onUnmounted } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import quarterOfYear from "dayjs/plugin/quarterOfYear";
|
||||
import isBetween from "dayjs/plugin/isBetween";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const emits = defineEmits(["scheduleSwitchChange"]);
|
||||
const store = GlobalStore();
|
||||
const props = defineProps({
|
||||
yearList: {
|
||||
type: Array as () => any[],
|
||||
@ -161,13 +166,19 @@ const props = defineProps({
|
||||
const userInfo = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
isLoading: false
|
||||
isLoading: false,
|
||||
scheduleSwitchFlag: false,
|
||||
});
|
||||
dayjs.extend(quarterOfYear);
|
||||
dayjs.extend(isBetween);
|
||||
const load = () => {
|
||||
console.log(userInfo.pageSize, userInfo.pageNo, projectChildList.value.length);
|
||||
if (userInfo.pageSize * userInfo.pageNo >= projectChildList.value.length) {
|
||||
if(store.schedulePlanFlag) {
|
||||
gasanalysisInfo.setIntervalScrollLeft = 0;
|
||||
setIntervalTimeFn();
|
||||
return projectChildList.value.length ? userInfo.scheduleSwitchFlag = true : "";
|
||||
}
|
||||
return projectChildList.value.length ? ElMessage.warning("没有更多数据了") : "";
|
||||
}
|
||||
console.log("我触发了");
|
||||
@ -208,6 +219,9 @@ const planChildren = (row: any) => {
|
||||
const splitData = computed(() => {
|
||||
const newResult = projectChildList.value.slice(userInfo.pageNo - 1, userInfo.pageSize * userInfo.pageNo);
|
||||
console.log(888, newResult);
|
||||
if(newResult.length < 6) {
|
||||
userInfo.scheduleSwitchFlag = true;
|
||||
}
|
||||
return newResult
|
||||
.reduce((prev: any[], cur: any) => {
|
||||
const find = props.projectItemList.find(item => item.id == cur.parentId);
|
||||
@ -297,12 +311,93 @@ watch(
|
||||
|
||||
onUpdated(() => {
|
||||
console.log("更新");
|
||||
cancelAnimationFrame(gasanalysisInfo.setIntervalTime);
|
||||
gasanalysisInfo.setIntervalScrollLeft = 0;
|
||||
setIntervalTimeFn();
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
userInfo.isLoading = false;
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
const gasanalysisInfo = reactive({
|
||||
setIntervalScrollLeft: 0,
|
||||
setIntervalTime: null as any,
|
||||
setIntervalScrollTop: 0,
|
||||
setIntervalTime2: null as any,
|
||||
})
|
||||
// 移入
|
||||
const handleMouseEnter = () => {
|
||||
if(!store.schedulePlanFlag) return;
|
||||
if(gasanalysisInfo.setIntervalTime) {
|
||||
cancelAnimationFrame(gasanalysisInfo.setIntervalTime)
|
||||
}
|
||||
}
|
||||
// 移出
|
||||
const handleMouseLeave = () => {
|
||||
if(!store.schedulePlanFlag) return;
|
||||
const gasanalysisTable1 = document.querySelector(".gasanalysis-table1") as any;
|
||||
gasanalysisInfo.setIntervalScrollLeft = gasanalysisTable1.scrollLeft;
|
||||
// console.log("移出时的距离", gasanalysisInfo.setIntervalScrollLeft);
|
||||
setIntervalTimeFn();
|
||||
}
|
||||
|
||||
const setIntervalTimeFn = () => {
|
||||
// console.log("滚动进来了");
|
||||
const gasanalysisTable1 = document.querySelector(".gasanalysis-table1") as any;
|
||||
gasanalysisInfo.setIntervalScrollLeft = gasanalysisInfo.setIntervalScrollLeft + 1;
|
||||
// console.log(gasanalysisTable1.scrollLeft + gasanalysisTable1.clientWidth, gasanalysisTable1.scrollWidth, gasanalysisInfo.setIntervalScrollLeft);
|
||||
if(gasanalysisTable1.scrollLeft + gasanalysisTable1.clientWidth >= gasanalysisTable1.scrollWidth) {
|
||||
cancelAnimationFrame(gasanalysisInfo.setIntervalTime);
|
||||
gasanalysisTable1.scrollLeft = 0;
|
||||
gasanalysisInfo.setIntervalScrollLeft = 0;
|
||||
if(userInfo.scheduleSwitchFlag) {
|
||||
emits("scheduleSwitchChange", true);
|
||||
return
|
||||
}
|
||||
|
||||
setIntervalTimeFn2();
|
||||
return
|
||||
} else {
|
||||
// console.log("滚动的距离", gasanalysisInfo.setIntervalScrollLeft);
|
||||
gasanalysisTable1.scrollLeft = gasanalysisInfo.setIntervalScrollLeft;
|
||||
}
|
||||
gasanalysisInfo.setIntervalTime = requestAnimationFrame(setIntervalTimeFn)
|
||||
}
|
||||
|
||||
const setIntervalTimeFn2 = () => {
|
||||
const tbodyTable = document.querySelector("#tbody_table") as any;
|
||||
gasanalysisInfo.setIntervalScrollTop = gasanalysisInfo.setIntervalScrollTop + 1;
|
||||
// console.log(tbodyTable.scrollTop + tbodyTable.clientHeight, tbodyTable.scrollHeight, gasanalysisInfo.setIntervalScrollTop);
|
||||
if(tbodyTable.scrollTop + tbodyTable.clientHeight >= tbodyTable.scrollHeight) {
|
||||
// tbodyTable.scrollTop = 0;
|
||||
// gasanalysisInfo.setIntervalScrollTop = 0;
|
||||
cancelAnimationFrame(gasanalysisInfo.setIntervalTime2);
|
||||
return
|
||||
} else {
|
||||
// console.log("滚动的距离", gasanalysisInfo.setIntervalScrollTop);
|
||||
tbodyTable.scrollTop = gasanalysisInfo.setIntervalScrollTop;
|
||||
}
|
||||
gasanalysisInfo.setIntervalTime2 = requestAnimationFrame(setIntervalTimeFn2);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log("挂载了");
|
||||
nextTick(() => {
|
||||
// const gasanalysisTable1 = document.querySelector(".gasanalysis-table1") as any;
|
||||
// console.log(gasanalysisTable1.scrollWidth);
|
||||
|
||||
if(store.schedulePlanFlag) {
|
||||
setIntervalTimeFn();
|
||||
};
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(()=>{
|
||||
// 销毁定时器
|
||||
cancelAnimationFrame(gasanalysisInfo.setIntervalTime);
|
||||
cancelAnimationFrame(gasanalysisInfo.setIntervalTime2);
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -31,6 +31,8 @@ import { onMounted, ref, onBeforeUnmount, defineAsyncComponent } from "vue";
|
||||
// import rightBottomRight from "./rightBottomRight.vue";
|
||||
// import rightBottom from "./rightBottom.vue";
|
||||
// import ganttText from "./ganttText.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
|
||||
const CompletionProjectQuantity = defineAsyncComponent(() => import("./completionProjectQuantity.vue"));
|
||||
const RightTop = defineAsyncComponent(() => import("./rightTop.vue"));
|
||||
@ -41,7 +43,11 @@ const showDownFn = () => {
|
||||
showDown.value = !showDown.value;
|
||||
}
|
||||
|
||||
onMounted(() => {});
|
||||
onMounted(() => {
|
||||
if(store.schedulePlanFlag) {
|
||||
showDownFn();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.schedule-plan {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Card title="各装置实际进度">
|
||||
<Card title="进度曲线">
|
||||
<div class="device-list">
|
||||
<div class="select-right">
|
||||
<div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Card title="项目总体计划">
|
||||
<Card title="总体统筹计划">
|
||||
<!-- {{pageInfo.yearList.length}} {{pageInfo.milestoneList.length}} -->
|
||||
|
||||
<div
|
||||
@ -9,7 +9,11 @@
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
>
|
||||
<div class="searchBox whiteBlock">
|
||||
<el-select size="small" @change="onProjectTypeChange" v-model="searchForm.projectType" placeholder="Select">
|
||||
<el-tooltip class="box-item" effect="dark" :content="schedulePlanFlag ? '自动' : '手动'" placement="top">
|
||||
<el-icon v-if="schedulePlanFlag" @click="showSchedulePlanSwitch" class="elSwitch"><Switch /></el-icon>
|
||||
<el-icon v-else @click="showSchedulePlanSwitch" class="elSwitch"><Pointer /></el-icon>
|
||||
</el-tooltip>
|
||||
<el-select class="ml_20" size="small" @change="onProjectTypeChange" v-model="searchForm.projectType" placeholder="Select">
|
||||
<el-option v-for="item in projectTypeList" :key="item.id" :label="item.projectTypeName" :value="item.id" />
|
||||
</el-select>
|
||||
<el-cascader
|
||||
@ -18,7 +22,7 @@
|
||||
@change="onChildCategoryChange"
|
||||
v-model="searchForm.childCategoryId"
|
||||
:options="planWorkCategoryList"
|
||||
:props="{ checkStrictly: true, value: 'id', label: 'name', children: 'children' }"
|
||||
:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name', children: 'children' }"
|
||||
clearable
|
||||
></el-cascader>
|
||||
<div class="rhombus ml_20">
|
||||
@ -60,6 +64,7 @@
|
||||
:milestoneList="pageInfo.milestoneList"
|
||||
:projectItemList="pageInfo.projectItemList"
|
||||
:showDwon="props.showDown"
|
||||
@scheduleSwitchChange="onScheduleSwitchChange"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="!pageInfo.imageUrl && pageInfo.domIsImage">
|
||||
@ -121,6 +126,29 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const onScheduleSwitchChange = () => {
|
||||
if(searchForm.projectType != 2) {
|
||||
searchForm.projectType = 2;
|
||||
onProjectTypeChange()
|
||||
}else {
|
||||
const findIndex = planWorkCategoryList.value.findIndex((item: any) => item.id == searchForm.childCategoryId);
|
||||
if(findIndex > -1 ) {
|
||||
console.log("切换下一个分类1", findIndex + 1, planWorkCategoryList.value.length)
|
||||
|
||||
if(findIndex + 1 >= planWorkCategoryList.value.length) {
|
||||
console.log("已经是最后一个分类")
|
||||
if(!store.showDown){
|
||||
store.setSchedulePlanTime(Date.now());
|
||||
}
|
||||
return
|
||||
}
|
||||
console.log("切换下一个分类2", findIndex + 1, planWorkCategoryList.value[findIndex + 1].id)
|
||||
searchForm.childCategoryId = planWorkCategoryList.value[findIndex + 1].id;
|
||||
onChildCategoryChange();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const pageInfo = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
@ -149,6 +177,9 @@ const onImgData = (data: any) => {
|
||||
if (res.status == "SUCCESS") {
|
||||
pageInfo.imageUrl = BASEURL + "/image/" + res.data[0].imageUrl;
|
||||
store.setShedulePlanImage(pageInfo.imageUrl, searchForm.projectType);
|
||||
if(schedulePlanFlag.value) {
|
||||
showDomIsImage();
|
||||
}
|
||||
} else {
|
||||
ElMessage.error("转换失败!");
|
||||
}
|
||||
@ -196,6 +227,12 @@ const showDomIsImage = () => {
|
||||
}
|
||||
}
|
||||
};
|
||||
const schedulePlanFlag = ref(false);
|
||||
|
||||
const showSchedulePlanSwitch = () => {
|
||||
schedulePlanFlag.value = !schedulePlanFlag.value;
|
||||
store.setSchedulePlan(schedulePlanFlag.value);
|
||||
}
|
||||
|
||||
const searchForm = reactive({
|
||||
childCategoryId: "",
|
||||
@ -234,7 +271,7 @@ const onProjectTypeChange = () => {
|
||||
// pageInfo.domIsImage = true;
|
||||
};
|
||||
|
||||
const planWorkCategoryList = ref([]);
|
||||
const planWorkCategoryList = ref([] as any[]);
|
||||
const getPlanWorkCategoryTree = async () => {
|
||||
const result: any = await getPlanMilestone2LeftTreeApi({
|
||||
projectSn: store.sn,
|
||||
@ -245,6 +282,9 @@ const getPlanWorkCategoryTree = async () => {
|
||||
});
|
||||
if (result.success) {
|
||||
planWorkCategoryList.value = result.result.records;
|
||||
if(searchForm.projectType == 2) {
|
||||
searchForm.childCategoryId = result.result.records[0].id;
|
||||
}
|
||||
}
|
||||
return result.success;
|
||||
};
|
||||
@ -258,7 +298,7 @@ const loadCardData = async () => {
|
||||
// timeAsc: 1,
|
||||
projectType: searchForm.projectType,
|
||||
isImportantMilestone: 1,
|
||||
childCategoryId: searchForm.childCategoryId ? searchForm.childCategoryId[searchForm.childCategoryId.length - 1] : ""
|
||||
childCategoryId: searchForm.childCategoryId ? searchForm.childCategoryId : ""
|
||||
};
|
||||
const res: any = await getMilestoneTopBarPlanRecord(data);
|
||||
if (res.code == 200) {
|
||||
@ -330,7 +370,7 @@ const getProjectMilestonePlanRecordList = async () => {
|
||||
const res: any = await getMilestoneChartPlanRecord({
|
||||
projectSn: store.sn,
|
||||
type: searchForm.projectType,
|
||||
childCategoryId: searchForm.childCategoryId ? searchForm.childCategoryId[searchForm.childCategoryId.length - 1] : ""
|
||||
childCategoryId: searchForm.childCategoryId ? searchForm.childCategoryId : ""
|
||||
});
|
||||
if (res.code == 200) {
|
||||
console.log(res, "获取项目里程碑计划记录列表");
|
||||
@ -364,6 +404,7 @@ const getProjectMilestonePlanRecordList = async () => {
|
||||
return pre;
|
||||
}, []);
|
||||
console.log(22222, pageInfo.projectItemList);
|
||||
console.log("我进来了11",store, schedulePlanFlag.value, pageInfo.imageUrl);
|
||||
}
|
||||
return res.success;
|
||||
};
|
||||
@ -406,6 +447,12 @@ const treeChildren = (dataList: any[], result = []) => {
|
||||
|
||||
onMounted(async () => {
|
||||
Promise.all([getPlanWorkCategoryTree(), loadCardData(),getProjectMilestonePlanRecordList()]).then((res) => {
|
||||
if(schedulePlanFlag.value && pageInfo.imageUrl) {
|
||||
console.log("我进来了11");
|
||||
setTimeout(() => {
|
||||
showDomIsImage();
|
||||
}, 2000)
|
||||
}
|
||||
pageInfo.isLoadingAll = res.every((item) => item === true);
|
||||
console.log("我是共同执行的",res, pageInfo.isLoadingAll);
|
||||
});
|
||||
@ -419,7 +466,7 @@ onMounted(async () => {
|
||||
} else if(searchForm.projectType == 2) {
|
||||
pageInfo.imageUrl = store.schedulePlanImage2;
|
||||
}
|
||||
|
||||
schedulePlanFlag.value = store.schedulePlanFlag;
|
||||
console.log("图片", pageInfo.imageUrl, pageInfo.domIsImage);
|
||||
});
|
||||
|
||||
@ -479,6 +526,7 @@ onMounted(async () => {
|
||||
top: 0;
|
||||
right: 10px;
|
||||
.ml_20,
|
||||
.mr_20,
|
||||
:deep(.el-cascader) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user