Skip to content

C
cxsfjx_project_echarts
提交 da899d4a authored 作者: Your Name's avatar Your Name
浏览文件
操作

Merge branch 'master' of https://git.yfzx.zjtys.com.cn/cold-coffee/cxsfjx_project

上级 8d7322e5 33ce98c1
隐藏空白字符变更
内嵌 并排
正在显示 包含 392 行增加 和 63 行删除
src/layout/head.vue
浏览文件 @ da899d4a
......@@ -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/index.vue
浏览文件 @ da899d4a
......@@ -52,7 +52,7 @@ export default defineComponent({
data() {
return {
industryCardItems: [
{ label: "国防科技工业产值总量", value: "202" },
{ label: "国防科技工业产值总量", value: "1113.4" },
{
label: "国防科技工业产值总量增长率",
value: "19",
......
src/views/dataCenter/army/model/EconomicConstruct/index.vue
浏览文件 @ da899d4a
......@@ -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
浏览文件 @ da899d4a
<template>
<MapTitle text="承担军需品情况" />
<MapTitle text="承担军品情况" />
<el-row>
<el-col :span="8">
......@@ -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>
......@@ -22,8 +22,8 @@ import { Aim } from "@element-plus/icons";
// 国家增长率
const seriesCountryData = [
{
value: [820, 832, 901],
rate: [60, 70, 75,],
value: [107.32, 157.51, 172.11],
rate: ["", 42.17, 21.19,],
},
];
const xAxisCountry = ["2018", "2019", "2020","2021","2022",];
......@@ -35,11 +35,11 @@ const xAxisCity = [
"杭州",
"宁波",
"温州",
"胡洲",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衡州",
"衢州",
"舟山",
"台州",
"丽水",
......@@ -94,7 +94,7 @@ export default defineComponent({
type: "line",
stack: "Total",
itemStyle: {
color: "#4198ff",
color: "#fac858",
},
yAxisIndex: 1,
emphasis: {
......@@ -146,6 +146,8 @@ export default defineComponent({
{
type: "value",
name: "收入(亿元)",
min: 0,
max: 200,
},
{
type: "value",
......
src/views/dataCenter/army/model/Person/index.vue
浏览文件 @ da899d4a
......@@ -4,12 +4,12 @@
<div class="card-items">
<div class="item">
<span>入伍总人数</span>
<div class="value-des"><span>500</span>人</div>
<div class="value-des"><span>1470</span>人</div>
</div>
<div class="item">
<span>入伍总比列</span>
<div class="value-des"><span>5%</span></div>
<div class="value-des"><span>0.5%</span></div>
</div>
</div>
......@@ -24,18 +24,18 @@ import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
const seriesData = {
value: [30, 50, 80, 60, 89, 58, 75, 85, 62, 28, 25],
rate: [0.1, 0.5, 0.2, 0.3, 0.8, 0.6, 0.85, 0.12, 0.6, 0.3, 0.6],
value: [595, 173, 128, 74, 84, 47, 142, 39, 49, 100, 39],
rate: [0.5, 0.4, 0.5, 1, 0.5, 0.2, 0.6, 0.9, 0.8, 1, 0.6],
};
const xAxisCity = [
"杭州",
"宁波",
"温州",
"胡洲",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衡州",
"衢州",
"舟山",
"台州",
"丽水",
......@@ -110,7 +110,7 @@ export default defineComponent({
html += `<div class="person-echart ">
<span class=" title color_1">${params[0].data.label}</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>亿元
<span class="text text-color_1">${params[0].data.value}</span>人
</div>
<div class="person-echart">
<span class=" title color_2">${params[1].data.label}</span>
......@@ -133,6 +133,8 @@ export default defineComponent({
{
type: "value",
name: "入伍人数",
min: 0,
max: 700,
},
{
type: "value",
......
src/views/dataCenter/army/model/Science/index.vue
浏览文件 @ da899d4a
......@@ -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
浏览文件 @ da899d4a
......@@ -8,7 +8,7 @@
<el-col :span="12">
<IncomExtendLine
echartsId="incomExtend"
echartsTitle="全省军民协同创新平台情况"
echartsTitle="规模以上企业参与军民融合产业活动情况"
echartsDesText="主营业务收入趋势"
:cardItems="extendCardItems"
/>
......@@ -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() {
......@@ -59,14 +62,14 @@ export default defineComponent({
{ label: "国防科技工业产值总量", value: "1113.4" },
{
label: "国防科技工业产值总量增长率",
value: "19",
value: "22.8",
},
],
extendCardItems: [
{ label: "参与军民融合产业互动的规模以上企业主营收入", value: "3545.5" },
{ label: "参与军民融合产业互动的规模以上企业主营业务收入", value: "3545.5" },
{
label: "参与军民融合产业互动的规模以上企业主营收入增长率",
value: "19",
label: "参与军民融合产业互动的规模以上企业主营业务收入增长率",
value: "31.5",
},
],
};
......
src/views/dataCenter/industrial/model/BusinessIncome/index.vue
浏览文件 @ da899d4a
<template>
<MapTitle text="军民融合产业主营业务收入" />
<MapTitle text="军民融合产业各领域主营业务收入" />
<el-row>
<el-col :span="10">
......@@ -46,9 +46,15 @@ import * as echarts from "echarts";
import { Aim } from "@element-plus/icons";
const PIE_LIST = [
<<<<<<< HEAD
{ label: "数字军工（网络、人工智能）领域", value: 932.66 },
{ label: "高端装备领域", value:383.17 },
{ label: "核电（新能源领域）", value: 311.27 },
=======
{ label: "数字军工(网络、人工智能)领域", value: 932.66 },
{ label: "高端装备领域", value: 383.17 },
{ label: "核电(新能源领域)", value: 311.27 },
>>>>>>> 312068b28f312777423027b138514e4ac4bcc72e
{ label: "生物安全领域", value: 267.96 },
{ label: "航空航天领域", value: 269.18 },
{ label: "船舶与海洋装备领域", value: 84.22 },
......
src/views/dataCenter/industrial/model/Industrial/index.vue 0 → 100644
浏览文件 @ da899d4a
<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/industrial/model/TargetBar/index.vue
浏览文件 @ da899d4a
......@@ -39,11 +39,11 @@ const xAxisValue = [
"杭州",
"宁波",
"温州",
"胡洲",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衡州",
"衢州",
"舟山",
"台州",
"丽水",
......
src/views/dataCenter/map/index.vue
浏览文件 @ da899d4a
......@@ -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
浏览文件 @ da899d4a
......@@ -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">
......@@ -21,14 +21,14 @@
<div class="item-row">
<span class="font-size14 color-666">增长率</span>
<el-col class="font-size20 color-pramiry">30% </el-col>
<el-col class="font-size20 color-pramiry">31.5% </el-col>
</div>
<div class="item-row">
<span class="font-size14 color-666">主营业务收入</span>
<el-col class="font-size20 color-pramiry"
>30 <span class="font-size12 color-999">亿元</span>
>3545.5 <span class="font-size12 color-999">亿元</span>
</el-col>
</div>
</el-row>
......@@ -45,14 +45,14 @@
<div class="item-row">
<span class="font-size14 color-666">增长率</span>
<el-col class="font-size20 color-pramiry">30% </el-col>
<el-col class="font-size20 color-pramiry">22.8% </el-col>
</div>
<div class="item-row">
<span class="font-size14 color-666">产值</span>
<el-col class="font-size20 color-pramiry"
>30 <span class="font-size12 color-999">亿元</span>
>1113.4 <span class="font-size12 color-999">亿元</span>
</el-col>
</div>
</el-row>
......
src/views/dataCenter/map/model/CardList/strongArmy.vue
浏览文件 @ da899d4a
......@@ -50,17 +50,17 @@
>国防科技工业军品收入</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>
<el-row class="item-bg">
<el-col class="padding0-8 font-size14 color-666"
>民口单位军需品收入</el-col
>民口单位军品收入</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
浏览文件 @ da899d4a
......@@ -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/Income/index.vue
浏览文件 @ da899d4a
......@@ -10,8 +10,8 @@ import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
enum Echart_color_Enum {
level_1 = "#4198ff",
level_2 = "#4f5d81",
level_1 = "#fac858",
level_2 = "#4198ff",
}
const seriesData = [
......@@ -19,15 +19,15 @@ const seriesData = [
name: "国防科工军品收入",
type: "level_1",
echartType: "bar",
growthRate: [80, 85, 95, 65, 85, 70, 85],
barValue: [1820, 1332, 2045, 1852],
growthRate: ["", 42.17, 21.19],
barValue: [107.32, 157.51, 172.11],
},
{
name: "民口单位军品收入",
type: "level_2",
echartType: "bar",
barValue: [1232, 1264, 2661, 1616],
growthRate: [50, 60, 70, 80, 80, 60, 85],
barValue: [71.93, 117.94, 139.15],
growthRate: ["",60,80],
},
];
......@@ -98,7 +98,7 @@ export default defineComponent({
html += `<div class="tooltip-income">
<span class="title">${item.seriesName}</span>
<div class="row-item">
<div>金额 <p><span class="${data.class}">${data.value}</span>万元</p></div>
<div>金额 <p><span class="${data.class}">${data.value}</span>亿元</p></div>
<div>增长率 <p><span class="${data.class}">${data.rate}%</span></p></div>
</div>
</div>`;
......@@ -119,9 +119,9 @@ export default defineComponent({
yAxis: [
{
type: "value",
name: "万元",
min: 1000,
max: 5000,
name: "亿元",
min: 0,
max: 200,
},
{
type: "value",
......
src/views/dataCenter/map/model/InvestmentProgress/index.vue
浏览文件 @ da899d4a
<template>
<MapTitle text='各市"千百十"项目投资金额及进度情况(截至第二季度)' />
<MapTitle text='各市"千百十"项目投资金额及进度情况' />
<div id="InvestmentProgress" class="investment-progress"></div>
</template>
<script lang="ts">
......@@ -24,11 +24,11 @@ const xAxisValue = [
"杭州",
"宁波",
"温州",
"胡洲",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衡州",
"衢州",
"舟山",
"台州",
"丽水",
......@@ -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
浏览文件 @ da899d4a
<template>
<MapTitle
text="全省军民融合创新示范绩效评价情况(截至第二季度)"
text="全省军民融合创新示范绩效评价情况"
:detailsHandle="detailsHandle"
/>
<div id="performanceBar" class="performance-bar"></div>
......
src/views/dataCenter/map/model/RankList/index.vue
浏览文件 @ da899d4a
<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>
......@@ -221,6 +221,7 @@ export default defineComponent({
background-color: #e3f0ff !important;
color: #333;
font-weight: bold;
font-size: 14px;
}
</style>
<style lang="scss" scoped>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论