Skip to content

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

大屏新版修改 2022,08,26

上级 6d510dc7
隐藏空白字符变更
内嵌 并排
正在显示 包含 771 行增加 和 142 行删除
src/components/mapTitle/index.vue
浏览文件 @ a53ca63b
<template> <template>
<div class="title"> <div class="title">
{{ this.text }} {{ this.text }}
<span <span v-if="detailsHandle" @click="detailsHandle && detailsHandle()">
v-if="detailsHandle" <!-- {{ textRight || "更多" }} -->
@click="detailsHandle && detailsHandle()" </span>
>{{textRight || "更多"}}</span>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -35,6 +34,7 @@ export default defineComponent({ ...@@ -35,6 +34,7 @@ export default defineComponent({
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
&::before { &::before {
content: " "; content: " ";
display: inline-block; display: inline-block;
...@@ -45,12 +45,14 @@ export default defineComponent({ ...@@ -45,12 +45,14 @@ export default defineComponent({
height: 80%; height: 80%;
background: #19ecff; background: #19ecff;
} }
span { span {
font-weight: 400; font-weight: 400;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
color: #19ecff; color: #19ecff;
&:hover { &:hover {
color: #62b3ef; color: #62b3ef;
} }
......
src/layout/download.js 0 → 100644
浏览文件 @ a53ca63b
import axios from 'axios'
import { ElLoading } from 'element-plus'
// import vue from 'vue';
// import { createApp } from 'vue'
// import {defineComponent, onMounted} from 'vue'//引入方法
const mimeMap = {
xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
zip: 'application/zip',
wps: 'application/wps'
}
// const baseUrl = process.env.VUE_APP_BASE_API;
// const baseUrl = window.baseURL ? (process.env.NODE_ENV === 'development' ? window.baseURL.devUrl : window.baseURL.prodUrl) : process.env.VUE_APP_BASE_API;
let loading; // loading;
export function downLoadWps(filename) {
loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)'
})
axios({
method: 'get',
url: 'http://192.168.0.132:9095/indexImport/quarterlyReport',
responseType: 'blob',
// headers: { 'Authorization': 'Bearer ' + getToken() }
}).then(res => {
resolveBlob(res, mimeMap.wps,filename)
})
}
/**
* 解析blob响应内容并下载
* @param {*} res blob响应内容
* @param {String} mimeType MIME类型
*/
export function resolveBlob(res, mimeType, fileName) {
// 异常处理
if (res.data.type == "application/json") {
const reader = new FileReader();
reader.onload = function (e) {
const { msg } = JSON.parse(e.target.result);
// Vue.config.globalProperties.$message.error(msg);
}
reader.readAsText(res.data);
if (loading) loading.close();
return
}
if (loading) loading.close();
var blob = new Blob([res.data], { type: mimeType });
// //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*');
var contentDisposition = decodeURI(res.headers['content-disposition']);
if(fileName){
console.log('有文件名');
}else if (contentDisposition == undefined || contentDisposition == 'undefined') {
console.log('文件名未获取到');
} else {
var result = patt.exec(contentDisposition)
var name = result[1];
fileName = name.replace(/\"/g, '')
}
let objectUrl = URL.createObjectURL(blob)
const aLink = document.createElement('a')
try {
aLink.style.display = 'none'
aLink.href = URL.createObjectURL(blob)
aLink.setAttribute('download', fileName) // 设置下载文件名称
document.body.appendChild(aLink)
aLink.click()
URL.revokeObjectURL(aLink.href); //清除引用
document.body.removeChild(aLink);
// Vue.config.globalProperties.$download.saveAs(objectUrl, fileName);
} catch (e) {
console.log(e, '异常');
}
}
\ No newline at end of file
src/layout/head.vue
浏览文件 @ a53ca63b
<template> <template>
<div class="app-head-warpper"> <div class="app-head-warpper">
<div class="header-bg"></div> <div class="header-bg">
<a class="generate" @click="downloadFile" v-if="curDataType == '2022Two'">
<img src="@/assets/img/generate.png" alt=""> 生成本季度报告
</a>
</div>
<!-- 一级导航栏 --> <!-- 一级导航栏 -->
<!-- <el-row :gutter="20" class="app-header" type="flex" align="cneter"> <!-- <el-row :gutter="20" class="app-header" type="flex" align="cneter">
<el-col :span="6" class="title">创新示范绩效评价</el-col> <el-col :span="6" class="title">创新示范绩效评价</el-col>
...@@ -23,58 +27,34 @@ ...@@ -23,58 +27,34 @@
<div class="container"> <div class="container">
<!-- 二级导航栏 --> <!-- 二级导航栏 -->
<el-row <el-row v-if="(secodndList || []).length > 0" class="second-nav" :gutter="20">
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" :class="{
shadow="hover" 'second-active-nav': index === secondIndex,
:class="{ }" @click="secondHandle(item, index)">{{ item.name }}</el-card>
'second-active-nav': index === secondIndex,
}"
@click="secondHandle(item, index)"
>{{ item.name }}</el-card
>
</el-col> </el-col>
</el-row> </el-row>
<!-- 行动轨迹记录 --> <!-- 行动轨迹记录 -->
<el-row v-if="curRouteHistoy.length > 0" class="proceed-record"> <el-row v-if="curRouteHistoy.length > 0" class="proceed-record">
<el-col class="nav-history" :span="17"> <el-col class="nav-history" :span="17">
<el-row <el-row class="pointer" @click="$router.go(-1)" align="middle" v-if="$route.path !== '/dataCenter/map'">
class="pointer" <el-icon>
@click="$router.go(-1)" <ArrowLeftBold />
align="middle" </el-icon>返回
v-if="$route.path !== '/dataCenter/map'"
>
<el-icon> <ArrowLeftBold /> </el-icon>返回
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
</el-row> </el-row>
<el-col class="nav-history-item" :span="18"> <el-col class="nav-history-item" :span="18">
<div <div v-for="(item, index) in curRouteHistoy" :key="item" class="proceed-item" :class="{
v-for="(item, index) in curRouteHistoy" 'lignht-color': index === curRouteHistoy.length - 1,
:key="item" }" @click="toPage(item)">
class="proceed-item" <el-icon v-if="index > 0" :color="index === curRouteHistoy.length - 1 ? '#00daf6' : ''">
:class="{
'lignht-color': index === curRouteHistoy.length - 1,
}"
@click="toPage(item)"
>
<el-icon
v-if="index > 0"
:color="index === curRouteHistoy.length - 1 ? '#00daf6' : ''"
>
<CaretRight /> <CaretRight />
</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>
...@@ -82,16 +62,22 @@ ...@@ -82,16 +62,22 @@
<!-- 年度 --> <!-- 年度 -->
<el-col class="year-items"> <el-col class="year-items">
<div class="years" align="middle"> <div class="years" align="middle">
<span <el-button class="left" @click="pageNum--" :disabled="pageNum == 0">
v-for="(item, index) in years" <img src="@/assets/img/left.png" v-if="pageNum == 0" alt="">
:key="item.label" <img src="@/assets/img/leftAct.png" v-else alt="">
:class="{ </el-button>
active: index === curYearIndex, <div class="yearBox">
disabed: item.disabed, <div class="yearLi" :style="{ left: '-' + 25 * pageNum + '%' }">
}" <span v-for="(item, index) in years" :key="item.label" :class="{
@click="yearHandle(item, index)" active: index === curYearIndex,
>{{ item.label }}</span disabed: item.disabed,
> }" @click="yearHandle(item, index)">{{ item.label }}</span>
</div>
</div>
<el-button class="right" @click="pageNum++" :disabled="pageNum == 1">
<img src="@/assets/img/right.png" v-if="pageNum == 1" alt="">
<img src="@/assets/img/rightAct.png" v-else alt="">
</el-button>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -103,6 +89,10 @@ import { defineComponent } from "vue"; ...@@ -103,6 +89,10 @@ import { defineComponent } from "vue";
import { getNavList } from "./service"; import { getNavList } from "./service";
import NavList from "./navList.json"; import NavList from "./navList.json";
import { ArrowLeftBold, CaretRight } from "@element-plus/icons"; import { ArrowLeftBold, CaretRight } from "@element-plus/icons";
import { mapState } from "vuex";
import {downLoadWps} from './download.js'
import axios from "axios"
//使用
const ENV_PARAMS = import.meta.env; // 这是Vite官方指导获取环境变量的方式 const ENV_PARAMS = import.meta.env; // 这是Vite官方指导获取环境变量的方式
...@@ -118,6 +108,7 @@ export default defineComponent({ ...@@ -118,6 +108,7 @@ export default defineComponent({
activeIndex: 0, activeIndex: 0,
secondIndex: 0, secondIndex: 0,
curRouteHistoy: [], curRouteHistoy: [],
pageNum: 1,
years: [ years: [
{ {
label: "2021年第二季度", label: "2021年第二季度",
...@@ -139,11 +130,21 @@ export default defineComponent({ ...@@ -139,11 +130,21 @@ export default defineComponent({
value: "2022One", value: "2022One",
disabed: false, disabed: false,
}, },
{
label: "2022年第二季度",
value: "2022Two",
disabed: false,
},
], ],
curYearIndex: 2, curYearIndex: 2,
}; };
}, },
created() {}, created() { },
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
},
async mounted() { async mounted() {
// @ts-ignore // @ts-ignore
this.navList = NavList || []; this.navList = NavList || [];
...@@ -179,6 +180,11 @@ export default defineComponent({ ...@@ -179,6 +180,11 @@ export default defineComponent({
}, },
methods: { methods: {
// 文件下载 流文件下载
downloadFile() {
downLoadWps('全省军民融合创新示范建设情况分析.wps');
},
init() { init() {
const { meta, path } = this.$route; const { meta, path } = this.$route;
const { VITE_SYSTEM_NAMR = "创新示范绩效评价" } = ENV_PARAMS; const { VITE_SYSTEM_NAMR = "创新示范绩效评价" } = ENV_PARAMS;
...@@ -219,14 +225,40 @@ export default defineComponent({ ...@@ -219,14 +225,40 @@ export default defineComponent({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.generate {
// background-color: initial;
background-image: url('../assets/img/butbg.png') !important;
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
border: none;
padding: 14px 18px;
top: 16px;
right: 10px;
color: #ffffff;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 31px;
height: 27px;
margin-right: 8px;
}
}
.pointer { .pointer {
cursor: pointer; cursor: pointer;
margin-left: 10px; margin-left: 10px;
color: #d4f7ff; color: #d4f7ff;
&:hover { &:hover {
color: #00daf6; color: #00daf6;
} }
} }
.nav-history::after { .nav-history::after {
content: ""; content: "";
width: 11px; width: 11px;
...@@ -235,6 +267,7 @@ export default defineComponent({ ...@@ -235,6 +267,7 @@ export default defineComponent({
left: 0px; left: 0px;
background-color: rgba(25, 125, 237, 20%); background-color: rgba(25, 125, 237, 20%);
} }
.nav-history::before { .nav-history::before {
content: ""; content: "";
width: 11px; width: 11px;
...@@ -244,9 +277,11 @@ export default defineComponent({ ...@@ -244,9 +277,11 @@ export default defineComponent({
right: 0px; right: 0px;
background-color: rgba(25, 125, 237, 20%); background-color: rgba(25, 125, 237, 20%);
} }
.app-head-warpper { .app-head-warpper {
// background: #f5f9fb; // background: #f5f9fb;
box-sizing: border-box; box-sizing: border-box;
.header-bg { .header-bg {
height: 84px; height: 84px;
width: 100%; width: 100%;
...@@ -255,17 +290,21 @@ export default defineComponent({ ...@@ -255,17 +290,21 @@ export default defineComponent({
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-bottom: 5px; margin-bottom: 5px;
position: relative;
} }
.container { .container {
// padding: 0 20px; // padding: 0 20px;
box-sizing: border-box; box-sizing: border-box;
} }
// 一级导航栏 // 一级导航栏
.app-header { .app-header {
background: linear-gradient(to right, #0655bc, #317bdd); background: linear-gradient(to right, #0655bc, #317bdd);
height: 85px; height: 85px;
margin: 0 0 20px !important; margin: 0 0 20px !important;
box-sizing: border-box; box-sizing: border-box;
.title { .title {
font-size: 26px; font-size: 26px;
display: flex; display: flex;
...@@ -274,10 +313,12 @@ export default defineComponent({ ...@@ -274,10 +313,12 @@ export default defineComponent({
color: #fff; color: #fff;
letter-spacing: 5px; letter-spacing: 5px;
} }
.nav-item { .nav-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.rote-link-item { .rote-link-item {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -286,12 +327,14 @@ export default defineComponent({ ...@@ -286,12 +327,14 @@ export default defineComponent({
nav { nav {
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #4198ff; color: #4198ff;
} }
} }
} }
} }
.active-nav { .active-nav {
background: #06489e; background: #06489e;
} }
...@@ -302,9 +345,11 @@ export default defineComponent({ ...@@ -302,9 +345,11 @@ export default defineComponent({
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 20px; margin-bottom: 20px;
cursor: pointer; cursor: pointer;
.el-card { .el-card {
text-align: center; text-align: center;
} }
.second-active-nav { .second-active-nav {
color: #fff; color: #fff;
background: #4198ff; background: #4198ff;
...@@ -323,6 +368,7 @@ export default defineComponent({ ...@@ -323,6 +368,7 @@ export default defineComponent({
font-size: 14px; font-size: 14px;
height: 40px; height: 40px;
color: #999; color: #999;
.nav-history { .nav-history {
padding-left: 10px; padding-left: 10px;
width: 100%; width: 100%;
...@@ -335,9 +381,11 @@ export default defineComponent({ ...@@ -335,9 +381,11 @@ export default defineComponent({
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.nav-history-item { .nav-history-item {
display: flex; display: flex;
height: 100%; height: 100%;
.proceed-item { .proceed-item {
color: #d4f7ff; color: #d4f7ff;
display: flex; display: flex;
...@@ -345,38 +393,90 @@ export default defineComponent({ ...@@ -345,38 +393,90 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
margin-left: 5px; margin-left: 5px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #00daf6; color: #00daf6;
} }
.el-icon { .el-icon {
margin-right: 2px; margin-right: 2px;
} }
} }
} }
} }
.year-items { .year-items {
display: flex; display: flex;
width: 100%; width: 100%;
margin-left: 16px; margin-left: 16px;
border-radius: 5px; // overflow: hidden;
overflow: hidden;
flex: 1; flex: 1;
height: 40px; height: 40px;
background: rgba(25, 125, 237, 15%);
border: 1px solid #125caf;
.years { .years {
display: flex; display: flex;
align-items: center; align-items: center;
height: 40px; height: 42px;
flex: 1; flex: 1;
overflow: hidden; // overflow: hidden;
span { .left,
.right {
width: 20px;
padding: 0 2px;
border: 0;
height: 100%;
padding: 5px 2px;
background-color: rgba(25, 125, 237, 60%);
position: relative;
border-radius: 2px;
img {
width: 60%;
height: 60%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
.right.is-disabled,
.left.is-disabled {
// #197ded不透明度20%未选中
background-color: rgba(25, 125, 237, 20%);
}
.yearBox {
height: 100%;
flex: 1;
overflow: hidden;
position: relative;
border: 1px solid #125caf;
background: rgba(25, 125, 237, 15%);
border-radius: 5px;
margin: 0 6px;
}
.yearLi {
width: 100%; width: 100%;
display: flex; display: flex;
flex: 1;
height: 100%;
position: absolute;
top: 0;
}
span {
// width: 100%;
min-width: 25%;
box-sizing: border-box;
display: flex;
align-items: center; align-items: center;
padding: 0 12px; padding: 0 3px;
font-size: 14px; font-size: 14px;
height: inherit; height: inherit;
color: #d4f7ff; color: #d4f7ff;
...@@ -384,6 +484,10 @@ export default defineComponent({ ...@@ -384,6 +484,10 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
border-right: 1px solid #125caf; border-right: 1px solid #125caf;
} }
// span:first-child{
// border: ;
// }
.active { .active {
background-color: #197ded; background-color: #197ded;
color: #fff; color: #fff;
...@@ -395,6 +499,7 @@ export default defineComponent({ ...@@ -395,6 +499,7 @@ export default defineComponent({
color: #00daf6; color: #00daf6;
} }
} }
.disabed { .disabed {
// background:#f5f5f5 !important; // background:#f5f5f5 !important;
cursor: not-allowed !important; cursor: not-allowed !important;
......
src/views/dataCenter/map/cradMock.js
浏览文件 @ a53ca63b
export default { export default {
"2022Two": {
list: [
{ label: "领跑产品（技术）", value: "58", unit: "个" },
{ label: "军地协同创新平台", value: "274", unit: "个" },
{ label: "新兴领域研发经费", value: 3.20, unit: "亿元" },
],
list2x: [
{ label: "军工科研设备设施开放共享", value: "170018", unit: "台" },
{ label: "军民资源共享信息平台数量", value: "784", unit: "个" },
{ label: "军地需求对接活动数量", value: "39", unit: "次" },
],
},
"2022One": { "2022One": {
list: [ list: [
{ label: "领跑产品（技术）", value: "63", unit: "个" }, { label: "领跑产品（技术）", value: "63", unit: "个" },
......
src/views/dataCenter/map/index.vue
浏览文件 @ a53ca63b
<template> <template>
<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">
<div class="card-item rank-list"><RankList /></div> <Performance />
</div>
<div class="performance-com card-item">
<InvestmentProgress />
</div>
</el-col> </el-col>
<el-col :span="9"> <el-col :span="9">
<div class="map-middle"> <div class="map-middle">
<div class="card-item map-item"><Map /></div> <div class="card-item map-item">
<Map @mapClick="mapClick"></Map>
<div class="sfqx" v-if="curDataType == '2022Two'">
<p>创新示范区县</p>
<div class="text">
<div v-for="(txt,index) in sfqx" :key="index">
{{txt}}
</div>
</div>
</div>
</div>
</div> </div>
</el-col> </el-col>
<el-col :span="7"> <el-col :span="7">
<div class="map-right"> <div class="map-right">
<div class="performance-com card-item"><InvestmentProgress /></div>
<div class="card-item incom-graphic"><Income /></div> <div class="card-item rank-list">
<RankList />
</div>
<div class="card-item incom-graphic">
<Income />
</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<!-- 卡片信息展示 --> <!-- 卡片信息展示 -->
<div class="card-list" :gutter="16"> <div class="card-list" :gutter="16">
<el-col class="card-item"><StrongArmyCard /></el-col> <el-col class="card-item">
<el-col class="card-item" <StrongArmyCard />
><CardItem </el-col>
title="军民协同创新" <el-col class="card-item">
:infoList="list" <CardItem title="军民协同创新" :infoList="list" :toPage="dataCenterRouter.INNOVATION" />
:toPage="dataCenterRouter.INNOVATION" </el-col>
/></el-col> <el-col class="card-item">
<el-col class="card-item"><Industrial /></el-col> <Industrial />
<el-col class="card-item" </el-col>
><CardItem <el-col class="card-item">
:infoList="list2x" <CardItem :infoList="list2x" title="资源开放共享" :toPage="dataCenterRouter.RESORCE_SHARE" />
title="资源开放共享" </el-col>
:toPage="dataCenterRouter.RESORCE_SHARE" <el-col class="card-item">
/></el-col> <SystemConstruct />
<el-col class="card-item"><SystemConstruct /></el-col> </el-col>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -64,7 +83,7 @@ export default defineComponent({ ...@@ -64,7 +83,7 @@ export default defineComponent({
Industrial, Industrial,
SystemConstruct, SystemConstruct,
}, },
setup() {}, setup() { },
computed: { computed: {
...mapState({ ...mapState({
curDataType: (state) => state.curDataType, curDataType: (state) => state.curDataType,
...@@ -80,11 +99,50 @@ export default defineComponent({ ...@@ -80,11 +99,50 @@ export default defineComponent({
data() { data() {
return { return {
dataCenterRouter: DataCenterRouter, dataCenterRouter: DataCenterRouter,
sfqx: ["上城区,西湖区,萧山区", "海曙区,鄞州区,象山县", "南湖区,德清县,长兴县", "诸暨市,永康市,衢江区", "温岭市,缙云县,滨江区", "北仑区,海宁市,柯桥区", "普陀区"]
}; };
}, },
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.sfqx {
position: absolute;
bottom: 5px;
right: 5px;
// height: 184px;
width: 145px;
background-color: rgba(25, 125, 237, 30%);
padding: 10px;
box-sizing: border-box;
p {
color: #19ecff;
font-size: 16px;
line-height: 19.2px;
padding-left: 10px;
position: relative;
margin-bottom: 4px;
}
p::before {
content: "";
width: 4px;
height: 14px;
background-color: #19ecff;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
.text {
color: #ffffff;
font-size: 13px;
line-height: 22px;
}
}
.card-item { .card-item {
// background: #fff; // background: #fff;
background-color: rgba(25, 125, 237, 15%); background-color: rgba(25, 125, 237, 15%);
...@@ -94,7 +152,7 @@ export default defineComponent({ ...@@ -94,7 +152,7 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
box-shadow: 2px 2px 10px #04223d10; box-shadow: 2px 2px 10px #04223d10;
border: 1px solid #10529a; border: 1px solid #10529a;
// &:hover { // &:hover {
// // transform: translateY(-5px); // // transform: translateY(-5px);
// transition: all 0.2s; // transition: all 0.2s;
...@@ -106,27 +164,35 @@ border: 1px solid #10529a; ...@@ -106,27 +164,35 @@ border: 1px solid #10529a;
height: 640px; height: 640px;
box-sizing: border-box; box-sizing: border-box;
flex: 1; flex: 1;
.map-left { .map-left {
box-sizing: border-box; box-sizing: border-box;
.rank-list { .rank-list {
margin-top: 16px; margin-top: 16px;
height: 312px; height: 312px;
box-sizing: border-box; box-sizing: border-box;
} }
} }
.map-middle { .map-middle {
height: 640px; height: 640px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
.card-item { .card-item {
padding: 0; padding: 0;
} }
.map-item { .map-item {
width: 100%; width: 100%;
position: relative;
} }
} }
.map-right { .map-right {
box-sizing: border-box; box-sizing: border-box;
.incom-graphic { .incom-graphic {
margin-top: 16px; margin-top: 16px;
height: 312px; height: 312px;
...@@ -140,10 +206,12 @@ border: 1px solid #10529a; ...@@ -140,10 +206,12 @@ border: 1px solid #10529a;
margin-top: 16px; margin-top: 16px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
.el-col { .el-col {
flex: 1; flex: 1;
margin-right: 16px; margin-right: 16px;
height: 310px; height: 310px;
&:last-of-type { &:last-of-type {
margin-right: 0; margin-right: 0;
} }
......
src/views/dataCenter/map/model/CardList/industrialMcok.js
浏览文件 @ a53ca63b
export default { export default {
"2022Two": [{
title: "军民融合主营业务收入",
rate: "8.43%",
value: "3876.16",
label: "主营业务收入",
valueUnit: "亿元",
},
{
title: "国防科技工业产值",
rate: "14.4%",
value: "1441",
label: "产值",
valueUnit: "亿元",
},
],
"2022One": [{ "2022One": [{
title: "军民融合主营业务收入", title: "军民融合主营业务收入",
rate: "13.66%", rate: "13.66%",
......
src/views/dataCenter/map/model/CardList/strongArmyMock.js
浏览文件 @ a53ca63b
export default { export default {
"2022Two": {
// 贯彻国防要求的建设项目
country: [{
label: "贯彻国防要求的建设项目",
value: 19,
unit: "个"
},
{
label: "总投资",
value: 30.19,
unit: "亿元"
},
],
// 国防科技工业军品收入
technologyIncome: 134.29,
// 民口单位人均军品收入
militaryIncome: '90.36',
// 应届大学生应征入伍
enlistVal: 3408,
enlistRateVal: "54.7"
},
"2022One": { "2022One": {
// 贯彻国防要求的建设项目 // 贯彻国防要求的建设项目
country: [{ country: [{
......
src/views/dataCenter/map/model/CardList/systemConstructMock.js
浏览文件 @ a53ca63b
export default { export default {
"2022Two": {
meetingCount: 8, // 各地召开融委全体会议次数
workeCount: 26, // 与当地军分区（警备区）建立并落实军地协作工作机制
fullTime: 105, // 专职
partTime: 125 // 兼职 数据暂缺 取2021年数据
},
"2022One": { "2022One": {
meetingCount: 16, // 各地召开融委全体会议次数 meetingCount: 16, // 各地召开融委全体会议次数
workeCount: 77, // 与当地军分区（警备区）建立并落实军地协作工作机制 workeCount: 77, // 与当地军分区（警备区）建立并落实军地协作工作机制
......
src/views/dataCenter/map/model/InvestmentProgress/mock.js
浏览文件 @ a53ca63b
export default { export default {
"2022Two": [{
name: "投资金额",
type: "level_2",
echartType: "bar",
barValue: [41.15,51.49,23.91,7.68,35.28,11.60,13.41,7.52,23.21,9.65,10.41],
growthRate: [68.19,40.90,43.84,74.96,108.79,61.03,34.55,53.73,29.14,33.10,55.48],
}],
"2022One": [ "2022One": [
{ {
name: "投资金额", name: "投资金额",
......
src/views/dataCenter/map/model/Map/index.vue
浏览文件 @ a53ca63b
...@@ -7,37 +7,176 @@ import * as echarts from "echarts"; ...@@ -7,37 +7,176 @@ import * as echarts from "echarts";
// import { getMapGeoData, getMapPointList } from "../service"; // import { getMapGeoData, getMapPointList } from "../service";
import getMapGeoData from "./mapGeoData.js"; import getMapGeoData from "./mapGeoData.js";
import mapPointList from "./mapPointList"; import mapPointList from "./mapPointList";
import mapFiveData from "../Performance/mock";
import { mapState } from "vuex";
const xAxisValue = [
"杭州市",
"宁波市",
"温州市",
"湖州市",
"嘉兴市",
"绍兴市",
"金华市",
"衢州市",
"舟山市",
"台州市",
"丽水市",
];
export default defineComponent({ export default defineComponent({
setup() {},
mounted() {
this.initEcharts();
},
data() { data() {
return { return {
pointList: [], pointList: [],
mapEcharts: null, mapEcharts: null,
fiveItems: {},
cityScore: [],
}; };
}, },
watch: {
// 更新地图数据
curDataType(val) {
if (this.mapEcharts) {
this.mapEcharts.setOption(this.options());
}
}
},
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
activeMapData() {
return mapFiveData[this.curDataType];
},
},
mounted() {
// if(this.curDataType == '2022Two'){
// this.fiveItems = mapFiveData;
// }
this.initEcharts();
},
methods: {
async initEcharts() {
// const { data: getMapData } = await getMapGeoData();
// const { data: pointList } = await getMapPointList();
const { data: getMapData } = getMapGeoData;
const { data: pointList } = mapPointList;
echarts.registerMap("ZJ", getMapData);
const mapEcharts = echarts.init(document.getElementById("map"));
mapEcharts.showLoading({ color: "#fff" });
mapEcharts.on("click", (params) => { this.mapClickHandle(params) });
this.pointList = pointList || [];
setTimeout(() => {
mapEcharts.setOption(this.options());
mapEcharts.hideLoading();
this.mapEcharts = mapEcharts;
}, 400);
},
// 点击事件
mapClickHandle(data) {
// console.log('点击', data);
if (data.name == '杭州市' && this.curDataType == '2022Two') {
// this.$emit('mapClick',)
}
},
// 数据处理
dataFormat() {
let mapData = xAxisValue.map(name => { return { name: name } });
const fiveItemBgColor = {
level_1: "#23bcf9",
level_2: "#67bbf9",
level_3: "#0ecedd",
level_4: "#eca933",
level_5: "#4198ff",
}
mapData.map((item, i) => {
let score = 0;
let fiveItems = Object.keys(this.activeMapData).map(key => {
score += this.activeMapData[key].value[i];
return {
name: this.activeMapData[key].name,
type: this.activeMapData[key].type,
fraction: this.activeMapData[key].value[i],
bgColor: fiveItemBgColor[this.activeMapData[key].type]
}
})
item.fiveItems = fiveItems;
item.score = score;
})
this.cityScore = mapData;
return mapData;
},
// options
options() { options() {
const cityScore = this.dataFormat();
function liHTml(fiveItems) {
let fiveScoreHtml = '';
fiveItems.map(data => {
fiveScoreHtml += `<div class="dataLi"><span class="circular" style="background-color:${data.bgColor}" ></span><span class="name">${data.name}</span> <span class="branchNum">${data.fraction}</span><span class="branch">分</span></div>`
})
// `<div class="dataLi">
// <span class="circular" ></span>
// <span class="name">${cityData.fiveItems[i].name}</span>
// <span class="branchNum">${cityData.fiveItems[i].fraction}</span>
// <span class="branch">分</span>
// </div>`
// console.log(JSON.stringify(fiveScoreHtml),'555');
return fiveScoreHtml
}
function mapText(data) {
const cityData = cityScore.filter(item => data.name == item.name)[0];
let titHtml = `<div class="tit">
<span class="titIcon"></span>
<span class="cityName">${cityData.name}</span>
<span class="titBranchNum"> ${cityData.score}</span>
<span class="branch">分</span></div>`
let fiveScoreHtml = liHTml(cityData.fiveItems);
let html = `<div class="mapTooltip">` + titHtml + fiveScoreHtml + `</div>`
return html;
}
return { return {
// tooltip 作用在series 中的数据
tooltip: { tooltip: {
// borderColor: "#333", backgroundColor: '#054593',
// opacity: '85%',
// borderRadius: '3px',
// boxShadow:'0px 2.28px 6.83px rgba(19, 65, 132, 0.15)',
textStyle: {
color: "#fff",
fontSize: 16,
align: "left"
},
trigger: "item",
formatter: function (params) { formatter: function (params) {
return params.name; return mapText(params.data);
}, },
}, },
// geo 设置 tooltip 无用
geo: { geo: {
map: "ZJ", map: "ZJ",
show: true, roam: false,
// roam: true,
label: { label: {
normal: {
show: false,
},
emphasis: { emphasis: {
show: false, show: false,
}, },
}, },
// <----选中效果
select: {
label: {
show: false,
},
itemStyle: {
color: '#2581c3'
}
},
// --->
itemStyle: { itemStyle: {
normal: { normal: {
areaColor: "#0f4c8f", areaColor: "#0f4c8f",
...@@ -61,6 +200,7 @@ export default defineComponent({ ...@@ -61,6 +200,7 @@ export default defineComponent({
containLabel: true, containLabel: true,
}, },
series: [ series: [
// 散点
{ {
type: "effectScatter", type: "effectScatter",
coordinateSystem: "geo", coordinateSystem: "geo",
...@@ -96,6 +236,38 @@ export default defineComponent({ ...@@ -96,6 +236,38 @@ export default defineComponent({
symbolSize: 7, symbolSize: 7,
data: this.pointList, data: this.pointList,
}, },
{
type: 'map',
map: "ZJ",
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
color: '#fff',
},
},
},
roam: true,
itemStyle: {
normal: {
show: false,
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
show: false,
areaColor: '#2B91B7',
},
},
animation: false,
data: this.pointList,
},
// type: 'effectScatter', // 类型 // type: 'effectScatter', // 类型
// coordinateSystem: 'geo', // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo' // coordinateSystem: 'geo', // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
// // 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', // // 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',
...@@ -105,28 +277,6 @@ export default defineComponent({ ...@@ -105,28 +277,6 @@ export default defineComponent({
}; };
}, },
}, },
methods: {
async initEcharts() {
// const { data: getMapData } = await getMapGeoData();
// const { data: pointList } = await getMapPointList();
const { data: getMapData } = getMapGeoData;
const { data: pointList } = mapPointList;
echarts.registerMap("ZJ", getMapData);
const mapEcharts = echarts.init(document.getElementById("map"));
mapEcharts.showLoading({ color: "#fff" });
mapEcharts.on("click", this.mapClickHandle);
this.pointList = pointList || [];
setTimeout(() => {
mapEcharts.setOption(this.options);
mapEcharts.hideLoading();
this.mapEcharts = mapEcharts;
}, 400);
},
mapClickHandle() {},
},
unmounted() { unmounted() {
if (!this.mapEcharts) { if (!this.mapEcharts) {
return; return;
...@@ -138,6 +288,70 @@ export default defineComponent({ ...@@ -138,6 +288,70 @@ export default defineComponent({
</script> </script>
<style > <style >
/* // 地图 tooltip format */
.mapTooltip .titIcon {
display: inline-block;
width: 3px;
height: 13px;
background-color: #10f9ff;
margin-right: 3px;
}
.mapTooltip .cityName {
width: 47.16px;
height: 22.34px;
font-family: AlibabaPuHuiTi-Medium;
color: #10f9ff;
font-size: 16px;
line-height: 19.2px;
}
.mapTooltip .circular {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 4px;
margin-right: 3px;
}
.mapTooltip .name {
width: 84.14px;
height: 19.61px;
font-family: AlibabaPuHuiTiR-GBpc-EUC-H;
color: #ffffff;
font-size: 14px;
line-height: 16.8px;
}
.mapTooltip .titBranchNum {
width: 28.16px;
height: 22.2px;
font-family: AlibabaPuHuiTi-Medium;
color: #10f9ff;
font-size: 16px;
line-height: 19.2px;
}
.mapTooltip .branchNum {
width: 16.14px;
height: 20.12px;
font-family: AlibabaPuHuiTi-Medium;
color: #19ecff;
font-size: 14px;
line-height: 16.8px;
}
.mapTooltip .branch {
width: 11.11px;
height: 15.08px;
font-family: AlibabaPuHuiTiR-GBpc-EUC-H;
color: #ffffff;
font-size: 11px;
line-height: 13.2px;
margin-left: 5px;
}
/* */
.map-item canvas:first-of-type { .map-item canvas:first-of-type {
transform: scaleY(1.1) scaleX(1.3); transform: scaleY(1.1) scaleX(1.3);
} }
......
src/views/dataCenter/map/model/Performance/mock.js
浏览文件 @ a53ca63b
...@@ -10,6 +10,31 @@ export default { ...@@ -10,6 +10,31 @@ export default {
// "舟山", // "舟山",
// "台州", // "台州",
// "丽水", // "丽水",
"2022Two": [{
name: "服务强军兴军",
type: "level_1",
value: [21.25,21.0,14.25,18.75,22.5,20.25,15.75,21.0,12.25,12.0,17.25],
},
{
name: "军民协同创新",
type: "level_3",
value: [18.5,13.5,9.5,3.5,13.0,11.5,4.0,13.0,2.5,6.5,2.5],
},
{
name: "产业融合发展",
type: "level_2",
value: [9.0,10.0,11.0,3.0,11,13.0,11.5,10.5,7.0,11.0,5.0],
},
{
name: "资源开放共享",
type: "level_4",
value: [12.0,13.5,10.0,13.0,14.5,14.0,9.0,9.0,9.0,12.5,8.0],
},
{
name: "五大体系建设",
type: "level_5",
value: [10.9,10.4,6.3,7.4,9.2,8.4,5.65,9.4,10.5,7.4,5.9],
}],
"2022One": [{ "2022One": [{
name: "服务强军兴军", name: "服务强军兴军",
type: "level_1", type: "level_1",
......
src/views/dataCenter/map/model/RankList/index.vue
浏览文件 @ a53ca63b
<template> <template>
<div> <div style="height:100%">
<MapTitle text="创新示范区县(市、区）排名" /> <MapTitle text="创新示范区县(市、区）排名" />
<!-- 内容 -->
<div class="rankingContent">
<!-- 头部 -->
<div class="rankingBox">
<div class="tableBox">
<el-row class="tabletit">
<el-col :span="6">序号</el-col>
<el-col :span="12">地区</el-col>
<el-col :span="6">分数</el-col>
</el-row>
</div>
</div>
<!-- <el-scrollbar ref="el_Scrollbar" height="100%"> -->
<el-scrollbar height="240px">
<div class="tableBox"> <div class="tableBox">
<el-row class="tabletit"> <el-carousel height="200px" trigger="click" :loop="true" :interval="2500" direction="vertical" :autoplay="true">
<el-col :span="6">序号</el-col> <el-carousel-item v-for="(data, idx) in carouselData" :key="idx">
<el-col :span="12">地区</el-col> <el-row class="table_cell" v-for="(item, index) in data" :key="index">
<el-col :span="6">分数</el-col> <el-col :span="6">
</el-row> <div>
<el-row class="table_cell" v-for="(item, index) in tableData" :key="index"> <div v-if="item.ranking > 3">{{ item.ranking }}</div>
<el-col :span="6"> <div v-else class="tab-index" :style="{ background: colors[item.ranking] }">{{ item.ranking }}
<div> </div>
<div v-if="index > 2">{{ index + 1 }}</div> </div>
<div v-else class="tab-index" :style="{ background: colors[index + 1] }">{{ index + 1 }} </el-col>
</div> <el-col :span="12">{{ item.name }}</el-col>
</div> <el-col :span="6">{{ item.score }}</el-col>
</el-col> </el-row>
<el-col :span="12">{{ item.name }}</el-col> </el-carousel-item>
<el-col :span="6">{{ item.score }}</el-col> </el-carousel>
</el-row>
</div> </div>
</el-scrollbar> <!-- </el-scrollbar> -->
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -45,6 +58,19 @@ export default { ...@@ -45,6 +58,19 @@ export default {
tableData() { tableData() {
return Mock[this.curDataType]; return Mock[this.curDataType];
}, },
carouselData() {
// 处理数据 index 转 ranking 排名
const tableData = this.tableData.map((item, index) => {
item.ranking = index + 1;
return item;
});
let carouselData = [];
for (let i = 0; i < tableData.length; i += 5) {
const list = tableData.slice(i, i + 5);
carouselData.push(list);
}
return carouselData
}
}, },
data() { data() {
return { return {
...@@ -55,6 +81,10 @@ export default { ...@@ -55,6 +81,10 @@ export default {
}, },
}; };
}, },
mounted() {
},
}; };
</script> </script>
<style> <style>
...@@ -64,15 +94,36 @@ export default { ...@@ -64,15 +94,36 @@ export default {
width: 0 !important width: 0 !important
} }
.rank-list .el-scrollbar__wrap { /* .rank-list .el-scrollbar__wrap {
width: calc(100% + 20px); width: calc(100% + 20px);
} } */
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.rankingContent {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
// margin-top: 10px;
padding-top: 10px;
box-sizing: border-box;
}
.rankingBox {
height: 40px;
.tableBox {
width: 100%;
}
}
::v-deep .el-scrollbar {
height: calc(100% - 65px);
}
.tableBox { .tableBox {
color: #ffffff; color: #ffffff;
width: calc(100% - 17px); width: calc(100% - 0px);
.tabletit .el-col { .tabletit .el-col {
font-weight: bold; font-weight: bold;
...@@ -103,9 +154,11 @@ export default { ...@@ -103,9 +154,11 @@ export default {
} }
.el-scrollbar {
margin-top: 10px;
} // .el-scrollbar {
// margin-top: 10px;
// }
.tab-index { .tab-index {
border-radius: 50%; border-radius: 50%;
......
src/views/dataCenter/map/model/RankList/mock.js
浏览文件 @ a53ca63b
export default { export default {
"2022Two": [
{ name: "南湖区", score: 83.00, type: 2, },
{ name: "西湖区", score: 76.00, type: 2, },
{ name: "鄞州区", score: 71.00, type: 2, },
{ name: "滨江区", score: 70.00, type: 2, },
{ name: "海宁市", score: 68.00, type: 2, },
{ name: "北仑区", score: 67.50, type: 2, },
{ name: "德清县", score: 63.50, type: 2, },
{ name: "上城区", score: 62.00, type: 2, },
{ name: "长兴县", score: 62.00, type: 2, },
{ name: "象山县", score: 57.50, type: 2, },
{ name: "温岭市", score: 56.00, type: 2, },
{ name: "萧山区", score: 55.50, type: 2, },
{ name: "海曙区", score: 54.00, type: 2, },
{ name: "诸暨市", score: 53.00, type: 2, },
{ name: "柯桥区", score: 51.50, type: 2, },
{ name: "普陀区", score: 48.50, type: 2, },
{ name: "衢江区", score: 41.50, type: 2, },
{ name: "永康市", score: 36.50, type: 2, },
{ name: "缙云县", score: 30.00, type: 2, },
],
"2022One": [{ "2022One": [{
name: "南湖区", name: "南湖区",
score: 71.5, score: 71.5,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论