提交 df1fee72 authored 作者: 张烨's avatar 张烨

style:政令背景、政令举措内容高度自适应

上级 cb673cbc
...@@ -436,7 +436,7 @@ ...@@ -436,7 +436,7 @@
<script setup> <script setup>
import NewsList from "@/components/base/newsList/index.vue"; import NewsList from "@/components/base/newsList/index.vue";
import { onMounted, ref, computed, watch, nextTick } from "vue"; import { onMounted, ref, watch, nextTick } from "vue";
import router from "@/router"; import router from "@/router";
import { import {
getDepartmentList, getDepartmentList,
...@@ -450,55 +450,17 @@ import { ...@@ -450,55 +450,17 @@ import {
getDecreehylyList, getDecreehylyList,
getDecreeTypeList getDecreeTypeList
} from "@/api/decree/home"; } from "@/api/decree/home";
import RiskSignal from "@/components/base/riskSignal/index.vue";
// import RiskSignal from "@/components/base/RiskSignal/index.vue";
import { getPersonSummaryInfo } from "@/api/common/index"; import { getPersonSummaryInfo } from "@/api/common/index";
import { getNews, getSocialMedia, getRiskSignal } from "@/api/general/index"; import { getNews, getSocialMedia } from "@/api/general/index";
import DivideHeader from "@/components/DivideHeader.vue"; import DivideHeader from "@/components/DivideHeader.vue";
import { useContainerScroll } from "@/hooks/useScrollShow"; import { useContainerScroll } from "@/hooks/useScrollShow";
import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart"; import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart"; import getPieChart from "./utils/piechart";
import getWordCloudChart from "./utils/wordCloudChart"; import getWordCloudChart from "./utils/wordCloudChart";
import getCalendarHeatChart from "./utils/cleandarHeat";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png"; import DefaultIcon2 from "@/assets/icons/default-icon2.png";
import DefaultIconNews from "@/assets/icons/default-icon-news.png";
import p1 from "./assets/images/iconp1.png";
import p2 from "./assets/images/iconp2.png";
import p3 from "./assets/images/iconp3.png";
import p4 from "./assets/images/iconp4.png";
import p5 from "./assets/images/iconp5.png";
import p6 from "./assets/images/iconp6.png";
import p7 from "./assets/images/iconp7.png";
import p8 from "./assets/images/iconp8.png";
import p9 from "./assets/images/iconp9.png";
import p10 from "./assets/images/iconp10.png";
import Gov1 from "./assets/images/gov1.png";
import Gov2 from "./assets/images/gov2.png";
import Gov3 from "./assets/images/gov3.png";
import Gov4 from "./assets/images/gov4.png";
import Gov5 from "./assets/images/gov5.png";
import Gov6 from "./assets/images/gov6.png";
import Gov7 from "./assets/images/gov7.png";
import Gov8 from "./assets/images/gov8.png";
import Gov9 from "./assets/images/gov9.png";
import Gov10 from "./assets/images/gov10.png";
import News1 from "./assets/images/news1.png";
import News2 from "./assets/images/news2.png";
import News3 from "./assets/images/news3.png";
import News4 from "./assets/images/news4.png";
import News5 from "./assets/images/news5.png";
import Message1 from "./assets/images/message-icon1.png";
import Message2 from "./assets/images/message-icon2.png";
import Message3 from "./assets/images/message-icon3.png";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="box1-main"> <div class="box1-main">
<el-empty v-if="siderList.length===0" style="padding-top: 30%" description="暂无数据" :image-size="100" /> <el-empty v-if="siderList.length===0" style="padding-top: 30%" description="暂无数据" :image-size="100" />
<el-scrollbar height="100%" always> <el-scrollbar height="100%" always>
<div class="left-item" :class="{ 'item-active': false }" v-for="(item, index) in siderList" :key="index" @click="handleClickSider(item)"> <div class="left-item" :class="{ 'item-active': false }" v-for="(item, index) in siderList" :key="index" @click="handleClickDecree(item)">
<div class="item-head"> <div class="item-head">
<div class="itme-name one-line-ellipsis">{{ item.label }}</div> <div class="itme-name one-line-ellipsis">{{ item.label }}</div>
<div class="item-tag">政令</div> <div class="item-tag">政令</div>
...@@ -49,6 +49,7 @@ ...@@ -49,6 +49,7 @@
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount } from "vue"; import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import router from "@/router";
import * as G6 from '@antv/g6'; import * as G6 from '@antv/g6';
import { getDecreeRelatedOrder } from "@/api/decree/deepdig"; import { getDecreeRelatedOrder } from "@/api/decree/deepdig";
import { getDecreeSummary } from "@/api/decree/introduction"; import { getDecreeSummary } from "@/api/decree/introduction";
...@@ -124,17 +125,14 @@ const onWordWrap = (word, num) => { ...@@ -124,17 +125,14 @@ const onWordWrap = (word, num) => {
const onFormatNode = (item) => { const onFormatNode = (item) => {
let isCenter = item.isCenter || false let isCenter = item.isCenter || false
return { return {
id: item.id+'', label:onWordWrap(item.label, 15), isCenter, size: 40, id: item.id+'', label:onWordWrap(item.label, 15), isCenter,
img: isCenter ? icon1628 : icon1629, img: isCenter ? icon1628 : icon1629,
clipCfg: { show: true, type: "circle", r: isCenter ? 30 : 20 }, style: { cursor: "pointer" }, clipCfg: { r: isCenter ? 40 : 30 },
labelCfg: { labelCfg: {
position: "bottom", offset: 12,
style: { style: {
fill: isCenter ? "#1459BB" : "#333333", fill: isCenter ? "#1459BB" : "#333333",
fontSize: isCenter ? 13 : 11, fontSize: isCenter ? 13 : 13,
fontWeight: isCenter ? "bold" : "normal", fontWeight: isCenter ? "bold" : "normal"
fontFamily: "Microsoft YaHei",
textAlign: "center"
} }
} }
} }
...@@ -144,24 +142,16 @@ const onFormatEdge = (item, index) => { ...@@ -144,24 +142,16 @@ const onFormatEdge = (item, index) => {
id: `edge-${index+1}`, id: `edge-${index+1}`,
target: item.id+'', target: item.id+'',
source: route.query.id, source: route.query.id,
type: "line",
// label: ["", "相似", "继承", "冲突"][1], // label: ["", "相似", "继承", "冲突"][1],
label: item.relation, label: item.relation,
style: { style: {
stroke: ["", "#B9DCFF", "#87E8DE", "#FFCCC7"][1], stroke: ["", "#B9DCFF", "#87E8DE", "#FFCCC7"][1],
lineWidth: 1,
endArrow: true,
}, },
labelCfg: { labelCfg: {
autoRotate: true,
style: { style: {
fill: ["", "#055FC2", "#13A8A8", "#CE4F51"][1], fill: ["", "#055FC2", "#13A8A8", "#CE4F51"][1],
fontSize: 10,
fontFamily: 'Microsoft YaHei',
background: { background: {
fill: ["", "#E7F3FF", "#E6FFFB", "#FFE0E0"][1], fill: ["", "#E7F3FF", "#E6FFFB", "#FFE0E0"][1],
padding: [2, 4, 2, 4],
radius: 2
} }
} }
} }
...@@ -208,23 +198,15 @@ const initChart = () => { ...@@ -208,23 +198,15 @@ const initChart = () => {
minZoom: 0.1, minZoom: 0.1,
maxZoom: 10, maxZoom: 10,
modes: { modes: {
default: [ default: [ 'drag-canvas', 'zoom-canvas', 'drag-node' ]
'drag-canvas',
'zoom-canvas',
'drag-node',
]
}, },
defaultNode: { defaultNode: {
type: 'image', type: 'image',
size: 40, size: 50,
clipCfg: { style: { cursor: "pointer" },
show: true, clipCfg: { show: true, type: 'circle' },
type: 'circle',
r: 20
},
labelCfg: { labelCfg: {
position: 'bottom', position: "bottom", offset: 12,
offset: 10,
style: { style: {
fill: '#333', fill: '#333',
fontSize: 11, fontSize: 11,
...@@ -234,23 +216,50 @@ const initChart = () => { ...@@ -234,23 +216,50 @@ const initChart = () => {
fill: 'rgba(255, 255, 255, 0.95)', fill: 'rgba(255, 255, 255, 0.95)',
padding: [4, 6, 4, 6], padding: [4, 6, 4, 6],
radius: 4 radius: 4
}, }
} }
} }
}, },
defaultEdge: {
type: "line",
style: { lineWidth: 1, endArrow: true },
labelCfg: {
autoRotate: true,
style: {
cursor: "pointer",
fontSize: 12,
fontFamily: 'Microsoft YaHei',
background: { padding: [4, 4, 4, 4] }
}
}
}
}) })
// 节点点击处理 // 节点点击处理
graphInstance.on('node:click', (evt) => { graphInstance.on('node:click', (evt) => {
console.log('节点详情:', evt.item._cfg.model.id);
let node = siderList.value.find(item => item.id==evt.item._cfg.model.id) let node = siderList.value.find(item => item.id==evt.item._cfg.model.id)
handleClickSider(node) if (node) handleClickDecree(node)
});
graphInstance.on('edge:click', (evt) => {
let node = siderList.value.find(item => item.id==evt.item._cfg.model.target)
if (node) handleClickSider(node)
}); });
graphInstance.data({nodes: nodeList, edges: edgeList}) graphInstance.data({nodes: nodeList, edges: edgeList})
graphInstance.render() graphInstance.render()
} }
const handleClickDecree = decree => {
window.sessionStorage.setItem("curTabName", decree.name);
const route = router.resolve({
path: "/decreeLayout",
query: {
id: decree.id
}
});
window.open(route.href, "_blank");
};
// 冲突关系 // 冲突关系
const graphContainer = ref(null); const graphContainer = ref(null);
let graph = null; let graph = null;
...@@ -267,39 +276,25 @@ const onRelationChart = () => { ...@@ -267,39 +276,25 @@ const onRelationChart = () => {
const data = { const data = {
nodes: [ nodes: [
{ {
id: 'node-left', label: `${mainInfo.value.time}\n${onWordWrap(mainInfo.value.label, 15)}`, id: mainInfo.value.id+'', label: `${mainInfo.value.time}\n${onWordWrap(mainInfo.value.label, 15)}`,
size: [250, 80], size: [250, 80], x: leftNodeX, y: centerY,
x: leftNodeX,
y: centerY,
}, },
{ {
id: 'node-right', label: `${nodeInfo.value.time}\n${onWordWrap(nodeInfo.value.label, 15)}`, id: nodeInfo.value.id+'', label: `${nodeInfo.value.time}\n${onWordWrap(nodeInfo.value.label, 15)}`,
size: [250, 80], size: [250, 80], x: rightNodeX, y: centerY,
x: rightNodeX,
y: centerY,
}, },
], ],
edges: [ edges: [
{ {
id: `edge-1`, id: `edge-1`, target: nodeInfo.value.id+'', source: mainInfo.value.id+'', label: nodeInfo.value.relation,
target: 'node-right',
source: 'node-left',
type: "line",
label: nodeInfo.value.relation,
style: { style: {
stroke: ["", "#B9DCFF", "#87E8DE", "#FFCCC7"][1], stroke: ["", "#B9DCFF", "#87E8DE", "#FFCCC7"][1],
lineWidth: 1,
endArrow: true,
}, },
labelCfg: { labelCfg: {
autoRotate: true,
style: { style: {
fill: ["", "#055FC2", "#13A8A8", "#CE4F51"][1], fill: ["", "#055FC2", "#13A8A8", "#CE4F51"][1],
fontSize: 14,
fontFamily: 'Microsoft YaHei',
background: { background: {
fill: ["", "#E7F3FF", "#E6FFFB", "#FFE0E0"][1], fill: ["", "#E7F3FF", "#E6FFFB", "#FFE0E0"][1],
padding: [6, 4, 4, 4],
} }
} }
} }
...@@ -317,12 +312,14 @@ const onRelationChart = () => { ...@@ -317,12 +312,14 @@ const onRelationChart = () => {
type: 'rect', type: 'rect',
anchorPoints: [[0, 0.5], [1, 0.5]], anchorPoints: [[0, 0.5], [1, 0.5]],
style: { style: {
cursor: "pointer",
radius: 4, radius: 4,
fill: '#f6faff', fill: '#f6faff',
stroke: '#B9DCFF', stroke: '#B9DCFF',
}, },
labelCfg: { labelCfg: {
style: { style: {
cursor: "pointer",
fill: "#333333", fill: "#333333",
fontSize: 15, fontSize: 15,
fontWeight: "bold", fontWeight: "bold",
...@@ -331,10 +328,32 @@ const onRelationChart = () => { ...@@ -331,10 +328,32 @@ const onRelationChart = () => {
} }
} }
}, },
defaultEdge: {
type: "line",
style: {
lineWidth: 1,
endArrow: true,
},
labelCfg: {
autoRotate: true,
style: {
fontSize: 14,
fontFamily: 'Microsoft YaHei',
background: {
padding: [6, 4, 4, 4],
}
}
}
},
layout: null, layout: null,
modes: { default: [] }, modes: { default: [] },
fitView: false, fitView: false,
}); });
graph.on('node:click', (evt) => {
let node = siderList.value.find(item => item.id==evt.item._cfg.model.id)
if (node) handleClickDecree(node)
});
} }
// 加载数据并渲染 // 加载数据并渲染
......
...@@ -19,14 +19,11 @@ ...@@ -19,14 +19,11 @@
<div class="info"> <div class="info">
<div class="info-box1">{{ summaryInfo.name }}</div> <div class="info-box1">{{ summaryInfo.name }}</div>
<div class="info-box2"> <div class="info-box2">
<div class="info-box2-item item1" v-if="summaryInfo.order"> <div class="info-box2-item item1">{{ summaryInfo.postDate }}</div>
{{ summaryInfo.order + " | " }} |
</div> <div class="info-box2-item item2">{{ summaryInfo.orgName }}</div>
|
<div class="info-box2-item item2" v-if="summaryInfo.orgName"> <div class="info-box2-item item3">{{ summaryInfo.ename }}</div>
{{ summaryInfo.orgName + " | " }}
</div>
<div class="info-box2-item item3" v-if="summaryInfo.ename">{{ summaryInfo.ename }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -214,12 +211,12 @@ const mainHeaderBtnList = ref([ ...@@ -214,12 +211,12 @@ const mainHeaderBtnList = ref([
name: "深度挖掘", name: "深度挖掘",
path: "/decreeLayout/deepDig" path: "/decreeLayout/deepDig"
}, },
{ // {
icon: icon3, // icon: icon3,
activeIcon: icon3Active, // activeIcon: icon3Active,
name: "影响分析", // name: "影响分析",
path: "/decreeLayout/influence" // path: "/decreeLayout/influence"
} // },
]); ]);
const activeTitle = ref("政令概况"); const activeTitle = ref("政令概况");
...@@ -462,18 +459,6 @@ onMounted(() => { ...@@ -462,18 +459,6 @@ onMounted(() => {
.info-box2-item { .info-box2-item {
padding: 0 10px; padding: 0 10px;
} }
.item1 {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item2 {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item3 { .item3 {
max-width: 420px; max-width: 420px;
overflow: hidden; overflow: hidden;
......
...@@ -79,13 +79,14 @@ ...@@ -79,13 +79,14 @@
<ChartChain /> <ChartChain />
</div> </div>
<div class="box2-main" v-if="contentType==2"> <div class="box2-main" v-if="contentType==2">
<ChartRelation <!-- <ChartRelation
:graph-data="graphData" :graph-data="graphData"
:tree-data="treeData" :tree-data="treeData"
:control-active="1" :control-active="1"
@node-click="handleNodeClick" @node-click="handleNodeClick"
@layout-change="handleLayoutChange" @layout-change="handleLayoutChange"
/> /> -->
<GraphChart :nodes="testData.nodes" :links="testData.links" layoutType="force" />
</div> </div>
</AnalysisBox> </AnalysisBox>
</div> </div>
...@@ -101,6 +102,7 @@ import { getDecreeIndustry, getDecreehylyList, getDecreeCompany } from "@/api/de ...@@ -101,6 +102,7 @@ import { getDecreeIndustry, getDecreehylyList, getDecreeCompany } from "@/api/de
import { getCnEntityOnChain, getChainInfoByDomainId } from "@/api/exportControl"; import { getCnEntityOnChain, getChainInfoByDomainId } from "@/api/exportControl";
import { getSingleSanctionEntitySupplyChain } from "@/api/exportControlV2.0"; import { getSingleSanctionEntitySupplyChain } from "@/api/exportControlV2.0";
import ChartChain from "./ChartChain.vue"; import ChartChain from "./ChartChain.vue";
import GraphChart from "@/components/base/GraphChart/index.vue";
import ChartRelation from "./ChartRelation.vue"; import ChartRelation from "./ChartRelation.vue";
import defaultIcon2 from "@/assets/icons/default-icon2.png"; import defaultIcon2 from "@/assets/icons/default-icon2.png";
import noticeIcon from "./assets/images/notice-icon.png"; import noticeIcon from "./assets/images/notice-icon.png";
...@@ -111,6 +113,193 @@ import icon1621 from "./assets/images/icon1621.png"; ...@@ -111,6 +113,193 @@ import icon1621 from "./assets/images/icon1621.png";
import company from "./assets/images/company.png"; import company from "./assets/images/company.png";
import companyActive from "./assets/images/company-active.png"; import companyActive from "./assets/images/company-active.png";
// 关系图数据
const testData = {
// 节点数据
nodes: [
{
id: 0,
name: "泰丰先行",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${company}`,
x: 50,
y: 10
},
{
id: 1,
name: "国轩高科",
// category: 0,
symbolSize: 30,
value: 9,
symbol: `image://${company}`,
x: 150,
y: 10
},
{
id: 2,
name: "智方纳米",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${company}`,
x: 250,
y: 10
},
{
id: 3,
name: "香百科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${company}`,
x: 350,
y: 10
},
{
id: 4,
name: "格林滨",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${company}`,
x: 450,
y: 10
},
{
id: 5,
name: "江西紫宸",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${company}`,
x: 550,
y: 10
},
{
id: 6,
name: "紫江企业",
// category: 4,
symbolSize: 30,
value: 6,
symbol: `image://${company}`,
x: 650,
y: 10
},
{
id: 7,
name: "大而美法案",
// category: 4,
symbolSize: 50,
value: 5,
symbol: `image://${company}`,
x: 300,
y: 200
},
{
id: 8,
name: "比亚迪",
// category: 0,
symbolSize: 30,
value: 10,
symbol: `image://${company}`,
x: 50,
y: 400
},
{
id: 9,
name: "铜陵有色",
// category: 3,
symbolSize: 30,
value: 8,
symbol: `image://${company}`,
x: 150,
y: 400
},
{
id: 10,
name: "长盛精密",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${company}`,
x: 250,
y: 400
},
{
id: 11,
name: "天合光能",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${company}`,
x: 350,
y: 400
},
{
id: 12,
name: "昆仑化学",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${company}`,
x: 250,
y: 400
},
{
id: 13,
name: "嘉源科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${company}`,
x: 450,
y: 400
},
{
id: 14,
name: "华阳集团",
// category: 4,
symbolSize: 30,
value: 7,
symbol: `image://${company}`,
x: 550,
y: 400
},
{
id: 15,
name: "海辰智能",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${company}`,
x: 650,
y: 400
},
],
// 关系数据
links: [
{ source: 1, target: 7, label: { show: true, formatter: '合作' } },
{ source: 2, target: 7, label: { show: true, formatter: '持股' } },
{ source: 3, target: 7, label: { show: true, formatter: '合作' } },
{ source: 4, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 5, target: 7, label: { show: true, formatter: '合作' } },
{ source: 6, target: 7, label: { show: true, formatter: '持股' } },
{ source: 0, target: 7, label: { show: true, formatter: '持股' } },
{ source: 8, target: 7, label: { show: true, formatter: '合作' } },
{ source: 9, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 10, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '合作' } },
{ source: 11, target: 7, label: { show: true, formatter: '合作' } },
{ source: 12, target: 7, label: { show: true, formatter: '合作' } },
{ source: 13, target: 7, label: { show: true, formatter: '合作' } },
{ source: 14, target: 7, label: { show: true, formatter: '合作' } },
{ source: 15, target: 7, label: { show: true, formatter: '合作', color: 'red', borderColor: 'red' } },
],
};
// 受影响实体 // 受影响实体
const companyList = ref([]); const companyList = ref([]);
const activeEntityId = ref(1); const activeEntityId = ref(1);
...@@ -185,7 +374,7 @@ const handleGetHylyList = async () => { ...@@ -185,7 +374,7 @@ const handleGetHylyList = async () => {
}; };
// 产业链/实体关系 // 产业链/实体关系
const contentType = ref(1); const contentType = ref(2);
const headerContentType = (type) => { const headerContentType = (type) => {
contentType.value = type; contentType.value = type;
}; };
......
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
</div> </div>
</template> </template>
<div class="box1-container"> <div class="box1-container">
<el-empty v-if="!backgroundList?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
<div class="box1-main"> <div class="box1-main">
<el-empty v-if="backgroundList.length === 0" style="padding-top: 60px;" description="暂无数据" :image-size="100" />
<div class="box1-item" v-for="(item, index) in backgroundList" :key="index"> <div class="box1-item" v-for="(item, index) in backgroundList" :key="index">
<div class="id">{{ index + 1 }}</div> <div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.content }}</div> <div class="title">{{ item.content }}</div>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box1-footer"> <div class="box1-footer" v-if="backgroundListNum > 10">
<div class="box1-footer-left">{{ `共 ${backgroundListNum} 项` }}</div> <div class="box1-footer-left">{{ `共 ${backgroundListNum} 项` }}</div>
<div class="box1-footer-right"> <div class="box1-footer-right">
<el-pagination :page-size="10" @current-change="handleCurrentChange" :current-page="currentPage" background layout="prev, pager, next" :total="backgroundListNum" /> <el-pagination :page-size="10" @current-change="handleCurrentChange" :current-page="currentPage" background layout="prev, pager, next" :total="backgroundListNum" />
...@@ -33,14 +33,13 @@ ...@@ -33,14 +33,13 @@
</div> </div>
<div class="box2"> <div class="box2">
<AnalysisBox title="法律依据" :showAllBtn="false"> <AnalysisBox title="法律依据" :showAllBtn="false">
<el-empty v-if="!dependList?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
<div class="box2-main"> <div class="box2-main">
<el-empty v-if="dependList.length === 0" description="暂无数据" :image-size="100" />
<div class="custom-collapse"> <div class="custom-collapse">
<el-collapse v-model="dependActive"> <el-collapse v-model="dependActive">
<el-collapse-item v-for="(item, index) in dependList" :key="item.billId" title="Consistency" :name="item.billId"> <el-collapse-item v-for="(item, index) in dependList" :key="item.billId" title="Consistency" :name="item.billId">
<template #icon> <template #icon>
<el-icon><ArrowDownBold /></el-icon> <el-icon><ArrowDownBold /></el-icon>
<!-- <el-icon><ArrowRightBold /></el-icon> -->
</template> </template>
<template #title> <template #title>
<div class="custom-collapse-title"> <div class="custom-collapse-title">
...@@ -61,14 +60,14 @@ ...@@ -61,14 +60,14 @@
<div class="right"> <div class="right">
<div class="box3"> <div class="box3">
<AnalysisBox title="前序政令" :showAllBtn="false"> <AnalysisBox title="前序政令" :showAllBtn="false">
<el-empty v-if="!prevList.length" style="padding-top: 200px;" description="暂无数据" :image-size="100" /> <el-empty v-if="!prevList?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
<div class="box3-bottom-main"> <div class="box3-bottom-main">
<el-timeline> <el-timeline>
<el-timeline-item v-for="(item, index) in prevList" :key="index"> <el-timeline-item v-for="(item, index) in prevList" :key="index">
<div> <div>
<div class="time-line-top"> <div class="time-line-top">
<div class="time-line-date">{{ item.postDate }}</div> <div class="time-line-date">{{ item.postDate }}</div>
<div class="time-line-icon" @click="handleToInstitution(item)"> <div class="time-line-icon">
<img style="width: 100%; height: 100%;" :src="item.orgImage || DefaultIcon1" alt=""> <img style="width: 100%; height: 100%;" :src="item.orgImage || DefaultIcon1" alt="">
</div> </div>
<div class="time-line-name" @click="handleToInstitution(item)">{{ item.proposeOrgName }}</div> <div class="time-line-name" @click="handleToInstitution(item)">{{ item.proposeOrgName }}</div>
...@@ -216,8 +215,6 @@ onMounted(() => { ...@@ -216,8 +215,6 @@ onMounted(() => {
gap: 16px; gap: 16px;
.box1 { .box1 {
height: 690px;
.header-btn-box { .header-btn-box {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
...@@ -246,7 +243,6 @@ onMounted(() => { ...@@ -246,7 +243,6 @@ onMounted(() => {
} }
.box1-container { .box1-container {
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 16px; padding: 16px;
...@@ -254,9 +250,6 @@ onMounted(() => { ...@@ -254,9 +250,6 @@ onMounted(() => {
.box1-main { .box1-main {
width: 1034px; width: 1034px;
height: 20px;
flex: auto;
overflow-y: auto;
.box1-item { .box1-item {
width: 1015px; width: 1015px;
...@@ -268,14 +261,14 @@ onMounted(() => { ...@@ -268,14 +261,14 @@ onMounted(() => {
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
display: flex; display: flex;
align-items: center; align-items: center;
padding: 8px 0; padding: 12px 0;
.id { .id {
margin-left: 15px; margin-left: 15px;
width: 24px; width: 24px;
height: 24px; height: 24px;
text-align: center; text-align: center;
line-height: 24px; line-height: 30px;
border-radius: 12px; border-radius: 12px;
background: #e7f3ff; background: #e7f3ff;
color: #0a57a6; color: #0a57a6;
...@@ -307,6 +300,7 @@ onMounted(() => { ...@@ -307,6 +300,7 @@ onMounted(() => {
.box1-footer { .box1-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 10px;
.box1-footer-left { .box1-footer-left {
height: 20px; height: 20px;
...@@ -320,13 +314,9 @@ onMounted(() => { ...@@ -320,13 +314,9 @@ onMounted(() => {
} }
.box2 { .box2 {
height: 500px;
.box2-main { .box2-main {
padding: 16px 20px; padding: 16px 20px;
height: 100%;
overflow: hidden;
overflow-y: auto;
.custom-collapse { .custom-collapse {
padding-left: 32px; padding-left: 32px;
:deep(.el-collapse), :deep(.el-collapse),
...@@ -374,14 +364,11 @@ onMounted(() => { ...@@ -374,14 +364,11 @@ onMounted(() => {
.right { .right {
width: 520px; width: 520px;
.box3 { .box3 {
height: 100%;
.box3-bottom-main { .box3-bottom-main {
width: 100%; width: 100%;
height: 100%;
padding-right: 30px; padding-right: 30px;
margin-top: 14px; margin-top: 14px;
overflow-y: auto;
.time-line-top { .time-line-top {
display: flex; display: flex;
...@@ -402,7 +389,6 @@ onMounted(() => { ...@@ -402,7 +389,6 @@ onMounted(() => {
overflow: hidden; overflow: hidden;
border-radius: 50%; border-radius: 50%;
font-size: 0px; font-size: 0px;
cursor: pointer;
} }
.time-line-name { .time-line-name {
...@@ -436,14 +422,9 @@ onMounted(() => { ...@@ -436,14 +422,9 @@ onMounted(() => {
.timeline-content { .timeline-content {
color: var(--text-primary-65-color); color: var(--text-primary-65-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 26px; line-height: 26px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
} }
......
<template> <template>
<div class="decree-overview-wrap"> <div class="decree-overview-wrap">
<div class="left">
<SiderTabs :siderList="siderList" @clickSiderItem="handleClickLeftSiderBtn" />
</div>
<div class="main"> <div class="main">
<div class="left">
<SiderTabs :siderList="siderList" @clickSiderItem="handleClickLeftSiderBtn" />
</div>
<router-view /> <router-view />
</div> </div>
</div> </div>
...@@ -55,19 +55,14 @@ const handleClickLeftSiderBtn = node => { ...@@ -55,19 +55,14 @@ const handleClickLeftSiderBtn = node => {
}; };
onMounted(() => { onMounted(() => {
switch (route.path) { siderList.value.forEach(item => {
case "/decreeLayout/overview/introduction": if (item.path === route.path) {
siderBtnActive.value = "政令简介"; siderBtnActive.value = item.name;
break; item.active = true;
case "/decreeLayout/overview/background": } else {
siderBtnActive.value = "政令背景"; item.active = false;
break; }
case "/decreeLayout/overview/measures": });
siderBtnActive.value = "政令举措";
break;
default:
siderBtnActive.value = "政令简介";
}
}); });
</script> </script>
...@@ -76,17 +71,18 @@ onMounted(() => { ...@@ -76,17 +71,18 @@ onMounted(() => {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
background: rgba(247, 248, 249, 1); background: rgba(247, 248, 249, 1);
position: relative;
.left {
position: absolute;
left: 0px;
top: 0px;
width: 160px;
padding: 0px 16px;
}
.main { .main {
position: relative;
width: 1600px; width: 1600px;
margin: 0 auto; margin: 0 auto;
.left {
position: absolute;
left: -160px;
top: 0px;
width: 160px;
padding: 0px 16px;
}
} }
} }
</style> </style>
\ No newline at end of file
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
<img :src="item.avatar ? item.avatar : DefaultIcon1" alt="" /> <img :src="item.avatar ? item.avatar : DefaultIcon1" alt="" />
</div> </div>
<div class="box3-top-bottom-item-right"> <div class="box3-top-bottom-item-right">
<div class="name">{{ item.name }}</div> <div class="name" @click="handleClickUser(item)">{{ item.name }}</div>
<div class="position">{{ item.job }}</div> <div class="position">{{ item.job }}</div>
</div> </div>
</div> </div>
...@@ -294,6 +294,17 @@ const handleToInstitution = item => { ...@@ -294,6 +294,17 @@ const handleToInstitution = item => {
}); });
window.open(curRoute.href, "_blank"); window.open(curRoute.href, "_blank");
}; };
// 跳转人员详情
const handleClickUser = item => {
window.sessionStorage.setItem('curTabName', item.name)
const routeData = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(routeData.href, "_blank");
};
onMounted(() => { onMounted(() => {
onRiskSignalData() onRiskSignalData()
...@@ -689,6 +700,7 @@ onMounted(() => { ...@@ -689,6 +700,7 @@ onMounted(() => {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
cursor: pointer;
} }
.position { .position {
......
...@@ -10,48 +10,46 @@ ...@@ -10,48 +10,46 @@
<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
<div style="flex: auto; width: 20px;"></div> <div style="flex: auto; width: 20px;"></div>
<el-switch v-model="isHighlight" /> <!-- <el-switch v-model="isHighlight" />
<div style="margin-left: 6px;">高亮实体</div> <div style="margin-left: 6px;">高亮实体</div> -->
<div class="select-input"> <div class="select-input">
<el-input v-model="commandWord" @keyup.enter="onMainContentData()" style="width: 100%; height: 100%;" :suffix-icon="Search" placeholder="指令搜索" /> <el-input v-model="commandWord" @keyup.enter="onMainContentData()" style="width: 100%; height: 100%;" :suffix-icon="Search" placeholder="指令搜索" />
</div> </div>
</div> </div>
<div class="analysis-content"> <div class="analysis-content">
<el-scrollbar height="100%" always> <!-- 遍历文档章节 -->
<!-- 遍历文档章节 --> <el-empty v-if="!contentList?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
<el-empty v-if="!contentList.length" style="padding-top: 200px;" description="暂无数据" :image-size="100" /> <div v-for="(section, index) in contentList" :key="index" class="section">
<div v-for="(section, index) in contentList" :key="index" class="section"> <div class="section-header">
<div class="section-header"> <div class="section-title">({{ simpleNumToChinese(index+1) }}) {{ section.content }}</div>
<div class="section-title one-line-ellipsis">({{ simpleNumToChinese(index+1) }}) {{ section.content }}</div> <div class="section-icon">
<div class="section-icon"> <img src="./assets/images/open-icon.png" alt="" />
<img src="./assets/images/open-icon.png" alt="" /> </div>
</div> </div>
</div> <!-- 渲染一级列表 -->
<!-- 渲染一级列表 --> <div class="numbered-list">
<div class="numbered-list"> <div v-for="(item, itemIndex) in section.slaver" :key="itemIndex" class="list-item">
<div v-for="(item, itemIndex) in section.slaver" :key="itemIndex" class="list-item"> <div class="list-item-dot">{{itemIndex+1}}.</div>
<div class="list-item-dot">{{itemIndex+1}}.</div> <div class="list-item-word">{{ item.content }}</div>
<div class="list-item-word">{{ item.content }}</div>
<!-- 渲染二级列表 -->
<!-- 渲染二级列表 --> <div v-if="item.slaver" class="sub-list">
<div v-if="item.slaver" class="sub-list"> <div v-for="(subItem, subIndex) in item.slaver" :key="subIndex" class="sub-item">
<div v-for="(subItem, subIndex) in item.slaver" :key="subIndex" class="sub-item"> <div class="sub-item-dot">({{subIndex+1}})</div>
<div class="sub-item-dot">({{subIndex+1}})</div> <div class="sub-item-word">{{ subItem.content }}</div>
<div class="sub-item-word">{{ subItem.content }}</div>
<!-- 渲染三级列表 -->
<!-- 渲染三级列表 --> <div v-if="subItem.slaver" class="sub-sub-list">
<div v-if="subItem.slaver" class="sub-sub-list"> <div v-for="(subSubItem, subSubIndex) in subItem.slaver" :key="subSubIndex" class="sub-sub-item">
<div v-for="(subSubItem, subSubIndex) in subItem.slaver" :key="subSubIndex" class="sub-sub-item"> <div class="sub-sub-item-dot">{{ALPHABET[subSubIndex%26]}}.</div>
<div class="sub-sub-item-dot">{{ALPHABET[subSubIndex%26]}}.</div> <div class="sub-sub-item-word">{{ subSubItem.content }}</div>
<div class="sub-sub-item-word">{{ subSubItem.content }}</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</el-scrollbar> </div>
</div>
</div> </div>
</div> </div>
</AnalysisBox> </AnalysisBox>
...@@ -83,7 +81,7 @@ ...@@ -83,7 +81,7 @@
<img :src="item.avatar ? item.avatar : DefaultIcon1" alt="" /> <img :src="item.avatar ? item.avatar : DefaultIcon1" alt="" />
</div> </div>
<div class="box3-top-bottom-item-right"> <div class="box3-top-bottom-item-right">
<div class="name">{{ item.name }}</div> <div class="name" @click="handleClickUser(item)">{{ item.name }}</div>
<div class="position">{{ item.job }}</div> <div class="position">{{ item.job }}</div>
</div> </div>
</div> </div>
...@@ -94,8 +92,8 @@ ...@@ -94,8 +92,8 @@
</div> </div>
<div class="box4"> <div class="box4">
<AnalysisBox title="相关实体" :showAllBtn="false"> <AnalysisBox title="相关实体" :showAllBtn="false">
<el-empty v-if="!entityList?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
<div class="left-bottom-main"> <div class="left-bottom-main">
<el-empty v-if="!entityList.length" style="padding-top: 200px;" description="暂无数据" :image-size="100" />
<div v-for="(item, index) in entityList" :key="index" class="main-box"> <div v-for="(item, index) in entityList" :key="index" class="main-box">
<div class="icon"> <div class="icon">
<img style="width: 100%; height: 100%;" :src="item.imgUrl || defaultCom" alt="" /> <img style="width: 100%; height: 100%;" :src="item.imgUrl || defaultCom" alt="" />
...@@ -291,6 +289,17 @@ const handleToInstitution = item => { ...@@ -291,6 +289,17 @@ const handleToInstitution = item => {
}); });
window.open(curRoute.href, "_blank"); window.open(curRoute.href, "_blank");
}; };
// 跳转人员详情
const handleClickUser = item => {
window.sessionStorage.setItem('curTabName', item.name)
const routeData = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(routeData.href, "_blank");
};
const handleGetOrgnization = async () => { const handleGetOrgnization = async () => {
try { try {
const res = await getDecreeIssueOrganization({id: route.query.id}); const res = await getDecreeIssueOrganization({id: route.query.id});
...@@ -327,10 +336,8 @@ onMounted(() => { ...@@ -327,10 +336,8 @@ onMounted(() => {
flex: auto; flex: auto;
.box1 { .box1 {
height: 100%;
.analysis-box { .analysis-box {
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -353,12 +360,7 @@ onMounted(() => { ...@@ -353,12 +360,7 @@ onMounted(() => {
} }
} }
.analysis-content { .analysis-content {
height: 20px;
flex: auto;
:deep(.el-scrollbar__bar.is-vertical) { :deep(.el-scrollbar__bar.is-vertical) {
right: 0px; right: 0px;
width: 4px; width: 4px;
...@@ -377,14 +379,14 @@ onMounted(() => { ...@@ -377,14 +379,14 @@ onMounted(() => {
.section-header { .section-header {
display: flex; display: flex;
height: 48px; padding: 12px 16px;
align-items: center; align-items: center;
background-color: rgba(247, 248, 249, 1); background-color: rgba(247, 248, 249, 1);
border-radius: 2px; border-radius: 2px;
padding: 0 16px;
.section-title { .section-title {
font-size: 18px; font-size: 18px;
line-height: 30px;
font-weight: 600; font-weight: 600;
letter-spacing: 1px; letter-spacing: 1px;
width: 20px; width: 20px;
...@@ -625,6 +627,7 @@ onMounted(() => { ...@@ -625,6 +627,7 @@ onMounted(() => {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
cursor: pointer;
} }
.position { .position {
...@@ -722,12 +725,8 @@ onMounted(() => { ...@@ -722,12 +725,8 @@ onMounted(() => {
} }
.box4 { .box4 {
height: 610px;
.left-bottom-main { .left-bottom-main {
padding: 20px 20px 0; padding: 20px;
height: 100%;
overflow-y: auto;
.main-box { .main-box {
height: 48px; height: 48px;
border-radius: 50px; border-radius: 50px;
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="info"> <div class="info">
<div class="info-box1 one-line-ellipsis">{{ summaryInfo.name }}</div> <div class="info-box1 one-line-ellipsis">{{ summaryInfo.name }}</div>
<div class="info-box2"> <div class="info-box2">
<div class="info-box2-item">{{ summaryInfo.order }}</div> <div class="info-box2-item">{{ summaryInfo.postDate }}</div>
| |
<div class="info-box2-item">{{ summaryInfo.orgName }}</div> <div class="info-box2-item">{{ summaryInfo.orgName }}</div>
| |
...@@ -28,14 +28,14 @@ ...@@ -28,14 +28,14 @@
<div class="layout-main-center"> <div class="layout-main-center">
<div class="report-header"> <div class="report-header">
<div class="report-title">政令原文</div> <div class="report-title">政令原文</div>
<el-switch v-model="isHighlight" /> <!-- <el-switch v-model="isHighlight" />
<div style="margin-left: 6px; margin-right: 10px;">高亮实体</div> <div style="margin-left: 6px; margin-right: 10px;">高亮实体</div> -->
<el-switch v-model="isTranslate" /> <el-switch v-model="isTranslate" />
<div style="margin-left: 6px;">原文显示</div> <div style="margin-left: 6px;">原文显示</div>
<div class="btn" @click="handleDownload"> <!-- <div class="btn" @click="handleDownload">
<el-icon><Document /></el-icon> <el-icon><Document /></el-icon>
<div class="text">下载</div> <div class="text">下载</div>
</div> </div> -->
<div class="btn" @click="handleFindWord('open')"> <div class="btn" @click="handleFindWord('open')">
<el-icon><Search /></el-icon> <el-icon><Search /></el-icon>
<div class="text">查找</div> <div class="text">查找</div>
......
...@@ -52,8 +52,8 @@ export default defineConfig({ ...@@ -52,8 +52,8 @@ export default defineConfig({
}, },
'/api': { '/api': {
// target: 'http://8.140.26.4:9085/', target: 'http://8.140.26.4:9085/',
target: 'http://192.168.0.5:28080/', // target: 'http://192.168.0.5:28080/',
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '') rewrite: (path) => path.replace(/^\/api/, '')
}, },
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论