Skip to content

C
cxsfjx_project_echarts
提交 645b4dd0 authored 作者: ww1xhqc's avatar ww1xhqc
浏览文件
操作

fix(创新示范评价)：填充真实数据

上级 9ee0d069
隐藏空白字符变更
内嵌 并排
正在显示 包含 342 行增加 和 23 行删除
src/layout/head.vue
浏览文件 @ 645b4dd0
......@@ -42,7 +42,7 @@
<!-- 行动轨迹记录 -->
<div v-if="curRouteHistoy.length > 0" class="proceed-record">
<el-row align="middle">
<el-row class="pointer" @click="$router.go(-1)" align="middle">
<el-icon><ArrowLeftBold /></el-icon>
返回
<el-divider direction="vertical"></el-divider>
......@@ -145,7 +145,12 @@ export default defineComponent({
});
</script>
<style lang="scss" scoped>
// $main-color: "#4198ff";
.pointer{
cursor: pointer;
&:hover{
color: #4198ff
}
}
.app-head-warpper {
background: #f5f9fb;
box-sizing: border-box;
......
src/views/dataCenter/army/model/EconomicConstruct/index.vue
浏览文件 @ 645b4dd0
......@@ -50,7 +50,7 @@
</el-col>
</el-row>
<div class="bar-title">各市"千百十"项目投资金额及进度情况(截至第二季度)</div>
<div class="bar-title">各市"千百十"项目投资金额及进度情况</div>
<div id="economicConstruct" class="economic-construct"></div>
</template>
<script lang="ts">
......
src/views/dataCenter/army/model/Munitions/index.vue
浏览文件 @ 645b4dd0
......@@ -8,7 +8,7 @@
</el-col>
<el-col class="city-echarts" :span="15" :offset="1">
<div class="title2X">各市收入规模及增长率</div>
<div class="title2X">各市军品收入规模及增长率</div>
<div id="cityEcharts" class="echart-item"></div>
</el-col>
</el-row>
......
src/views/dataCenter/army/model/Science/index.vue
浏览文件 @ 645b4dd0
......@@ -282,7 +282,7 @@ export default defineComponent({
}
div {
color: #4198ff;
font-size: 24px;
font-size: 20px;
display: flex;
align-items: center;
span {
......
src/views/dataCenter/industrial/index.vue
浏览文件 @ 645b4dd0
......@@ -28,10 +28,10 @@
<el-col class="map-left" :span="8">
<div class="business-extend footer-item card-item">
<IncomExtendLine
<Industrial
echartsId="industryDistribute"
echartsTitle="国防科技工业产值规模分布"
echartsDesText="工业总产值趋势图"
echartsDesText="各市国防科技工业产值规模及增长率"
:cardItems="industryCardItems"
/>
</div>
......@@ -44,6 +44,8 @@ import TargetBar from "./model/TargetBar/index.vue";
import IncomExtendLine from "./model/IncomExtendLine/index.vue";
import IncomDistribution from "./model/IncomDistribution/index.vue";
import BusinessIncome from "./model/BusinessIncome/index.vue";
import Industrial from "./model/Industrial/index.vue";
export default defineComponent({
components: {
......@@ -51,6 +53,7 @@ export default defineComponent({
IncomExtendLine,
IncomDistribution,
BusinessIncome,
Industrial
},
setup() {},
data() {
......
src/views/dataCenter/industrial/model/Industrial/index.vue 0 → 100644
浏览文件 @ 645b4dd0
<template>
<MapTitle :text="echartsTitle" />
<div class="describes">
<div class="card-items">
<div class="item" v-for="(item,index) in cardItems" :key="item.text">
<span>{{ item.label }}</span>
<div class="value-des">
<span>{{ item.value || "--" }}</span
>{{index === 0?"亿元":"%"}}
</div>
</div>
</div>
<div class="text">{{ echartsDesText }}</div>
</div>
<div :id="echartsId" class="incom-echarts-line"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
const seriesData = [
{
name: "产值规模",
type: "level_2",
echartType: "bar",
barValue: [587.5, 137.6, 15.3, 71.1, 120.8, 65, 72,14, 8.2, 20.3, 1.6],
growthRate: [19, 12.8, -0.1, 31.7, 28.5, 33.3, 80, 17,0.4, 14.5, 33],
},
];
const xAxisValue = [
"杭州",
"宁波",
"温州",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
];
/**
* 全省军民协同创新平台情况/国防科技工业产值规模分布 -- 柱状图
*/
export default defineComponent({
props: {
echartsTitle: {
type: String,
required: true,
},
echartsDesText: {
type: String,
required: true,
},
cardItems: {
type: Array,
required: true,
dafault: () => [],
},
echartsData: {
type: Array,
// required: true,
dafault: () => [],
},
echartsAxisValue: {
type: Array,
// required: true,
dafault: () => [],
},
echartsId: {
type: String,
required: true,
},
},
components: {
MapTitle,
},
setup() {},
data() {
return {
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
computed: {
optionBar() {
const seriesBarList = seriesData.map((item, index) => {
return {
name: item.name,
type: "bar",
itemStyle: {
color: "#4198FF",
},
barWidth: 12,
data: item.barValue.map((barItem, barIndex) => {
return {
value: barItem,
label: "产值规模",
};
}),
};
});
const seriesLineList = seriesData.map((item) => {
return {
name: "增长率",
type: "line",
itemStyle: {
color: "#75ce95",
},
lineStyle: {
type: "dashed",
},
yAxisIndex: 1,
data: item.growthRate.map((value) => {
return {
value,
label: "增长率",
};
}),
};
});
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "industry-tooltip-des",
formatter: (params) => {
let html = `<span class="name">${params[0].axisValue}市</span>`;
html += `<div class="industry-tooltip-des ">
<span class=" title color_1">${params[0].data.label}</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>亿元
</div>
<div class="industry-tooltip-des">
<span class=" title color_2">${params[1].data.label}</span>
<br />
<span class="text text-color_2">${params[1].data.value}%</span>
</div>`;
return html;
},
},
grid: {
left: "2%",
right: "2%",
bottom: "3%",
containLabel: true,
},
legend: {
right: "2%",
},
yAxis: [
{
type: "value",
name: "金额(亿元)",
},
{
type: "value",
name: "增长率%",
min: -10,
max: 100,
},
],
xAxis: {
type: "category",
data: xAxisValue,
},
series: [...seriesBarList, ...seriesLineList],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById(this.echartsId);
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
},
},
unmounted() {
if (!this.mapEcharts) {
return;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</script>
<style>
.industry-tooltip-des:first-of-type {
margin-bottom: 5px;
}
.industry-tooltip-des .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.industry-tooltip-des {
width: 100px;
}
.industry-tooltip-des .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.industry-tooltip-des .title {
padding-left: 10px;
font-weight: 600;
font-size: 12px;
color: #666;
position: relative;
}
.industry-tooltip-des .title::before {
position: absolute;
top: 5px;
left: 0;
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
}
.industry-tooltip-des .text {
padding-left: 20px;
margin-bottom: 20px;
font-size: 20px;
}
.industry-tooltip-des .text:last-of-type {
margin: 0;
}
.industry-tooltip-des .text-color_1 {
color: #4198ff;
}
.industry-tooltip-des .text-color_2 {
color: #75ce95;
}
.industry-tooltip-des .color_1::before {
background: #4198ff;
}
.industry-tooltip-des .color_2::before {
background: #75ce95;
}
</style>
<style lang="scss" scoped>
.incom-echarts-line {
flex: 1;
height: calc(100% - 160px);
box-sizing: border-box;
}
.describes {
margin: 0 10px;
height: 120px;
box-sizing: border-box;
.card-items {
margin: 15px 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
.item {
flex: 1;
padding: 10px 15px;
margin-right: 15px;
background: #f8f9fb;
border-radius: 5px;
font-size: 14px;
color: #333;
&:last-of-type {
margin-right: 0;
}
.value-des {
margin-top: 10px;
font-size: 12px;
color: #999;
span {
font-size: 20px;
margin-right: 5px;
color: #4198ff;
}
}
}
}
.text {
color: #4198ff;
margin-top: 10px;
font-size: 14px;
}
}
</style>
src/views/dataCenter/map/index.vue
浏览文件 @ 645b4dd0
......@@ -58,7 +58,7 @@ export default defineComponent({
data() {
return {
list: [
{ label: "领跑产品（技术）", value: "20", unit: "个" },
{ label: "领跑产品（技术）", value: "50", unit: "个" },
{ label: "军地协同创新平台", value: "20", unit: "个" },
{ label: "新兴领域研发经费", value: "20", unit: "亿元" },
],
......
src/views/dataCenter/map/model/CardList/industrial.vue
浏览文件 @ 645b4dd0
......@@ -8,7 +8,7 @@
<div class="info">
<el-row class="year" align="middle">
<el-icon color="#409EFC"> <Aim /> </el-icon>
2021年(截至第二季度)
2021年
</el-row>
<el-row class="info-item font-size14 color-666 item-bg margin-bottom8">
......
src/views/dataCenter/map/model/CardList/strongArmy.vue
浏览文件 @ 645b4dd0
......@@ -50,7 +50,7 @@
>国防科技工业军品收入</el-col
>
<el-col class="padding0-8">
<span class="font-size20 color-pramiry">30</span>
<span class="font-size20 color-pramiry">84.91</span>
<span class="font-size12 color-999">亿元</span>
</el-col>
</el-row>
......@@ -60,7 +60,7 @@
>民口单位军品收入</el-col
>
<el-col class="padding0-8">
<span class="font-size20 color-pramiry">30</span>
<span class="font-size20 color-pramiry">53.35</span>
<span class="font-size12 color-999">亿元</span>
</el-col>
</el-row>
......@@ -72,7 +72,7 @@
>应届大学生应征入伍</el-col
>
<el-col class="padding0-8">
<span class="font-size20 color-pramiry">30</span>
<span class="font-size20 color-pramiry">1470</span>
<span class="font-size12 color-999">人</span>
</el-col>
</el-row>
......@@ -80,8 +80,8 @@
<el-row>
<el-col class="padding0-8 font-size14 color-666">应征入伍率</el-col>
<el-col class="padding0-8">
<span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">%</span>
<span class="font-size20 color-pramiry">0.5%</span>
<span class="font-size12 color-999"></span>
</el-col>
</el-row>
</el-col>
......
src/views/dataCenter/map/model/CardList/systemConstruct.vue
浏览文件 @ 645b4dd0
......@@ -21,7 +21,7 @@
各地召开融委全体会议次数
</el-col>
<el-col class="jf-end flex-row font-size20 color-pramiry" :span="5">
30 <span class="margin-left5 font-size12 color-999">次</span>
43 <span class="margin-left5 font-size12 color-999">次</span>
</el-col>
</el-row>
......@@ -34,7 +34,7 @@
与当地军分区（警备区）建立并落实军地协作机制
</el-col>
<el-col class="jf-end flex-row font-size20 color-pramiry" :span="5">
30 <span class="margin-left5 font-size12 color-999">次</span>
93 <span class="margin-left5 font-size12 color-999">次</span>
</el-col>
</el-row>
......@@ -46,14 +46,14 @@
<div class="item-row">
<span class="font-size14 color-666">专职</span>
<el-col class="jf-end flex-row font-size20 color-pramiry">
30 <span class="margin-left5 font-size12 color-999">人</span>
142 <span class="margin-left5 font-size12 color-999">人</span>
</el-col>
</div>
<div class="item-row">
<span class="font-size14 color-666">兼职</span>
<el-col class="flex-row font-size20 color-pramiry">
30 <span class="margin-left5 font-size12 color-999">人</span>
125 <span class="margin-left5 font-size12 color-999">人</span>
</el-col>
</div>
</el-row>
......
src/views/dataCenter/map/model/InvestmentProgress/index.vue
浏览文件 @ 645b4dd0
......@@ -126,7 +126,7 @@ export default defineComponent({
},
{
type: "value",
name: "增长率%",
name: "项目进度%",
min: 0,
max: 100,
},
......@@ -215,6 +215,7 @@ export default defineComponent({
background: #75ce95;
}
</style>
<style lang="scss" scoped>
.investment-progress {
flex: 1;
......
src/views/dataCenter/map/model/Performance/index.vue
浏览文件 @ 645b4dd0
<template>
<MapTitle
text="全省军民融合创新示范绩效评价情况(截至第二季度)"
text="全省军民融合创新示范绩效评价情况"
:detailsHandle="detailsHandle"
/>
<div id="performanceBar" class="performance-bar"></div>
......
src/views/dataCenter/map/model/RankList/index.vue
浏览文件 @ 645b4dd0
<template>
<MapTitle text="创新示范区、县排名（截至第二季度）" />
<MapTitle text="创新示范区县(市、区）排名" />
<el-scrollbar height="260px">
<el-table
......@@ -28,10 +28,10 @@
<template #default="scope">
<div>
{{ scope.row.score }}
<el-icon :color="scope.row.type === 1 ? '#67C23A' : '#F56C6C'">
<!-- <el-icon :color="scope.row.type === 1 ? '#67C23A' : '#F56C6C'">
<Bottom v-if="scope.row.type === 1" />
<Top v-else />
</el-icon>
</el-icon> -->
</div>
</template>
</el-table-column>
......@@ -148,6 +148,7 @@ export default defineComponent({
background-color: #e3f0ff !important;
color: #333;
font-weight: bold;
font-size: 14px;
}
</style>
<style lang="scss" scoped>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论