提交 a5af246f authored 作者: coderBryanFu's avatar coderBryanFu

feat:新增config.js配置文件

上级 5466ba6a
...@@ -9,5 +9,6 @@ ...@@ -9,5 +9,6 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
<script src="./config.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
const baseUrl = `http://8.140.26.4:9085/`
\ No newline at end of file
...@@ -5,7 +5,7 @@ const StateBill = () => import('@/views/dataLibrary/bill/stateBill/index.vue') ...@@ -5,7 +5,7 @@ const StateBill = () => import('@/views/dataLibrary/bill/stateBill/index.vue')
const dataBillRoutes = [ const dataBillRoutes = [
// 科技法案资源库路由 // 科技法案资源库路由
{ {
path: "/countryBill", path: "/dataLibrary/countryBill",
name: "CountryBill", name: "CountryBill",
component: CountryBill, component: CountryBill,
meta: { meta: {
...@@ -16,7 +16,7 @@ const dataBillRoutes = [ ...@@ -16,7 +16,7 @@ const dataBillRoutes = [
}, },
{ {
path: "/stateBill", path: "/dataLibrary/stateBill",
name: "StateBill", name: "StateBill",
component: StateBill, component: StateBill,
meta: { meta: {
......
...@@ -4,7 +4,7 @@ const Decree = () => import('@/views/dataLibrary/decree/index.vue') ...@@ -4,7 +4,7 @@ const Decree = () => import('@/views/dataLibrary/decree/index.vue')
const dataDecreeRoutes = [ const dataDecreeRoutes = [
// 科技法案资源库路由 // 科技法案资源库路由
{ {
path: "/dataDecree", path: "/dataLibrary/dataDecree",
name: "DataDecree", name: "DataDecree",
component: Decree, component: Decree,
meta: { meta: {
......
...@@ -7,7 +7,7 @@ const EntityListEvent = () => import('@/views/dataLibrary/exportControl/entityLi ...@@ -7,7 +7,7 @@ const EntityListEvent = () => import('@/views/dataLibrary/exportControl/entityLi
const dataDecreeRoutes = [ const dataDecreeRoutes = [
// 科技法案资源库路由 // 科技法案资源库路由
{ {
path: "/dataCommerceControlList", path: "/dataLibrary/dataCommerceControlList",
name: "CommerceControlList", name: "CommerceControlList",
component: CommerceControlList, component: CommerceControlList,
meta: { meta: {
...@@ -17,7 +17,7 @@ const dataDecreeRoutes = [ ...@@ -17,7 +17,7 @@ const dataDecreeRoutes = [
} }
}, },
{ {
path: "/dataCommerceControlListEvent", path: "/dataLibrary/dataCommerceControlListEvent",
name: "CommerceControlListEvent", name: "CommerceControlListEvent",
component: CommerceControlListEvent, component: CommerceControlListEvent,
meta: { meta: {
...@@ -27,7 +27,7 @@ const dataDecreeRoutes = [ ...@@ -27,7 +27,7 @@ const dataDecreeRoutes = [
} }
}, },
{ {
path: "/dataEntityList", path: "/dataLibrary/dataEntityList",
name: "EntityList", name: "EntityList",
component: EntityList, component: EntityList,
meta: { meta: {
...@@ -37,7 +37,7 @@ const dataDecreeRoutes = [ ...@@ -37,7 +37,7 @@ const dataDecreeRoutes = [
} }
}, },
{ {
path: "/dataEntityListEvent", path: "/dataLibrary/dataEntityListEvent",
name: "EntityListEvent", name: "EntityListEvent",
component: EntityListEvent, component: EntityListEvent,
meta: { meta: {
......
...@@ -7,7 +7,7 @@ const SDNListEvent = () => import('@/views/dataLibrary/financeControl/sDNListEve ...@@ -7,7 +7,7 @@ const SDNListEvent = () => import('@/views/dataLibrary/financeControl/sDNListEve
const dataDecreeRoutes = [ const dataDecreeRoutes = [
// 科技法案资源库路由 // 科技法案资源库路由
{ {
path: "/mREList", path: "/dataLibrary/mREList",
name: "MREList", name: "MREList",
component: MREList, component: MREList,
meta: { meta: {
...@@ -17,7 +17,7 @@ const dataDecreeRoutes = [ ...@@ -17,7 +17,7 @@ const dataDecreeRoutes = [
} }
}, },
{ {
path: "/mREListEvent", path: "/dataLibrary/mREListEvent",
name: "MREListEvent", name: "MREListEvent",
component: MREListEvent, component: MREListEvent,
meta: { meta: {
...@@ -27,7 +27,7 @@ const dataDecreeRoutes = [ ...@@ -27,7 +27,7 @@ const dataDecreeRoutes = [
} }
}, },
{ {
path: "/sDNList", path: "/dataLibrary/sDNList",
name: "SDNList", name: "SDNList",
component: SDNList, component: SDNList,
meta: { meta: {
...@@ -37,7 +37,7 @@ const dataDecreeRoutes = [ ...@@ -37,7 +37,7 @@ const dataDecreeRoutes = [
} }
}, },
{ {
path: "/sDNListEvent", path: "/dataLibrary/sDNListEvent",
name: "SDNListEvent", name: "SDNListEvent",
component: SDNListEvent, component: SDNListEvent,
meta: { meta: {
......
...@@ -6,7 +6,7 @@ const TechnologyCompany = () => import('@/views/dataLibrary/innovationSubject/te ...@@ -6,7 +6,7 @@ const TechnologyCompany = () => import('@/views/dataLibrary/innovationSubject/te
const dataDecreeRoutes = [ const dataDecreeRoutes = [
// 科技法案资源库路由 // 科技法案资源库路由
{ {
path: "/keyLab", path: "/dataLibrary/keyLab",
name: "KeyLab", name: "KeyLab",
component: KeyLab, component: KeyLab,
meta: { meta: {
...@@ -17,7 +17,7 @@ const dataDecreeRoutes = [ ...@@ -17,7 +17,7 @@ const dataDecreeRoutes = [
}, },
{ {
path: "/researchUniversity", path: "/dataLibrary/researchUniversity",
name: "ResearchUniversity", name: "ResearchUniversity",
component: ResearchUniversity, component: ResearchUniversity,
meta: { meta: {
...@@ -28,7 +28,7 @@ const dataDecreeRoutes = [ ...@@ -28,7 +28,7 @@ const dataDecreeRoutes = [
}, },
{ {
path: "/technologyCompany", path: "/dataLibrary/technologyCompany",
name: "TechnologyCompany", name: "TechnologyCompany",
component: TechnologyCompany, component: TechnologyCompany,
meta: { meta: {
......
...@@ -6,7 +6,7 @@ const Case301 = () => import('@/views/dataLibrary/marketControl/case301/index.vu ...@@ -6,7 +6,7 @@ const Case301 = () => import('@/views/dataLibrary/marketControl/case301/index.vu
const dataDecreeRoutes = [ const dataDecreeRoutes = [
// 科技法案资源库路由 // 科技法案资源库路由
{ {
path: "/case337", path: "/dataLibrary/case337",
name: "Case337", name: "Case337",
component: Case337, component: Case337,
meta: { meta: {
...@@ -16,7 +16,7 @@ const dataDecreeRoutes = [ ...@@ -16,7 +16,7 @@ const dataDecreeRoutes = [
} }
}, },
{ {
path: "/case232", path: "/dataLibrary/case232",
name: "Case232", name: "Case232",
component: Case232, component: Case232,
meta: { meta: {
...@@ -26,7 +26,7 @@ const dataDecreeRoutes = [ ...@@ -26,7 +26,7 @@ const dataDecreeRoutes = [
} }
}, },
{ {
path: "/case301", path: "/dataLibrary/case301",
name: "Case301", name: "Case301",
component: Case301, component: Case301,
meta: { meta: {
......
...@@ -7,7 +7,7 @@ const ThinkTankResearcher = () => import('@/views/dataLibrary/technologyFigures/ ...@@ -7,7 +7,7 @@ const ThinkTankResearcher = () => import('@/views/dataLibrary/technologyFigures/
const dataDecreeRoutes = [ const dataDecreeRoutes = [
// 科技法案资源库路由 // 科技法案资源库路由
{ {
path: "/congressMan", path: "/dataLibrary/congressMan",
name: "CongressMan", name: "CongressMan",
component: CongressMan, component: CongressMan,
meta: { meta: {
...@@ -17,7 +17,7 @@ const dataDecreeRoutes = [ ...@@ -17,7 +17,7 @@ const dataDecreeRoutes = [
} }
}, },
{ {
path: "/minister", path: "/dataLibrary/minister",
name: "Minister", name: "Minister",
component: Minister, component: Minister,
meta: { meta: {
...@@ -27,7 +27,7 @@ const dataDecreeRoutes = [ ...@@ -27,7 +27,7 @@ const dataDecreeRoutes = [
} }
}, },
{ {
path: "/technologyLeader", path: "/dataLibrary/technologyLeader",
name: "TechnologyLeader", name: "TechnologyLeader",
component: TechnologyLeader, component: TechnologyLeader,
meta: { meta: {
...@@ -37,7 +37,7 @@ const dataDecreeRoutes = [ ...@@ -37,7 +37,7 @@ const dataDecreeRoutes = [
} }
}, },
{ {
path: "/thinkTankResearcher", path: "/dataLibrary/thinkTankResearcher",
name: "ThinkTankResearcher", name: "ThinkTankResearcher",
component: ThinkTankResearcher, component: ThinkTankResearcher,
meta: { meta: {
......
...@@ -4,7 +4,7 @@ const ThinkTank = () => import('@/views/dataLibrary/thinkTank/index.vue') ...@@ -4,7 +4,7 @@ const ThinkTank = () => import('@/views/dataLibrary/thinkTank/index.vue')
const dataThinkTankRoutes = [ const dataThinkTankRoutes = [
// 科技法案资源库路由 // 科技法案资源库路由
{ {
path: "/dataThinkTank", path: "/dataLibrary/dataThinkTank",
name: "DataThinkTank", name: "DataThinkTank",
component: ThinkTank, component: ThinkTank,
meta: { meta: {
......
<template> <template>
<div class="countrybill-wrapper"> <div class="countrybill-wrapper">
<div class="header-box"> <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">
<div class="header-footer-left"> <div class="header-footer-left">
<ActiveTag v-for="tag, index in activeTagList" :key="index" :tagName="tag.name" <ActiveTag v-for="tag, index in activeTagList" :key="index" :tagName="tag.name"
@close="handleCloseCurTag(tag, index)" /> @close="handleCloseCurTag(tag, index)" />
</div> </div>
<div class="header-footer-right"> <div class="header-footer-right">
<HeaderBtnBox /> <HeaderBtnBox :isShowAll="isFolderAll" @show-all="handleSwitchFolderAll" />
</div> </div>
</div> </div>
</div> </div>
...@@ -38,6 +54,7 @@ ...@@ -38,6 +54,7 @@
<LineChart v-if="activeChart === '折线图'" :lineChartData="lineChartData" /> <LineChart v-if="activeChart === '折线图'" :lineChartData="lineChartData" />
<PieChart v-if="activeChart === '饼状图'" :pieChartData="pieChartData" /> <PieChart v-if="activeChart === '饼状图'" :pieChartData="pieChartData" />
<BarChart v-if="activeChart === '柱状图'" :barChartData="barChartData" /> <BarChart v-if="activeChart === '柱状图'" :barChartData="barChartData" />
<RaderChart v-if="activeChart === '雷达图'" :radarChartData="radarChartData" />
</template> </template>
</ChartContainer> </ChartContainer>
...@@ -86,10 +103,21 @@ ...@@ -86,10 +103,21 @@
</div> </div>
</div> </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>
<div class="data-main-box-footer"> <div class="data-main-box-footer">
<el-pagination background layout="prev, pager, next" :total="totalNum" v-model:current-page="currentPage" :page-size="pageSize" <el-pagination background layout="prev, pager, next" :total="totalNum" v-model:current-page="currentPage"
@current-change="handleGetData" /> :page-size="pageSize" @current-change="handleGetData" />
</div> </div>
</div> </div>
</div> </div>
...@@ -104,6 +132,8 @@ import HeaderBtnBox from '../../components/HeaderBtnBox/index.vue' ...@@ -104,6 +132,8 @@ import HeaderBtnBox from '../../components/HeaderBtnBox/index.vue'
import LineChart from '../../components/LineChart/index.vue' import LineChart from '../../components/LineChart/index.vue'
import PieChart from '../../components/PieChart/index.vue' import PieChart from '../../components/PieChart/index.vue'
import BarChart from '../../components/BarChart/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) const isShowChart = ref(true)
...@@ -256,6 +286,52 @@ const barChartData = ref({ ...@@ -256,6 +286,52 @@ const barChartData = ref({
dataY: [123, 51, 64, 72, 58, 69, 105] 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) const isSelectedAll = ref(false)
...@@ -278,14 +354,14 @@ const operationList = ref([ ...@@ -278,14 +354,14 @@ const operationList = ref([
]) ])
const releaseTimeList = ref([ const releaseTimeList = ref([
{ {
label: "按发布时间倒序", label: "按发布时间倒序",
value: true value: true
}, },
{ {
label: "按发布时间升序", label: "按发布时间升序",
value: false value: false
} }
]); ]);
const isSort = ref(true); // true 倒序 false 升序 const isSort = ref(true); // true 倒序 false 升序
...@@ -303,6 +379,116 @@ const handleGetData = () => { ...@@ -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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -323,7 +509,7 @@ const handleGetData = () => { ...@@ -323,7 +509,7 @@ const handleGetData = () => {
.header-box { .header-box {
width: 1568px; width: 1568px;
height: 112px; min-height: 112px;
border-radius: 10px; border-radius: 10px;
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
border: 1px solid var(--bg-black-5); border: 1px solid var(--bg-black-5);
...@@ -332,7 +518,11 @@ const handleGetData = () => { ...@@ -332,7 +518,11 @@ const handleGetData = () => {
padding: 16px 24px; padding: 16px 24px;
.header-top { .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 = () => { ...@@ -503,15 +693,14 @@ const handleGetData = () => {
} }
} }
.item2 { .item2 {}
}
.item3 {
} .item3 {}
} }
} }
.data-main-box-main-content{
}
} }
.data-main-box-footer { .data-main-box-footer {
...@@ -524,4 +713,13 @@ const handleGetData = () => { ...@@ -524,4 +713,13 @@ const handleGetData = () => {
} }
} }
} }
.date-column {
background-color: #ecf5ff;
}
.date-column .cell {
color: #409eff !important;
font-weight: 500;
}
</style> </style>
\ No newline at end of file
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="text">{{ tagName }}</div> <div class="text text-tip-1">{{ tagName }}</div>
<div class="icon" @click="handleClose"> <div class="icon" @click="handleClose">
<img src="./close.svg" alt=""> <img src="./close.svg" alt="">
</div> </div>
...@@ -26,6 +26,8 @@ const handleClose = () => { ...@@ -26,6 +26,8 @@ const handleClose = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper{ .wrapper{
height: 30px;
box-sizing: border-box;
display: flex; display: flex;
padding: 3px 4px 3px 8px; padding: 3px 4px 3px 8px;
align-items: center; align-items: center;
...@@ -35,5 +37,16 @@ const handleClose = () => { ...@@ -35,5 +37,16 @@ const handleClose = () => {
border: 1px solid var(--color-primary-35); border: 1px solid var(--color-primary-35);
background: var(--color-primary-2); background: var(--color-primary-2);
cursor: pointer; cursor: pointer;
.text{
color: var(--color-primary-100);
}
.icon{
width: 15px;
height: 15px;
img{
width: 100%;
height: 100%;
}
}
} }
</style> </style>
\ No newline at end of file
...@@ -4,10 +4,10 @@ const getBarChart = (data) => { ...@@ -4,10 +4,10 @@ const getBarChart = (data) => {
const option = { const option = {
tooltip: {}, tooltip: {},
grid: { grid: {
top: '8%', top: 48,
right: '3%', right: 34,
bottom: '3%', bottom: 10,
left: '3%', left: 24,
containLabel: true containLabel: true
}, },
yAxis: { yAxis: {
......
...@@ -16,7 +16,9 @@ ...@@ -16,7 +16,9 @@
<div class="chart-box"> <div class="chart-box">
<slot name="chart-box"></slot> <slot name="chart-box"></slot>
</div> </div>
<div class="tip-box"></div> <div class="tip-box">
<TipTab />
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -31,6 +33,7 @@ import Pie from './assets/icons/pie.svg' ...@@ -31,6 +33,7 @@ import Pie from './assets/icons/pie.svg'
import PieActive from './assets/icons/pie-active.svg' import PieActive from './assets/icons/pie-active.svg'
import Radar from './assets/icons/radar.svg' import Radar from './assets/icons/radar.svg'
import RadarActive from './assets/icons/radar-active.svg' import RadarActive from './assets/icons/radar-active.svg'
import TipTab from '@/components/base/TipTab/index.vue'
const chartItemList = ref([ const chartItemList = ref([
{ {
name: '折线图', name: '折线图',
...@@ -146,6 +149,9 @@ const props = defineProps({ ...@@ -146,6 +149,9 @@ const props = defineProps({
.tip-box { .tip-box {
height: 54px; height: 54px;
box-sizing: border-box;
padding-top: 10px;
// background: orange;
} }
} }
} }
......
...@@ -19,13 +19,18 @@ ...@@ -19,13 +19,18 @@
<script setup> <script setup>
import {ref} from 'vue' import {ref} from 'vue'
const isShowAll = ref(false) const props = defineProps({
isShowAll: {
type: Boolean,
default: false
}
})
const handleSwitchShowAll = () => { const handleSwitchShowAll = () => {
isShowAll.value = !isShowAll.value emit('showAll')
} }
const emit = defineEmits(['clear', 'confirm']) const emit = defineEmits(['showAll', 'clear', 'confirm'])
const handleClear = () => { const handleClear = () => {
emit('clear') emit('clear')
...@@ -35,6 +40,7 @@ const handleConfirm = () => { ...@@ -35,6 +40,7 @@ const handleConfirm = () => {
emit('confirm') emit('confirm')
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
...@@ -6,7 +6,7 @@ const getPieChart = (data) => { ...@@ -6,7 +6,7 @@ const getPieChart = (data) => {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: [150, 175], radius: [160, 190],
height: '100%', height: '100%',
left: 'center', left: 'center',
width: '98%', width: '98%',
......
<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
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
<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
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
</template> </template>
<script setup> <script setup>
import { computed, ref } from 'vue' import { computed, onMounted, ref } from 'vue'
import Icon1 from './assets/icons/sider-icon1.svg' import Icon1 from './assets/icons/sider-icon1.svg'
import Icon2 from './assets/icons/sider-icon2.svg' import Icon2 from './assets/icons/sider-icon2.svg'
import Icon3 from './assets/icons/sider-icon3.svg' import Icon3 from './assets/icons/sider-icon3.svg'
...@@ -95,7 +95,6 @@ const tagsViewStore = useTagsViewStore() ...@@ -95,7 +95,6 @@ const tagsViewStore = useTagsViewStore()
// 在路由全局守卫中处理 // 在路由全局守卫中处理
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
const tagsViewStore = useTagsViewStore()
// 路由允许添加标签(排除掉隐藏的布局页如 /404, /login 等) // 路由允许添加标签(排除掉隐藏的布局页如 /404, /login 等)
if (to.meta?.title && !to.meta?.hiddenTag) { if (to.meta?.title && !to.meta?.hiddenTag) {
tagsViewStore.addView({ tagsViewStore.addView({
...@@ -117,19 +116,19 @@ const siderList = ref([ ...@@ -117,19 +116,19 @@ const siderList = ref([
children: [ children: [
{ {
name: '国会法案', name: '国会法案',
path: '/countryBill', path: '/dataLibrary/countryBill',
active: true, active: true,
}, },
{ {
name: '州法案', name: '州法案',
path: '/stateBill', path: '/dataLibrary/stateBill',
active: false, active: false,
}, },
] ]
}, },
{ {
name: '科技政令', name: '科技政令',
path: '/dataDecree', path: '/dataLibrary/dataDecree',
icon: Icon2, icon: Icon2,
active: false, active: false,
isExpanded: false, isExpanded: false,
...@@ -139,7 +138,7 @@ const siderList = ref([ ...@@ -139,7 +138,7 @@ const siderList = ref([
}, },
{ {
name: '美国科技智库', name: '美国科技智库',
path: '/dataThinkTank', path: '/dataLibrary/dataThinkTank',
icon: Icon3, icon: Icon3,
active: false, active: false,
isExpanded: false, isExpanded: false,
...@@ -155,22 +154,22 @@ const siderList = ref([ ...@@ -155,22 +154,22 @@ const siderList = ref([
children: [ children: [
{ {
name: '实体清单', name: '实体清单',
path: '/dataEntityList', path: '/dataLibrary/dataEntityList',
active: false, active: false,
}, },
{ {
name: '商业管制清单', name: '商业管制清单',
path: '/dataCommerceControlList', path: '/dataLibrary/dataCommerceControlList',
active: false, active: false,
}, },
{ {
name: '实体清单事件', name: '实体清单事件',
path: '/dataEntityListEvent', path: '/dataLibrary/dataEntityListEvent',
active: false, active: false,
}, },
{ {
name: '商业管制清单事件', name: '商业管制清单事件',
path: '/dataCommerceControlListEvent', path: '/dataLibrary/dataCommerceControlListEvent',
active: false, active: false,
}, },
] ]
...@@ -191,22 +190,22 @@ const siderList = ref([ ...@@ -191,22 +190,22 @@ const siderList = ref([
children: [ children: [
{ {
name: 'SDN清单', name: 'SDN清单',
path: '/sDNList', path: '/dataLibrary/sDNList',
active: false, active: false,
}, },
{ {
name: '涉军企业清单', name: '涉军企业清单',
path: '/mREList', path: '/dataLibrary/mREList',
active: false, active: false,
}, },
{ {
name: 'SDN清单事件', name: 'SDN清单事件',
path: '/sDNListEvent', path: '/dataLibrary/sDNListEvent',
active: false, active: false,
}, },
{ {
name: '涉军企业清单事件', name: '涉军企业清单事件',
path: '/mREListEvent', path: '/dataLibrary/mREListEvent',
active: false, active: false,
}, },
] ]
...@@ -219,17 +218,17 @@ const siderList = ref([ ...@@ -219,17 +218,17 @@ const siderList = ref([
children: [ children: [
{ {
name: '337调查', name: '337调查',
path: '/case337', path: '/dataLibrary/case337',
active: false, active: false,
}, },
{ {
name: '232调查', name: '232调查',
path: '/case232', path: '/dataLibrary/case232',
active: false, active: false,
}, },
{ {
name: '301调查', name: '301调查',
path: '/case301', path: '/dataLibrary/case301',
active: false, active: false,
}, },
] ]
...@@ -251,22 +250,22 @@ const siderList = ref([ ...@@ -251,22 +250,22 @@ const siderList = ref([
children: [ children: [
{ {
name: '国会议员', name: '国会议员',
path: '/congressMan', path: '/dataLibrary/congressMan',
active: false, active: false,
}, },
{ {
name: '科技企业领袖', name: '科技企业领袖',
path: '/technologyLeader', path: '/dataLibrary/technologyLeader',
active: false, active: false,
}, },
{ {
name: '机构主官', name: '机构主官',
path: '/minister', path: '/dataLibrary/minister',
active: false, active: false,
}, },
{ {
name: '智库研究人员', name: '智库研究人员',
path: '/thinkTankResearcher', path: '/dataLibrary/thinkTankResearcher',
active: false, active: false,
}, },
] ]
...@@ -279,17 +278,17 @@ const siderList = ref([ ...@@ -279,17 +278,17 @@ const siderList = ref([
children: [ children: [
{ {
name: '科技企业', name: '科技企业',
path: '/technologyCompany', path: '/dataLibrary/technologyCompany',
active: false, active: false,
}, },
{ {
name: '研究型大学', name: '研究型大学',
path: '/researchUniversity', path: '/dataLibrary/researchUniversity',
active: false, active: false,
}, },
{ {
name: '重点实验室', name: '重点实验室',
path: '/keyLab', path: '/dataLibrary/keyLab',
active: false, active: false,
}, },
] ]
...@@ -317,7 +316,7 @@ const handleSiderItem = (item) => { ...@@ -317,7 +316,7 @@ const handleSiderItem = (item) => {
siderList.value.forEach(val => { siderList.value.forEach(val => {
val.active = false val.active = false
val.isExpanded = false val.isExpanded = false
if(val.children && val.children.length) { if (val.children && val.children.length) {
val.children.forEach(vall => { val.children.forEach(vall => {
vall.active = false vall.active = false
}) })
...@@ -325,7 +324,7 @@ const handleSiderItem = (item) => { ...@@ -325,7 +324,7 @@ const handleSiderItem = (item) => {
}) })
item.isExpanded = true item.isExpanded = true
item.active = true item.active = true
if (item.path) { if (item.path) {
router.push({ router.push({
path: item.path path: item.path
...@@ -354,13 +353,11 @@ const handleSiderSecondItem = (item) => { ...@@ -354,13 +353,11 @@ const handleSiderSecondItem = (item) => {
} }
const openedTabList = computed(() => { const openedTabList = computed(() => {
const tagsViewStore = useTagsViewStore()
const arr = tagsViewStore.visitedViews const arr = tagsViewStore.visitedViews
return arr return arr
}) })
const handleClickTab = (tab) => { const handleClickTab = (tab) => {
const tagsViewStore = useTagsViewStore()
tagsViewStore.visitedViews.forEach(val => { tagsViewStore.visitedViews.forEach(val => {
val.active = false val.active = false
}) })
...@@ -387,7 +384,7 @@ const handleClickTab = (tab) => { ...@@ -387,7 +384,7 @@ const handleClickTab = (tab) => {
return return
} }
} else { } else {
val.children.forEach(vall => { val.children.forEach(vall => {
if (vall.name === tab.meta.title) { if (vall.name === tab.meta.title) {
vall.active = true vall.active = true
...@@ -407,7 +404,6 @@ const handleCloseCurTab = (tab, index) => { ...@@ -407,7 +404,6 @@ const handleCloseCurTab = (tab, index) => {
let activeTab let activeTab
if (!tab.active) { if (!tab.active) {
const tagsViewStore = useTagsViewStore()
tagsViewStore.delView(tab) tagsViewStore.delView(tab)
} else { } else {
siderList.value.forEach(val => { siderList.value.forEach(val => {
...@@ -419,7 +415,6 @@ const handleCloseCurTab = (tab, index) => { ...@@ -419,7 +415,6 @@ const handleCloseCurTab = (tab, index) => {
} }
}) })
if (index === openedTabList.value.length - 1) { if (index === openedTabList.value.length - 1) {
const tagsViewStore = useTagsViewStore()
tagsViewStore.delView(tab) tagsViewStore.delView(tab)
setTimeout(() => { setTimeout(() => {
tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].active = true tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].active = true
...@@ -447,7 +442,6 @@ const handleCloseCurTab = (tab, index) => { ...@@ -447,7 +442,6 @@ const handleCloseCurTab = (tab, index) => {
}) })
} else { } else {
const tagsViewStore = useTagsViewStore()
tagsViewStore.delView(tab) tagsViewStore.delView(tab)
tagsViewStore.visitedViews[index].active = true tagsViewStore.visitedViews[index].active = true
...@@ -474,10 +468,6 @@ const handleCloseCurTab = (tab, index) => { ...@@ -474,10 +468,6 @@ const handleCloseCurTab = (tab, index) => {
}) })
} }
} }
} }
...@@ -486,6 +476,10 @@ const handleClickToolBox = () => { ...@@ -486,6 +476,10 @@ const handleClickToolBox = () => {
ElMessage.warning("当前功能正在开发中,敬请期待!"); ElMessage.warning("当前功能正在开发中,敬请期待!");
}; };
onMounted(() => {
})
</script> </script>
...@@ -631,29 +625,57 @@ const handleClickToolBox = () => { ...@@ -631,29 +625,57 @@ const handleClickToolBox = () => {
.tab-box { .tab-box {
width: 1600px;
height: 48px; height: 48px;
background: rgba(255, 255, 255); background: rgba(255, 255, 255);
border-bottom: 2px solid var(--bg-black-5); border-bottom: 2px solid var(--bg-black-5);
display: flex; display: flex;
overflow: hidden;
.tab-item { .tab-item {
height: 48px; // height: 46px;
white-space: nowrap;
/* 强制文字不换行 */
overflow: hidden;
/* 隐藏溢出的文字 */
text-overflow: ellipsis;
/* 显示省略号 */
display: flex; display: flex;
flex-wrap: nowrap;
gap: 8px; gap: 8px;
align-items: center; align-items: center;
padding: 0 12px 0 16px; padding: 0 12px 0 16px;
border-bottom: 2px solid var(--bg-black-5); border-bottom: 2px solid var(--bg-white-100);
cursor: pointer; cursor: pointer;
// animation: all ease 0.5s; // animation: all ease 0.5s;
&:hover { &: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 { .text {
// width: 150px;
color: var(--color-primary-100); color: var(--color-primary-100);
} }
} }
.text {
/* 关键属性2: 处理内部文字溢出 */
white-space: nowrap;
/* 强制文字不换行 */
overflow: hidden;
/* 隐藏溢出的文字 */
text-overflow: ellipsis;
/* 显示省略号 */
}
.text-active { .text-active {
color: var(--color-primary-100); color: var(--color-primary-100);
} }
...@@ -661,6 +683,10 @@ const handleClickToolBox = () => { ...@@ -661,6 +683,10 @@ const handleClickToolBox = () => {
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
&:hover{
border-radius: 8px;
background: var(--color-primary-10);
}
img { img {
width: 100%; width: 100%;
...@@ -670,7 +696,7 @@ const handleClickToolBox = () => { ...@@ -670,7 +696,7 @@ const handleClickToolBox = () => {
} }
.tab-item-active { .tab-item-active {
border-bottom: 2px solid var(--color-primary-100); border-bottom: 2px solid var(--color-primary-100) !important;
} }
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论