Skip to content

C
cxsfjx_project_echarts
提交 4acfa9ff authored 作者: 胡园辉's avatar 胡园辉
浏览文件
操作

fix(五大体系页面修改)

上级 c130b9f6
显示空白字符变更
内嵌 并排
正在显示 包含 273 行增加 和 194 行删除
src/views/dataCenter/ConctructSystem/index.vue
浏览文件 @ 4acfa9ff
...@@ -16,7 +16,9 @@ ...@@ -16,7 +16,9 @@
<!-- foot --> <!-- foot -->
<el-row class="map-warpper" :gutter="16"> <el-row class="map-warpper" :gutter="16">
<el-col class="map-left" :span="8"> <el-col class="map-left" :span="8">
<div class="footer-item card-item"><Platform /></div> <div class="footer-item card-item">
<Platform />
</div>
</el-col> </el-col>
<el-col class="map-right" :span="16"> <el-col class="map-right" :span="16">
<el-row :gutter="16"> <el-row :gutter="16">
...@@ -27,11 +29,39 @@ ...@@ -27,11 +29,39 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="card-item"> <div class="card-item">
<Industrial <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" echartsId="technologyInfo"
echartsTitle="领跑技术(产品)参军情况" echartsTitle="工作运行与政策制度体系"
:cardItems="industryCardItems" :cardItems="industryCardItems"
/> />-->
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -45,7 +75,8 @@ import Outline from "./model/Outline/index.vue"; ...@@ -45,7 +75,8 @@ import Outline from "./model/Outline/index.vue";
import Science from "./model/Science/index.vue"; import Science from "./model/Science/index.vue";
import Munitions from "./model/Munitions/index.vue"; import Munitions from "./model/Munitions/index.vue";
import ScientificInvestment from "./model/ScientificInvestment/index.vue"; import ScientificInvestment from "./model/ScientificInvestment/index.vue";
import Industrial from "./model/Industrial/index.vue"; import MapTitle from "@/components/mapTitle/index.vue";
// import Industrial from "./model/Industrial/index.vue";
/** /**
* 五大体系建设 * 五大体系建设
*/ */
...@@ -57,17 +88,35 @@ export default defineComponent({ ...@@ -57,17 +88,35 @@ export default defineComponent({
Science, Science,
Munitions, Munitions,
ScientificInvestment, ScientificInvestment,
Industrial // Industrial,
MapTitle,
}, },
setup() {}, setup() {},
data() { data() {
return { return {
iswidth: 72,
industryCardItems: [ industryCardItems: [
{ label: "国家部委、军委机关批复立项项目", value: "1113",unit:"个" }, { label: "国家部委、军委机关批复立项项目", value: "1113", unit: "个" },
{ {
label: "省直部门新认定的领跑技术(产品)", label: "省直部门新认定的领跑技术(产品)",
value: "19", value: "19",
unit: "个" unit: "个",
},
],
city: [
{
tit: "编制JMRH发展“十四五”规划进展",
municipal: "市级",
county: "区县",
municipalnum: 78,
countynum: 76,
},
{
tit: "今年以来制定涉及JMRH发展政策情况",
municipal: "市级",
county: "区县",
municipalnum: 77,
countynum: 75,
}, },
], ],
}; };
...@@ -75,6 +124,13 @@ export default defineComponent({ ...@@ -75,6 +124,13 @@ export default defineComponent({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .Progress .el-progress__text {
position: relative;
top: -20px;
left: 65px;
font-size: 18px;
color: #4198ff;
}
.card-item { .card-item {
background: #fff; background: #fff;
border-radius: 5px; border-radius: 5px;
...@@ -86,6 +142,53 @@ export default defineComponent({ ...@@ -86,6 +142,53 @@ export default defineComponent({
flex: 1; flex: 1;
height: 100%; height: 100%;
box-sizing: border-box; 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 { .map-warpper {
......
src/views/dataCenter/ConctructSystem/model/Platform/index.vue
浏览文件 @ 4acfa9ff
<template> <template>
<div class="synergy-innovation-platform"> <div class="synergy-innovation-platform">
<MapTitle text="全省军民协同创新平台情况" /> <MapTitle text="融办主任（市县领导兼）主持召开主任会议情况" />
<div class="echarts-search"> <div class="echarts-search">
<div class="card-items"> <div class="card-items">
<div class="item"> <div class="item">
<span>协同创新平台</span> <span>今年以来融办主任（市县领导兼）主持召开主任会议次数</span>
<div class="value-des"><span>80</span>个</div> <div class="value-des">
<span>112</span>次
</div>
</div> </div>
<div class="item"> <!-- <div class="item">
<span>协同创新示范平台</span> <span>协同创新示范平台</span>
<div class="value-des"><span>66</span>个</div> <div class="value-des">
<span>66</span>个
</div> </div>
</div>-->
</div> </div>
<div class="title">协同创新平台投入研发经费</div> <!-- <div class="title">协同创新平台投入研发经费</div> -->
</div> </div>
<div id="TargetBar" class="target-bar"></div> <div id="TargetBar" class="target-bar"></div>
...@@ -25,29 +29,23 @@ ...@@ -25,29 +29,23 @@
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue"; import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
const SeriesData = { import { Aim } from "@element-plus/icons";
type: "level_1", const xAxisCity = [
rate: [ "杭州",
{ "宁波",
value: 15.63, "温州",
}, "湖州",
{ "嘉兴",
value: 7.42, "绍兴",
}, "金华",
{ "衢州",
value: 1.23, "舟山",
}, "台州",
{ "丽水",
value: 2.65,
},
],
};
const xAxisValue = [
"2018年",
"2019年",
"2020年",
"2021年",
]; ];
const cityData = {
value: [225, 160, 170, 140, 145, 75, 125, 100, 70, 40, 60],
};
/** /**
* 全省军民协同创新平台情况——折线图 * 全省军民协同创新平台情况——折线图
...@@ -55,105 +53,93 @@ const xAxisValue = [ ...@@ -55,105 +53,93 @@ const xAxisValue = [
export default defineComponent({ export default defineComponent({
components: { components: {
MapTitle, MapTitle,
Aim,
}, },
setup() {}, setup() {},
data() { data() {
return { return {
value: 1, countryEcharts: null,
options: [
{ label: "得分情况", value: 1 }, TargetBar: null,
{ label: "军转民收入及增长率", value: 2 },
{ label: "规模以上企业收入及增长率", value: 3 },
{ label: "国防科工产值", value: 4 },
],
mapEcharts: null,
}; };
}, },
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
computed: { computed: {
optionBar() { optionCity() {
const seriesLine = { const seriesBar = {
type: "line", type: "bar",
itemStyle: { itemStyle: {
color: "#4198ff", color: "#4198ff",
}, },
emphasis: { barWidth: 20,
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, data: cityData.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
}; };
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
className: "science-echart", axisPointer: {
type: "shadow",
},
formatter: (params) => { formatter: (params) => {
let html = `<span class="name">${params[0].axisValue}</span>`; let html = ``;
html += `<div class="science-echart "> html += `<div class="munition-echart ">
<span class=" title color_1">项目投资额</span> <span class=" title color_1">${params[0].axisValue}市</span>
<br /> <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>
`;
return html; return html;
}, },
}, },
legend: {}, legend: {},
grid: { grid: {
top: "5%", top: "10%",
left: "0%", left: "5%",
right: "5%", right: "2%",
bottom: "3%", bottom: "3%",
containLabel: true, containLabel: true,
}, },
yAxis: { yAxis: {
type: "value", type: "value",
name: "万元", name: "数量(次)",
min: 0,
max: 250,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: xAxisValue, data: xAxisCity,
}, },
series: [seriesLine], series: [seriesBar],
}; };
}, },
}, },
methods: { methods: {
initEcharts() { initEcharts() {
this.initCityEcharts();
},
initCityEcharts() {
const dom = document.getElementById("TargetBar"); const dom = document.getElementById("TargetBar");
const mapEcharts = echarts.init(dom); const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar); mapEcharts.setOption(this.optionCity);
this.mapEcharts = mapEcharts; this.TargetBar = mapEcharts;
}, },
}, },
unmounted() { unmounted() {
if (!this.mapEcharts) { if (this.TargetBar) {
return; this.TargetBar.dispose();
this.TargetBar = null;
} }
this.mapEcharts.dispose();
this.mapEcharts = null;
}, },
}); });
</script> </script>
......
src/views/dataCenter/ConctructSystem/model/ScientificInvestment/index.vue
浏览文件 @ 4acfa9ff
<template> <template>
<div class="scientific-research-input"> <div class="scientific-research-input">
<MapTitle text="新兴领域科研投入情况" /> <MapTitle text="融办工作人员情况" />
<div class="describes"> <div class="describes">
<div class="card-items"> <div class="card-items">
<div class="item" v-for="(item, index) in cardItems" :key="item.text"> <div class="item" v-for="(item, index) in cardItems" :key="item.text">
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
<div class="value-des"> <div class="value-des">
<span>{{ item.value || "--" }}</span <span>{{ item.value || "--" }}</span>人
>{{ index === 0 ? "亿元" : "%" }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<el-row :gutter="10" type="flex"> <div id="pie" class="target-bar"></div>
<el-col :span="13">
<div id="pie" class="economic-construct"></div>
</el-col>
<el-col :span="11"> <!-- <el-col :span="11">
<div <div class="list-item" v-for="(item, index) in pieList" :key="item.label">
class="list-item"
v-for="(item, index) in pieList"
:key="item.label"
>
<el-row align="middle"> <el-row align="middle">
<div <div class="square" :style="{ background: pieColor[`level_${index + 1}`] }"></div>
class="square"
:style="{ background: pieColor[`level_${index + 1}`] }"
></div>
{{ item.label }} {{ item.label }}
</el-row> </el-row>
<div class="pie-value">{{ item.value }}%</div> <div class="pie-value">{{ item.value }}%</div>
</div> </div>
</el-col> </el-col>-->
</el-row>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -96,22 +85,22 @@ const SeriesData = { ...@@ -96,22 +85,22 @@ const SeriesData = {
}, },
], ],
}; };
const PIE_LIST = [ // const PIE_LIST = [
{ label: "海洋领域", value: 25.17 }, // { label: "海洋领域", value: 25.17 },
{ label: "太空领域", value: 30.96 }, // { label: "太空领域", value: 30.96 },
{ label: "网络领域", value: 20.18 }, // { label: "网络领域", value: 20.18 },
{ label: "生物领域", value: 10.22 }, // { label: "生物领域", value: 10.22 },
{ label: "新能源领域", value: 5.9 }, // { label: "新能源领域", value: 5.9 },
{ label: "人工智能领域", value: 12.24 }, // { label: "人工智能领域", value: 12.24 },
]; // ];
const PieColor = { // const PieColor = {
level_1: "#fac858", // level_1: "#fac858",
level_2: "#6fdef7", // level_2: "#6fdef7",
level_3: "#4198ff", // level_3: "#4198ff",
level_4: "#f4a746", // level_4: "#f4a746",
level_5: "#9daff9", // level_5: "#9daff9",
level_6: "#47d6ad", // level_6: "#47d6ad",
}; // };
/** /**
* 经济建设与国防密切相关的建设项目贯彻国防要求落实情况——柱状图 * 经济建设与国防密切相关的建设项目贯彻国防要求落实情况——柱状图
...@@ -127,85 +116,78 @@ export default defineComponent({ ...@@ -127,85 +116,78 @@ export default defineComponent({
mapEcharts: null, mapEcharts: null,
cirLeftCharts: null, cirLeftCharts: null,
cirRightEchart: null, cirRightEchart: null,
cardItems: [ cardItems: [{ label: "联合科研攻关投入金额", value: "267" }],
{ label: "联合科研攻关投入金额", value: "1113.4" }, // pieList: PIE_LIST,
{ // pieColor: PieColor,
label: "联合科研攻关投入金额增长率",
value: "19",
},
],
pieList: PIE_LIST,
pieColor: PieColor,
}; };
}, },
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
computed: { computed: {
optionBar() { // optionBar() {
const pieData = PIE_LIST.map((item, index) => { // const pieData = PIE_LIST.map((item, index) => {
return { // return {
value: item.value, // value: item.value,
itemStyle: { // itemStyle: {
color: PieColor[`level_${index + 1}`], // color: PieColor[`level_${index + 1}`],
}, // },
tooltip: { // tooltip: {
borderColor: "none", // borderColor: "none",
className: "business-pie-tooltip", // className: "business-pie-tooltip",
formatter: `<div class="business-pie-tooltip"> // formatter: `<div class="business-pie-tooltip">
<span class='title'>${item.label}</span>： // <span class='title'>${item.label}</span>：
<br /> // <br />
<div class='pie-text'> // <div class='pie-text'>
<span>${item.value}</span>亿元 // <span>${item.value}</span>亿元
</div> // </div>
</div>`, // </div>`,
}, // },
}; // };
}); // });
// return {
return { // tooltip: {
tooltip: { // trigger: "item",
trigger: "item", // },
}, // series: [
series: [ // {
{ // name: "Access From",
name: "Access From", // type: "pie",
type: "pie", // radius: ["48%", "80%"],
radius: ["48%", "80%"], // avoidLabelOverlap: false,
avoidLabelOverlap: false, // label: {
label: { // show: false,
show: false, // position: "center",
position: "center", // },
}, // emphasis: {
emphasis: { // label: {
label: { // show: false,
show: false, // fontSize: "20",
fontSize: "20", // formatter: "营业额(万元)\n \n{c}",
formatter: "营业额(万元)\n \n{c}", // },
}, // },
}, // labelLine: {
labelLine: { // show: false,
show: false, // },
}, // data: pieData,
data: pieData, // },
}, // ],
], // };
}; // },
},
}, },
methods: { methods: {
initEcharts() { initEcharts() {
const dom = document.getElementById("pie"); const dom = document.getElementById("pie");
const mapEcharts = echarts.init(dom); // const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar); // mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts; // this.mapEcharts = mapEcharts;
}, },
}, },
unmounted() { unmounted() {
if (this.mapEcharts) { // if (this.mapEcharts) {
this.mapEcharts.dispose(); // this.mapEcharts.dispose();
this.mapEcharts = null; // this.mapEcharts = null;
} // }
}, },
}); });
</script> </script>
...@@ -229,11 +211,18 @@ export default defineComponent({ ...@@ -229,11 +211,18 @@ export default defineComponent({
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.target-bar {
flex: 1;
height: calc(100% - 130px);
box-sizing: border-box;
margin-top: 10px;
}
.scientific-research-input { .scientific-research-input {
height: 100%; height: 100%;
.describes { .describes {
margin: 0 10px; margin: 0 10px;
height: 120px; // height: 120px;
box-sizing: border-box; box-sizing: border-box;
.card-items { .card-items {
margin: 15px 0; margin: 15px 0;
...@@ -243,19 +232,20 @@ export default defineComponent({ ...@@ -243,19 +232,20 @@ export default defineComponent({
font-size: 14px; font-size: 14px;
.item { .item {
flex: 1; flex: 1;
padding: 8px 15px;
padding: 10px 15px;
margin-right: 15px; margin-right: 15px;
background: #f8f9fb; background: #f8f9fb;
border-radius: 5px; border-radius: 5px;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
display: flex;
align-items: center;
justify-content: space-between;
&:last-of-type { &:last-of-type {
margin-right: 0; margin-right: 0;
} }
.value-des { .value-des {
margin-top: 10px; // margin-top: 10px;
font-size: 12px; font-size: 12px;
color: #999; color: #999;
span { span {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论