Skip to content

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

fix(产业融合): 样式待调整

上级 6b2d0c48
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 230 行增加 和 107 行删除
src/App.vue
浏览文件 @ 90d1c4d9
......@@ -5,7 +5,7 @@
<AppHead />
<div class="main-warpper">
<router-view > </router-view>
<router-view> </router-view>
</div>
</div>
</template>
......@@ -27,8 +27,11 @@ export default defineComponent({
padding: 0;
margin: 0;
}
@font-face {
font-family: "tabTypeFace";
src: url("../public/assets/tabTypeFace.TTF");
}
#app {
height: 100vh;
box-sizing: border-box;
}
......@@ -36,11 +39,14 @@ export default defineComponent({
display: flex;
flex-direction: column;
height: 100%;
min-width: 1920px;
padding: 20px 30px;
background: #f5f9fb;
box-sizing: border-box;
}
.main-warpper {
padding: 0 20px 20px;
flex: 1;
background: #f5f9fb;
box-sizing: border-box;
}
</style>
src/components/mapTitle/index.vue
浏览文件 @ 90d1c4d9
......@@ -31,6 +31,7 @@ export default defineComponent({
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
&::before {
content: " ";
display: inline-block;
......@@ -46,9 +47,10 @@ export default defineComponent({
color: #666;
cursor: pointer;
font-size: 14px;
&:hover {
color: #4197ff;
}
// &:hover {
// color: #4197ff;
// }
}
}
</style>
\ No newline at end of file
src/layout/head.vue
浏览文件 @ 90d1c4d9
......@@ -164,7 +164,7 @@ export default defineComponent({
box-sizing: border-box;
.container {
padding: 0 20px;
// padding: 0 20px;
box-sizing: border-box;
}
// 一级导航栏
......@@ -220,7 +220,6 @@ export default defineComponent({
// 行动轨迹记录
.proceed-record {
margin-top: 20px;
margin-bottom: 20px;
padding: 0 20px;
background: #fff;
......
src/route/index.ts
浏览文件 @ 90d1c4d9
import { createRouter, createWebHistory } from "vue-router"
import { createRouter, createWebHistory, createWebHashHistory } from "vue-router"
import evaluatIndicator from "./evaluatIndicator"
......@@ -9,13 +9,11 @@ const routes: any[] = [
]
const router = createRouter({
history: createWebHistory(),
history: createWebHashHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
return { top: 0 }
},
})
export default navigation(router);
\ No newline at end of file
src/views/evaluatIndicator/index/index.vue
浏览文件 @ 90d1c4d9
<template>
<el-row class="map-warpper" :gutter="16">
<el-col class="map-left" :span="8">
<el-row class="map-warpper">
<el-col class="map-left">
<div class="performance-com card-item"><Performance /></div>
<div class="card-item rank-list"><RankList /></div>
</el-col>
<el-col class="map-middle" :span="8">
<div class="card-item"><Map /></div>
</el-col>
<el-col class="map-right" :span="8">
<div class="map-middle" >
<div class="card-item map-item"><Map /></div>
</div>
<div class="map-right">
<div class="performance-com card-item"><InvestmentProgress /></div>
<div class="card-item incom-graphic"><Income /></div>
</el-col>
</div>
</el-row>
<!-- 卡片信息展示 -->
......@@ -71,11 +71,11 @@ export default defineComponent({
.card-item {
background: #fff;
border-radius: 5px;
padding: 15px 8px;
padding: 16px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
box-shadow: 2px 2px 10px #eee;
box-shadow: 2px 2px 10px #04223d10;
// &:hover {
// // transform: translateY(-5px);
......@@ -89,6 +89,10 @@ export default defineComponent({
box-sizing: border-box;
flex: 1;
.map-left {
min-width: 586px;
max-width: 586px;
box-sizing: border-box;
margin-right: 16px;
.rank-list {
margin-top: 16px;
height: 312px;
......@@ -99,14 +103,25 @@ export default defineComponent({
height: 640px;
box-sizing: border-box;
display: flex;
padding-left: -8px !important;
width: 100%;
height: 100%;
margin-right: 16px;
// width: 100%;
min-width: 662px;
max-width: 662px;
.card-item {
flex: 1;
// flex: 1;
padding: 0;
}
.map-item {
min-width: 662px;
}
}
.map-right {
min-width: 580px;
width: 580px;
box-sizing: border-box;
.incom-graphic {
margin-top: 16px;
height: 312px;
......
src/views/evaluatIndicator/index/model/CardList/common.css
浏览文件 @ 90d1c4d9
......@@ -22,3 +22,10 @@
background: #f8f9fb;
border-radius: 5px;
}
.flex-row {
display: flex;
align-items: center;
}
.margin-left5{
margin-left: 5px;
}
\ No newline at end of file
src/views/evaluatIndicator/index/model/CardList/index.vue
浏览文件 @ 90d1c4d9
......@@ -5,13 +5,13 @@
<el-row
v-for="item in infoList"
:key="item.label"
class="font-size14 color-666 item-bg margin-bottom8"
class="row-item font-size14 color-666 item-bg margin-bottom8"
justify="space-between"
align="middle"
>
<el-col :span="18"> {{ item.label }}</el-col>
<el-col :span="6">
<el-row align="middle">
<el-row align="middle" justify="end">
<span class="font-size20 color-pramiry">{{ item.value }}</span>
<span class="font-size12 color-999">{{ item.unit }}</span>
</el-row>
......@@ -49,7 +49,7 @@ export default defineComponent({
<style lang="scss" scoped>
@import url("./common.css");
.info {
padding: 10px 5px;
padding: 10px 0;
display: flex;
flex-direction: column;
height: 100%;
......@@ -62,5 +62,11 @@ export default defineComponent({
.el-row {
height: 28%;
}
.row-item {
padding: 0 16px;
}
.row-text {
text-align: right;
}
}
</style>
src/views/evaluatIndicator/index/model/CardList/industrial.vue
浏览文件 @ 90d1c4d9
......@@ -85,7 +85,6 @@ export default defineComponent({
<style lang="scss" scoped>
@import url("./common.css");
.info {
padding: 10px 5px;
display: flex;
flex-direction: column;
height: 100%;
......@@ -113,11 +112,22 @@ export default defineComponent({
margin-bottom: 0;
}
.title {
margin-left: 15px;
margin-bottom: 5px;
color: #333;
font-weight: bold;
position: relative;
&::before{
content: " ";
display: inline-block;
position: absolute;
top: 6px;
left: -12px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #87bded;
}
}
}
}
......
src/views/evaluatIndicator/index/model/CardList/strongArmy.vue
浏览文件 @ 90d1c4d9
......@@ -43,36 +43,43 @@
</div>
<!-- foot -->
<el-row class="foot-wrapper" :gutter="10">
<el-col :span="16">
<el-row class="foot-wrapper " :gutter="16">
<el-col :span="15" class="foot-row-text">
<el-row class="item-bg margin-bottom8">
<el-col class="font-size14 color-666">国防科技工业军品收入</el-col>
<el-col>
<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>
</el-col>
</el-row>
<el-row class="item-bg">
<el-col class="font-size14 color-666">民口单位军需品收入</el-col>
<el-col>
<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>
</el-col>
</el-row>
</el-col>
<el-col class="font-size14 color-666 item-bg" :span="8">
<el-col class="font-size14 color-666 item-bg" :span="9">
<el-row class="margin-bottom8">
<el-col class="font-size14 color-666">应届大学生应征入伍</el-col>
<el-col>
<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>
</el-col>
</el-row>
<el-row>
<el-col class="font-size14 color-666">应征入伍率</el-col>
<el-col>
<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>
</el-col>
......@@ -101,19 +108,28 @@ export default defineComponent({
<style lang="scss" scoped>
@import url("./common.css");
.info {
padding: 10px 5px;
padding: 10px 0;
.text-list {
.el-row {
margin-bottom: 6px;
padding: 0 8px;
&:last-of-type {
margin-bottom: 0;
}
}
}
}
.foot-row-text {
margin-left: 0 !important;
}
.foot-wrapper {
margin-top: 10px;
width: 100%;
.padding0-8 {
padding: 0 8px;
}
.margin-bottom8 {
margin-bottom: 8px;
}
......
src/views/evaluatIndicator/index/model/CardList/systemConstruct.vue
浏览文件 @ 90d1c4d9
......@@ -12,42 +12,48 @@
2021年
</el-row>
<el-row class="item-bg margin-bottom12" align="middle" justify="space-between">
<el-col class="font-size14 color-666" :span="18"
>各地召开融委全体会议次数</el-col
<el-row
class="item-bg margin-bottom12"
align="middle"
justify="space-between"
>
<el-col class="font-size20 color-pramiry" :span="5">
30 <span class="font-size12 color-999">次</span>
<el-col class="item-text font-size14 color-666" :span="16">
各地召开融委全体会议次数
</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>
</el-col>
</el-row>
<el-row class="item-bg margin-bottom12" align="middle" justify="space-between">
<el-col class="font-size14 color-666" :span="18"
>与当地军分区（警备区）建立并落实军地协作机制</el-col
<el-row
class="item-bg margin-bottom12 flex-one"
align="middle"
justify="space-between"
>
<el-col class="font-size20 color-pramiry" :span="5">
30 <span class="font-size12 color-999">次</span>
<el-col class="item-text font-size14 color-666" :span="18">
与当地军分区（警备区）建立并落实军地协作机制
</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>
</el-col>
</el-row>
<el-row class="info-item font-size14 color-666 item-bg margin-bottom12">
<el-row class="title">
各地军民融合办工作人员
</el-row>
<el-row class="item-text title"> 各地军民融合办工作人员 </el-row>
<el-col :span="24">
<el-row justify="space-between">
<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>
<el-col class="jf-end flex-row font-size20 color-pramiry">
30 <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="font-size20 color-pramiry">
30 <span class="font-size12 color-999">人</span>
<el-col class="flex-row font-size20 color-pramiry">
30 <span class="margin-left5 font-size12 color-999">人</span>
</el-col>
</div>
</el-row>
......@@ -77,7 +83,6 @@ export default defineComponent({
<style lang="scss" scoped>
@import url("./common.css");
.info {
padding: 0 5px 10px 5px;
display: flex;
flex-direction: column;
height: 100%;
......@@ -94,25 +99,50 @@ export default defineComponent({
.info-item {
margin-bottom: 10px;
padding: 15px 10px;
padding: 15px;
&:last-of-type {
margin-bottom: 0;
}
.title {
margin-bottom: 5px;
color: #333;
font-weight: bold;
}
.item-row {
padding: 0 20px;
flex-direction: column;
display: flex;
text-align: center;
div {
margin-top: -6px;
}
}
}
.color-pramiry {
text-align: center;
}
.item-text {
margin-left: 15px;
color: #333;
position: relative;
&::before {
content: " ";
display: inline-block;
position: absolute;
top: 5px;
left: -10px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #87bded;
}
}
.flex-one{
flex-wrap: nowrap;
padding-right: 15px;
}
.jf-end{
justify-content: flex-end;
}
}
</style>
src/views/evaluatIndicator/index/model/Income/index.vue
浏览文件 @ 90d1c4d9
......@@ -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 = "#fac858",
level_2 = "#4198ff",
level_1 = "#4198ff",
level_2 = "#4f5d81",
}
const seriesData = [
......@@ -20,13 +20,13 @@ const seriesData = [
type: "level_1",
echartType: "bar",
growthRate: [80, 85, 95, 65, 85, 70, 85],
barValue: [1820, 1032, 2045, 1852],
barValue: [1820, 1332, 2045, 1852],
},
{
name: "民口单位军品收入",
type: "level_2",
echartType: "bar",
barValue: [1232, 1264, 156, 2661, 15616],
barValue: [1232, 1264, 2661, 15616],
growthRate: [50, 60, 70, 80, 80, 60, 85],
},
];
......@@ -55,7 +55,7 @@ export default defineComponent({
itemStyle: {
color: Echart_color_Enum[item.type],
},
barWidth: 20,
data: item.barValue.map((barItem, barIndex) => {
return {
value: barItem,
......@@ -91,8 +91,7 @@ export default defineComponent({
},
className: "tooltip-income",
formatter: (params) => {
let html = "";
console.log("---", params);
let html = `<span class="year">${params[0].axisValue}年</span>`;
params.forEach((item) => {
const { data = {} } = item;
......@@ -108,10 +107,12 @@ export default defineComponent({
return html;
},
},
legend: {},
legend: {
right: "2%",
},
grid: {
left: "0%",
right: "5%",
left: "2%",
right: "2%",
bottom: "3%",
containLabel: true,
},
......@@ -155,16 +156,24 @@ export default defineComponent({
});
</script>
<style>
.tooltip-income .year {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.tooltip-income .title {
font-weight: 600;
color: #333;
font-size: 12px;
color: #666;
}
.tooltip-income .row-item {
padding: 0 15px 10px 15px;
display: flex;
align-items: center;
font-size: 14px;
font-size: 12px;
color: #999;
justify-content: space-between;
}
.tooltip-income .row-item div {
......
src/views/evaluatIndicator/index/model/InvestmentProgress/index.vue
浏览文件 @ 90d1c4d9
......@@ -11,7 +11,7 @@ import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
enum Bar_Enum {
level_1 = "#fac858",
level_2 = "#4198ff",
level_2 = "#1ba6eb",
}
const seriesData = [
......@@ -19,15 +19,15 @@ const seriesData = [
name: "国防要求建设项目",
type: "level_1",
echartType: "bar",
growthRate: [80, 85, 95, 65, 85, 70, 85],
barValue: [820, 832, 901, 934, 1290, 1330, 1320],
growthRate: [80, 85, 95, 65, 85, 70, 85, 70, 80, 90, 40],
barValue: [820, 832, 901, 934, 1290, 1330, 1320, 1180, 1292, 1000, 1205],
},
{
name: "省军民融合重大示范项目",
type: "level_2",
echartType: "bar",
barValue: [820, 832, 901, 934, 1290, 1330, 1320],
growthRate: [50, 60, 70, 80, 80, 60, 85],
barValue: [820, 832, 901, 934, 1290, 1330, 1320, 1251, 1120, 1050, 888],
growthRate: [50, 60, 70, 80, 80, 60, 85, 62, 75, 85, 72],
},
];
......@@ -67,6 +67,7 @@ export default defineComponent({
itemStyle: {
color: Bar_Enum[item.type],
},
barWidth: 12,
data: item.barValue.map((barItem, barIndex) => {
return {
......@@ -103,10 +104,9 @@ export default defineComponent({
},
className: "tooltip-progress",
formatter: (params) => {
let html = "";
let html = `<span class="name">${params[0].axisValue}</span>`;
params.forEach((item) => {
const { data = {} } = item;
console.log(data);
html += `<div class="tooltip-progress">
<span class="title">${item.seriesName}</span>
......@@ -120,16 +120,19 @@ export default defineComponent({
return html;
},
},
legend: {},
grid: {
left: "0%",
right: "5%",
left: "2%",
right: "2%",
bottom: "3%",
containLabel: true,
},
legend: {
right: "2%"
},
yAxis: [
{
type: "value",
name: "金额(亿元)",
},
{
type: "value",
......@@ -164,17 +167,29 @@ export default defineComponent({
});
</script>
<style>
.tooltip-progress .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.tooltip-progress .title {
font-weight: 600;
color: #333;
font-size: 12px;
color: #666;
}
.tooltip-progress .row-item {
padding: 0 15px 10px 15px;
display: flex;
align-items: center;
font-size: 14px;
font-size: 12px;
color: #999;
justify-content: space-between;
}
.tooltip-progress .row-item div {
margin-right: 15px;
}
.tooltip-progress .row-item p {
font-size: 12px;
color: #999;
......@@ -193,7 +208,7 @@ export default defineComponent({
<style lang="scss" scoped>
.investment-progress {
flex: 1;
height: 250px;
height: 245px;
box-sizing: border-box;
margin-top: 10px;
}
......
src/views/evaluatIndicator/index/model/Map/index.vue
浏览文件 @ 90d1c4d9
......@@ -6,8 +6,9 @@ import { defineComponent } from "vue";
import * as echarts from "echarts";
// import { getMapGeoData, getMapPointList } from "../service";
// import mapGeoData from "../../../../../../mocks/evaluatIndicator/mapGeoData.json"
import MapGeoData from "./mapGeoData"
import MapPointList from "./mapPointList"
import MapGeoData from "./mapGeoData";
import MapPointList from "./mapPointList";
export default defineComponent({
......@@ -18,18 +19,16 @@ export default defineComponent({
data() {
return {
pointList: [],
mapEcharts: null
mapEcharts: null,
};
},
computed: {
options() {
return {
tooltip: {
borderColor: '#333',
borderColor: "#333",
formatter: function (params) {
return (
params.name
);
return params.name;
},
},
geo: {
......@@ -52,16 +51,19 @@ export default defineComponent({
},
},
},
grid: {
top: "0",
left: "0%",
right: "0%",
bottom: "3%",
containLabel: true,
},
series: [
{
type: "scatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
period: 4,
brushType: "stroke",
scale: 2,
},
label: {
normal: {
show: true,
......@@ -76,10 +78,11 @@ export default defineComponent({
},
},
itemStyle: {
color: '#f3696a',
color: "#f3696a",
},
symbol: "pin",
symbolSize: 40,
symbolKeepAspect: true,
symbol: 'path://M6.09,0a5,5,0,0,0-5,5c0,2.77,5,9.28,5,9.28s5-6.51,5-9.28A5,5,0,0,0,6.09,0Zm0,7.41A2.29,2.29,0,1,1,8.38,5.12,2.31,2.31,0,0,1,6.09,7.41Z',
symbolSize: 16,
data: this.pointList,
},
],
......@@ -94,7 +97,6 @@ export default defineComponent({
const { data: getMapData } = MapGeoData;
const { data: pointList } = MapPointList;
echarts.registerMap("ZJ", getMapData);
const mapEcharts = echarts.init(document.getElementById("map"));
......@@ -120,10 +122,17 @@ export default defineComponent({
},
});
</script>
<style >
.map-item canvas:first-of-type{
transform: scaleY(1.1) scaleX(1.3);
}
</style>
<style lang="scss" scoped>
.map-item {
flex: 1;
box-sizing: border-box;
height: 100%;
}
</style>
src/views/evaluatIndicator/index/model/Map/mapGeoData.js
浏览文件 @ 90d1c4d9
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论