Skip to content

R
risk-monitor
提交 5ec0c0d4 authored 作者: 张烨's avatar 张烨
浏览文件
操作

feat:政令增加机构列表页面

上级 1ad256dd
显示空白字符变更
内嵌 并排
正在显示 包含 473 行增加 和 12 行删除
src/router/modules/decree.js
浏览文件 @ 5ec0c0d4
...@@ -9,6 +9,7 @@ const DecreeDeepDig = () => import('@/views/decree/decreeLayout/deepdig/index.vu ...@@ -9,6 +9,7 @@ const DecreeDeepDig = () => import('@/views/decree/decreeLayout/deepdig/index.vu
const DecreeInfluence = () => import('@/views/decree/decreeLayout/influence/index.vue') const DecreeInfluence = () => import('@/views/decree/decreeLayout/influence/index.vue')
const Institution = () => import('@/views/decree/institution/index.vue') const Institution = () => import('@/views/decree/institution/index.vue')
const DecreeOriginal = () => import('@/views/decree/decreeOriginal/index.vue') const DecreeOriginal = () => import('@/views/decree/decreeOriginal/index.vue')
const allOrganization = () => import('@/views/decree/allOrganization/index.vue')
const decreeRoutes = [ const decreeRoutes = [
...@@ -93,11 +94,12 @@ const decreeRoutes = [ ...@@ -93,11 +94,12 @@ const decreeRoutes = [
path: "/decree/decreeOriginal", path: "/decree/decreeOriginal",
name: "DecreeOriginal", name: "DecreeOriginal",
component: DecreeOriginal, component: DecreeOriginal,
// meta: {
// title: "政令原文"
// }
}, },
{
path: "/decree/allOrganization",
name: "allOrganization",
component: allOrganization,
},
] ]
export default decreeRoutes export default decreeRoutes
\ No newline at end of file
src/views/decree/allOrganization/index.vue 0 → 100644
浏览文件 @ 5ec0c0d4
<template>
<div class="view-box">
<div class="container-box">
<div class="hard-box">
<div class="hard-name text-title-0-show">美国政府机构</div>
<div class="hard-num text-title-2-show">304家</div>
<div style="width: 0px; flex: auto;"></div>
<div class="hard-input">
<el-input v-model="organizationInfo.keyWord" @keyup.enter="handleGetDepartmentList()" style="width:100%; height:100%;" :suffix-icon="Search" placeholder="搜索机构" />
</div>
<div class="hard-time">
<el-select v-model="organizationInfo.isSort" placeholder="发布时间" style="width:160px; margin-left:8px;">
<template #prefix>
<div class="icon1">
<img v-if="isSort" src="@/assets/icons/shengxu1.png" alt="" />
<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
</div>
</template>
<el-option label="政令数量" :value="1" />
</el-select>
</div>
</div>
<div class="date-box">
<div class="date-icon">
<img :src="tipsTcon" alt="">
</div>
<div class="date-text">近期美国各联邦政府机构发布涉华政令数量汇总</div>
<TimeTabPane @time-click="handleGetDepartmentList" />
</div>
<div class="organization-list" ref="refOrganization">
<div class="organization-item" v-for="(item, index) in organizationInfo.list" :key="index" @click="handleToInstitution(item)">
<div class="item-left">
<img :src="item.orgImage || DefaultIcon2" alt="" />
</div>
<div class="item-right one-line-ellipsis">{{ item.orgName }}</div>
<div class="item-total">{{ item.total }}项</div>
<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
<div class="item-dot" v-if="item.totalRecent">+{{item.totalRecent}}</div>
</div>
</div>
<div class="pagination-box">
<el-pagination @current-change="handleCurrentChange" :pageSize="organizationInfo.pageSize" :current-page="organizationInfo.pageNum" background layout="prev, pager, next" :total="organizationInfo.total" />
</div>
</div>
<div class="back-bnt" @click="router.back()">
<el-icon><Back /></el-icon>
<div style="margin-left: 6px;">返回</div>
</div>
</div>
</template>
<script setup name="index">
import {onMounted, reactive, ref} from "vue"
import { Search } from '@element-plus/icons-vue'
import router from "@/router";
import TimeTabPane from '@/components/base/TimeTabPane/index.vue';
import tipsTcon from "./assets/icons/tips-icon.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
const organizationInfo = reactive({
pageNum: 1,
pageSize: 8,
total: 100,
isSort: 1,
keyWord: "",
list: []
})
organizationInfo.list = Array.from({ length: 20 }, (_, i) => ({
orgId: '221',
orgImage: "http://8.140.26.4:10010/kjb-files/images/org/round/HHS美国卫生与公众服务部.png",
orgName: "卫生与公众服务部",
total: 94654,
totalRecent: 999,
}))
const handleCurrentChange = (currentPage) => {
organizationInfo.pageNum = currentPage;
}
const handleGetDepartmentList = async (event) => {
let day = 7
if (event?.time === '近一周') day = 7
if (event?.time === '近一月') day = 30
if (event?.time === '近一年') day = 365
console.log(day)
};
// 跳转行政机构主页
const handleToInstitution = item => {
window.sessionStorage.setItem("curTabName", item.orgName);
const curRoute = router.resolve({
path: "/institution",
query: {
id: item.orgId
}
});
window.open(curRoute.href, "_blank");
};
const refOrganization = ref()
onMounted(() => {
// 根据元素的高度决定分页显示的机构数量
let height = 2;
if (refOrganization.value) {
height = Math.floor(refOrganization.value?.clientHeight/120)
}
organizationInfo.pageSize = height*4
})
</script>
<style scoped lang="scss">
.view-box {
width: 100%;
height: 100%;
background: url("./assets/images/background.png"), linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
background-size: 100% 100%;
display: flex;
justify-content: center;
position: relative;
.back-bnt {
position: absolute;
top: 16px;
left: 30px;
width: 86px;
height: 38px;
background-color: white;
border-radius: 19px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-primary-65-color);
font-family: Source Han Sans CN;
font-size: 16px;
cursor: pointer;
}
.container-box {
width: 1600px;
padding: 50px 0 20px;
display: flex;
flex-direction: column;
.hard-box {
display: flex;
align-items: center;
width: 100%;
.hard-name {
color: var(--text-primary-90-color);
height: 62px;
line-height: 62px !important;
}
.hard-num {
height: 36px;
background-color: var(--color-primary-100);
color: var(--bg-white-100);
border-radius: 18px;
line-height: 36px !important;
padding: 0 16px;
margin-left: 16px;
}
.hard-input {
background-color: var(--el-fill-color-blank);
border-radius: var(--el-border-radius-base);
box-shadow: 0 0 0 1px var(--el-border-color) inset;
box-sizing: border-box;
margin-left: 20px;
width: 160px;
height: 32px;
}
.hard-time {
height: 42px;
padding: 5px 0;
.icon1 {
width: 11px;
height: 14px;
font-size: 0px;
img {
width: 100%;
height: 100%;
}
}
}
}
.date-box {
margin-top: 6px;
display: flex;
align-items: center;
width: 100%;
.date-icon {
width: 16px;
height: 16px;
font-size: 0px;
margin-right: 6px;
img {
width: 100%;
height: 100%;
}
}
.date-text {
width: 20px;
flex: auto;
font-size: 18px;
line-height: 18px;
font-family: Source Han Sans CN;
color: var(--text-primary-80-color);
}
}
.organization-list {
width: 100%;
height: 20px;
margin: 26px 0 16px;
flex: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 104px;
gap: 16px;
font-family: Microsoft YaHei;
.organization-item {
padding: 0 16px;
display: flex;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.item-left {
width: 48px;
height: 48px;
font-size: 0px;
img {
width: 100%;
height: 100%;
}
}
.item-right {
width: 20px;
flex: auto;
color: rgba(59, 65, 75, 1);
font-size: 20px;
font-weight: 700;
line-height: 20px;
margin: 0 16px;
}
.item-total {
font-size: 20px;
margin-right: 2px;
white-space: nowrap;
font-weight: 700;
line-height: 20px;
color: var(--color-primary-100);
}
.item-more {
font-size: 16px;
margin-right: 12px;
white-space: nowrap;
font-weight: 700;
line-height: 16px;
color: var(--color-primary-100);
}
.item-dot {
position: absolute;
right: -13px;
top: -10px;
padding: 0 8px;
height: 26px;
background-color: #FF4D4F;
color: white;
font-size: 16px;
line-height: 26px;
font-family: Source Han Sans CN;
border-radius: 14px;
letter-spacing: 1px;
}
}
}
.pagination-box {
display: flex;
justify-content: center;
}
}
}
</style>
\ No newline at end of file
src/views/decree/decreeHome/index.vue
浏览文件 @ 5ec0c0d4
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon> <el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
<div class="item-dot" v-if="item.totalRecent">+{{item.totalRecent}}</div> <div class="item-dot" v-if="item.totalRecent">+{{item.totalRecent}}</div>
</div> </div>
<div class="organization-item"> <div class="organization-item" @click="onNavigateTo()">
<div class="item-more">查看全部机构 ({{govInsList.length+1}}家)</div> <div class="item-more">查看全部机构 ({{govInsList.length+1}}家)</div>
<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon> <el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
</div> </div>
...@@ -194,7 +194,7 @@ ...@@ -194,7 +194,7 @@
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="box5-main"> <div class="box5-main" v-loading="box5Params.loading">
<div class="box5-chart" id="chart1"></div> <div class="box5-chart" id="chart1"></div>
</div> </div>
<div class="data-origin-box"> <div class="data-origin-box">
...@@ -227,7 +227,7 @@ ...@@ -227,7 +227,7 @@
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="box5-main"> <div class="box5-main" v-loading="box6Params.loading">
<div class="box5-chart" id="chart2"></div> <div class="box5-chart" id="chart2"></div>
</div> </div>
<div class="data-origin-box"> <div class="data-origin-box">
...@@ -267,7 +267,7 @@ ...@@ -267,7 +267,7 @@
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="box7-main"> <div class="box7-main" v-loading="box7Params.loading">
<div class="box7-list"> <div class="box7-list">
<div class="box7-item" v-for="(item, index) in keyDecreeList" :key="index" @click="handleKeyDecree(item)"> <div class="box7-item" v-for="(item, index) in keyDecreeList" :key="index" @click="handleKeyDecree(item)">
<div class="icon"> <div class="icon">
...@@ -315,7 +315,7 @@ ...@@ -315,7 +315,7 @@
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="box8-content"> <div class="box8-content" v-loading="box8Params.loading">
<WordCloudChart v-if="wordCloudData?.length" :data="wordCloudData" width="100%" height="100%" /> <WordCloudChart v-if="wordCloudData?.length" :data="wordCloudData" width="100%" height="100%" />
</div> </div>
<div class="data-origin-box"> <div class="data-origin-box">
...@@ -526,6 +526,10 @@ const handleToInstitution = item => { ...@@ -526,6 +526,10 @@ const handleToInstitution = item => {
}); });
window.open(curRoute.href, "_blank"); window.open(curRoute.href, "_blank");
}; };
// 跳转全部机构页面
const onNavigateTo = () => {
router.push({name: "allOrganization"});
}
// 查看更多风险信号 // 查看更多风险信号
const handleToMoreRiskSignal = () => { const handleToMoreRiskSignal = () => {
...@@ -799,9 +803,11 @@ const box5Params = reactive({ ...@@ -799,9 +803,11 @@ const box5Params = reactive({
year: yearList[0].value, year: yearList[0].value,
domainId: '', domainId: '',
proposeName: '', proposeName: '',
loading: false,
}) })
const summarize1 = ref() const summarize1 = ref()
const handleGetDecreeYearOrder = async () => { const handleGetDecreeYearOrder = async () => {
box5Params.loading = true
try { try {
let { year, domainId, proposeName } = box5Params; let { year, domainId, proposeName } = box5Params;
const res = await getDecreeYearOrder({ const res = await getDecreeYearOrder({
...@@ -822,6 +828,7 @@ const handleGetDecreeYearOrder = async () => { ...@@ -822,6 +828,7 @@ const handleGetDecreeYearOrder = async () => {
} catch (error) { } catch (error) {
console.error("行政令发布频度error", error); console.error("行政令发布频度error", error);
} }
box5Params.loading = false
}; };
// AI智能总结 // AI智能总结
const onChartInterpretation = async (text) => { const onChartInterpretation = async (text) => {
...@@ -882,9 +889,11 @@ const chart2Data = ref([ ...@@ -882,9 +889,11 @@ const chart2Data = ref([
const box6Params = reactive({ const box6Params = reactive({
year: yearList[0].value, year: yearList[0].value,
proposeName: '', proposeName: '',
loading: false,
}); });
const summarize2 = ref() const summarize2 = ref()
const handleGetDecreeArea = async () => { const handleGetDecreeArea = async () => {
box6Params.loading = true
try { try {
let { year, proposeName } = box6Params; let { year, proposeName } = box6Params;
const res = await getDecreeArea({ const res = await getDecreeArea({
...@@ -904,6 +913,7 @@ const handleGetDecreeArea = async () => { ...@@ -904,6 +913,7 @@ const handleGetDecreeArea = async () => {
} catch (error) { } catch (error) {
console.error("政令科技领域error", error); console.error("政令科技领域error", error);
} }
box6Params.loading = false
}; };
const handleBox6 = async () => { const handleBox6 = async () => {
await handleGetDecreeArea(); await handleGetDecreeArea();
...@@ -926,8 +936,10 @@ const box7Params = reactive({ ...@@ -926,8 +936,10 @@ const box7Params = reactive({
year: yearList[0].value, year: yearList[0].value,
domainId: '', domainId: '',
proposeName: '', proposeName: '',
loading: false,
}) })
const handleGetKeyDecree = async () => { const handleGetKeyDecree = async () => {
box7Params.loading = true
try { try {
let { year, domainId, proposeName } = box7Params; let { year, domainId, proposeName } = box7Params;
const res = await getKeyDecree({ const res = await getKeyDecree({
...@@ -950,6 +962,7 @@ const handleGetKeyDecree = async () => { ...@@ -950,6 +962,7 @@ const handleGetKeyDecree = async () => {
}); });
} }
} catch (error) { } } catch (error) { }
box7Params.loading = false
}; };
// 政令重点条款 // 政令重点条款
...@@ -958,8 +971,10 @@ const box8Params = reactive({ ...@@ -958,8 +971,10 @@ const box8Params = reactive({
year: yearList[0].value, year: yearList[0].value,
domainId: '', domainId: '',
proposeName: '', proposeName: '',
loading: false,
}) })
const handleGetDecreeKeyInstruction = async () => { const handleGetDecreeKeyInstruction = async () => {
box8Params.loading = true
try { try {
let { year, domainId, proposeName } = box8Params; let { year, domainId, proposeName } = box8Params;
const res = await getDecreeKeyInstruction({ const res = await getDecreeKeyInstruction({
...@@ -972,6 +987,7 @@ const handleGetDecreeKeyInstruction = async () => { ...@@ -972,6 +987,7 @@ const handleGetDecreeKeyInstruction = async () => {
} catch (error) { } catch (error) {
console.error("政令重点条款error", error); console.error("政令重点条款error", error);
} }
box8Params.loading = false
}; };
// 资源库 // 资源库
......
src/views/decree/decreeLayout/overview/background/index.vue
浏览文件 @ 5ec0c0d4
...@@ -186,7 +186,7 @@ const handleGetLaws = async () => { ...@@ -186,7 +186,7 @@ const handleGetLaws = async () => {
console.log("法律依据", res); console.log("法律依据", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
dependList.value = res.data; dependList.value = res.data;
dependActive.value = res.data.map(item => item.billId); // dependActive.value = res.data.map(item => item.billId);
} else { } else {
dependList.value = []; dependList.value = [];
} }
......
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ 5ec0c0d4
...@@ -476,7 +476,6 @@ onMounted(() => { ...@@ -476,7 +476,6 @@ onMounted(() => {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 30px;
min-height: 300px;
} }
} }
......
src/views/decree/decreeLayout/overview/measures/index.vue
浏览文件 @ 5ec0c0d4
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="organization-button"> <div class="organization-button" @click="handleClickToolBox()">
<div class="button-text">查看政令执行情况</div> <div class="button-text">查看政令执行情况</div>
<el-icon size="16"><Right /></el-icon> <el-icon size="16"><Right /></el-icon>
</div> </div>
...@@ -114,12 +114,24 @@ ...@@ -114,12 +114,24 @@
</AnalysisBox> </AnalysisBox>
</div> </div>
</div> </div>
<el-dialog v-model="isTreeDialog" width="1400px" top="8vh" class="viewpoint-dialog">
<template #header>
<div class="viewpoint-header">
<div class="viewpoint-title">政令举措思维导图</div>
</div>
</template>
<div class="viewpoint-body">
<div ref="graphContainer" style="height: 100%; width: 100%;"></div>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, reactive } from "vue"; import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import router from "@/router"; import router from "@/router";
import { Search } from '@element-plus/icons-vue' import { Search } from '@element-plus/icons-vue'
import { getDecreeOrganization } from "@/api/decree/introduction"; import { getDecreeOrganization } from "@/api/decree/introduction";
...@@ -132,6 +144,10 @@ import defaultCom from "@/views/coopRestriction/assets/images/default-icon2.png" ...@@ -132,6 +144,10 @@ import defaultCom from "@/views/coopRestriction/assets/images/default-icon2.png"
const route = useRoute(); const route = useRoute();
const handleClickToolBox = () => {
ElMessage.warning("当前功能正在开发中，敬请期待！");
};
// 科技领域 // 科技领域
const areaType = ref(""); const areaType = ref("");
const areaList = ref([]); const areaList = ref([]);
...@@ -272,6 +288,87 @@ const simpleNumToChinese = (num) => { ...@@ -272,6 +288,87 @@ const simpleNumToChinese = (num) => {
} }
} }
// 思维导图
import * as G6 from '@antv/g6';
const isTreeDialog = ref(true);
const graphContainer = ref(null);
let graph = null;
const onRelationChart = () => {
const container = graphContainer.value;
const nodeWidth = 180;
const width = container.clientWidth;
const height = container.clientHeight;
const centerX = width / 2
const centerY = height / 2 - 40
const leftNodeX = centerX - nodeWidth;
const rightNodeX = centerX + nodeWidth;
const data = {
nodes: [
{
id: '1', label: `hhhhhhhhhhhhhhhhhh`,
size: [250, 80]
},
{
id: '2', label: `kkkkkkkkkkkkkkkkkkkk`,
size: [250, 80]
},
],
edges: [
{ target: '1', source: '2' }
]
};
graph = new G6.Graph({
container: container,
width,
height,
defaultNode: {
type: 'rect',
anchorPoints: [[0, 0.5], [1, 0.5]],
style: {
cursor: "pointer",
radius: 4,
fill: '#f6faff',
stroke: '#B9DCFF',
},
labelCfg: {
style: {
cursor: "pointer",
fill: "#333333",
fontSize: 15,
fontWeight: "bold",
fontFamily: "Microsoft YaHei",
textAlign: "center",
}
}
},
defaultEdge: {
type: "line",
style: {
lineWidth: 1,
endArrow: true,
},
},
layout: {
type: null // 等同于 null
},
fitView: false,
});
console.log("graph", graph);
// 加载数据并渲染
graph.data(data);
graph.render();
}
onMounted(() => {
setTimeout(() => {
onRelationChart();
}, 1000)
});
// 相关实体 // 相关实体
const entityList = ref([]); const entityList = ref([]);
const onRelatedEntityData = async () => { const onRelatedEntityData = async () => {
...@@ -776,5 +873,42 @@ onMounted(() => { ...@@ -776,5 +873,42 @@ onMounted(() => {
} }
} }
} }
// 修改element-plus弹出框样式
:deep(.viewpoint-dialog) {
padding: 0;
border-radius: 4px;
.el-dialog__body {
padding: 0;
}
.el-dialog__header {
padding: 0;
margin: 0;
position: relative;
height: 48px;
}
.el-dialog__headerbtn {
top: 50%;
transform: translateY(-50%);
right: 12px;
}
.viewpoint-header {
height: 48px;
display: flex;
align-items: center;
padding: 0 24px;
border-bottom: 1px solid rgb(234, 236, 238);
}
.viewpoint-title {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
}
.viewpoint-body {
padding: 16px;
height: 77vh;
}
}
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论