提交 8421103d authored 作者: coderBryanFu's avatar coderBryanFu

feat:数据资源库模块更新

上级 a5af246f
......@@ -9,6 +9,6 @@
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script src="./config.js"></script>
<script src="/js/config.js"></script>
</body>
</html>
\ No newline at end of file
......@@ -41,7 +41,8 @@
<div class="content-header">
<ChartHeader :list="staticsDemensionList" @clickItem="handleClickDemensionItem">
<template #chart-header-right>
<el-select v-model="selectedTime" placeholder="选择时间" style="width: 150px" v-show="curDemension === '时间'">
<el-select v-model="selectedTime" placeholder="选择时间" style="width: 150px"
v-show="curDemension === '提案时间'">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
......@@ -49,7 +50,10 @@
</ChartHeader>
</div>
<div class="content-main">
<ChartContainer chartTitle="美国会法案提出数量随时间变化趋势" @clickChartItem="handleSwitchActiveChart">
<ChartContainer
chartTitle="美国会法案提出数量随时间变化趋势"
:chartTypeList="curChartTypeList"
@clickChartItem="handleSwitchActiveChart">
<template #chart-box>
<LineChart v-if="activeChart === '折线图'" :lineChartData="lineChartData" />
<PieChart v-if="activeChart === '饼状图'" :pieChartData="pieChartData" />
......@@ -124,7 +128,7 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref, computed } from 'vue'
import ChartContainer from '../../components/ChartContainer/index.vue'
import ChartHeader from '../../components/ChartHeader/index.vue'
import ActiveTag from '../../components/ActiveTag/index.vue'
......@@ -148,33 +152,44 @@ const totalNum = ref(12)
// 统计维度列表
const staticsDemensionList = ref([
{
name: '时间',
active: true
name: '提案时间',
active: true,
chartTypeList: ['折线图', '柱状图']
},
{
name: '领域',
active: false
name: '科技领域',
active: false,
chartTypeList: ['饼状图']
},
{
name: '党派',
active: false
name: '提出议院',
active: false,
chartTypeList: ['饼状图']
},
{
name: '议院',
active: false
name: '提出委员会',
active: false,
chartTypeList: ['饼状图']
},
{
name: '委员会',
active: false
name: '提出议员党派',
active: false,
chartTypeList: ['饼状图']
},
{
name: '所处阶段',
active: false
name: '立法阶段',
active: false,
chartTypeList: ['饼状图']
},
])
const curChartTypeList = computed(() => {
let arr = staticsDemensionList.value.filter(item =>item.active)
return arr[0].chartTypeList
})
// 当前维度
const curDemension = ref('时间')
const curDemension = ref('提案时间')
const handleClickDemensionItem = (val) => {
staticsDemensionList.value.forEach(item => {
......@@ -182,6 +197,7 @@ const handleClickDemensionItem = (val) => {
})
val.active = true
curDemension.value = val.name
activeChart.value = val.chartTypeList[0]
}
const selectedTime = ref('按月统计')
......@@ -698,9 +714,8 @@ const tableData = [
.item3 {}
}
}
.data-main-box-main-content{
}
.data-main-box-main-content {}
}
.data-main-box-footer {
......
......@@ -24,7 +24,7 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref, computed, onMounted, nextTick } from 'vue'
import Line from './assets/icons/line.svg'
import LineActive from './assets/icons/line-active.svg'
import Bar from './assets/icons/bar.svg'
......@@ -34,10 +34,11 @@ 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([
const defaultChartTypeList = [
{
name: '折线图',
active: true,
active: false,
icon: Line,
activeIcon: LineActive
},
......@@ -59,7 +60,8 @@ const chartItemList = ref([
icon: Radar,
activeIcon: RadarActive
},
])
]
const emit = defineEmits('clickChartItem')
......@@ -75,9 +77,39 @@ const props = defineProps({
chartTitle: {
type: String,
default: ''
},
chartTypeList : {
type: Array,
default: []
}
})
const chartItemList = computed(() => {
let arr = []
props.chartTypeList.forEach(item => {
defaultChartTypeList.forEach(val => {
if(val.name === item) {
arr.push(val)
}
})
})
arr.forEach(item => {
item.active = false
})
arr[0].active = true
return arr
})
// nextTick(() => {
// let arr = chartItemList.value.filter(item => item.active)
// if(!arr.length) {
// alert(1)
// chartItemList.value[0].active = true
// }
// })
</script>
<style lang="scss" scoped>
......
......@@ -3,13 +3,8 @@
<div class="left">
<div class="left-text text-tip-1">{{ '统计维度:' }}</div>
<div class="left-list">
<ActionButton
v-for="item, index in list"
:key="index"
:name="item.name"
:type="item.active ? 'active' : 'normal'"
@click="handleClickItem(item)"
/>
<ActionButton v-for="item, index in list" :key="index" :name="item.name"
:type="item.active ? 'active' : 'normal'" @click="handleClickItem(item)" />
</div>
</div>
<div class="right">
......@@ -25,18 +20,6 @@ const props = defineProps({
list: {
type: Array,
default: [
{
name: '时间',
active: true
},
{
name: '领域',
active: false
},
{
name: '党派',
active: false
},
]
}
})
......
......@@ -39,6 +39,9 @@ export default defineConfig({
}
}
},
publicDir: 'public', // 指定 public 目录的位置
// 服务器的根路径
base: '/',
server: {
host: '0.0.0.0', // 监听所有网络接口
port: 3000,
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论