Skip to content

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

fix(创新示范)

上级 fa742fd0
隐藏空白字符变更
内嵌 并排
正在显示 包含 701 行增加 和 332 行删除
package-lock.json
浏览文件 @ 3decb27c
...@@ -5422,6 +5422,14 @@ ...@@ -5422,6 +5422,14 @@
"vscode-vue-languageservice": "^0.27.0" "vscode-vue-languageservice": "^0.27.0"
} }
}, },
"vuex": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
"integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
"requires": {
"@vue/devtools-api": "^6.0.0-beta.11"
}
},
"which": { "which": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.nlark.com/which/download/which-2.0.2.tgz", "resolved": "https://registry.nlark.com/which/download/which-2.0.2.tgz",
......
package.json
浏览文件 @ 3decb27c
...@@ -24,7 +24,8 @@ ...@@ -24,7 +24,8 @@
"style-loader": "^3.3.0", "style-loader": "^3.3.0",
"vite-plugin-mocker": "^1.0.7", "vite-plugin-mocker": "^1.0.7",
"vue": "^3.2.16", "vue": "^3.2.16",
"vue-router": "^4.0.11" "vue-router": "^4.0.11",
"vuex": "^4.0.2"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^1.9.3", "@vitejs/plugin-vue": "^1.9.3",
......
src/layout/head.vue
浏览文件 @ 3decb27c
...@@ -22,7 +22,11 @@ ...@@ -22,7 +22,11 @@
<div class="container"> <div class="container">
<!-- 二级导航栏 --> <!-- 二级导航栏 -->
<el-row v-if="(secodndList || []).length > 0" class="second-nav" :gutter="20"> <el-row
v-if="(secodndList || []).length > 0"
class="second-nav"
:gutter="20"
>
<el-col v-for="(item, index) in secodndList" :key="index" :span="4"> <el-col v-for="(item, index) in secodndList" :key="index" :span="4">
<el-card <el-card
shadow="hover" shadow="hover"
...@@ -30,7 +34,8 @@ ...@@ -30,7 +34,8 @@
'second-active-nav': index === secondIndex, 'second-active-nav': index === secondIndex,
}" }"
@click="secondHandle(item, index)" @click="secondHandle(item, index)"
>{{ item.name }}</el-card> >{{ item.name }}</el-card
>
</el-col> </el-col>
</el-row> </el-row>
...@@ -61,9 +66,10 @@ ...@@ -61,9 +66,10 @@
</el-icon> </el-icon>
<span <span
:class="{ :class="{
'lignht-color': index === curRouteHistoy.length - 1, 'lignht-color': index === curRouteHistoy.length - 1,
}" }"
>{{ item.label }}</span> >{{ item.label }}</span
>
</div> </div>
</el-col> </el-col>
</el-col> </el-col>
...@@ -73,12 +79,13 @@ ...@@ -73,12 +79,13 @@
<div class="years" align="middle"> <div class="years" align="middle">
<span <span
v-for="(item, index) in years" v-for="(item, index) in years"
:key="item" :key="item.label"
:class="{ :class="{
active: index === curYearIndex, active: index === curYearIndex,
}" }"
@click="yearHandle(index)" @click="yearHandle(item.value, index)"
>{{ item }}年</span> >{{ item.label }}年</span
>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -105,7 +112,20 @@ export default defineComponent({ ...@@ -105,7 +112,20 @@ export default defineComponent({
activeIndex: 0, activeIndex: 0,
secondIndex: 0, secondIndex: 0,
curRouteHistoy: [], curRouteHistoy: [],
years: ["2020年第四季度", "2021年第二季度", "2021上半年"], years: [
{
label: "2020年第四季度",
value: "typeOne",
},
{
label: "2021年第二季度",
value: "typeTwo",
},
{
label: "2021上半年",
value: "typeThree",
},
],
curYearIndex: 2, curYearIndex: 2,
}; };
}, },
...@@ -142,7 +162,8 @@ export default defineComponent({ ...@@ -142,7 +162,8 @@ export default defineComponent({
}, },
}, },
methods: { methods: {
yearHandle(index: number) { yearHandle(value: String, index: number) {
this.$store.commit("SET_CUR_DATA_TYPE", value);
this.curYearIndex = index; this.curYearIndex = index;
}, },
navClick(item: {}, index: number) { navClick(item: {}, index: number) {
...@@ -158,7 +179,6 @@ export default defineComponent({ ...@@ -158,7 +179,6 @@ export default defineComponent({
// this.$router.push(item.link); // this.$router.push(item.link);
}, },
toPage(item) { toPage(item) {
console.log("item-", item);
this.$router.push(item.path); this.$router.push(item.path);
}, },
}, },
......
src/main.ts
浏览文件 @ 3decb27c
...@@ -3,11 +3,13 @@ import ElementPlus from 'element-plus' ...@@ -3,11 +3,13 @@ import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import App from './App.vue' import App from './App.vue'
import router from "./route/index" import router from "./route/index"
import store from './store'
const app = createApp(App); const app = createApp(App);
app.use(ElementPlus); app.use(ElementPlus);
app.use(router) app.use(router)
app.use(store)
app.mount('#app') app.mount('#app')
......
src/store/index.tsx 0 → 100644
浏览文件 @ 3decb27c
import { createStore } from 'vuex'
// 创建一个新的 store 实例
const store = createStore({
state () {
return {
curDataType: "typeThree"
}
},
mutations: {
// 切换当前mock数据
SET_CUR_DATA_TYPE (state, curDataType ) {
state.curDataType = curDataType
}
}
})
export default store;
\ No newline at end of file
src/views/dataCenter/army/model/EconomicConstruct/index.vue
浏览文件 @ 3decb27c
...@@ -3,19 +3,19 @@ ...@@ -3,19 +3,19 @@
<el-row class="economic-info" justify="space-between"> <el-row class="economic-info" justify="space-between">
<el-col :span="11"> <el-col :span="11">
<div class="card-item"> <div class="card-item">
<span class="card-text">国防要求建设项目</span> <span class="card-text">{{ countryData.name || "--" }}</span>
<div class="info-wrapper"> <div class="info-wrapper">
<div class="info-details"> <div class="info-details">
<div class="info-item"> <div
<span class="title">项目数量</span> class="info-item"
<div><span>67</span>个</div> v-for="item in countryData.info"
</div> :key="item.label"
>
<div class="info-item"> <span class="title">{{item.label || "--"}}</span>
<span class="title">投资额</span> <div><span>{{item.value || "--"}}</span>{{item.unit}}</div>
<div><span>438.32</span>亿元</div>
</div> </div>
</div> </div>
<!-- 环形进度条 --> <!-- 环形进度条 -->
<div v-show="false" id="circularEchart" class="circular"></div> <div v-show="false" id="circularEchart" class="circular"></div>
...@@ -23,25 +23,25 @@ ...@@ -23,25 +23,25 @@
</div> </div>
</el-col> </el-col>
<el-col :span="1"> <el-col :span="1">
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
</el-col> </el-col>
<el-col class="increase-rate" :span="11"> <el-col class="increase-rate" :span="11">
<div class="card-item"> <div class="card-item">
<span class="card-text">省军民融合重大示范项目</span> <span class="card-text">{{ provinceData.name || "--" }}</span>
<div class="info-wrapper"> <div class="info-wrapper">
<div class="info-details"> <div class="info-details">
<div class="info-item"> <div
<span class="title">项目数量</span> class="info-item"
<div><span>42</span>个</div> v-for="item in provinceData.info"
</div> :key="item.label"
>
<div class="info-item"> <span class="title">{{item.label || "--"}}</span>
<span class="title">投资额</span> <div><span>{{item.value || "--"}}</span>{{item.unit}}</div>
<div><span>138.84</span>亿元</div>
</div> </div>
</div> </div>
<!-- 环形进度条 --> <!-- 环形进度条 -->
<div id="cirRightEchart" class="circular"></div> <div id="cirRightEchart" class="circular"></div>
...@@ -58,58 +58,9 @@ import { defineComponent } from "vue"; ...@@ -58,58 +58,9 @@ 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 Mock from "./mock";
name: "国防要求建设项目", import { mapState } from "vuex";
type: "level_1",
value: [37.28, 61.75, 34.54, 8.20, 34.63, 74.4, 32.74, 75.35, 28.13, 27.25, 12.76],
rate: [
{
city: "杭州",
value: 49.28,
},
{
city: "宁波",
value: 45.7,
},
{
city: "温州",
value: 25.68,
},
{
city: "湖州",
value: 36.89,
},
{
city: "嘉兴",
value: 84.07,
},
{
city: "绍兴",
value: 53.85,
},
{
city: "金华",
value: 36.05,
},
{
city: "衢州",
value: 57.74,
},
{
city: "舟山",
value: 56.43,
},
{
city: "台州",
value: 55.68,
},
{
city: "丽水",
value: 32.85,
},
],
};
const xAxisValue = [ const xAxisValue = [
"杭州", "杭州",
"宁波", "宁波",
...@@ -134,7 +85,6 @@ export default defineComponent({ ...@@ -134,7 +85,6 @@ export default defineComponent({
setup() {}, setup() {},
data() { data() {
return { return {
seriesData: SeriesData,
mapEcharts: null, mapEcharts: null,
cirLeftCharts: null, cirLeftCharts: null,
cirRightEchart: null, cirRightEchart: null,
...@@ -145,6 +95,18 @@ export default defineComponent({ ...@@ -145,6 +95,18 @@ export default defineComponent({
this.initCircularEcharts(); this.initCircularEcharts();
}, },
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
countryData() {
return Mock[this.curDataType].countryData;
},
provinceData() {
return Mock[this.curDataType].provinceData;
},
optionBar() { optionBar() {
const seriesBar = { const seriesBar = {
name: "投资金额", name: "投资金额",
...@@ -153,7 +115,7 @@ export default defineComponent({ ...@@ -153,7 +115,7 @@ export default defineComponent({
color: "#4198ff", color: "#4198ff",
}, },
barWidth: 20, barWidth: 20,
data: SeriesData.value.map((item) => { data: this.seriesData.value.map((item) => {
return { return {
name: item.name, name: item.name,
value: item, value: item,
...@@ -169,7 +131,7 @@ export default defineComponent({ ...@@ -169,7 +131,7 @@ export default defineComponent({
color: "#3aba67", color: "#3aba67",
}, },
yAxisIndex: 1, yAxisIndex: 1,
data: SeriesData.rate.map((item) => { data: this.seriesData.rate.map((item) => {
return { return {
value: item.value, value: item.value,
label: "项目进度", label: "项目进度",
...@@ -220,8 +182,8 @@ export default defineComponent({ ...@@ -220,8 +182,8 @@ export default defineComponent({
min: 0, min: 0,
max: 100, max: 100,
splitLine: { splitLine: {
show:false show: false,
} },
}, },
], ],
xAxis: { xAxis: {
...@@ -322,7 +284,7 @@ export default defineComponent({ ...@@ -322,7 +284,7 @@ export default defineComponent({
}; };
}, },
ptionCirRight() { ptionCirRight() {
const value = 0.4731; const value = this.provinceData?.process || 0;
return { return {
backgroundColor: "#fff", backgroundColor: "#fff",
title: [ title: [
...@@ -337,7 +299,7 @@ export default defineComponent({ ...@@ -337,7 +299,7 @@ export default defineComponent({
color: "#333", color: "#333",
textAlign: "center", textAlign: "center",
}, },
subtext: `${(value * 100)}%`, subtext: `${value * 100}%`,
subtextStyle: { subtextStyle: {
fontSize: "16", fontSize: "16",
color: "#4198ff", color: "#4198ff",
...@@ -412,6 +374,18 @@ export default defineComponent({ ...@@ -412,6 +374,18 @@ export default defineComponent({
}; };
}, },
}, },
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
provinceData() {
this.cirRightEchart.showLoading();
this.cirRightEchart.setOption(this.ptionCirRight);
this.cirRightEchart.hideLoading();
}
},
methods: { methods: {
initEcharts() { initEcharts() {
const dom = document.getElementById("economicConstruct"); const dom = document.getElementById("economicConstruct");
...@@ -499,7 +473,8 @@ export default defineComponent({ ...@@ -499,7 +473,8 @@ export default defineComponent({
.info-wrapper { .info-wrapper {
margin-top: 5px; margin-top: 5px;
display: flex; display: flex;
align-items: center; // align-items: center;
justify-content: space-between;
.info-details { .info-details {
.info-item { .info-item {
padding-left: 12px; padding-left: 12px;
...@@ -538,14 +513,15 @@ export default defineComponent({ ...@@ -538,14 +513,15 @@ export default defineComponent({
} }
} }
.circular { .circular {
margin-right: 60px;
margin-left: 40px; margin-left: 40px;
width: 100px; width: 100px;
height: 100px; height: 100px;
} }
} }
} }
.el-divider{ .el-divider {
margin: 15% auto; margin: 15% auto;
height: 70%; height: 70%;
background: #f3f3f3; background: #f3f3f3;
...@@ -559,7 +535,7 @@ export default defineComponent({ ...@@ -559,7 +535,7 @@ export default defineComponent({
.economic-construct { .economic-construct {
flex: 1; flex: 1;
min-height: 150px; min-height: 150px;
height: calc( 100% - 200px); height: calc(100% - 200px);
box-sizing: border-box; box-sizing: border-box;
margin-top: 10px; margin-top: 10px;
} }
......
src/views/dataCenter/army/model/EconomicConstruct/mock.js 0 → 100644
浏览文件 @ 3decb27c
export default {
"typeOne": {
countryData: {
// 国防数据
name: "国防要求建设项目",
info: [{
label: "项目数量",
value: 0,
unit: "个"
},
{
label: "投资额",
value: 0,
unit: "亿元"
},
]
},
provinceData: {
name: "省军民融合重大示范项目",
process:0,
info: [{
label: "项目数量",
value: 0,
unit: "个"
},
{
label: "投资额",
value: 0,
unit: "亿元"
},
]
},
seriesData: {
name: "国防要求建设项目",
type: "level_1",
value: [],
rate: [{
city: "杭州",
value: 0,
},
{
city: "宁波",
value: 0,
},
{
city: "温州",
value: 0,
},
{
city: "湖州",
value: 0,
},
{
city: "嘉兴",
value: 0,
},
{
city: "绍兴",
value: 0,
},
{
city: "金华",
value: 0,
},
{
city: "衢州",
value: 0,
},
{
city: "舟山",
value: 0,
},
{
city: "台州",
value: 0,
},
{
city: "丽水",
value: 0,
},
]
}
},
"typeTwo": {
countryData: {
// 国防数据
name: "国防要求建设项目",
info: [{
label: "项目数量",
value: 0,
unit: "个"
},
{
label: "投资额",
value: 0,
unit: "亿元"
},
]
},
provinceData: {
process:0,
name: "省军民融合重大示范项目",
info: [{
label: "项目数量",
value: 0,
unit: "个"
},
{
label: "投资额",
value: 0,
unit: "亿元"
},
]
},
seriesData: {
name: "国防要求建设项目",
type: "level_1",
value: [],
rate: [{
city: "杭州",
value: 0,
},
{
city: "宁波",
value: 0,
},
{
city: "温州",
value: 0,
},
{
city: "湖州",
value: 0,
},
{
city: "嘉兴",
value: 0,
},
{
city: "绍兴",
value: 0,
},
{
city: "金华",
value: 0,
},
{
city: "衢州",
value: 0,
},
{
city: "舟山",
value: 0,
},
{
city: "台州",
value: 0,
},
{
city: "丽水",
value: 0,
},
],
}
},
"typeThree": {
countryData: {
// 国防数据
name: "国防要求建设项目",
info: [{
label: "项目数量",
value: 67,
unit: "个"
},
{
label: "投资额",
value: 438.32,
unit: "亿元"
},
]
},
provinceData: {
process:0.4731,
name: "省军民融合重大示范项目",
info: [{
label: "项目数量",
value: 42,
unit: "个"
},
{
label: "投资额",
value: 138.84,
unit: "亿元"
},
]
},
seriesData: {
name: "国防要求建设项目",
type: "level_1",
value: [
37.28, 61.75, 34.54, 8.2, 34.63, 74.4, 32.74, 75.35, 28.13, 27.25, 12.76,
],
rate: [{
city: "杭州",
value: 49.28,
},
{
city: "宁波",
value: 45.7,
},
{
city: "温州",
value: 25.68,
},
{
city: "湖州",
value: 36.89,
},
{
city: "嘉兴",
value: 84.07,
},
{
city: "绍兴",
value: 53.85,
},
{
city: "金华",
value: 36.05,
},
{
city: "衢州",
value: 57.74,
},
{
city: "舟山",
value: 56.43,
},
{
city: "台州",
value: 55.68,
},
{
city: "丽水",
value: 32.85,
},
],
}
},
}
\ No newline at end of file
src/views/dataCenter/map/index.vue
浏览文件 @ 3decb27c
<template> <template>
{{curDataType}}
<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="performance-com card-item"><Performance /></div> <div class="performance-com card-item"><Performance /></div>
...@@ -46,6 +47,7 @@ import Industrial from "./model/CardList/industrial.vue"; ...@@ -46,6 +47,7 @@ import Industrial from "./model/CardList/industrial.vue";
import SystemConstruct from "./model/CardList/systemConstruct.vue"; import SystemConstruct from "./model/CardList/systemConstruct.vue";
import { DataCenterRouter } from "@/route/dataCenter"; import { DataCenterRouter } from "@/route/dataCenter";
export default defineComponent({ export default defineComponent({
components: { components: {
Performance, Performance,
...@@ -59,6 +61,9 @@ export default defineComponent({ ...@@ -59,6 +61,9 @@ export default defineComponent({
SystemConstruct, SystemConstruct,
}, },
setup() {}, setup() {},
computed: {
},
data() { data() {
return { return {
dataCenterRouter: DataCenterRouter, dataCenterRouter: DataCenterRouter,
......
src/views/dataCenter/map/model/CardList/strongArmy.vue
浏览文件 @ 3decb27c
...@@ -29,17 +29,7 @@ ...@@ -29,17 +29,7 @@
<span class="font-size12 color-999">亿元</span> <span class="font-size12 color-999">亿元</span>
</el-row> </el-row>
</el-row> </el-row>
<!--
<el-row
class="font-size14 color-666"
justify="space-between"
align="middle"
>
项目建设进度
<el-row align="middle">
<span class="font-size20 color-pramiry">30%</span>
</el-row>
</el-row> -->
</div> </div>
<!-- foot --> <!-- foot -->
......
src/views/dataCenter/map/model/Income/index.vue
浏览文件 @ 3decb27c
...@@ -9,27 +9,14 @@ ...@@ -9,27 +9,14 @@
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";
import Mock from "./mock";
import { mapState } from "vuex";
enum Echart_color_Enum { enum Echart_color_Enum {
level_1 = "#fac858", level_1 = "#fac858",
level_2 = "#4198ff", level_2 = "#4198ff",
} }
const seriesData = [
{
name: "国防科工军品收入",
type: "level_1",
echartType: "bar",
growthRate: ["", 42.17, 21.19],
barValue: [107.32, 157.51, 172.11],
},
{
name: "民口单位军品收入",
type: "level_2",
echartType: "bar",
barValue: [71.93, 117.94, 139.15],
growthRate: ["",60,80],
},
];
const xAxisValue = ["2018", "2019", "2020", "2021"]; const xAxisValue = ["2018", "2019", "2020", "2021"];
...@@ -47,8 +34,14 @@ export default defineComponent({ ...@@ -47,8 +34,14 @@ export default defineComponent({
this.initEcharts(); this.initEcharts();
}, },
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
option() { option() {
const seriesBarList = seriesData.map((item, index) => { const seriesBarList = this.seriesData.map((item, index) => {
return { return {
name: item.name, name: item.name,
type: "bar", type: "bar",
...@@ -66,7 +59,7 @@ export default defineComponent({ ...@@ -66,7 +59,7 @@ export default defineComponent({
}; };
}); });
const seriesLineList = seriesData.map((item) => { const seriesLineList = this.seriesData.map((item) => {
return { return {
type: "line", type: "line",
tooltip: { tooltip: {
...@@ -140,6 +133,13 @@ export default defineComponent({ ...@@ -140,6 +133,13 @@ export default defineComponent({
series: [...seriesBarList, ...seriesLineList], series: [...seriesBarList, ...seriesLineList],
}; };
}, },
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.option);
this.mapEcharts.hideLoading();
},
}, },
methods: { methods: {
initEcharts() { initEcharts() {
......
src/views/dataCenter/map/model/Income/mock.js 0 → 100644
浏览文件 @ 3decb27c
export default {
"typeOne":[
{
name: "国防科工军品收入",
type: "level_1",
echartType: "bar",
growthRate: [],
barValue: [],
},
{
name: "民口单位军品收入",
type: "level_2",
echartType: "bar",
growthRate: [],
barValue: [],
},
],
"typeTwo": [
{
name: "国防科工军品收入",
type: "level_1",
echartType: "bar",
growthRate: [],
barValue: [],
},
{
name: "民口单位军品收入",
type: "level_2",
echartType: "bar",
barValue: [],
growthRate: [],
},
],
"typeThree": [
{
name: "国防科工军品收入",
type: "level_1",
echartType: "bar",
growthRate: ["", 42.17, 21.19],
barValue: [107.32, 157.51, 172.11],
},
{
name: "民口单位军品收入",
type: "level_2",
echartType: "bar",
barValue: [71.93, 117.94, 139.15],
growthRate: ["",60,80],
},
],
}
\ No newline at end of file
src/views/dataCenter/map/model/InvestmentProgress/index.vue
浏览文件 @ 3decb27c
...@@ -10,15 +10,8 @@ import { defineComponent } from "vue"; ...@@ -10,15 +10,8 @@ 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 Mock from "./mock";
{ import { mapState } from "vuex";
name: "投资金额",
type: "level_2",
echartType: "bar",
barValue: [37.28, 61.75, 34.54, 8.20, 34.63, 74.4, 32.74, 75.35, 28.13, 27.25, 12.76],
growthRate: [49.28, 45.7, 25.68, 36.89, 84.07, 53.85, 36.05, 57.74,56.43, 55.68, 32.85],
},
];
const xAxisValue = [ const xAxisValue = [
"杭州", "杭州",
...@@ -48,8 +41,14 @@ export default defineComponent({ ...@@ -48,8 +41,14 @@ export default defineComponent({
this.initEcharts(); this.initEcharts();
}, },
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() { optionBar() {
const seriesBarList = seriesData.map((item, index) => { const seriesBarList = this.seriesData.map((item, index) => {
return { return {
name: item.name, name: item.name,
type: "bar", type: "bar",
...@@ -66,7 +65,7 @@ export default defineComponent({ ...@@ -66,7 +65,7 @@ export default defineComponent({
}; };
}); });
const seriesLineList = seriesData.map((item) => { const seriesLineList = this.seriesData.map((item) => {
return { return {
name: "项目进度", name: "项目进度",
type: "line", type: "line",
...@@ -111,7 +110,7 @@ export default defineComponent({ ...@@ -111,7 +110,7 @@ export default defineComponent({
}, },
}, },
grid: { grid: {
left: "2%", left: "5%",
right: "2%", right: "2%",
bottom: "3%", bottom: "3%",
containLabel: true, containLabel: true,
...@@ -139,6 +138,14 @@ export default defineComponent({ ...@@ -139,6 +138,14 @@ export default defineComponent({
}; };
}, },
}, },
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
methods: { methods: {
initEcharts() { initEcharts() {
const dom = document.getElementById("InvestmentProgress"); const dom = document.getElementById("InvestmentProgress");
......
src/views/dataCenter/map/model/InvestmentProgress/mock.js 0 → 100644
浏览文件 @ 3decb27c
export default {
"typeOne":[
{
name: "投资金额",
type: "level_2",
echartType: "bar",
barValue: [],
growthRate: [],
},
],
"typeTwo": [
{
name: "投资金额",
type: "level_2",
echartType: "bar",
barValue: [],
growthRate: [],
},
],
"typeThree": [
{
name: "投资金额",
type: "level_2",
echartType: "bar",
barValue: [37.28, 61.75, 34.54, 8.20, 34.63, 74.4, 32.74, 75.35, 28.13, 27.25, 12.76],
growthRate: [49.28, 45.7, 25.68, 36.89, 84.07, 53.85, 36.05, 57.74,56.43, 55.68, 32.85],
},
],
}
\ No newline at end of file
src/views/dataCenter/map/model/Performance/index.vue
浏览文件 @ 3decb27c
...@@ -12,6 +12,9 @@ ...@@ -12,6 +12,9 @@
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";
import Mock from "./mock";
import { mapState } from "vuex";
enum Bar_Enum { enum Bar_Enum {
level_1 = "#4f5d81", level_1 = "#4f5d81",
level_2 = "#429a9d", level_2 = "#429a9d",
...@@ -20,38 +23,6 @@ enum Bar_Enum { ...@@ -20,38 +23,6 @@ enum Bar_Enum {
level_5 = "#4191ff", level_5 = "#4191ff",
} }
const seriesData = [
{
name: "服务强军兴军",
type: "level_1",
value: [25, 27, 18, 22, 28, 24, 19, 20, 21, 22, 19],
},
{
name: "军民协同创新",
type: "level_3",
value: [19, 13.5, 6.5, 12.5, 15.5, 14, 6.5, 10.5, 8, 4, 6],
},
{
name: "产业融合发展",
type: "level_2",
value: [14.5, 9, 6, 10, 13, 14, 13.5, 8, 6, 12.5, 15],
},
{
name: "资源开放共享",
type: "level_4",
value: [13.2, 14, 10, 11, 14, 12.5, 7.5, 13.5, 10, 12, 10],
},
{
name: "五大体系建设",
type: "level_5",
value: [14, 15, 10.4, 12, 11, 15, 13, 13, 13, 11, 11.2],
},
];
const xAxisValue = [ const xAxisValue = [
"杭州", "杭州",
"宁波", "宁波",
...@@ -80,8 +51,14 @@ export default defineComponent({ ...@@ -80,8 +51,14 @@ export default defineComponent({
this.initEcharts(); this.initEcharts();
}, },
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() { optionBar() {
const seriesList = seriesData.map((item, index) => { const seriesList = this.seriesData.map((item, index) => {
return { return {
name: item.name, name: item.name,
type: "bar", type: "bar",
...@@ -148,6 +125,13 @@ export default defineComponent({ ...@@ -148,6 +125,13 @@ export default defineComponent({
}; };
}, },
}, },
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
methods: { methods: {
detailsHandle() { detailsHandle() {
console.log("---点击详情跳转"); console.log("---点击详情跳转");
...@@ -198,7 +182,6 @@ export default defineComponent({ ...@@ -198,7 +182,6 @@ export default defineComponent({
display: inline-block; display: inline-block;
border-radius: 50%; border-radius: 50%;
background: red; background: red;
} }
.per-formance-echart .row-item { .per-formance-echart .row-item {
padding: 0 15px 10px 15px; padding: 0 15px 10px 15px;
...@@ -220,8 +203,8 @@ export default defineComponent({ ...@@ -220,8 +203,8 @@ export default defineComponent({
font-size: 18px; font-size: 18px;
margin-right: 5px; margin-right: 5px;
} }
.per-formance-echart .text{ .per-formance-echart .text {
color: #4191ff color: #4191ff;
} }
.per-formance-echart .color_1::before { .per-formance-echart .color_1::before {
background: #4f2d11; background: #4f2d11;
......
src/views/dataCenter/map/model/Performance/mock.js
浏览文件 @ 3decb27c
export default { export default {
"1": { "typeOne": [{
name: "服务强军兴军",
type: "level_1",
value: [],
},
{
name: "军民协同创新",
type: "level_3",
value: [],
},
{
name: "产业融合发展",
type: "level_2",
value: [],
},
{
name: "资源开放共享",
type: "level_4",
value: [],
},
{
name: "五大体系建设",
type: "level_5",
value: [],
},
],
"typeTwo": [{
name: "服务强军兴军",
type: "level_1",
value: [],
},
{
name: "军民协同创新",
type: "level_3",
value: [],
},
{
name: "产业融合发展",
type: "level_2",
value: [],
},
{
name: "资源开放共享",
type: "level_4",
value: [],
},
{
name: "五大体系建设",
type: "level_5",
value: [],
},
],
"typeThree": [{
name: "服务强军兴军",
type: "level_1",
value: [25, 27, 18, 22, 28, 24, 19, 20, 21, 22, 19],
}, },
"2": { {
name: "军民协同创新",
type: "level_3",
value: [19, 13.5, 6.5, 12.5, 15.5, 14, 6.5, 10.5, 8, 4, 6],
}, },
"3": { {
name: "产业融合发展",
type: "level_2",
} value: [14.5, 9, 6, 10, 13, 14, 13.5, 8, 6, 12.5, 15],
},
{
name: "资源开放共享",
type: "level_4",
value: [13.2, 14, 10, 11, 14, 12.5, 7.5, 13.5, 10, 12, 10],
},
{
name: "五大体系建设",
type: "level_5",
value: [14, 15, 10.4, 12, 11, 15, 13, 13, 13, 11, 11.2],
},
],
} }
\ No newline at end of file
src/views/dataCenter/map/model/RankList/index.vue
浏览文件 @ 3decb27c
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
:data="tableData" :data="tableData"
size="small" size="small"
style="width: 100%" style="width: 100%"
empty-text="--" empty-text="暂无数据"
header-row-class-name="tabs-header" header-row-class-name="tabs-header"
> >
<el-table-column label="序号" width="120" align="center"> <el-table-column label="序号" width="120" align="center">
...@@ -28,10 +28,6 @@ ...@@ -28,10 +28,6 @@
<template #default="scope"> <template #default="scope">
<div> <div>
{{ scope.row.score }} {{ scope.row.score }}
<!-- <el-icon :color="scope.row.type === 1 ? '#67C23A' : '#F56C6C'">
<Bottom v-if="scope.row.type === 1" />
<Top v-else />
</el-icon> -->
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -41,85 +37,9 @@ ...@@ -41,85 +37,9 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue"; import MapTitle from "@/components/mapTitle/index.vue";
import { Bottom, Top } from "@element-plus/icons"; import { Bottom, Top } from "@element-plus/icons";
const TabData = [ import Mock from "./mock"
{ import { mapState } from "vuex";
name: "南湖区",
score: 69.5,
type: 1,
},
{
name: "萧山区",
score: 68,
type: 2,
},
{
name: "鄞州区",
score: 67,
type: 2,
},
{
name: "西湖区",
score: 66,
type: 2,
},
{
name: "长兴县",
score: 66,
type: 1,
},
{
name: "诸暨市",
score: 63,
type: 2,
},
{
name: "海曙区",
score: 60,
type: 2,
},
{
name: "上城区",
score: 60,
type: 1,
},
{
name: "永康市",
score: 59.5,
type: 2,
},
{
name: "衢江区",
score: 57.5,
type: 2,
},
{
name: "象山县",
score: 57,
type: 2,
},
{
name: "德清县",
score: 55.5,
type: 2,
},
{
name: "温岭市",
score: 52,
type: 2,
},
{
name: "缙云县",
score: 46.5,
type: 1,
},
];
const Colors = {
1: "#e45c5c",
2: "#ea8234",
3: "#fac858",
};
export default defineComponent({ export default defineComponent({
components: { components: {
...@@ -128,80 +48,16 @@ export default defineComponent({ ...@@ -128,80 +48,16 @@ export default defineComponent({
Top, Top,
}, },
setup() {}, setup() {},
computed:{
...mapState({
curDataType: (state) => state.curDataType,
}),
tableData() {
return Mock[this.curDataType]
},
},
data() { data() {
return { return {
tableData: [
{
name: "南湖区",
score: 69.5,
type: 1,
},
{
name: "萧山区",
score: 68,
type: 2,
},
{
name: "鄞州区",
score: 67,
type: 2,
},
{
name: "西湖区",
score: 66,
type: 2,
},
{
name: "长兴县",
score: 66,
type: 1,
},
{
name: "诸暨市",
score: 63,
type: 2,
},
{
name: "海曙区",
score: 60,
type: 2,
},
{
name: "上城区",
score: 60,
type: 1,
},
{
name: "永康市",
score: 59.5,
type: 2,
},
{
name: "衢江区",
score: 57.5,
type: 2,
},
{
name: "象山县",
score: 57,
type: 2,
},
{
name: "德清县",
score: 55.5,
type: 2,
},
{
name: "温岭市",
score: 52,
type: 2,
},
{
name: "缙云县",
score: 46.5,
type: 1,
},
],
colors: { colors: {
1: "#e45c5c", 1: "#e45c5c",
2: "#ea8234", 2: "#ea8234",
......
src/views/dataCenter/map/model/RankList/mock.js 0 → 100644
浏览文件 @ 3decb27c
export default {
"typeOne": [],
"typeTwo": [],
"typeThree": [
{
name: "南湖区",
score: 69.5,
type: 1,
},
{
name: "萧山区",
score: 68,
type: 2,
},
{
name: "鄞州区",
score: 67,
type: 2,
},
{
name: "西湖区",
score: 66,
type: 2,
},
{
name: "长兴县",
score: 66,
type: 1,
},
{
name: "诸暨市",
score: 63,
type: 2,
},
{
name: "海曙区",
score: 60,
type: 2,
},
{
name: "上城区",
score: 60,
type: 1,
},
{
name: "永康市",
score: 59.5,
type: 2,
},
{
name: "衢江区",
score: 57.5,
type: 2,
},
{
name: "象山县",
score: 57,
type: 2,
},
{
name: "德清县",
score: 55.5,
type: 2,
},
{
name: "温岭市",
score: 52,
type: 2,
},
{
name: "缙云县",
score: 46.5,
type: 1,
},
],
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论