|
@@ -0,0 +1,300 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div style="height: 100vh;width: 100%;background-color: #EDEFF0;overflow-y: auto;">
|
|
|
|
|
+ <div style="height: 10vh;width: 80%;margin-left: 10%;background-color: white;margin-top: 1%;display: flex;box-shadow: 0 0 5px 1px #ccc;">
|
|
|
|
|
+ <div style="height: 100%;width: 70%;display: flex;">
|
|
|
|
|
+ <div style="background-color: #3879CF;height: 7vh;margin-top: 1.5vh;background-color: #3879CF;width: 7vh;border-radius: 10px;margin-left: 5%;display: flex;align-items: center;justify-content: center;">
|
|
|
|
|
+ <svg-icon icon-class="电脑" style="height: 5vh;width:5vh;"/>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="margin-left: 1%;margin-top:1.5%;">
|
|
|
|
|
+ <div style="font-size: 30px;">
|
|
|
|
|
+ 328
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="margin-top: 10%;font-size: 12px;">
|
|
|
|
|
+ 信息资源总量
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="background-color: #15B8FF;height: 7vh;margin-top: 1.5vh;width: 7vh;border-radius: 10px;margin-left: 20%;display: flex;align-items: center;justify-content: center;">
|
|
|
|
|
+ <svg-icon icon-class="申请123" style="height: 5vh;width:5vh;"/>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="margin-left: 1%;margin-top:1.5%;">
|
|
|
|
|
+ <div style="font-size: 30px;">
|
|
|
|
|
+ 21
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="margin-top: 10%;font-size: 12px;">
|
|
|
|
|
+ 信息浏览总量
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="background-color: #02D6F3;height: 7vh;margin-top: 1.5vh;width: 7vh;border-radius: 10px;margin-left: 20%;display: flex;align-items: center;justify-content: center;">
|
|
|
|
|
+ <svg-icon icon-class="信息" style="height: 5vh;width:5vh;"/>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="margin-left: 1%;margin-top:1.5%;">
|
|
|
|
|
+ <div style="font-size: 30px;">
|
|
|
|
|
+ 38
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="margin-top: 10%;font-size: 12px;">
|
|
|
|
|
+ 信息申请总量
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="height: 100%;width: 20%;margin-left: auto;">
|
|
|
|
|
+ <div style="display: flex;width: 100%;">
|
|
|
|
|
+ <div style="border-right: #ccc 1px solid;width: 33%;height: 5vh;margin-top: 1vh;text-align: center;">
|
|
|
|
|
+ <div style="font-size: 22px;margin-top: 1%;">0</div>
|
|
|
|
|
+ <div style="font-size: 14px;">资源发布</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="border-right: #ccc 1px solid;width: 33%;height: 5vh;margin-top: 1vh;text-align: center;">
|
|
|
|
|
+ <div style="font-size: 22px;margin-top: 1%;">1</div>
|
|
|
|
|
+ <div style="font-size: 14px;">资源浏览</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="width: 33%;height: 5vh;margin-top: 1vh;text-align: center;">
|
|
|
|
|
+ <div style="font-size: 22px;margin-top: 1%;">1</div>
|
|
|
|
|
+ <div style="font-size: 14px;">资源申请</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="display: flex;height: 3vh;width: 100%;margin-top: 3%;margin-left: 5%;align-items: center;">
|
|
|
|
|
+ <div style="background-color: #3879CF;border-radius: 6px;height: 2vh;width:2vh;display: flex;align-items: center;justify-content: center;">
|
|
|
|
|
+ <svg-icon icon-class="菜单" style="height:1.6vh;width:1.6vh;"/>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="font-size: 12px;margin-left: 2%;">
|
|
|
|
|
+ 今日(2005/11/17)资源总览
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="height: 40vh;width: 80%;margin-left: 10%;background-color: white;margin-top: 1%;box-shadow: 0 0 5px 1px #ccc;">
|
|
|
|
|
+ <div style="font-size: 20px;margin-left: 1%;padding-top: 1%;font-weight: bold;">
|
|
|
|
|
+ 信息资源分布
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="background-color: #F5F5F5;height: 0.3%;margin-top: 1%;width: 100%;"></div>
|
|
|
|
|
+ <div style="display: flex;width: 100%;margin-left: 1%;margin-top: 1%;">
|
|
|
|
|
+ <div style="width: 20%;height: 40vh;">
|
|
|
|
|
+ <div style="height: 5vh;width: 100%;background-color: #F5F5F5;display: flex;align-items: center;font-size: 18px;" class="borderBack">
|
|
|
|
|
+ <div style="margin-left: 5%;">接入数据</div>
|
|
|
|
|
+ <div style="margin-left: auto;margin-right: 5%;line-height: normal;font-weight: bold;">3</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="height: 5vh;width: 100%;background-color: #F5F5F5;display: flex;align-items: center;font-size: 18px;margin-top: 3%;" class="borderBack">
|
|
|
|
|
+ <div style="margin-left: 5%;">核心数据</div>
|
|
|
|
|
+ <div style="margin-left: auto;margin-right: 5%;line-height: normal;font-weight: bold;">3</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="height: 5vh;width: 100%;background-color: #F5F5F5;display: flex;align-items: center;font-size: 18px;margin-top: 3%;" class="borderBack">
|
|
|
|
|
+ <div style="margin-left: 5%;">应用数据</div>
|
|
|
|
|
+ <div style="margin-left: auto;margin-right: 5%;line-height: normal;font-weight: bold;">3</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="width: 75%;height: 40vh;margin-left: 2%;">
|
|
|
|
|
+ <div id="zhu" style="width: 100%;height: 35vh;"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="height: 32vh;width: 80%;margin-left: 10%;background-color: white;margin-top: 1%;box-shadow: 0 0 5px 1px #ccc;">
|
|
|
|
|
+ <div style="font-size: 20px;margin-left: 1%;padding-top: 1%;font-weight: bold;">
|
|
|
|
|
+ 信息资源趋势
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="width: 100%;display: flex;">
|
|
|
|
|
+ <div style="width: 33.3%;height: 24vh;">
|
|
|
|
|
+ <div style="width: 100%;display: flex;margin-top: 1%;">
|
|
|
|
|
+ <div style="margin-left: 3%;">信息资源发布趋势</div>
|
|
|
|
|
+ <el-segmented style="margin-left: auto;margin-right: 1%;" v-model="value" :options="options" size="small" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="height: 100%;" id="xian1"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="width: 33.3%;height: 24vh;">
|
|
|
|
|
+ <div style="width: 100%;display: flex;margin-top: 1%;">
|
|
|
|
|
+ <div style="margin-left: 3%;">信息资源浏览趋势</div>
|
|
|
|
|
+ <el-segmented style="margin-left: auto;margin-right: 1%;" v-model="value" :options="options" size="small" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="height: 100%;" id="xian2"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="width: 33.3%;height: 24vh;">
|
|
|
|
|
+ <div style="width: 100%;display: flex;margin-top: 1%;">
|
|
|
|
|
+ <div style="margin-left: 3%;">信息资源申请趋势</div>
|
|
|
|
|
+ <el-segmented style="margin-left: auto;margin-right: 1%;" v-model="value" :options="options" size="small" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="height: 100%;" id="xian3"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
|
|
+import * as echarts from 'echarts';
|
|
|
|
|
+const activeName = ref('first');
|
|
|
|
|
+const options = ['年', '月', '日']
|
|
|
|
|
+const value = ref('年');
|
|
|
|
|
+function getZhu() {
|
|
|
|
|
+ var chartDom = document.getElementById('zhu');
|
|
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
|
|
+ var option;
|
|
|
|
|
+ option = {
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+ type: 'category',
|
|
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: {
|
|
|
|
|
+ type: 'value'
|
|
|
|
|
+ },
|
|
|
|
|
+ series: [
|
|
|
|
|
+ {
|
|
|
|
|
+ data: [120, 200, 150, 80, 70, 110, 130],
|
|
|
|
|
+ type: 'bar'
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ option && myChart.setOption(option);
|
|
|
|
|
+}
|
|
|
|
|
+function getxian3(){
|
|
|
|
|
+var chartDom = document.getElementById('xian3');
|
|
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
|
|
+ var option;
|
|
|
|
|
+ option = {
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+ type: 'category',
|
|
|
|
|
+ boundaryGap: false,
|
|
|
|
|
+ data: ['2025-11', '2025-11', '2025-11', '2025-11', '2025-11', '2025-11', '2025-11']
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: {
|
|
|
|
|
+ type: 'value'
|
|
|
|
|
+ },
|
|
|
|
|
+ grid: {
|
|
|
|
|
+ left: '5%',
|
|
|
|
|
+ right: '5%',
|
|
|
|
|
+ bottom: '0%',
|
|
|
|
|
+ top: '15%',
|
|
|
|
|
+ containLabel: true
|
|
|
|
|
+ },
|
|
|
|
|
+ series: [
|
|
|
|
|
+ {
|
|
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
|
|
+ type: 'line',
|
|
|
|
|
+ lineStyle: { // 线条样式rgb(238, 190, 119)
|
|
|
|
|
+ color: 'rgba(238, 190, 119, 1)' // 折线颜色,例如蓝色
|
|
|
|
|
+ },
|
|
|
|
|
+ itemStyle: {
|
|
|
|
|
+ color: 'rgba(238, 190, 119, 1)' // 所有节点均为红色
|
|
|
|
|
+ },
|
|
|
|
|
+ areaStyle: {
|
|
|
|
|
+ color: { // 渐变颜色rgb(121, 187, 255)
|
|
|
|
|
+ type: 'linear', // 线性渐变
|
|
|
|
|
+ x: 0, y: 0, x2: 0, y2: 1, // 定义渐变方向,从上到下 (y:0 -> y2:1)
|
|
|
|
|
+ colorStops: [ // 颜色渐变点
|
|
|
|
|
+ { offset: 0, color: 'rgba(238, 158, 119, 0.6)' }, // 渐变起始颜色 (可调整透明度)
|
|
|
|
|
+ { offset: 1, color: 'rgba(238, 158, 119, 0.1)' } // 渐变结束颜色 (可调整透明度)
|
|
|
|
|
+ ],
|
|
|
|
|
+ global: false // 是否使用全局坐标,通常设为 false
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+option && myChart.setOption(option);
|
|
|
|
|
+}
|
|
|
|
|
+function getxian2(){
|
|
|
|
|
+ var chartDom = document.getElementById('xian2');
|
|
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
|
|
+ var option;
|
|
|
|
|
+ option = {
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+ type: 'category',
|
|
|
|
|
+ boundaryGap: false,
|
|
|
|
|
+ data: ['2025-11', '2025-11', '2025-11', '2025-11', '2025-11', '2025-11', '2025-11']
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: {
|
|
|
|
|
+ type: 'value'
|
|
|
|
|
+ },
|
|
|
|
|
+ grid: {
|
|
|
|
|
+ left: '5%',
|
|
|
|
|
+ right: '5%',
|
|
|
|
|
+ bottom: '0%',
|
|
|
|
|
+ top: '15%',
|
|
|
|
|
+ containLabel: true
|
|
|
|
|
+ },
|
|
|
|
|
+ series: [
|
|
|
|
|
+ {
|
|
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
|
|
+ type: 'line',
|
|
|
|
|
+ lineStyle: { // 线条样式rgb(121, 187, 255)
|
|
|
|
|
+ color: 'rgba(64, 158, 254, 1)' // 折线颜色,例如蓝色
|
|
|
|
|
+ },
|
|
|
|
|
+ itemStyle: {
|
|
|
|
|
+ color: 'rgba(64, 158, 254, 1)' // 所有节点均为红色
|
|
|
|
|
+ },
|
|
|
|
|
+ areaStyle: {
|
|
|
|
|
+ color: { // 渐变颜色rgb(121, 187, 255)
|
|
|
|
|
+ type: 'linear', // 线性渐变
|
|
|
|
|
+ x: 0, y: 0, x2: 0, y2: 1, // 定义渐变方向,从上到下 (y:0 -> y2:1)
|
|
|
|
|
+ colorStops: [ // 颜色渐变点
|
|
|
|
|
+ { offset: 0, color: 'rgba(64, 158, 254, 0.6)' }, // 渐变起始颜色 (可调整透明度)
|
|
|
|
|
+ { offset: 1, color: 'rgba(64, 158, 254, 0.1)' } // 渐变结束颜色 (可调整透明度)
|
|
|
|
|
+ ],
|
|
|
|
|
+ global: false // 是否使用全局坐标,通常设为 false
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+option && myChart.setOption(option);
|
|
|
|
|
+}
|
|
|
|
|
+function getxian1(){
|
|
|
|
|
+ var chartDom = document.getElementById('xian1');
|
|
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
|
|
+ var option;
|
|
|
|
|
+ option = {
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+ type: 'category',
|
|
|
|
|
+ boundaryGap: false,
|
|
|
|
|
+ data: ['2025-11', '2025-11', '2025-11', '2025-11', '2025-11', '2025-11', '2025-11']
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: {
|
|
|
|
|
+ type: 'value'
|
|
|
|
|
+ },
|
|
|
|
|
+ grid: {
|
|
|
|
|
+ left: '5%',
|
|
|
|
|
+ right: '5%',
|
|
|
|
|
+ bottom: '0%',
|
|
|
|
|
+ top: '15%',
|
|
|
|
|
+ containLabel: true
|
|
|
|
|
+ },
|
|
|
|
|
+ series: [
|
|
|
|
|
+ {
|
|
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
|
|
+ type: 'line',
|
|
|
|
|
+ lineStyle: { // 线条样式rgb(121, 187, 255)
|
|
|
|
|
+ color: 'rgba(121, 187, 254, 1)' // 折线颜色,例如蓝色
|
|
|
|
|
+ },
|
|
|
|
|
+ itemStyle: {
|
|
|
|
|
+ color: 'rgba(121, 187, 254, 1)' // 所有节点均为红色
|
|
|
|
|
+ },
|
|
|
|
|
+ areaStyle: {
|
|
|
|
|
+ color: { // 渐变颜色rgb(121, 187, 255)
|
|
|
|
|
+ type: 'linear', // 线性渐变
|
|
|
|
|
+ x: 0, y: 0, x2: 0, y2: 1, // 定义渐变方向,从上到下 (y:0 -> y2:1)
|
|
|
|
|
+ colorStops: [ // 颜色渐变点
|
|
|
|
|
+ { offset: 0, color: 'rgba(121, 187, 254, 0.6)' }, // 渐变起始颜色 (可调整透明度)
|
|
|
|
|
+ { offset: 1, color: 'rgba(121, 187, 254, 0.1)' } // 渐变结束颜色 (可调整透明度)
|
|
|
|
|
+ ],
|
|
|
|
|
+ global: false // 是否使用全局坐标,通常设为 false
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+option && myChart.setOption(option);
|
|
|
|
|
+}
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ getZhu()
|
|
|
|
|
+ getxian1()
|
|
|
|
|
+ getxian2()
|
|
|
|
|
+ getxian3()
|
|
|
|
|
+});
|
|
|
|
|
+</script>
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.borderBack:hover {
|
|
|
|
|
+ box-shadow: 0 0 5px 1px #ccc;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|