提交 a53ca63b authored 作者: Ma's avatar Ma

大屏新版修改 2022,08,26

上级 6d510dc7
<template>
<div class="title">
{{ this.text }}
<span
v-if="detailsHandle"
@click="detailsHandle && detailsHandle()"
>{{textRight || "更多"}}</span>
<span v-if="detailsHandle" @click="detailsHandle && detailsHandle()">
<!-- {{ textRight || "更多" }} -->
</span>
</div>
</template>
<script lang="ts">
......@@ -35,6 +34,7 @@ export default defineComponent({
justify-content: space-between;
align-items: center;
font-size: 20px;
&::before {
content: " ";
display: inline-block;
......@@ -45,12 +45,14 @@ export default defineComponent({
height: 80%;
background: #19ecff;
}
span {
font-weight: 400;
color: #666;
cursor: pointer;
font-size: 14px;
color: #19ecff;
&:hover {
color: #62b3ef;
}
......
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
差异被折叠。
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": {
list: [
{ label: "领跑产品(技术)", value: "63", unit: "个" },
......
<template>
<el-row class="map-warpper" :gutter="16">
<el-col class="map-left" :span="8">
<div class="performance-com card-item"><Performance /></div>
<div class="card-item rank-list"><RankList /></div>
<div class="performance-com card-item">
<Performance />
</div>
<div class="performance-com card-item">
<InvestmentProgress />
</div>
</el-col>
<el-col :span="9">
<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>
</el-col>
<el-col :span="7">
<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>
</el-col>
</el-row>
<!-- 卡片信息展示 -->
<div class="card-list" :gutter="16">
<el-col class="card-item"><StrongArmyCard /></el-col>
<el-col class="card-item"
><CardItem
title="军民协同创新"
:infoList="list"
:toPage="dataCenterRouter.INNOVATION"
/></el-col>
<el-col class="card-item"><Industrial /></el-col>
<el-col class="card-item"
><CardItem
:infoList="list2x"
title="资源开放共享"
:toPage="dataCenterRouter.RESORCE_SHARE"
/></el-col>
<el-col class="card-item"><SystemConstruct /></el-col>
<el-col class="card-item">
<StrongArmyCard />
</el-col>
<el-col class="card-item">
<CardItem title="军民协同创新" :infoList="list" :toPage="dataCenterRouter.INNOVATION" />
</el-col>
<el-col class="card-item">
<Industrial />
</el-col>
<el-col class="card-item">
<CardItem :infoList="list2x" title="资源开放共享" :toPage="dataCenterRouter.RESORCE_SHARE" />
</el-col>
<el-col class="card-item">
<SystemConstruct />
</el-col>
</div>
</template>
<script lang="ts">
......@@ -64,7 +83,7 @@ export default defineComponent({
Industrial,
SystemConstruct,
},
setup() {},
setup() { },
computed: {
...mapState({
curDataType: (state) => state.curDataType,
......@@ -80,11 +99,50 @@ export default defineComponent({
data() {
return {
dataCenterRouter: DataCenterRouter,
sfqx: ["上城区,西湖区,萧山区", "海曙区,鄞州区,象山县", "南湖区,德清县,长兴县", "诸暨市,永康市,衢江区", "温岭市,缙云县,滨江区", "北仑区,海宁市,柯桥区", "普陀区"]
};
},
});
</script>
<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 {
// background: #fff;
background-color: rgba(25, 125, 237, 15%);
......@@ -94,7 +152,7 @@ export default defineComponent({
cursor: pointer;
transition: all 0.2s;
box-shadow: 2px 2px 10px #04223d10;
border: 1px solid #10529a;
border: 1px solid #10529a;
// &:hover {
// // transform: translateY(-5px);
// transition: all 0.2s;
......@@ -106,27 +164,35 @@ border: 1px solid #10529a;
height: 640px;
box-sizing: border-box;
flex: 1;
.map-left {
box-sizing: border-box;
.rank-list {
margin-top: 16px;
height: 312px;
box-sizing: border-box;
}
}
.map-middle {
height: 640px;
box-sizing: border-box;
display: flex;
.card-item {
padding: 0;
}
.map-item {
width: 100%;
position: relative;
}
}
.map-right {
box-sizing: border-box;
.incom-graphic {
margin-top: 16px;
height: 312px;
......@@ -140,10 +206,12 @@ border: 1px solid #10529a;
margin-top: 16px;
box-sizing: border-box;
display: flex;
.el-col {
flex: 1;
margin-right: 16px;
height: 310px;
&:last-of-type {
margin-right: 0;
}
......
export default {
"2022Two": [{
title: "军民融合主营业务收入",
rate: "8.43%",
value: "3876.16",
label: "主营业务收入",
valueUnit: "亿元",
},
{
title: "国防科技工业产值",
rate: "14.4%",
value: "1441",
label: "产值",
valueUnit: "亿元",
},
],
"2022One": [{
title: "军民融合主营业务收入",
rate: "13.66%",
......
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": {
// 贯彻国防要求的建设项目
country: [{
......
export default {
"2022Two": {
meetingCount: 8, // 各地召开融委全体会议次数
workeCount: 26, // 与当地军分区(警备区)建立并落实军地协作工作机制
fullTime: 105, // 专职
partTime: 125 // 兼职 数据暂缺 取2021年数据
},
"2022One": {
meetingCount: 16, // 各地召开融委全体会议次数
workeCount: 77, // 与当地军分区(警备区)建立并落实军地协作工作机制
......
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": [
{
name: "投资金额",
......
......@@ -7,37 +7,176 @@ import * as echarts from "echarts";
// import { getMapGeoData, getMapPointList } from "../service";
import getMapGeoData from "./mapGeoData.js";
import mapPointList from "./mapPointList";
import mapFiveData from "../Performance/mock";
import { mapState } from "vuex";
const xAxisValue = [
"杭州市",
"宁波市",
"温州市",
"湖州市",
"嘉兴市",
"绍兴市",
"金华市",
"衢州市",
"舟山市",
"台州市",
"丽水市",
];
export default defineComponent({
setup() {},
mounted() {
this.initEcharts();
},
data() {
return {
pointList: [],
mapEcharts: null,
fiveItems: {},
cityScore: [],
};
},
watch: {
// 更新地图数据
curDataType(val) {
if (this.mapEcharts) {
this.mapEcharts.setOption(this.options());
}
}
},
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() {
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 {
// tooltip 作用在series 中的数据
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) {
return params.name;
return mapText(params.data);
},
},
// geo 设置 tooltip 无用
geo: {
map: "ZJ",
show: true,
// roam: true,
roam: false,
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
// <----选中效果
select: {
label: {
show: false,
},
itemStyle: {
color: '#2581c3'
}
},
// --->
itemStyle: {
normal: {
areaColor: "#0f4c8f",
......@@ -61,6 +200,7 @@ export default defineComponent({
containLabel: true,
},
series: [
// 散点
{
type: "effectScatter",
coordinateSystem: "geo",
......@@ -96,6 +236,38 @@ export default defineComponent({
symbolSize: 7,
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', // 类型
// coordinateSystem: 'geo', // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
// // 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',
......@@ -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() {
if (!this.mapEcharts) {
return;
......@@ -138,6 +288,70 @@ export default defineComponent({
</script>
<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 {
transform: scaleY(1.1) scaleX(1.3);
}
......
......@@ -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": [{
name: "服务强军兴军",
type: "level_1",
......
<template>
<div>
<div style="height:100%">
<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">
<el-row class="tabletit">
<el-col :span="6">序号</el-col>
<el-col :span="12">地区</el-col>
<el-col :span="6">分数</el-col>
</el-row>
<el-row class="table_cell" v-for="(item, index) in tableData" :key="index">
<el-col :span="6">
<div>
<div v-if="index > 2">{{ index + 1 }}</div>
<div v-else class="tab-index" :style="{ background: colors[index + 1] }">{{ index + 1 }}
</div>
</div>
</el-col>
<el-col :span="12">{{ item.name }}</el-col>
<el-col :span="6">{{ item.score }}</el-col>
</el-row>
<el-carousel height="200px" trigger="click" :loop="true" :interval="2500" direction="vertical" :autoplay="true">
<el-carousel-item v-for="(data, idx) in carouselData" :key="idx">
<el-row class="table_cell" v-for="(item, index) in data" :key="index">
<el-col :span="6">
<div>
<div v-if="item.ranking > 3">{{ item.ranking }}</div>
<div v-else class="tab-index" :style="{ background: colors[item.ranking] }">{{ item.ranking }}
</div>
</div>
</el-col>
<el-col :span="12">{{ item.name }}</el-col>
<el-col :span="6">{{ item.score }}</el-col>
</el-row>
</el-carousel-item>
</el-carousel>
</div>
</el-scrollbar>
<!-- </el-scrollbar> -->
</div>
</div>
</template>
<script>
......@@ -45,6 +58,19 @@ export default {
tableData() {
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() {
return {
......@@ -55,6 +81,10 @@ export default {
},
};
},
mounted() {
},
};
</script>
<style>
......@@ -64,15 +94,36 @@ export default {
width: 0 !important
}
.rank-list .el-scrollbar__wrap {
/* .rank-list .el-scrollbar__wrap {
width: calc(100% + 20px);
}
} */
</style>
<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 {
color: #ffffff;
width: calc(100% - 17px);
width: calc(100% - 0px);
.tabletit .el-col {
font-weight: bold;
......@@ -103,9 +154,11 @@ export default {
}
.el-scrollbar {
margin-top: 10px;
}
// .el-scrollbar {
// margin-top: 10px;
// }
.tab-index {
border-radius: 50%;
......
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": [{
name: "南湖区",
score: 71.5,
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论