Skip to content

R
risk-monitor
提交 a5af246f authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

feat:新增config.js配置文件

上级 5466ba6a
隐藏空白字符变更
内嵌 并排
正在显示 包含 676 行增加 和 92 行删除
index.html
浏览文件 @ a5af246f
......@@ -9,5 +9,6 @@
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script src="./config.js"></script>
</body>
</html>
\ No newline at end of file
public/js/config.js 0 → 100644
浏览文件 @ a5af246f
const baseUrl = `http://8.140.26.4:9085/`
\ No newline at end of file
src/router/dataLibrary/dataBill.js
浏览文件 @ a5af246f
......@@ -5,7 +5,7 @@ const StateBill = () => import('@/views/dataLibrary/bill/stateBill/index.vue')
const dataBillRoutes = [
// 科技法案资源库路由
{
path: "/countryBill",
path: "/dataLibrary/countryBill",
name: "CountryBill",
component: CountryBill,
meta: {
......@@ -16,7 +16,7 @@ const dataBillRoutes = [
},
{
path: "/stateBill",
path: "/dataLibrary/stateBill",
name: "StateBill",
component: StateBill,
meta: {
......
src/router/dataLibrary/decree.js
浏览文件 @ a5af246f
......@@ -4,7 +4,7 @@ const Decree = () => import('@/views/dataLibrary/decree/index.vue')
const dataDecreeRoutes = [
// 科技法案资源库路由
{
path: "/dataDecree",
path: "/dataLibrary/dataDecree",
name: "DataDecree",
component: Decree,
meta: {
......
src/router/dataLibrary/exportControl.js
浏览文件 @ a5af246f
......@@ -7,7 +7,7 @@ const EntityListEvent = () => import('@/views/dataLibrary/exportControl/entityLi
const dataDecreeRoutes = [
// 科技法案资源库路由
{
path: "/dataCommerceControlList",
path: "/dataLibrary/dataCommerceControlList",
name: "CommerceControlList",
component: CommerceControlList,
meta: {
......@@ -17,7 +17,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/dataCommerceControlListEvent",
path: "/dataLibrary/dataCommerceControlListEvent",
name: "CommerceControlListEvent",
component: CommerceControlListEvent,
meta: {
......@@ -27,7 +27,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/dataEntityList",
path: "/dataLibrary/dataEntityList",
name: "EntityList",
component: EntityList,
meta: {
......@@ -37,7 +37,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/dataEntityListEvent",
path: "/dataLibrary/dataEntityListEvent",
name: "EntityListEvent",
component: EntityListEvent,
meta: {
......
src/router/dataLibrary/financeControl.js
浏览文件 @ a5af246f
......@@ -7,7 +7,7 @@ const SDNListEvent = () => import('@/views/dataLibrary/financeControl/sDNListEve
const dataDecreeRoutes = [
// 科技法案资源库路由
{
path: "/mREList",
path: "/dataLibrary/mREList",
name: "MREList",
component: MREList,
meta: {
......@@ -17,7 +17,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/mREListEvent",
path: "/dataLibrary/mREListEvent",
name: "MREListEvent",
component: MREListEvent,
meta: {
......@@ -27,7 +27,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/sDNList",
path: "/dataLibrary/sDNList",
name: "SDNList",
component: SDNList,
meta: {
......@@ -37,7 +37,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/sDNListEvent",
path: "/dataLibrary/sDNListEvent",
name: "SDNListEvent",
component: SDNListEvent,
meta: {
......
src/router/dataLibrary/innovationSubject.js
浏览文件 @ a5af246f
......@@ -6,7 +6,7 @@ const TechnologyCompany = () => import('@/views/dataLibrary/innovationSubject/te
const dataDecreeRoutes = [
// 科技法案资源库路由
{
path: "/keyLab",
path: "/dataLibrary/keyLab",
name: "KeyLab",
component: KeyLab,
meta: {
......@@ -17,7 +17,7 @@ const dataDecreeRoutes = [
},
{
path: "/researchUniversity",
path: "/dataLibrary/researchUniversity",
name: "ResearchUniversity",
component: ResearchUniversity,
meta: {
......@@ -28,7 +28,7 @@ const dataDecreeRoutes = [
},
{
path: "/technologyCompany",
path: "/dataLibrary/technologyCompany",
name: "TechnologyCompany",
component: TechnologyCompany,
meta: {
......
src/router/dataLibrary/marketControl.js
浏览文件 @ a5af246f
......@@ -6,7 +6,7 @@ const Case301 = () => import('@/views/dataLibrary/marketControl/case301/index.vu
const dataDecreeRoutes = [
// 科技法案资源库路由
{
path: "/case337",
path: "/dataLibrary/case337",
name: "Case337",
component: Case337,
meta: {
......@@ -16,7 +16,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/case232",
path: "/dataLibrary/case232",
name: "Case232",
component: Case232,
meta: {
......@@ -26,7 +26,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/case301",
path: "/dataLibrary/case301",
name: "Case301",
component: Case301,
meta: {
......
src/router/dataLibrary/technologyFigures.js
浏览文件 @ a5af246f
......@@ -7,7 +7,7 @@ const ThinkTankResearcher = () => import('@/views/dataLibrary/technologyFigures/
const dataDecreeRoutes = [
// 科技法案资源库路由
{
path: "/congressMan",
path: "/dataLibrary/congressMan",
name: "CongressMan",
component: CongressMan,
meta: {
......@@ -17,7 +17,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/minister",
path: "/dataLibrary/minister",
name: "Minister",
component: Minister,
meta: {
......@@ -27,7 +27,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/technologyLeader",
path: "/dataLibrary/technologyLeader",
name: "TechnologyLeader",
component: TechnologyLeader,
meta: {
......@@ -37,7 +37,7 @@ const dataDecreeRoutes = [
}
},
{
path: "/thinkTankResearcher",
path: "/dataLibrary/thinkTankResearcher",
name: "ThinkTankResearcher",
component: ThinkTankResearcher,
meta: {
......
src/router/dataLibrary/thinkTank.js
浏览文件 @ a5af246f
......@@ -4,7 +4,7 @@ const ThinkTank = () => import('@/views/dataLibrary/thinkTank/index.vue')
const dataThinkTankRoutes = [
// 科技法案资源库路由
{
path: "/dataThinkTank",
path: "/dataLibrary/dataThinkTank",
name: "DataThinkTank",
component: ThinkTank,
meta: {
......
src/views/dataLibrary/bill/countryBill/index.vue
浏览文件 @ a5af246f
<template>
<div class="countrybill-wrapper">
<div class="header-box">
<div class="header-top"></div>
<div class="header-top">
<SelectBox :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
:select-name="selectedArea" @update:select-text="handleSelectArea" />
<SelectBox :placeholder-name="DatePlaceHolder" select-title="提出时间" :select-list="dateList"
:select-name="selectedDate" :custom-time="customTime" @update:select-text="handleSelectDate"
@update:custom-time="handleCustomDate" />
<SelectBox v-if="isFolderAll" :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
:select-name="selectedArea" @update:select-text="handleSelectArea" />
<SelectBox v-if="isFolderAll" :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
:select-name="selectedArea" @update:select-text="handleSelectArea" />
<SelectBox v-if="isFolderAll" :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
:select-name="selectedArea" @update:select-text="handleSelectArea" />
<SelectBox v-if="isFolderAll" :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
:select-name="selectedArea" @update:select-text="handleSelectArea" />
<SelectBox v-if="isFolderAll" :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
:select-name="selectedArea" @update:select-text="handleSelectArea" />
</div>
<div class="header-footer">
<div class="header-footer-left">
<ActiveTag v-for="tag, index in activeTagList" :key="index" :tagName="tag.name"
@close="handleCloseCurTag(tag, index)" />
</div>
<div class="header-footer-right">
<HeaderBtnBox />
<HeaderBtnBox :isShowAll="isFolderAll" @show-all="handleSwitchFolderAll" />
</div>
</div>
</div>
......@@ -38,6 +54,7 @@
<LineChart v-if="activeChart === '折线图'" :lineChartData="lineChartData" />
<PieChart v-if="activeChart === '饼状图'" :pieChartData="pieChartData" />
<BarChart v-if="activeChart === '柱状图'" :barChartData="barChartData" />
<RaderChart v-if="activeChart === '雷达图'" :radarChartData="radarChartData" />
</template>
</ChartContainer>
......@@ -86,10 +103,21 @@
</div>
</div>
</div>
<div class="data-main-box-main-content">
<el-table :data="tableData" style="width: 100%" :row-style="{ height: '52px' }">
<el-table-column type="selection" width="55" />
<el-table-column label="Date" width="180" class-name="date-column">
<template #default="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column property="name" label="Name" width="180" />
<el-table-column property="address" label="use show-overflow-tooltip" width="360" show-overflow-tooltip />
<el-table-column property="address" label="address" />
</el-table>
</div>
</div>
<div class="data-main-box-footer">
<el-pagination background layout="prev, pager, next" :total="totalNum" v-model:current-page="currentPage" :page-size="pageSize"
@current-change="handleGetData" />
<el-pagination background layout="prev, pager, next" :total="totalNum" v-model:current-page="currentPage"
:page-size="pageSize" @current-change="handleGetData" />
</div>
</div>
</div>
......@@ -104,6 +132,8 @@ import HeaderBtnBox from '../../components/HeaderBtnBox/index.vue'
import LineChart from '../../components/LineChart/index.vue'
import PieChart from '../../components/PieChart/index.vue'
import BarChart from '../../components/BarChart/index.vue'
import RaderChart from '../../components/RadarChart/idnex.vue'
import SelectBox from '../../components/SelectBox/index.vue'
// 图表/数据
const isShowChart = ref(true)
......@@ -256,6 +286,52 @@ const barChartData = ref({
dataY: [123, 51, 64, 72, 58, 69, 105]
})
const radarChartData = ref({
title: [
{
name: '航空航天',
max: 10
},
{
name: '先进制造',
max: 10
},
{
name: '量子科技',
max: 10
},
{
name: '人工智能',
max: 10
},
{
name: '新材料',
max: 10
},
{
name: '集成电路',
max: 10
},
],
data: [
{
name: "337调查",
value: [10, 5, 2, 8, 5, 7
]
},
{
name: "232调查",
value: [2, 5, 3, 8, 10, 2]
},
{
name: "301调查",
value: [5, 8, 2, 9, 1, 5]
}
]
}
)
// 数据- 是否全选
const isSelectedAll = ref(false)
......@@ -278,14 +354,14 @@ const operationList = ref([
])
const releaseTimeList = ref([
{
label: "按发布时间倒序",
value: true
},
{
label: "按发布时间升序",
value: false
}
{
label: "按发布时间倒序",
value: true
},
{
label: "按发布时间升序",
value: false
}
]);
const isSort = ref(true); // true 倒序 false 升序
......@@ -303,6 +379,116 @@ const handleGetData = () => {
}
// 领域
const areaPlaceHolder = ref('请选择领域')
const selectedArea = ref('人工智能')
const areaList = ref([
{
name: '人工智能',
id: '人工智能'
},
{
name: '集成电路',
id: '集成电路'
},
{
name: '先进制造',
id: '先进制造'
},
])
const handleSelectArea = (value) => {
selectedArea.value = value
}
// 提出时间
const DatePlaceHolder = ref('请选择时间')
const selectedDate = ref('时间1')
const dateList = ref([
{
name: '时间1',
id: '时间1'
},
{
name: '时间2',
id: '时间2'
},
{
name: '自定义',
id: '自定义'
},
])
const customTime = ref('') // 自定义时间
const handleCustomDate = value => {
console.log('value', value);
customTime.value = value
}
const handleSelectDate = (value) => {
selectedDate.value = value
}
// 展开全部 / 收起
const isFolderAll = ref(false)
const handleSwitchFolderAll = () => {
isFolderAll.value = !isFolderAll.value
}
// 表格数据
const tableData = [
{
date: '2016-05-04',
name: 'Aleyna Kutzner',
address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
},
{
date: '2016-05-03',
name: 'Helen Jacobi',
address: '760 A Street, South Frankfield, Illinois',
},
{
date: '2016-05-02',
name: 'Brandon Deckert',
address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
},
{
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
}
]
</script>
<style lang="scss" scoped>
......@@ -323,7 +509,7 @@ const handleGetData = () => {
.header-box {
width: 1568px;
height: 112px;
min-height: 112px;
border-radius: 10px;
background: rgb(255, 255, 255);
border: 1px solid var(--bg-black-5);
......@@ -332,7 +518,11 @@ const handleGetData = () => {
padding: 16px 24px;
.header-top {
height: 28px;
min-height: 28px;
display: flex;
flex-wrap: wrap;
gap: 12px 42px;
// transition: all ease 1s;
}
......@@ -503,15 +693,14 @@ const handleGetData = () => {
}
}
.item2 {
}
.item3 {
.item2 {}
}
.item3 {}
}
}
.data-main-box-main-content{
}
}
.data-main-box-footer {
......@@ -524,4 +713,13 @@ const handleGetData = () => {
}
}
}
.date-column {
background-color: #ecf5ff;
}
.date-column .cell {
color: #409eff !important;
font-weight: 500;
}
</style>
\ No newline at end of file
src/views/dataLibrary/components/ActiveTag/index.vue
浏览文件 @ a5af246f
<template>
<div class="wrapper">
<div class="text">{{ tagName }}</div>
<div class="text text-tip-1">{{ tagName }}</div>
<div class="icon" @click="handleClose">
<img src="./close.svg" alt="">
</div>
......@@ -26,6 +26,8 @@ const handleClose = () => {
<style lang="scss" scoped>
.wrapper{
height: 30px;
box-sizing: border-box;
display: flex;
padding: 3px 4px 3px 8px;
align-items: center;
......@@ -35,5 +37,16 @@ const handleClose = () => {
border: 1px solid var(--color-primary-35);
background: var(--color-primary-2);
cursor: pointer;
.text{
color: var(--color-primary-100);
}
.icon{
width: 15px;
height: 15px;
img{
width: 100%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
src/views/dataLibrary/components/BarChart/barChart.js
浏览文件 @ a5af246f
......@@ -4,10 +4,10 @@ const getBarChart = (data) => {
const option = {
tooltip: {},
grid: {
top: '8%',
right: '3%',
bottom: '3%',
left: '3%',
top: 48,
right: 34,
bottom: 10,
left: 24,
containLabel: true
},
yAxis: {
......
src/views/dataLibrary/components/ChartContainer/index.vue
浏览文件 @ a5af246f
......@@ -16,7 +16,9 @@
<div class="chart-box">
<slot name="chart-box"></slot>
</div>
<div class="tip-box"></div>
<div class="tip-box">
<TipTab />
</div>
</div>
</div>
</template>
......@@ -31,6 +33,7 @@ import Pie from './assets/icons/pie.svg'
import PieActive from './assets/icons/pie-active.svg'
import Radar from './assets/icons/radar.svg'
import RadarActive from './assets/icons/radar-active.svg'
import TipTab from '@/components/base/TipTab/index.vue'
const chartItemList = ref([
{
name: '折线图',
......@@ -146,6 +149,9 @@ const props = defineProps({
.tip-box {
height: 54px;
box-sizing: border-box;
padding-top: 10px;
// background: orange;
}
}
}
......
src/views/dataLibrary/components/HeaderBtnBox/index.vue
浏览文件 @ a5af246f
......@@ -19,13 +19,18 @@
<script setup>
import {ref} from 'vue'
const isShowAll = ref(false)
const props = defineProps({
isShowAll: {
type: Boolean,
default: false
}
})
const handleSwitchShowAll = () => {
isShowAll.value = !isShowAll.value
emit('showAll')
}
const emit = defineEmits(['clear', 'confirm'])
const emit = defineEmits(['showAll', 'clear', 'confirm'])
const handleClear = () => {
emit('clear')
......@@ -35,6 +40,7 @@ const handleConfirm = () => {
emit('confirm')
}
</script>
<style lang="scss" scoped>
......
src/views/dataLibrary/components/PieChart/piechart.js
浏览文件 @ a5af246f
......@@ -6,7 +6,7 @@ const getPieChart = (data) => {
series: [
{
type: 'pie',
radius: [150, 175],
radius: [160, 190],
height: '100%',
left: 'center',
width: '98%',
......
src/views/dataLibrary/components/RadarChart/idnex.vue 0 → 100644
浏览文件 @ a5af246f
<template>
<div class="radar-chart-wrapper" id="radar-chart"></div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import setChart from '@/utils/setChart';
import getRadarChart from './radarChart';
const props = defineProps({
radarChartData: {
type: Object,
default: {
title: [],
data: []
}
}
})
onMounted(() => {
const radarChart = getRadarChart(props.radarChartData)
setChart(radarChart, 'radar-chart',)
})
</script>
<style lang="scss">
.radar-chart-wrapper {
width: 100%;
height: 100%;
// width: 1520px;
// height: 580px;
}
</style>
\ No newline at end of file
src/views/dataLibrary/components/RadarChart/radarChart.js 0 → 100644
浏览文件 @ a5af246f
const getRadarChart = (data) => {
// const indicators = [
// { name: "集成电路", max: 10 },
// { name: "能源领域", max: 10 },
// { name: "量子科技", max: 10 },
// { name: "通信网络", max: 10 },
// { name: "人工智能", max: 10 },
// { name: "生物科技", max: 10 }
// ];
// const data = [
// {
// name: "337调查",
// value: [
// {
// name: '航空航天',
// value: 10,
// },
// {
// name: '先进制造',
// value: 2,
// },
// {
// name: '量子科技',
// value: 0,
// },
// {
// name: '人工智能',
// value: 6,
// },
// {
// name: '新材料',
// value: 7,
// },
// {
// name: '集成电路',
// value: 4,
// }
// ]
// },
// {
// name: "232调查",
// value: [ {
// name: '航空航天',
// value: 7,
// },
// {
// name: '先进制造',
// value: 3,
// },
// {
// name: '量子科技',
// value: 5,
// },
// {
// name: '人工智能',
// value: 9,
// },
// {
// name: '新材料',
// value: 10,
// },
// {
// name: '集成电路',
// value: 5,
// }]
// },
// {
// name: "301调查",
// value: [ {
// name: '航空航天',
// value: 8,
// },
// {
// name: '先进制造',
// value: 10,
// },
// {
// name: '量子科技',
// value: 2,
// },
// {
// name: '人工智能',
// value: 8,
// },
// {
// name: '新材料',
// value: 1,
// },
// {
// name: '集成电路',
// value: 3,
// }]
// }
// ]
const indicators = data.title.map(item => {
return {
name: item.name, max: data.maxNum
}
})
const data337 = [9, 6, 6, 6, 9, 7];
const data301 = [5, 3, 7, 8, 7, 9];
const data232 = [4, 10, 3, 4, 2, 5];
const option = {
color: ["rgba(5, 95, 194, 1)", "rgba(250, 140, 22, 1)", "rgba(146, 84, 222, 1)"],
legend: {
top: 24,
left: 'center',
icon: "circle",
itemWidth: 12,
itemHeight: 12,
itemGap: 24,
textStyle: {
color: "rgb(95, 101, 108)",
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 24
},
data: ["337调查", "301调查", "232调查"]
},
radar: {
shape: "polygon",
splitNumber: 5,
indicator: indicators,
center: ["50%", "56%"],
radius: "72%",
startAngle: 90,
clockwise: false,
axisName: {
color: "rgba(59, 65, 75, 1)",
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 700,
lineHeight: 24,
padding: [0, 5]
},
splitLine: {
lineStyle: {
color: "#d0d0d0",
width: 1
}
},
axisLine: {
lineStyle: {
color: "#d0d0d0",
width: 1
}
},
splitArea: {
show: true,
areaStyle: {
color: ["#fff", "rgb(247, 248, 249)", "#fff", "rgb(247, 248, 249)", "#fff"]
}
}
},
series: [
{
// name: "337调查",
name: data.data[0].name,
type: "radar",
data: [{ value: data.data[0].value }],
lineStyle: {
width: 2,
color: "rgba(5, 95, 194,1)"
},
symbol: "none",
areaStyle: {
color: "rgba(5, 95, 194,0.15)"
}
},
{
name: data.data[1].name,
type: "radar",
data: [{ value: data.data[1].value }],
lineStyle: {
width: 2,
color: "rgba(250, 140, 22, 1)"
},
symbol: "none",
areaStyle: {
color: "rgba(250, 140, 22, 0.15)"
}
},
{
name: data.data[2].name,
type: "radar",
data: [{ value: data.data[2].value }],
lineStyle: {
width: 2,
color: "rgba(146, 84, 222, 1)"
},
symbol: "none",
areaStyle: {
color: "rgba(146, 84, 222, 0.15)"
}
},
]
};
return option
}
export default getRadarChart
\ No newline at end of file
src/views/dataLibrary/components/SelectBox/index.vue 0 → 100644
浏览文件 @ a5af246f
<template>
<div class="select-wrapper" :class="{'select-wrapper-custom': selectValue === '自定义'}">
<div class="select-left text-tip-1">{{ selectTitle + ':' }}</div>
<div class="select-right" :class="{'select-right-custom': selectValue === '自定义'}">
<el-select v-model="selectValue" :placeholder="placeholderName" style="width: 240px">
<!-- <el-option label="全部领域" value="全部领域" /> -->
<el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-date-picker style="width: 300px" v-if="selectValue === '自定义'" v-model="customTimeValue" type="daterange"
range-separator="--" start-placeholder="开始日期" end-placeholder="结束日期" size="default" />
</div>
</div>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
selectTitle: {
type: String,
default: ''
},
selectList: {
type: Array,
default: []
},
placeholderName: {
type: String,
default: ''
},
selectName: {
type: String,
default: ''
},
customTime: {
type: String,
default: ''
}
})
const emit = defineEmits(['update:selectText', 'update:customTime'])
const selectValue = computed({
get: () => props.selectName,
set: (value) => emit('update:selectText', value)
})
const customTimeValue = computed({
get: () => props.customTime,
set: (value) => emit('update:customTime', value)
})
</script>
<style lang="scss" scoped>
.select-wrapper {
width: 348px;
height: 28px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
.select-left {
width: 100px;
height: 24px;
color: var(--text-primary-65-color);
}
.select-right {
width: 240px;
display: flex;
gap: 8px;
justify-content: space-between;
:deep(.el-input__wrapper) {
border-radius: 4px;
}
}
.select-right-custom{
width: 630px;
}
}
.select-wrapper-custom{
width: 738px;
}
</style>
\ No newline at end of file
src/views/dataLibrary/index.vue
浏览文件 @ a5af246f
......@@ -72,7 +72,7 @@
</template>
<script setup>
import { computed, ref } from 'vue'
import { computed, onMounted, ref } from 'vue'
import Icon1 from './assets/icons/sider-icon1.svg'
import Icon2 from './assets/icons/sider-icon2.svg'
import Icon3 from './assets/icons/sider-icon3.svg'
......@@ -95,7 +95,6 @@ const tagsViewStore = useTagsViewStore()
// 在路由全局守卫中处理
router.beforeEach((to, from, next) => {
const tagsViewStore = useTagsViewStore()
// 路由允许添加标签（排除掉隐藏的布局页如 /404, /login 等）
if (to.meta?.title && !to.meta?.hiddenTag) {
tagsViewStore.addView({
......@@ -117,19 +116,19 @@ const siderList = ref([
children: [
{
name: '国会法案',
path: '/countryBill',
path: '/dataLibrary/countryBill',
active: true,
},
{
name: '州法案',
path: '/stateBill',
path: '/dataLibrary/stateBill',
active: false,
},
]
},
{
name: '科技政令',
path: '/dataDecree',
path: '/dataLibrary/dataDecree',
icon: Icon2,
active: false,
isExpanded: false,
......@@ -139,7 +138,7 @@ const siderList = ref([
},
{
name: '美国科技智库',
path: '/dataThinkTank',
path: '/dataLibrary/dataThinkTank',
icon: Icon3,
active: false,
isExpanded: false,
......@@ -155,22 +154,22 @@ const siderList = ref([
children: [
{
name: '实体清单',
path: '/dataEntityList',
path: '/dataLibrary/dataEntityList',
active: false,
},
{
name: '商业管制清单',
path: '/dataCommerceControlList',
path: '/dataLibrary/dataCommerceControlList',
active: false,
},
{
name: '实体清单事件',
path: '/dataEntityListEvent',
path: '/dataLibrary/dataEntityListEvent',
active: false,
},
{
name: '商业管制清单事件',
path: '/dataCommerceControlListEvent',
path: '/dataLibrary/dataCommerceControlListEvent',
active: false,
},
]
......@@ -191,22 +190,22 @@ const siderList = ref([
children: [
{
name: 'SDN清单',
path: '/sDNList',
path: '/dataLibrary/sDNList',
active: false,
},
{
name: '涉军企业清单',
path: '/mREList',
path: '/dataLibrary/mREList',
active: false,
},
{
name: 'SDN清单事件',
path: '/sDNListEvent',
path: '/dataLibrary/sDNListEvent',
active: false,
},
{
name: '涉军企业清单事件',
path: '/mREListEvent',
path: '/dataLibrary/mREListEvent',
active: false,
},
]
......@@ -219,17 +218,17 @@ const siderList = ref([
children: [
{
name: '337调查',
path: '/case337',
path: '/dataLibrary/case337',
active: false,
},
{
name: '232调查',
path: '/case232',
path: '/dataLibrary/case232',
active: false,
},
{
name: '301调查',
path: '/case301',
path: '/dataLibrary/case301',
active: false,
},
]
......@@ -251,22 +250,22 @@ const siderList = ref([
children: [
{
name: '国会议员',
path: '/congressMan',
path: '/dataLibrary/congressMan',
active: false,
},
{
name: '科技企业领袖',
path: '/technologyLeader',
path: '/dataLibrary/technologyLeader',
active: false,
},
{
name: '机构主官',
path: '/minister',
path: '/dataLibrary/minister',
active: false,
},
{
name: '智库研究人员',
path: '/thinkTankResearcher',
path: '/dataLibrary/thinkTankResearcher',
active: false,
},
]
......@@ -279,17 +278,17 @@ const siderList = ref([
children: [
{
name: '科技企业',
path: '/technologyCompany',
path: '/dataLibrary/technologyCompany',
active: false,
},
{
name: '研究型大学',
path: '/researchUniversity',
path: '/dataLibrary/researchUniversity',
active: false,
},
{
name: '重点实验室',
path: '/keyLab',
path: '/dataLibrary/keyLab',
active: false,
},
]
......@@ -317,7 +316,7 @@ const handleSiderItem = (item) => {
siderList.value.forEach(val => {
val.active = false
val.isExpanded = false
if(val.children && val.children.length) {
if (val.children && val.children.length) {
val.children.forEach(vall => {
vall.active = false
})
......@@ -325,7 +324,7 @@ const handleSiderItem = (item) => {
})
item.isExpanded = true
item.active = true
if (item.path) {
router.push({
path: item.path
......@@ -354,13 +353,11 @@ const handleSiderSecondItem = (item) => {
}
const openedTabList = computed(() => {
const tagsViewStore = useTagsViewStore()
const arr = tagsViewStore.visitedViews
return arr
})
const handleClickTab = (tab) => {
const tagsViewStore = useTagsViewStore()
tagsViewStore.visitedViews.forEach(val => {
val.active = false
})
......@@ -387,7 +384,7 @@ const handleClickTab = (tab) => {
return
}
} else {
val.children.forEach(vall => {
if (vall.name === tab.meta.title) {
vall.active = true
......@@ -407,7 +404,6 @@ const handleCloseCurTab = (tab, index) => {
let activeTab
if (!tab.active) {
const tagsViewStore = useTagsViewStore()
tagsViewStore.delView(tab)
} else {
siderList.value.forEach(val => {
......@@ -419,7 +415,6 @@ const handleCloseCurTab = (tab, index) => {
}
})
if (index === openedTabList.value.length - 1) {
const tagsViewStore = useTagsViewStore()
tagsViewStore.delView(tab)
setTimeout(() => {
tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].active = true
......@@ -447,7 +442,6 @@ const handleCloseCurTab = (tab, index) => {
})
} else {
const tagsViewStore = useTagsViewStore()
tagsViewStore.delView(tab)
tagsViewStore.visitedViews[index].active = true
......@@ -474,10 +468,6 @@ const handleCloseCurTab = (tab, index) => {
})
}
}
}
......@@ -486,6 +476,10 @@ const handleClickToolBox = () => {
ElMessage.warning("当前功能正在开发中，敬请期待！");
};
onMounted(() => {
})
</script>
......@@ -631,29 +625,57 @@ const handleClickToolBox = () => {
.tab-box {
width: 1600px;
height: 48px;
background: rgba(255, 255, 255);
border-bottom: 2px solid var(--bg-black-5);
display: flex;
overflow: hidden;
.tab-item {
height: 48px;
// height: 46px;
white-space: nowrap;
/* 强制文字不换行 */
overflow: hidden;
/* 隐藏溢出的文字 */
text-overflow: ellipsis;
/* 显示省略号 */
display: flex;
flex-wrap: nowrap;
gap: 8px;
align-items: center;
padding: 0 12px 0 16px;
border-bottom: 2px solid var(--bg-black-5);
border-bottom: 2px solid var(--bg-white-100);
cursor: pointer;
// animation: all ease 0.5s;
&:hover {
flex: 0 0 auto;
/* 不再压缩 */
/* 或者设定一个固定宽度 */
/* width: 150px; */
z-index: 10;
/* 提高层级 */
// box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// border-bottom: 2px solid var(--color-primary-100);
.text {
// width: 150px;
color: var(--color-primary-100);
}
}
.text {
/* 关键属性2: 处理内部文字溢出 */
white-space: nowrap;
/* 强制文字不换行 */
overflow: hidden;
/* 隐藏溢出的文字 */
text-overflow: ellipsis;
/* 显示省略号 */
}
.text-active {
color: var(--color-primary-100);
}
......@@ -661,6 +683,10 @@ const handleClickToolBox = () => {
.icon {
width: 16px;
height: 16px;
&:hover{
border-radius: 8px;
background: var(--color-primary-10);
}
img {
width: 100%;
......@@ -670,7 +696,7 @@ const handleClickToolBox = () => {
}
.tab-item-active {
border-bottom: 2px solid var(--color-primary-100);
border-bottom: 2px solid var(--color-primary-100) !important;
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论