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 @@
"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": {
"version": "2.0.2",
"resolved": "https://registry.nlark.com/which/download/which-2.0.2.tgz",
......
package.json
浏览文件 @ 3decb27c
......@@ -24,7 +24,8 @@
"style-loader": "^3.3.0",
"vite-plugin-mocker": "^1.0.7",
"vue": "^3.2.16",
"vue-router": "^4.0.11"
"vue-router": "^4.0.11",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
......
src/layout/head.vue
浏览文件 @ 3decb27c
......@@ -22,7 +22,11 @@
<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-card
shadow="hover"
......@@ -30,7 +34,8 @@
'second-active-nav': index === secondIndex,
}"
@click="secondHandle(item, index)"
>{{ item.name }}</el-card>
>{{ item.name }}</el-card
>
</el-col>
</el-row>
......@@ -61,9 +66,10 @@
</el-icon>
<span
:class="{
'lignht-color': index === curRouteHistoy.length - 1,
}"
>{{ item.label }}</span>
'lignht-color': index === curRouteHistoy.length - 1,
}"
>{{ item.label }}</span
>
</div>
</el-col>
</el-col>
......@@ -73,12 +79,13 @@
<div class="years" align="middle">
<span
v-for="(item, index) in years"
:key="item"
:key="item.label"
:class="{
active: index === curYearIndex,
}"
@click="yearHandle(index)"
>{{ item }}年</span>
@click="yearHandle(item.value, index)"
>{{ item.label }}年</span
>
</div>
</el-col>
</el-row>
......@@ -105,7 +112,20 @@ export default defineComponent({
activeIndex: 0,
secondIndex: 0,
curRouteHistoy: [],
years: ["2020年第四季度", "2021年第二季度", "2021上半年"],
years: [
{
label: "2020年第四季度",
value: "typeOne",
},
{
label: "2021年第二季度",
value: "typeTwo",
},
{
label: "2021上半年",
value: "typeThree",
},
],
curYearIndex: 2,
};
},
......@@ -142,7 +162,8 @@ export default defineComponent({
},
},
methods: {
yearHandle(index: number) {
yearHandle(value: String, index: number) {
this.$store.commit("SET_CUR_DATA_TYPE", value);
this.curYearIndex = index;
},
navClick(item: {}, index: number) {
......@@ -158,7 +179,6 @@ export default defineComponent({
// this.$router.push(item.link);
},
toPage(item) {
console.log("item-", item);
this.$router.push(item.path);
},
},
......
src/main.ts
浏览文件 @ 3decb27c
......@@ -3,11 +3,13 @@ import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from "./route/index"
import store from './store'
const app = createApp(App);
app.use(ElementPlus);
app.use(router)
app.use(store)
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 @@
<el-row class="economic-info" justify="space-between">
<el-col :span="11">
<div class="card-item">
<span class="card-text">国防要求建设项目</span>
<span class="card-text">{{ countryData.name || "--" }}</span>
<div class="info-wrapper">
<div class="info-details">
<div class="info-item">
<span class="title">项目数量</span>
<div><span>67</span>个</div>
</div>
<div class="info-item">
<span class="title">投资额</span>
<div><span>438.32</span>亿元</div>
<div
class="info-item"
v-for="item in countryData.info"
:key="item.label"
>
<span class="title">{{item.label || "--"}}</span>
<div><span>{{item.value || "--"}}</span>{{item.unit}}</div>
</div>
</div>
<!-- 环形进度条 -->
<div v-show="false" id="circularEchart" class="circular"></div>
......@@ -23,25 +23,25 @@
</div>
</el-col>
<el-col :span="1">
<el-divider direction="vertical"></el-divider>
</el-col>
<el-col :span="1">
<el-divider direction="vertical"></el-divider>
</el-col>
<el-col class="increase-rate" :span="11">
<div class="card-item">
<span class="card-text">省军民融合重大示范项目</span>
<span class="card-text">{{ provinceData.name || "--" }}</span>
<div class="info-wrapper">
<div class="info-details">
<div class="info-item">
<span class="title">项目数量</span>
<div><span>42</span>个</div>
</div>
<div class="info-item">
<span class="title">投资额</span>
<div><span>138.84</span>亿元</div>
<div class="info-details">
<div
class="info-item"
v-for="item in provinceData.info"
:key="item.label"
>
<span class="title">{{item.label || "--"}}</span>
<div><span>{{item.value || "--"}}</span>{{item.unit}}</div>
</div>
</div>
<!-- 环形进度条 -->
<div id="cirRightEchart" class="circular"></div>
......@@ -58,58 +58,9 @@ import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
const SeriesData = {
name: "国防要求建设项目",
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,
},
import Mock from "./mock";
import { mapState } from "vuex";
{
city: "台州",
value: 55.68,
},
{
city: "丽水",
value: 32.85,
},
],
};
const xAxisValue = [
"杭州",
"宁波",
......@@ -134,7 +85,6 @@ export default defineComponent({
setup() {},
data() {
return {
seriesData: SeriesData,
mapEcharts: null,
cirLeftCharts: null,
cirRightEchart: null,
......@@ -145,6 +95,18 @@ export default defineComponent({
this.initCircularEcharts();
},
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() {
const seriesBar = {
name: "投资金额",
......@@ -153,7 +115,7 @@ export default defineComponent({
color: "#4198ff",
},
barWidth: 20,
data: SeriesData.value.map((item) => {
data: this.seriesData.value.map((item) => {
return {
name: item.name,
value: item,
......@@ -169,7 +131,7 @@ export default defineComponent({
color: "#3aba67",
},
yAxisIndex: 1,
data: SeriesData.rate.map((item) => {
data: this.seriesData.rate.map((item) => {
return {
value: item.value,
label: "项目进度",
......@@ -220,8 +182,8 @@ export default defineComponent({
min: 0,
max: 100,
splitLine: {
show:false
}
show: false,
},
},
],
xAxis: {
......@@ -322,7 +284,7 @@ export default defineComponent({
};
},
ptionCirRight() {
const value = 0.4731;
const value = this.provinceData?.process || 0;
return {
backgroundColor: "#fff",
title: [
......@@ -337,7 +299,7 @@ export default defineComponent({
color: "#333",
textAlign: "center",
},
subtext: `${(value * 100)}%`,
subtext: `${value * 100}%`,
subtextStyle: {
fontSize: "16",
color: "#4198ff",
......@@ -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: {
initEcharts() {
const dom = document.getElementById("economicConstruct");
......@@ -499,7 +473,8 @@ export default defineComponent({
.info-wrapper {
margin-top: 5px;
display: flex;
align-items: center;
// align-items: center;
justify-content: space-between;
.info-details {
.info-item {
padding-left: 12px;
......@@ -538,14 +513,15 @@ export default defineComponent({
}
}
.circular {
.circular {
margin-right: 60px;
margin-left: 40px;
width: 100px;
height: 100px;
}
}
}
.el-divider{
.el-divider {
margin: 15% auto;
height: 70%;
background: #f3f3f3;
......@@ -559,7 +535,7 @@ export default defineComponent({
.economic-construct {
flex: 1;
min-height: 150px;
height: calc( 100% - 200px);
height: calc(100% - 200px);
box-sizing: border-box;
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>
{{curDataType}}
<el-row class="map-warpper" :gutter="16">
<el-col class="map-left" :span="8">
<div class="performance-com card-item"><Performance /></div>
......@@ -46,6 +47,7 @@ import Industrial from "./model/CardList/industrial.vue";
import SystemConstruct from "./model/CardList/systemConstruct.vue";
import { DataCenterRouter } from "@/route/dataCenter";
export default defineComponent({
components: {
Performance,
......@@ -59,6 +61,9 @@ export default defineComponent({
SystemConstruct,
},
setup() {},
computed: {
},
data() {
return {
dataCenterRouter: DataCenterRouter,
......
src/views/dataCenter/map/model/CardList/strongArmy.vue
浏览文件 @ 3decb27c
......@@ -29,17 +29,7 @@
<span class="font-size12 color-999">亿元</span>
</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>
<!-- foot -->
......
src/views/dataCenter/map/model/Income/index.vue
浏览文件 @ 3decb27c
......@@ -9,27 +9,14 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
enum Echart_color_Enum {
level_1 = "#fac858",
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"];
......@@ -47,8 +34,14 @@ export default defineComponent({
this.initEcharts();
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
option() {
const seriesBarList = seriesData.map((item, index) => {
const seriesBarList = this.seriesData.map((item, index) => {
return {
name: item.name,
type: "bar",
......@@ -66,7 +59,7 @@ export default defineComponent({
};
});
const seriesLineList = seriesData.map((item) => {
const seriesLineList = this.seriesData.map((item) => {
return {
type: "line",
tooltip: {
......@@ -140,6 +133,13 @@ export default defineComponent({
series: [...seriesBarList, ...seriesLineList],
};
},
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.option);
this.mapEcharts.hideLoading();
},
},
methods: {
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";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
const seriesData = [
{
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],
},
];
import Mock from "./mock";
import { mapState } from "vuex";
const xAxisValue = [
"杭州",
......@@ -48,8 +41,14 @@ export default defineComponent({
this.initEcharts();
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() {
const seriesBarList = seriesData.map((item, index) => {
const seriesBarList = this.seriesData.map((item, index) => {
return {
name: item.name,
type: "bar",
......@@ -66,7 +65,7 @@ export default defineComponent({
};
});
const seriesLineList = seriesData.map((item) => {
const seriesLineList = this.seriesData.map((item) => {
return {
name: "项目进度",
type: "line",
......@@ -111,7 +110,7 @@ export default defineComponent({
},
},
grid: {
left: "2%",
left: "5%",
right: "2%",
bottom: "3%",
containLabel: true,
......@@ -139,6 +138,14 @@ export default defineComponent({
};
},
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
methods: {
initEcharts() {
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 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
enum Bar_Enum {
level_1 = "#4f5d81",
level_2 = "#429a9d",
......@@ -20,38 +23,6 @@ enum Bar_Enum {
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 = [
"杭州",
"宁波",
......@@ -80,8 +51,14 @@ export default defineComponent({
this.initEcharts();
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() {
const seriesList = seriesData.map((item, index) => {
const seriesList = this.seriesData.map((item, index) => {
return {
name: item.name,
type: "bar",
......@@ -148,6 +125,13 @@ export default defineComponent({
};
},
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
methods: {
detailsHandle() {
console.log("---点击详情跳转");
......@@ -198,7 +182,6 @@ export default defineComponent({
display: inline-block;
border-radius: 50%;
background: red;
}
.per-formance-echart .row-item {
padding: 0 15px 10px 15px;
......@@ -220,8 +203,8 @@ export default defineComponent({
font-size: 18px;
margin-right: 5px;
}
.per-formance-echart .text{
color: #4191ff
.per-formance-echart .text {
color: #4191ff;
}
.per-formance-echart .color_1::before {
background: #4f2d11;
......
src/views/dataCenter/map/model/Performance/mock.js
浏览文件 @ 3decb27c
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 @@
:data="tableData"
size="small"
style="width: 100%"
empty-text="--"
empty-text="暂无数据"
header-row-class-name="tabs-header"
>
<el-table-column label="序号" width="120" align="center">
......@@ -28,10 +28,6 @@
<template #default="scope">
<div>
{{ 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>
</template>
</el-table-column>
......@@ -41,85 +37,9 @@
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import { Bottom, Top } from "@element-plus/icons";
const TabData = [
{
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",
};
import Mock from "./mock"
import { mapState } from "vuex";
export default defineComponent({
components: {
......@@ -128,80 +48,16 @@ export default defineComponent({
Top,
},
setup() {},
computed:{
...mapState({
curDataType: (state) => state.curDataType,
}),
tableData() {
return Mock[this.curDataType]
},
},
data() {
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: {
1: "#e45c5c",
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论