Skip to content

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

fix(数据替换): 融办办公数据替换分支

上级 df132593
隐藏空白字符变更
内嵌 并排
正在显示 包含 2207 行增加 和 287 行删除
src/layout/head.vue
浏览文件 @ e60c72d9
......@@ -41,32 +41,49 @@
</el-row>
<!-- 行动轨迹记录 -->
<div v-if="curRouteHistoy.length > 0" class="proceed-record">
<el-row class="pointer" @click="$router.go(-1)" align="middle">
<el-icon><ArrowLeftBold /></el-icon>
返回
<el-divider direction="vertical"></el-divider>
</el-row>
<el-row>
<div
v-for="(item, index) in curRouteHistoy"
:key="item"
class="proceed-item"
:class="{
'lignht-color': index === curRouteHistoy.length - 1,
}"
@click="toPage(item)"
>
<el-icon
v-if="index > 0"
:color="index === curRouteHistoy.length - 1 ? '#409EFC' : ''"
><CaretRight
/></el-icon>
{{ item.label }}
<el-row v-if="curRouteHistoy.length > 0" class="proceed-record">
<el-col class="nav-history" :span="18">
<el-row class="pointer" @click="$router.go(-1)" align="middle">
<el-icon><ArrowLeftBold /></el-icon>
返回
<el-divider direction="vertical"></el-divider>
</el-row>
<el-col class="nav-history-item" :span="18">
<div
v-for="(item, index) in curRouteHistoy"
:key="item"
class="proceed-item"
:class="{
'lignht-color': index === curRouteHistoy.length - 1,
}"
@click="toPage(item)"
>
<el-icon
v-if="index > 0"
:color="index === curRouteHistoy.length - 1 ? '#409EFC' : ''"
><CaretRight
/></el-icon>
{{ item.label }}
</div>
</el-col>
</el-col>
<!-- 年度 -->
<el-col class="year-items">
<div class="years" align="middle">
<span
v-for="(item, index) in years"
:key="item"
:class="{
active: index === curYearIndex,
}"
@click="yearHandle(index)"
>{{ item }}年</span
>
</div>
</el-row>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
......@@ -90,6 +107,8 @@ export default defineComponent({
activeIndex: 0,
secondIndex: 0,
curRouteHistoy: [],
years: [2019, 2020, "2021上半"],
curYearIndex: 2,
};
},
created() {},
......@@ -125,6 +144,9 @@ export default defineComponent({
},
},
methods: {
yearHandle(index: number) {
this.curYearIndex = index;
},
navClick(item: {}, index: number) {
// const { link, children = [] } = item;
// this.activeIndex = index;
......@@ -145,10 +167,10 @@ export default defineComponent({
});
</script>
<style lang="scss" scoped>
.pointer{
.pointer {
cursor: pointer;
&:hover{
color: #4198ff
&:hover {
color: #4198ff;
}
}
.app-head-warpper {
......@@ -213,27 +235,76 @@ export default defineComponent({
// 行动轨迹记录
.proceed-record {
margin-bottom: 20px;
padding: 0 20px;
background: #fff;
// padding: 0 20px;
border-radius: 5px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
font-size: 14px;
height: 40px;
color: #999;
.proceed-item {
color: #999;
.nav-history {
padding-left: 10px;
width: 100%;
background: #fff;
display: flex;
align-items: center;
cursor: pointer;
margin-left: 5px;
cursor: pointer;
&:hover {
color: #4198ff;
height: 40px;
border-radius: 5px;
overflow: hidden;
box-shadow: 2px 2px 10px #eee;
.nav-history-item {
display: flex;
height: 100%;
.proceed-item {
color: #999;
display: flex;
align-items: center;
cursor: pointer;
margin-left: 5px;
cursor: pointer;
&:hover {
color: #4198ff;
}
.el-icon {
margin-right: 2px;
}
}
}
.el-icon {
margin-right: 2px;
}
.year-items {
display: flex;
width: 100%;
margin-left: 16px;
border-radius: 5px;
overflow: hidden;
flex: 1;
height: 40px;
background: #fff;
box-shadow: 2px 2px 10px #eee;
.years {
display: flex;
align-items: center;
height: 40px;
flex: 1;
overflow: hidden;
span {
width: 100%;
display: flex;
align-items: center;
padding: 0 12px;
font-size: 12px;
height: inherit;
color: #949494;
justify-content: center;
cursor: pointer;
}
.active {
background-color: #4198ff;
color: #fff;
}
}
}
......
src/route/dataCenter.ts
浏览文件 @ e60c72d9
......@@ -6,10 +6,10 @@ export enum DataCenterRouter {
DATA_MAP = "/dataCenter/map",
DATA_INDUSTRIAL = "/dataCenter/industrial",
DATA_ARMY = "/dataCenter/army",
INNOVATION="/dataCenter/innovation"
INNOVATION="/dataCenter/innovation",
ConctructSystem="/dataCenter/conctructSystem"
}
export default [
{
path: DataCenterRouter.DATA_CENTER,
......@@ -63,6 +63,19 @@ export default [
label: "军民协同创新",
},
component: () => import("@/views/dataCenter/innovation/index.vue")
},
{
path: DataCenterRouter.ConctructSystem,
name: "ConctructSystem",
meta: {
person: {
path: DataCenterRouter.DATA_CENTER,
name: "DataCenter",
label: "数据中心",
},
label: "五大建设体系",
},
component: () => import("@/views/dataCenter/conctructSystem/index.vue")
}
],
......
src/views/dataCenter/ConctructSystem/index.vue 0 → 100644
浏览文件 @ e60c72d9
<template>
<el-row class="footer-warpper" :gutter="16">
<el-col class="map-left" :span="8">
<div class="business-extend footer-item card-item">
<Outline />
</div>
</el-col>
<el-col class="map-right" :span="16">
<div class="footer-item card-item">
<Munitions />
</div>
</el-col>
</el-row>
<!-- foot -->
<el-row class="map-warpper" :gutter="16">
<el-col class="map-left" :span="8">
<div class="footer-item card-item">
<Platform />
</div>
</el-col>
<el-col class="map-right" :span="16">
<el-row :gutter="16">
<el-col :span="12">
<div class="economic-construct card-item">
<ScientificInvestment />
</div>
</el-col>
<el-col :span="12">
<div class="card-item">
<MapTitle text="工作运行与政策制度体系" />
<div class="card-item-xbox" v-for="(citys,idx) in city" :key="idx">
<div class="xbox-tit">{{citys.tit}}</div>
<div class="xbox-content user_line">
<div class="Progress">
<p>{{citys.municipal}}</p>
<el-progress type="circle" :percentage="citys.municipalnum" :width="iswidth"></el-progress>
</div>
<div class="Progress">
<p>{{citys.county}}</p>
<el-progress
type="circle"
:percentage="citys.countynum"
color="#634cf0"
:width="iswidth"
></el-progress>
</div>
</div>
</div>
<!-- <div class="Coverage">
<div class="Coverage_left user_line" >
<div class="Coverage_text">{{ citys.tit }}</div>
<div class="Progress">
<el-progress type="circle" :percentage="citys.num" :width="iswidth"></el-progress>
</div>
</div>
</div>-->
<!-- <Industrial
echartsId="technologyInfo"
echartsTitle="工作运行与政策制度体系"
:cardItems="industryCardItems"
/>-->
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Platform from "./model/Platform/index.vue";
import Outline from "./model/Outline/index.vue";
import Science from "./model/Science/index.vue";
import Munitions from "./model/Munitions/index.vue";
import ScientificInvestment from "./model/ScientificInvestment/index.vue";
import MapTitle from "@/components/mapTitle/index.vue";
// import Industrial from "./model/Industrial/index.vue";
/**
* 五大体系建设
*/
export default defineComponent({
components: {
Platform,
Outline,
Science,
Munitions,
ScientificInvestment,
// Industrial,
MapTitle,
},
setup() {},
data() {
return {
iswidth: 72,
industryCardItems: [
{ label: "国家部委、军委机关批复立项项目", value: "1113", unit: "个" },
{
label: "省直部门新认定的领跑技术(产品)",
value: "19",
unit: "个",
},
],
city: [
{
tit: "编制JMRH发展“十四五”规划进展",
municipal: "市级",
county: "区县",
municipalnum: 78,
countynum: 76,
},
{
tit: "今年以来制定涉及JMRH发展政策情况",
municipal: "市级",
county: "区县",
municipalnum: 77,
countynum: 75,
},
],
};
},
});
</script>
<style lang="scss" scoped>
::v-deep .Progress .el-progress__text {
position: relative;
top: -20px;
left: 65px;
font-size: 18px;
color: #4198ff;
}
.card-item {
background: #fff;
border-radius: 5px;
padding: 15px 20px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
box-shadow: 2px 2px 10px #eee;
flex: 1;
height: 100%;
box-sizing: border-box;
.card-item-xbox {
// border: 1px solid;
margin: 15px 0;
padding: 8px 15px;
font-size: 14px;
color: rgba(65, 152, 255, 1);
.xbox-tit {
margin-bottom: 8px;
}
}
.xbox-content {
width: 546px;
height: 150px;
// padding: 0px 60px;
box-sizing: border-box;
background-color: #f8f9fb;
border-radius: 4px;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 4px;
.Progress {
p {
color: #666666;
position: relative;
left: 80px;
top: 20px;
font-size: 14px;
letter-spacing: 0.5em;
}
}
}
.user_line {
&:last-of-type {
position: relative;
&::before {
position: absolute;
content: " ";
top: 43px;
left: 53%;
height: 50%;
width: 1px;
border-right: 1px dashed rgba(23, 129, 223, 0.2);
}
}
}
}
.map-warpper {
box-sizing: border-box;
.economic-construct {
flex: 1;
}
.map-right {
.card-item {
flex: 1;
}
}
}
.footer-warpper {
margin-bottom: 20px;
}
</style>
src/views/dataCenter/ConctructSystem/model/Industrial/index.vue 0 → 100644
浏览文件 @ e60c72d9
<template>
<div class="industrial">
<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
>{{item.unit }}
</div>
</div>
</div>
<div class="text">{{ echartsDesText }}</div>
</div>
<div :id="echartsId" class="incom-echarts-line"></div>
</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",
color: "#4198ff",
barValue: [87, 137, 15, 71, 120, 65, 72, 14, 80, 20, 80],
},
{
name: "省直部门新认定的领跑技术(产品)",
type: "level_2",
echartType: "bar",
color: "#fac858",
barValue: [187, 37, 115, 91, 180, 65, 32, 80, 89, 50, 80],
},
];
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: item.color,
},
barWidth: 12,
data: item.barValue.map((barItem, barIndex) => {
return {
value: barItem,
label: item.name,
};
}),
};
});
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: "数量(个)",
},
xAxis: {
type: "category",
data: xAxisValue,
},
series: [...seriesBarList],
};
},
},
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: 200px;
}
.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: #fac858;
}
.industry-tooltip-des .color_1::before {
background: #4198ff;
}
.industry-tooltip-des .color_2::before {
background: #fac858;
}
</style>
<style lang="scss" scoped>
.industrial {
height: 100%;
.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/ConctructSystem/model/Munitions/index.vue 0 → 100644
浏览文件 @ e60c72d9
<template>
<div class="enterprises-institutions">
<MapTitle text="召开融委全体会议情况" />
<div class="meeting">
<div>今年以来召开融委全体会议次数</div>
<div class="frequency">
{{shu}}
<span class="second">次</span>
</div>
</div>
<el-row class="investment">
<!-- <el-col class="card-list" :span="6">
<div class="card-item" v-for="item in cards" :key="item.label">
<p>{{ item.label }}</p>
<div>
{{ item.value }}<span class="unit">{{ item.unit }}</span>
</div>
</div>
</el-col>-->
<el-col class="city-echarts">
<div class="title2X">各市融委全体会议召开次数</div>
<div id="enterprises" class="echart-item"></div>
</el-col>
</el-row>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import { Aim } from "@element-plus/icons";
// 城市增长率
const xAxisCity = [
"杭州",
"宁波",
"温州",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
];
const cityData = {
value: [40, 40.40, 40, 40, 40, 40, 40, 40, 40, 40, 40],
};
/**
* 承担军需品情况
*/
export default defineComponent({
components: {
MapTitle,
Aim,
},
setup() {},
data() {
return {
countryEcharts: null,
shu: 43,
enterprises: null,
cards: [
{
label: "全省“民参军”企事业单位军品科研经费支出总额",
value: "284",
unit: "40次",
},
{
label: "全省“民参军”企事业单位R & D",
value: "5%",
unit: "",
},
],
};
},
mounted() {
this.initEcharts();
},
computed: {
optionCity() {
const seriesBar = {
type: "bar",
itemStyle: {
color: "#4198ff",
},
barWidth: 20,
data: cityData.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
};
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: (params) => {
let html = ``;
html += `<div class="munition-echart ">
<span class=" title color_1">${params[0].axisValue}市</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>次
</div>
`;
return html;
},
},
legend: {},
grid: {
top: "10%",
left: "0.8%",
right: "2%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
name: "数量(次)",
min: 0,
max: 50,
},
xAxis: {
type: "category",
data: xAxisCity,
},
series: [seriesBar],
};
},
},
methods: {
initEcharts() {
this.initCityEcharts();
},
initCityEcharts() {
const dom = document.getElementById("enterprises");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionCity);
this.enterprises = mapEcharts;
},
},
unmounted() {
if (this.enterprises) {
this.enterprises.dispose();
this.enterprises = null;
}
},
});
</script>
<style>
.munition-echart {
width: 110px;
}
.munition-echart .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.munition-echart .title {
padding-left: 10px;
font-weight: 600;
font-size: 12px;
color: #666;
position: relative;
}
.munition-echart .title::before {
position: absolute;
top: 5px;
left: 0;
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
}
.munition-echart .text {
padding-left: 20px;
margin-bottom: 20px;
}
.munition-echart .text:last-of-type {
margin: 0;
}
.munition-echart .text-color_1 {
color: #4198ff;
}
.munition-echart .text-color_2 {
color: #eca933;
}
.munition-echart .color_1::before {
background: #4198ff;
}
.munition-echart .color_2::before {
background: #eca933;
}
/* 次数 */
.meeting {
height: 50px;
line-height: 50px;
border-radius: 4px;
color: #666666;
background: rgba(248, 249, 251, 1);
display: flex;
justify-content: space-between;
padding: 0 10px 0 14px;
box-sizing: border-box;
margin-top: 10px;
}
.frequency {
color: rgba(65, 152, 255, 1);
font-weight: 500;
}
.second {
color: #666666;
font-size: 12px;
font-weight: normal;
}
</style>
<style lang="scss" scoped>
.enterprises-institutions {
height: 100%;
.investment {
.echart-item {
flex: 1;
height: 300px;
box-sizing: border-box;
margin-top: 10px;
}
.card-list {
// display: flex;
// flex-direction: column;
// padding: 20px 20px 20px 0;
.card-item {
flex: 1;
box-sizing: border-box;
margin-bottom: 15px;
padding: 20px;
background: #f8f9fb;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 5%;
&:last-of-type {
margin-bottom: 0;
}
p {
font-size: 14px;
color: #333;
margin-bottom: 10px;
}
div {
color: #4198ff;
font-size: 20px;
}
.unit {
color: #999;
font-size: 12px;
}
}
}
.title2X {
margin-top: 15px;
font-size: 16px;
color: #4198ff;
padding-left: 5px;
}
}
}
</style>
src/views/dataCenter/innovation/model/Person/index.vue → src/views/dataCenter/ConctructSystem/model/Outline/index.vue
浏览文件 @ e60c72d9
<template>
<div class="synergy-innovation">
<MapTitle text="军民协同创新总览" />
<MapTitle text="五大体系建设总览" />
<div class="describes">
<div class="text">各市军民协同创新指标情况</div>
<el-row class="" justify="space-between">
<div class="text">各市五大体系建设指标情况</div>
<!-- <el-row class="" justify="space-between">
<div class="years" align="middle">
<span
v-for="(item, index) in years"
......@@ -15,7 +15,7 @@
>{{ item }}年</span
>
</div>
</el-row>
</el-row> -->
</div>
<div id="synergyInnovation" class="line"></div>
......@@ -26,7 +26,7 @@ import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
const SeriesData = [25, 27, 18, 22, 28, 24, 19, 20, 21, 22, 19];
const SeriesData = [250, 170, 190, 145, 128, 194, 160, 210, 150, 300, 160];
const xAxisValue = [
"杭州",
"宁波",
......@@ -42,7 +42,7 @@ const xAxisValue = [
];
/**
* 军民协同创新总览
* 五大体系建设总览
*/
export default defineComponent({
props: {},
......@@ -68,7 +68,7 @@ export default defineComponent({
axisPointer: {
type: "shadow",
},
textStyle: {},
textStyle: {} ,
className: "target-bar-tooltip",
formatter:
"<span class='title'>{b0}市</span>: <br /> <span class='bar-text'>{c0}</span> 分",
......@@ -77,12 +77,13 @@ export default defineComponent({
grid: {
left: "-5%",
right: "5%",
bottom: "5%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
show: false,
max:300
},
xAxis: {
type: "category",
......@@ -97,6 +98,7 @@ export default defineComponent({
label: {
show: true,
position: "top",
formatter:"{c} 分"
},
barWidth: 20,
data: SeriesData,
......@@ -134,13 +136,14 @@ export default defineComponent({
padding-left: 10px;
color: #4198ff;
}
</style>
<style lang="scss" scoped>
.synergy-innovation {
.line {
flex: 1;
height: 250px;
height: 360px;
box-sizing: border-box;
}
.describes {
......
src/views/dataCenter/ConctructSystem/model/Platform/index.vue 0 → 100644
浏览文件 @ e60c72d9
<template>
<div class="synergy-innovation-platform">
<MapTitle text="融办主任（市县领导兼）主持召开主任会议情况" />
<div class="echarts-search">
<div class="card-items">
<div class="item">
<span>今年以来融办主任（市县领导兼）主持召开主任会议次数</span>
<div class="value-des">
<span>112</span>次
</div>
</div>
<!-- <div class="item">
<span>协同创新示范平台</span>
<div class="value-des">
<span>66</span>个
</div>
</div>-->
</div>
<!-- <div class="title">协同创新平台投入研发经费</div> -->
</div>
<div id="TargetBar" class="target-bar"></div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import { Aim } from "@element-plus/icons";
const xAxisCity = [
"杭州",
"宁波",
"温州",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
];
const cityData = {
value: [225, 160, 170, 140, 145, 75, 125, 100, 70, 40, 60],
};
/**
* 全省军民协同创新平台情况——折线图
*/
export default defineComponent({
components: {
MapTitle,
Aim,
},
setup() {},
data() {
return {
countryEcharts: null,
TargetBar: null,
};
},
mounted() {
this.initEcharts();
},
computed: {
optionCity() {
const seriesBar = {
type: "bar",
itemStyle: {
color: "#4198ff",
},
barWidth: 20,
data: cityData.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
};
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: (params) => {
let html = ``;
html += `<div class="munition-echart ">
<span class=" title color_1">${params[0].axisValue}市</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>次
</div>
`;
return html;
},
},
legend: {},
grid: {
top: "10%",
left: "5%",
right: "2%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
name: "数量(次)",
min: 0,
max: 250,
},
xAxis: {
type: "category",
data: xAxisCity,
},
series: [seriesBar],
};
},
},
methods: {
initEcharts() {
this.initCityEcharts();
},
initCityEcharts() {
const dom = document.getElementById("TargetBar");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionCity);
this.TargetBar = mapEcharts;
},
},
unmounted() {
if (this.TargetBar) {
this.TargetBar.dispose();
this.TargetBar = null;
}
},
});
</script>
<style lang="scss" scoped>
.synergy-innovation-platform {
height: 100%;
.echarts-search {
padding-left: 10px;
.title {
color: #4198ff;
margin: 12px 0;
font-size: 16px;
}
.card-items {
margin: 15px 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
.item {
flex: 1;
padding: 8px 15px;
margin-right: 15px;
background: #f8f9fb;
border-radius: 5px;
font-size: 14px;
color: #333;
display: flex;
align-items: center;
justify-content: space-between;
&:last-of-type {
margin-right: 0;
}
.value-des {
font-size: 12px;
color: #999;
display: flex;
align-items: center;
span {
font-size: 20px;
margin-right: 5px;
color: #4198ff;
}
}
}
}
}
.target-bar {
flex: 1;
height: calc(100% - 130px);
box-sizing: border-box;
margin-top: 10px;
}
}
</style>
src/views/dataCenter/ConctructSystem/model/Science/index.vue 0 → 100644
浏览文件 @ e60c72d9
<template>
<MapTitle text="民口单位服务武器装备科研生产情况" />
<el-row class="science-info" justify="space-between">
<el-col :span="11">
<div class="card-item">
<span>民口单位军品收入</span>
<div>53.35<span>亿元</span></div>
</div>
<div class="card-item">
<span>人均民口单位军品收入</span>
<div>90.56<span>元</span></div>
</div>
</el-col>
<el-col class="increase-rate" :span="12">
<div class="title">各市民口单位军品收入增长率</div>
<div class="rate-list">
<div class="rate-list-head rate-list-item">
<span>地区</span>
<span>增长率</span>
</div>
<el-scrollbar height="92px">
<div
class="rate-list-item"
v-for="(item, index) in seriesData.rate"
:key="index"
>
<span>{{ item.city }}</span>
<span class="rate-value">{{ item.increace }}%</span>
</div>
</el-scrollbar>
</div>
</el-col>
</el-row>
<div class="science-title">各市民口单位军品收入(亿元)</div>
<div id="incomDistribution" class="incom-distribution"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
const SeriesData = {
type: "level_1",
rate: [
{
city: "杭州",
value: 15.63,
increace: 69.53,
},
{
city: "宁波",
value: 7.42,
increace: 66,
},
{
city: "温州",
value: 1.23,
increace: 18.6,
},
{
city: "湖州",
value: 2.65,
increace: 79.1,
},
{
city: "嘉兴",
value: 6,
increace: 28.06,
},
{
city: "绍兴",
value: 12.5,
increace: 117,
},
{
city: "金华",
increace: 83,
value: 1.7,
},
{
city: "衢州",
increace: 13.2,
value: 0.86,
},
{
city: "舟山",
increace: -32,
value: 2.61,
},
{
city: "台州",
increace: 46.4,
value: 2.58,
},
{
city: "丽水",
increace: 150.7,
value: 0.17,
},
],
};
const xAxisValue = [
"杭州",
"宁波",
"温州",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
];
/**
* 民口单位服务武器装备科研生产情况——柱状图
*/
export default defineComponent({
components: {
MapTitle,
},
setup() {},
data() {
return {
seriesData: SeriesData,
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
computed: {
optionBar() {
const seriesLine = {
type: "line",
itemStyle: {
color: "#4198ff",
},
emphasis: {
focus: "series",
},
label: {
show: true,
position: "top",
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#4198ff",
},
{
offset: 1,
color: "#fff",
},
]),
},
data: SeriesData.rate,
};
return {
tooltip: {
trigger: "axis",
className: "science-echart",
formatter: (params) => {
let html = `<span class="name">${params[0].axisValue}市</span>`;
html += `<div class="science-echart ">
<span class=" title color_1">民口单位军品收入</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>亿元
</div>`;
return html;
},
},
legend: {},
grid: {
top: "5%",
left: "0%",
right: "5%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
show: false,
},
xAxis: {
type: "category",
data: xAxisValue,
},
series: [seriesLine],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById("incomDistribution");
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>
.science-echart {
width: 110px;
}
.science-echart .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.science-echart .title {
padding-left: 10px;
font-weight: 600;
font-size: 12px;
color: #666;
position: relative;
}
.science-echart .title::before {
position: absolute;
top: 5px;
left: 0;
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
}
.science-echart .text {
padding-left: 20px;
margin-bottom: 20px;
font-size: 20px;
}
.science-echart .text-color_1 {
color: #4198ff;
}
.science-echart .color_1::before {
background: #4198ff;
}
</style>
<style lang="scss" scoped>
.science-info {
margin-top: 15px;
height: 150px;
box-sizing: border-box;
.card-item {
color: #333;
padding: 8px 15px;
box-sizing: border-box;
background: #f8f9fb;
border-radius: 5px;
margin-bottom: 8px;
&:last-of-type {
margin-bottom: 0;
}
div {
color: #4198ff;
font-size: 20px;
display: flex;
align-items: center;
span {
margin-left: 10px;
font-size: 14px;
color: #999;
}
}
}
.increase-rate {
.title {
color: #4198ff;
margin-bottom: 5px;
}
.rate-list {
.rate-list-item {
padding: 5px 40px 5px 20px;
display: flex;
align-items: center;
font-size: 12px;
color: #666;
justify-content: space-between;
}
.rate-list-head {
background: #ddeaf8;
}
.el-scrollbar {
background: #f8f9fb;
}
.rate-value {
color: #4198ff;
}
}
}
}
.science-title {
color: #4198ff;
}
.incom-distribution {
flex: 1;
min-height: 150px;
height: calc(100% - 200px);
box-sizing: border-box;
margin-top: 10px;
}
</style>
src/views/dataCenter/ConctructSystem/model/ScientificInvestment/index.vue 0 → 100644
浏览文件 @ e60c72d9
<template>
<div class="scientific-research-input">
<MapTitle text="融办工作人员情况" />
<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>
<div id="pie" class="target-bar"></div>
<!-- <el-col :span="11">
<div class="list-item" v-for="(item, index) in pieList" :key="item.label">
<el-row align="middle">
<div class="square" :style="{ background: pieColor[`level_${index + 1}`] }"></div>
{{ item.label }}
</el-row>
<div class="pie-value">{{ item.value }}%</div>
</div>
</el-col>-->
</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_1",
};
const PIE_LIST = [
{ label: "专职", value: 142 },
{ label: "兼职", value: 125 },
];
const PieColor = {
level_1: "#4198ff",
level_2: "#6fdef7",
level_3: "#4198ff",
level_4: "#f4a746",
level_5: "#9daff9",
level_6: "#47d6ad",
};
/**
* 经济建设与国防密切相关的建设项目贯彻国防要求落实情况——柱状图
*/
export default defineComponent({
components: {
MapTitle,
},
setup() {},
data() {
return {
seriesData: SeriesData,
mapEcharts: null,
cirLeftCharts: null,
cirRightEchart: null,
cardItems: [{ label: "人员总数", value: "267" }],
pieList: PIE_LIST,
pieColor: PieColor,
};
},
mounted() {
this.initEcharts();
},
computed: {
optionBar() {
const pieData = PIE_LIST.map((item, index) => {
return {
value: item.value,
itemStyle: {
color: PieColor[`level_${index + 1}`],
},
tooltip: {
borderColor: "none",
className: "business-pie-tooltip",
formatter: `<div class="business-pie-tooltip">
<span class='title'>${item.label}</span>：
<br />
<div class='pie-text'>
<span>${item.value}</span>人
</div>
</div>`,
},
};
});
return {
tooltip: {
trigger: "item",
},
series: [
{
name: "Access From",
type: "pie",
radius: ["48%", "80%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: false,
fontSize: "20",
formatter: "营业额(万元)\n \n{c}",
},
},
labelLine: {
show: false,
},
data: pieData,
},
],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById("pie");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
},
},
unmounted() {
if (this.mapEcharts) {
this.mapEcharts.dispose();
this.mapEcharts = null;
}
},
});
</script>
<style>
.scientific-research-input .business-pie-tooltip .title {
color: #333;
font-weight: bold;
}
.scientific-research-input .business-pie-tooltip .pie-text {
padding-left: 10px;
margin-top: 5px;
font-size: 12px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.scientific-research-input .business-pie-tooltip .pie-text span {
color: #4198ff;
/* font-size: 20px; */
}
</style>
<style lang="scss" scoped>
.target-bar {
flex: 1;
height: calc(100% - 130px);
box-sizing: border-box;
margin-top: 10px;
}
.scientific-research-input {
height: 100%;
.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: 8px 15px;
margin-right: 15px;
background: #f8f9fb;
border-radius: 5px;
font-size: 14px;
color: #333;
display: flex;
align-items: center;
justify-content: space-between;
&: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;
}
}
.list-item {
display: flex;
justify-content: space-between;
margin: 0 15px 10px 0;
padding: 0px 15px;
border-radius: 5px;
.el-row {
font-size: 14px;
color: #333;
}
.pie-value {
margin-top: 5px;
padding-left: 20px;
font-size: 12px;
color: #999;
display: flex;
align-items: center;
color: #4198ff;
font-size: 20px;
}
.square {
width: 8px;
height: 8px;
margin-right: 5px;
}
}
.economic-construct {
flex: 1;
height: calc(100% - 0px);
box-sizing: border-box;
margin-top: 10px;
transform: scale(1.2);
}
}
</style>
src/views/dataCenter/army/model/StrongArmy/index.vue
浏览文件 @ e60c72d9
......@@ -3,29 +3,7 @@
<div class="echarts-search">
<div class="title">各市服务强军兴军创新指标情况</div>
<el-row class="" justify="space-between">
<div class="years" align="middle">
<span
v-for="(item, index) in years"
:key="item"
:class="{
active: index === curYearIndex,
}"
@click="yearHandle(index)"
>{{ item }}年</span
>
</div>
<!-- <el-select v-model="value" size="small" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select> -->
</el-row>
</div>
<div id="TargetBar" class="target-bar"></div>
......@@ -66,8 +44,6 @@ export default defineComponent({
{ label: "规模以上企业收入及增长率", value: 3 },
{ label: "国防科工产值", value: 4 },
],
years: [2019, 2020, "2021上半"],
curYearIndex: 2,
mapEcharts: null,
};
},
......@@ -126,9 +102,7 @@ export default defineComponent({
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
},
yearHandle(index: number) {
this.curYearIndex = index;
},
},
unmounted() {
if (!this.mapEcharts) {
......@@ -157,24 +131,7 @@ export default defineComponent({
margin: 12px 0;
font-size: 14px;
}
.years {
display: flex;
align-items: center;
background: #f4f6f9;
border-radius: 5px;
overflow: hidden;
span {
padding: 0 12px;
height: 32px;
line-height: 32px;
font-size: 12px;
color: #333;
}
.active {
background-color: #4198ff;
color: #fff;
}
}
}
.target-bar {
......
src/views/dataCenter/industrial/model/TargetBar/index.vue
浏览文件 @ e60c72d9
......@@ -3,29 +3,7 @@
<div class="echarts-search">
<div class="title">各市产业融合创新指标情况</div>
<el-row class="" justify="space-between">
<div class="years" align="middle">
<span
v-for="(item, index) in years"
:key="item"
:class="{
active: index === curYearIndex,
}"
@click="yearHandle(index)"
>{{ item }}年</span
>
</div>
<!-- <el-select v-model="value" size="small" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select> -->
</el-row>
</div>
<div id="TargetBar" class="target-bar"></div>
......@@ -66,8 +44,7 @@ export default defineComponent({
{ label: "规模以上企业收入及增长率", value: 3 },
{ label: "国防科工产值", value: 4 },
],
years: [2019, 2020, "2021上半"],
curYearIndex: 2,
mapEcharts: null,
};
},
......@@ -129,9 +106,7 @@ export default defineComponent({
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
},
yearHandle(index: number) {
this.curYearIndex = index;
},
},
unmounted() {
if (!this.mapEcharts) {
......@@ -160,24 +135,7 @@ export default defineComponent({
margin: 10px 0;
font-size: 14px;
}
.years {
display: flex;
align-items: center;
background: #f4f6f9;
border-radius: 5px;
overflow: hidden;
span {
padding: 0 12px;
height: 32px;
line-height: 32px;
font-size: 12px;
color: #333;
}
.active {
background-color: #4198ff;
color: #fff;
}
}
}
.target-bar {
......
src/views/dataCenter/innovation/index.vue
浏览文件 @ e60c72d9
......@@ -2,7 +2,7 @@
<el-row class="footer-warpper" :gutter="16">
<el-col class="map-left" :span="8">
<div class="business-extend footer-item card-item">
<Person />
<Outline />
</div>
</el-col>
......@@ -16,22 +16,47 @@
<!-- foot -->
<el-row class="map-warpper" :gutter="16">
<el-col class="map-left" :span="8">
<div class="footer-item card-item"><StrongArmy /></div>
<div class="footer-item card-item">
<Platform />
</div>
</el-col>
<el-col class="map-right" :span="16">
<el-row :gutter="16">
<el-col :span="12">
<div class="economic-construct card-item">
<EconomicConstruct />
<ScientificInvestment />
</div>
</el-col>
<el-col :span="12">
<div class="card-item">
<Industrial
<MapTitle text="领跑技术（产品）参军情况" />
<!-- <div class="meeting">
<div>省直部门新认定的领跑技术（产品）</div>
<div class="frequency">
{{shu}}
<span class="second">
<i class="el-icon-top"></i>
</span>
</div>
</div>-->
<div class="echarts-search">
<div class="card-items">
<div class="item">
<span>省直部门新认定的领跑技术（产品）</span>
<div class="value-des">
<span>{{shu}}</span>个
</div>
</div>
</div>
</div>
<div id="TargetBars" class="target-bar"></div>
<!-- <Industrial
echartsId="technologyInfo"
echartsTitle="领跑技术(产品)参军情况"
echartsTitle="领跑技术(产品)参军情况1"
:cardItems="industryCardItems"
/>
/>-->
</div>
</el-col>
</el-row>
......@@ -40,41 +65,163 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import StrongArmy from "./model/StrongArmy/index.vue";
import Person from "./model/Person/index.vue";
import Platform from "./model/Platform/index.vue";
import Outline from "./model/Outline/index.vue";
import Science from "./model/Science/index.vue";
import Munitions from "./model/Munitions/index.vue";
import EconomicConstruct from "./model/EconomicConstruct/index.vue";
import ScientificInvestment from "./model/ScientificInvestment/index.vue";
import Industrial from "./model/Industrial/index.vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import { Aim } from "@element-plus/icons";
const xAxisCity = [
"杭州",
"宁波",
"温州",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
];
const cityData = {
value: [225, 160, 170, 140, 145, 75, 125, 100, 70, 40, 60],
};
/**
* 军民协同创新
*/
export default defineComponent({
components: {
StrongArmy,
Person,
Platform,
Outline,
Science,
Munitions,
EconomicConstruct,
Industrial
ScientificInvestment,
Industrial,
MapTitle,
Aim,
},
setup() {},
data() {
return {
industryCardItems: [
{ label: "国家部委、军委机关批复立项项目", value: "1113",unit:"个" },
{
label: "省直部门新认定的领跑技术(产品)",
value: "19",
unit: "个"
},
],
countryEcharts: null,
shu: "206",
TargetBars: null,
};
},
mounted() {
this.initEcharts();
},
computed: {
optionCity() {
const seriesBar = {
type: "bar",
itemStyle: {
color: "#4198ff",
},
barWidth: 20,
data: cityData.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
};
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: (params) => {
let html = ``;
html += `<div class="munition-echart ">
<span class=" title color_1">${params[0].axisValue}市</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>个
</div>
`;
return html;
},
},
legend: {},
grid: {
top: "10%",
left: "5%",
right: "2%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
name: "数量(个)",
min: 0,
max: 250,
},
xAxis: {
type: "category",
data: xAxisCity,
},
series: [seriesBar],
};
},
},
methods: {
initEcharts() {
this.initCityEcharts();
},
initCityEcharts() {
const dom = document.getElementById("TargetBars");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionCity);
this.TargetBars = mapEcharts;
},
},
unmounted() {
if (this.TargetBars) {
this.TargetBars.dispose();
this.TargetBars = null;
}
},
});
</script>
<style lang="scss" scoped>
// .meeting {
// height: 50px;
// line-height: 50px;
// border-radius: 4px;
// color: #666666;
// background: rgba(248, 249, 251, 1);
// display: flex;
// justify-content: space-between;
// padding: 0 10px 0 10px;
// box-sizing: border-box;
// margin-top: 10px;
// }
.target-bar {
flex: 1;
height: calc(100% - 100px);
box-sizing: border-box;
margin-top: 10px;
}
// .frequency {
// color: rgba(65, 152, 255, 1);
// font-weight: 500;
// }
// .second {
// color: #666666;
// font-size: 12px;
// font-weight: normal;
// }
.card-item {
background: #fff;
border-radius: 5px;
......@@ -86,6 +233,47 @@ export default defineComponent({
flex: 1;
height: 100%;
box-sizing: border-box;
.echarts-search {
padding-left: 10px;
.title {
color: #4198ff;
margin: 12px 0;
font-size: 16px;
}
.card-items {
margin: 15px 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
.item {
flex: 1;
padding: 8px 15px;
margin-right: 15px;
background: #f8f9fb;
border-radius: 5px;
font-size: 14px;
color: #333;
display: flex;
align-items: center;
justify-content: space-between;
&:last-of-type {
margin-right: 0;
}
.value-des {
font-size: 12px;
color: #999;
display: flex;
align-items: center;
span {
font-size: 20px;
margin-right: 5px;
color: #4198ff;
}
}
}
}
}
}
.map-warpper {
......
src/views/dataCenter/innovation/model/Munitions/index.vue
浏览文件 @ e60c72d9
<template>
<div class="enterprises-institutions">
<MapTitle text="“民参军”企事业单位研发投入情况" />
<div class="meeting">
<div>全省“民参军”企事业单位军品科研经费支出总额</div>
<div class="frequency">
{{shu}}
<span class="second">亿元</span>
</div>
</div>
<el-row class="investment">
<el-col class="card-list" :span="6">
<!-- <el-col class="card-list" :span="6">
<div class="card-item" v-for="item in cards" :key="item.label">
<p>{{ item.label }}</p>
<div>
{{ item.value }}<span class="unit">{{ item.unit }}</span>
</div>
</div>
</el-col>
<el-col class="city-echarts" :span="18">
</el-col>-->
<el-col class="city-echarts">
<div class="title2X">“民参军”企事业单位军品科研经费分布情况</div>
<div id="enterprises" class="echart-item"></div>
</el-col>
......@@ -40,7 +45,7 @@ const xAxisCity = [
"丽水",
];
const cityData = {
value: [32.68, 7.42, 1.36, 3.47, 19.56, 12.5, 1.7, 0.86, 2.61, 2.58, 0.17],
value: [404, 404, 400, 400, 400, 400, 400, 400, 400, 400, 400],
};
/**
......@@ -55,13 +60,13 @@ export default defineComponent({
data() {
return {
countryEcharts: null,
shu: 434,
enterprises: null,
cards: [
{
label: "全省“民参军”企事业单位军品科研经费支出总额",
value: "284",
unit: "亿元",
unit: "40次",
},
{
label: "全省“民参军”企事业单位R & D",
......@@ -104,7 +109,7 @@ export default defineComponent({
html += `<div class="munition-echart ">
<span class=" title color_1">${params[0].axisValue}市</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>
`;
......@@ -121,9 +126,9 @@ export default defineComponent({
},
yAxis: {
type: "value",
name: "金额(亿元)",
name: "数量(次)",
min: 0,
max: 50,
max: 500,
},
xAxis: {
type: "category",
......@@ -201,13 +206,34 @@ export default defineComponent({
.munition-echart .color_2::before {
background: #eca933;
}
/* 次数 */
.meeting {
height: 50px;
line-height: 50px;
border-radius: 4px;
color: #666666;
background: rgba(248, 249, 251, 1);
display: flex;
justify-content: space-between;
padding: 0 10px 0 10px;
box-sizing: border-box;
margin-top: 10px;
}
.frequency {
color: rgba(65, 152, 255, 1);
font-weight: 500;
}
.second {
color: #666666;
font-size: 12px;
font-weight: normal;
}
</style>
<style lang="scss" scoped>
.enterprises-institutions {
height: 100%;
.investment {
.echart-item {
flex: 1;
......@@ -216,9 +242,9 @@ export default defineComponent({
margin-top: 10px;
}
.card-list {
display: flex;
flex-direction: column;
padding: 20px 20px 20px 0;
// display: flex;
// flex-direction: column;
// padding: 20px 20px 20px 0;
.card-item {
flex: 1;
box-sizing: border-box;
......
src/views/dataCenter/innovation/model/Outline/index.vue 0 → 100644
浏览文件 @ e60c72d9
<template>
<div class="synergy-innovation">
<MapTitle text="军民协同创新总览" />
<div class="describes">
<div class="text">各市军民协同创新指标情况</div>
</div>
<el-row>
<el-button>2019年</el-button>
<el-button>2020年</el-button>
<el-button type="primary">2021年上半年</el-button>
</el-row>
<div id="synergyInnovation" class="line"></div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
const SeriesData = [25, 27, 18, 22, 28, 24, 19, 20, 21, 22, 19];
const xAxisValue = [
"杭州",
"宁波",
"温州",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
];
/**
* 军民协同创新总览
*/
export default defineComponent({
props: {},
components: {
MapTitle,
},
setup() {},
data() {
return {
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
computed: {
optionBar() {
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
textStyle: {},
className: "target-bar-tooltip",
formatter:
"<span class='title'>{b0}市</span>: <br /> <span class='bar-text'>{c0}</span> 分",
},
legend: {},
grid: {
left: "-5%",
right: "5%",
bottom: "5%",
containLabel: true,
},
yAxis: {
type: "value",
show: false,
},
xAxis: {
type: "category",
data: xAxisValue,
},
series: [
{
type: "bar",
itemStyle: {
color: "#4198ff",
},
label: {
show: true,
position: "top",
},
barWidth: 20,
data: SeriesData,
},
],
};
},
},
methods: {
yearHandle(index: number) {
this.curYearIndex = index;
},
initEcharts() {
const dom = document.getElementById("synergyInnovation");
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>
.target-bar-tooltip .title {
color: #333;
font-weight: bold;
}
.target-bar-tooltip .bar-text {
padding-left: 10px;
color: #4198ff;
}
</style>
<style lang="scss" scoped>
.synergy-innovation {
.line {
flex: 1;
height: 250px;
box-sizing: border-box;
}
.btn {
width: 300px;
height: 153px;
border: 1px solid;
}
.describes {
margin: 0 10px 5px 0;
box-sizing: border-box;
.text {
color: #4198ff;
margin: 10px 0;
font-size: 16px;
}
}
}
</style>
src/views/dataCenter/innovation/model/StrongArmy/index.vue → src/views/dataCenter/innovation/model/Platform/index.vue
浏览文件 @ e60c72d9
......@@ -6,16 +6,20 @@
<div class="card-items">
<div class="item">
<span>协同创新平台</span>
<div class="value-des"><span>80</span>个</div>
<div class="value-des">
<span>139</span>个
</div>
</div>
<div class="item">
<!-- <div class="item">
<span>协同创新示范平台</span>
<div class="value-des"><span>66</span>个</div>
</div>
<div class="value-des">
<span>66</span>个
</div>
</div>-->
</div>
<div class="title">协同创新平台投入研发经费</div>
<!-- <div class="title">协同创新平台投入研发经费</div> -->
</div>
<div id="TargetBar" class="target-bar"></div>
......@@ -25,29 +29,23 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
const SeriesData = {
type: "level_1",
rate: [
{
value: 15.63,
},
{
value: 7.42,
},
{
value: 1.23,
},
{
value: 2.65,
},
],
};
const xAxisValue = [
"2018年",
"2019年",
"2020年",
"2021年",
import { Aim } from "@element-plus/icons";
const xAxisCity = [
"杭州",
"宁波",
"温州",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
];
const cityData = {
value: [225, 160, 170, 140, 145, 75, 125, 100, 70, 40, 60],
};
/**
* 全省军民协同创新平台情况——折线图
......@@ -55,105 +53,93 @@ const xAxisValue = [
export default defineComponent({
components: {
MapTitle,
Aim,
},
setup() {},
data() {
return {
value: 1,
options: [
{ label: "得分情况", value: 1 },
{ label: "军转民收入及增长率", value: 2 },
{ label: "规模以上企业收入及增长率", value: 3 },
{ label: "国防科工产值", value: 4 },
],
mapEcharts: null,
countryEcharts: null,
TargetBar: null,
};
},
mounted() {
this.initEcharts();
},
computed: {
optionBar() {
const seriesLine = {
type: "line",
optionCity() {
const seriesBar = {
type: "bar",
itemStyle: {
color: "#4198ff",
},
emphasis: {
focus: "series",
},
label: {
show: true,
position: "top",
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#4198ff",
},
{
offset: 1,
color: "#fff",
},
]),
},
barWidth: 20,
data: SeriesData.rate,
data: cityData.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
};
return {
tooltip: {
trigger: "axis",
className: "science-echart",
axisPointer: {
type: "shadow",
},
formatter: (params) => {
let html = `<span class="name">${params[0].axisValue}</span>`;
let html = ``;
html += `<div class="science-echart ">
<span class=" title color_1">项目投资额</span>
html += `<div class="munition-echart ">
<span class=" title color_1">${params[0].axisValue}市</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>万元
</div>`;
<span class="text text-color_1">${params[0].data.value}</span>个
</div>
`;
return html;
},
},
legend: {},
grid: {
top: "5%",
left: "0%",
right: "5%",
top: "10%",
left: "5%",
right: "2%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
name: "万元",
name: "数量(个)",
min: 0,
max: 250,
},
xAxis: {
type: "category",
data: xAxisValue,
data: xAxisCity,
},
series: [seriesLine],
series: [seriesBar],
};
},
},
methods: {
initEcharts() {
this.initCityEcharts();
},
initCityEcharts() {
const dom = document.getElementById("TargetBar");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
mapEcharts.setOption(this.optionCity);
this.TargetBar = mapEcharts;
},
},
unmounted() {
if (!this.mapEcharts) {
return;
if (this.TargetBar) {
this.TargetBar.dispose();
this.TargetBar = null;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</script>
......@@ -205,7 +191,7 @@ export default defineComponent({
.target-bar {
flex: 1;
height: calc(100% - 130px);
height: calc(100% - 94px);
box-sizing: border-box;
margin-top: 10px;
}
......
src/views/dataCenter/innovation/model/EconomicConstruct/index.vue → src/views/dataCenter/innovation/model/ScientificInvestment/index.vue
浏览文件 @ e60c72d9
......@@ -6,8 +6,8 @@
<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 ? "亿元" : "%" }}
<span>{{ item.value || "--" }}</span>
{{ index === 0 ? "亿元" : "" }}
</div>
</div>
</div>
......@@ -19,19 +19,16 @@
</el-col>
<el-col :span="11">
<div
class="list-item"
v-for="(item, index) in pieList"
:key="item.label"
>
<div class="list-item" v-for="(item, index) in pieList" :key="item.label">
<el-row align="middle">
<div
class="square"
:style="{ background: pieColor[`level_${index + 1}`] }"
></div>
<div class="square" :style="{ background: pieColor[`level_${index + 1}`] }"></div>
{{ item.label }}
</el-row>
<div class="pie-value">{{ item.value }}<span class="danwei">亿元</span></div>
<div class="pie-value">
{{ item.value }}
<span>亿元</span>
</div>
<!-- <span></span> -->
</div>
</el-col>
</el-row>
......@@ -97,20 +94,21 @@ const SeriesData = {
],
};
const PIE_LIST = [
{ label: "海洋领域", value: 25.17 },
{ label: "太空领域", value: 30.96 },
{ label: "网络领域", value: 20.18 },
{ label: "生物领域", value: 10.22 },
{ label: "新能源领域", value: 5.9 },
{ label: "人工智能领域", value: 12.24 },
{ label: "数字军工(网络、人工智能)", value: 25.17 },
{ label: "海洋", value: 20.18 },
{ label: "太空", value: 30.96 },
{ label: "生物", value: 10.22 },
{ label: "核电", value: 5.9 },
// { label: "人工智能领域", value: 12.24 },
];
const PieColor = {
level_1: "#fac858",
level_1: "#47d6ad",
level_2: "#6fdef7",
level_3: "#4198ff",
level_4: "#f4a746",
level_5: "#9daff9",
level_6: "#47d6ad",
level_6: "#fac858",
};
/**
......@@ -128,10 +126,10 @@ export default defineComponent({
cirLeftCharts: null,
cirRightEchart: null,
cardItems: [
{ label: "联合科研攻关投入金额", value: "1113.4" },
{ label: "联合科研攻关投入金额", value: "38.13" },
{
label: "联合科研攻关投入金额增长率",
value: "19",
value: "19%",
},
],
pieList: PIE_LIST,
......@@ -276,7 +274,7 @@ export default defineComponent({
display: flex;
justify-content: space-between;
margin: 0 15px 10px 0;
padding: 0px 15px;
// padding: 0px 15px;
border-radius: 5px;
.el-row {
font-size: 14px;
......@@ -291,10 +289,9 @@ export default defineComponent({
align-items: center;
color: #4198ff;
font-size: 20px;
.danwei{
span {
font-size: 12px;
margin-right: 5px;
color: #999;
color: rgba(153, 153, 153, 1);
}
}
.square {
......
src/views/dataCenter/map/model/CardList/industrial.vue
浏览文件 @ e60c72d9
......@@ -75,7 +75,6 @@ export default defineComponent({
},
methods: {
detailsHandle() {
console.log("--DataCenterRouter-sssss-", DataCenterRouter);
this.$router.push(DataCenterRouter.DATA_INDUSTRIAL);
},
},
......
src/views/dataCenter/map/model/CardList/systemConstruct.vue
浏览文件 @ e60c72d9
......@@ -68,6 +68,7 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import { Aim } from "@element-plus/icons";
import {DataCenterRouter} from "@/route/dataCenter"
export default defineComponent({
components: {
......@@ -76,7 +77,9 @@ export default defineComponent({
},
setup() {},
methods: {
detailsHandle() {},
detailsHandle() {
this.$router.push( DataCenterRouter.ConctructSystem)
},
},
});
</script>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论