Skip to content

C
cxsfjx_project_echarts
提交 449e9d73 authored 作者: 邓文彬's avatar 邓文彬
浏览文件
操作

fix(资源开放共享): 静态页面

上级 9233456c
隐藏空白字符变更
内嵌 并排
正在显示 包含 1504 行增加 和 67 行删除
src/layout/head.vue
浏览文件 @ 449e9d73
......@@ -121,11 +121,11 @@ export default defineComponent({
},
{
label: "2021年第二季度",
value: "typeThree",
value: "typeTwo",
},
{
label: "2021第三季度",
value: "typeTwo",
value: "typeThree",
},
],
curYearIndex: 1,
......
src/route/dataCenter.ts
浏览文件 @ 449e9d73
......@@ -7,7 +7,8 @@ export enum DataCenterRouter {
DATA_INDUSTRIAL = "/dataCenter/industrial",
DATA_ARMY = "/dataCenter/army",
INNOVATION="/dataCenter/innovation",
ConctructSystem="/dataCenter/conctructSystem"
ConctructSystem="/dataCenter/conctructSystem",
RESORCE_SHARE="/dataCenter/resorceShare"
}
export default [
......@@ -64,6 +65,19 @@ export default [
},
component: () => import("@/views/dataCenter/innovation/index.vue")
},
{
path: DataCenterRouter.RESORCE_SHARE,
name: "RESORCESHARE",
meta: {
person: {
path: DataCenterRouter.DATA_CENTER,
name: "DataCenter",
label: "数据中心",
},
label: "资源开放共享",
},
component: () => import("@/views/dataCenter/resourceShare/index.vue")
},
{
path: DataCenterRouter.ConctructSystem,
name: "ConctructSystem",
......
src/store/index.tsx
浏览文件 @ 449e9d73
......@@ -4,7 +4,7 @@ import { createStore } from 'vuex'
const store = createStore({
state () {
return {
curDataType: "typeThree"
curDataType: "typeTwo"
}
},
mutations: {
......
src/views/dataCenter/ConctructSystem/mock.js
浏览文件 @ 449e9d73
......@@ -28,7 +28,7 @@ export default {
]
},
"typeTwo": {
"typeThree": {
industryCardItems: [{
label: "国家部委、军委机关批复立项项目",
value: 0,
......@@ -57,7 +57,7 @@ export default {
]
},
"typeThree": {
"typeTwo": {
industryCardItems: [{
label: "国家部委、军委机关批复立项项目",
value: "1113",
......
src/views/dataCenter/ConctructSystem/model/Munitions/mock.js
浏览文件 @ 449e9d73
......@@ -5,13 +5,13 @@ export default {
cityData: []
},
"typeTwo": {
"typeThree": {
meetingCount: 0,
cityData: []
},
"typeThree": {
"typeTwo": {
meetingCount: 43,
cityData: [8, 4,1, 4, 4, 1, 2, 6, 3, 2, 6, 6]
},
......
src/views/dataCenter/ConctructSystem/model/Outline/mock.js
浏览文件 @ 449e9d73
export default {
"typeOne": [],
"typeTwo": [],
"typeThree": [14, 15, 10.4, 12, 11, 15, 13, 13, 13, 11, 11.2],
"typeThree": [],
"typeTwo": [14, 15, 10.4, 12, 11, 15, 13, 13, 13, 11, 11.2],
}
\ No newline at end of file
src/views/dataCenter/ConctructSystem/model/Platform/mock.js
浏览文件 @ 449e9d73
......@@ -5,13 +5,13 @@ export default {
cityData: []
},
"typeTwo": {
"typeThree": {
meetingCount: 0,
cityData: []
},
"typeThree": {
"typeTwo": {
meetingCount: 112,
cityData: [14, 16, 12,6, 7, 7, 12, 5, 12, 14,7]
},
......
src/views/dataCenter/ConctructSystem/model/ScientificInvestment/mock.js
浏览文件 @ 449e9d73
......@@ -7,14 +7,14 @@ export default {
]
},
"typeTwo": {
"typeThree": {
cardItems: [{ label: "人员总数", value: 0 }],
pieList: [
{ label: "专职", value: 0 },
{ label: "兼职", value: 0 },
]
},
"typeThree":{
"typeTwo":{
cardItems: [{ label: "人员总数", value: "267" }],
pieList: [
{ label: "专职", value: 142 },
......
src/views/dataCenter/army/model/EconomicConstruct/mock.js
浏览文件 @ 449e9d73
......@@ -82,7 +82,7 @@ export default {
]
}
},
"typeTwo": {
"typeThree": {
countryData: {
// 国防数据
name: "国防要求建设项目",
......@@ -168,7 +168,7 @@ export default {
],
}
},
"typeThree": {
"typeTwo": {
countryData: {
// 国防数据
name: "国防要求建设项目",
......
src/views/dataCenter/army/model/Munitions/mock.js
浏览文件 @ 449e9d73
......@@ -9,7 +9,7 @@ export default {
rate: [],
}
},
"typeTwo": {
"typeThree": {
seriesData: [{
value: [107.32, 157.51, 172.11],
rate: ["", 42.17, 21.19],
......@@ -19,7 +19,7 @@ export default {
rate: [18.59, 31.72, 15.38, 34.21, 18.69, 118.83, 55.81, 0.73, 1.81, -4.57, 36.35],
}
},
"typeThree": {
"typeTwo": {
seriesData: [{
value: [107.32, 157.51, 172.11],
rate: ["", 42.17, 21.19],
......
src/views/dataCenter/army/model/Person/mock.js
浏览文件 @ 449e9d73
......@@ -15,7 +15,7 @@ export default {
rate: [0.5, 0.4, 0.5, 1, 0.5, 0.2, 0.6, 0.9, 0.8, 1, 0.6],
}]
},
"typeTwo": {
"typeThree": {
info:[{
label: "入伍总人数",
value: 0,
......@@ -31,7 +31,7 @@ export default {
rate: [],
}]
},
"typeThree": {
"typeTwo": {
info:[{
label: "入伍总人数",
value: "1470",
......
src/views/dataCenter/army/model/Science/mock.js
浏览文件 @ 449e9d73
......@@ -69,7 +69,7 @@ export default {
},
],
},
"typeTwo": {
"typeThree": {
info: [{
label: "民口单位军品收入",
value:0,
......@@ -139,7 +139,7 @@ export default {
},
],
},
"typeThree": {
"typeTwo": {
info: [{
label: "民口单位军品收入",
value: 53.35,
......
src/views/dataCenter/army/model/StrongArmy/mock.js
浏览文件 @ 449e9d73
export default {
"typeOne": [],
"typeTwo": [],
"typeThree": [25, 27, 18, 22, 28, 24, 19, 20, 21, 22, 30],
"typeThree": [],
"typeTwo": [25, 27, 18, 22, 28, 24, 19, 20, 21, 22, 30],
}
\ No newline at end of file
src/views/dataCenter/industrial/mock.js
浏览文件 @ 449e9d73
......@@ -19,7 +19,7 @@ export default {
},
],
},
"typeTwo": {
"typeThree": {
industryCardItems: [{
label: "国防科技工业产值总量",
value: 1656.9
......@@ -39,7 +39,7 @@ export default {
},
],
},
"typeThree": {
"typeTwo": {
industryCardItems: [{
label: "国防科技工业产值总量",
value: "1113.4"
......
src/views/dataCenter/industrial/model/BusinessIncome/mock.js
浏览文件 @ 449e9d73
......@@ -39,7 +39,7 @@ export default {
},
]
},
"typeTwo": {
"typeThree": {
incomCount: 5421.69,
seriesData: [{
......@@ -71,7 +71,7 @@ export default {
value: 579.36
}, ]
},
"typeThree": {
"typeTwo": {
incomCount: 3532.82,
seriesData: [{
label: "数字军工(网络、人工智能)领域",
......
src/views/dataCenter/industrial/model/IncomDistribution/mock.js
浏览文件 @ 449e9d73
......@@ -6,14 +6,14 @@ export default {
}],
},
"typeTwo": {
"typeThree": {
seriesData: [{
value: [2433.92, 1063.99, 105.95, 195.74, 583.98, 576.44, 181.04, 63.51, 10.12, 147.99, 59],
rateData: [20.53, 28.54, 3.22,30.44,27.98,24.95,46.74,12.95,-3.72,12.25,41.31],
}],
},
"typeThree": {
"typeTwo": {
seriesData: [{
name: "主营业务收入",
type: "level_1",
......
src/views/dataCenter/industrial/model/IncomExtendLine/mock.js
浏览文件 @ 449e9d73
......@@ -6,13 +6,13 @@ export default {
}],
},
"typeTwo": {
"typeThree": {
seriesData: [{
value: [5204.49, 6029.77, 7633.65, 3545.5]
}],
},
"typeThree": {
"typeTwo": {
seriesData: [{
value: [5204.49, 6029.77, 7633.65, 3545.5]
}],
......
src/views/dataCenter/industrial/model/Industrial/mock.js
浏览文件 @ 449e9d73
......@@ -9,7 +9,7 @@ export default {
}],
},
"typeTwo": {
"typeThree": {
seriesData: [{
name: "产值规模",
type: "level_2",
......@@ -19,7 +19,7 @@ export default {
}],
},
"typeThree": {
"typeTwo": {
seriesData: [{
name: "产值规模",
type: "level_2",
......
src/views/dataCenter/industrial/model/TargetBar/mock.js
浏览文件 @ 449e9d73
export default {
"typeOne": [],
"typeTwo": [],
"typeThree": [14.5, 9, 6, 10, 13, 14, 13.5, 8, 6, 12.5, 15],
"typeThree": [],
"typeTwo": [14.5, 9, 6, 10, 13, 14, 13.5, 8, 6, 12.5, 15],
}
\ No newline at end of file
src/views/dataCenter/innovation/mock.js
浏览文件 @ 449e9d73
......@@ -6,7 +6,7 @@ export default {
value: [],
}]
},
"typeTwo": {
"typeThree": {
count: 155,
cityData: [{
......@@ -14,7 +14,7 @@ export default {
}]
},
"typeThree": {
"typeTwo": {
count: 155,
cityData: [{
value: [75, 37, 4, 17, 8, 10, 1, 1, 0, 0, 2],
......
src/views/dataCenter/innovation/model/Munitions/mock.js
浏览文件 @ 449e9d73
......@@ -6,13 +6,13 @@ export default {
}]
},
"typeTwo": {
"typeThree": {
money: 215.1,
cityData: [{
value: [129.12, 14.02, 5.57, 7.27, 19.89, 19.71, 8.07, 2.43, 0.29, 5.85, 2.89],
}]
},
"typeThree": {
"typeTwo": {
money: 135.03,
cityData: [{
value: [79.83, 9.08, 3.4, 11.8, 5.17, 13.95, 4.52, 1.58, 0.18, 3.69, 1.82],
......
src/views/dataCenter/innovation/model/Outline/mock.js
浏览文件 @ 449e9d73
export default {
"typeOne": [],
"typeTwo": [],
"typeThree": [19, 13.5, 6.5, 12.5, 15.5, 14, 6.5, 10.5, 8, 4, 6],
"typeThree": [],
"typeTwo": [19, 13.5, 6.5, 12.5, 15.5, 14, 6.5, 10.5, 8, 4, 6],
}
\ No newline at end of file
src/views/dataCenter/innovation/model/Platform/mock.js
浏览文件 @ 449e9d73
......@@ -5,13 +5,13 @@ export default {
value: [130, 133, 139],
}]
},
"typeTwo": {
"typeThree": {
count: 139,
cityData: [{
value: [130, 133, 139],
}]
},
"typeThree": {
"typeTwo": {
count: 139,
cityData: [{
value: [130, 133, 139],
......
src/views/dataCenter/innovation/model/ScientificInvestment/mock.js
浏览文件 @ 449e9d73
......@@ -32,7 +32,7 @@ export default {
]
},
"typeTwo": {
"typeThree": {
cardItems: [{
label: "联合科研攻关投入金额",
value: 136.85
......@@ -65,7 +65,7 @@ export default {
]
},
"typeThree": {
"typeTwo": {
cardItems: [{
label: "联合科研攻关投入金额",
value: "78.54"
......
src/views/dataCenter/map/cradMock.js
浏览文件 @ 449e9d73
......@@ -11,7 +11,7 @@ export default {
{ label: "军地需求对接活动数量", value: "56", unit: "个" },
],
},
"typeTwo": {
"typeThree": {
list: [
{ label: "领跑产品（技术）", value: 155, unit: "个" },
{ label: "军地协同创新平台", value: 139, unit: "个" },
......@@ -23,7 +23,7 @@ export default {
{ label: "军地需求对接活动数量", value:56, unit: "个" },
],
},
"typeThree": {
"typeTwo": {
list: [
{ label: "领跑产品（技术）", value: 155, unit: "个" },
{ label: "军地协同创新平台", value: 139, unit: "个" },
......
src/views/dataCenter/map/index.vue
浏览文件 @ 449e9d73
......@@ -28,7 +28,10 @@
/></el-col>
<el-col class="card-item"><Industrial /></el-col>
<el-col class="card-item"
><CardItem :infoList="list2x" title="资源开放共享"
><CardItem
:infoList="list2x"
title="资源开放共享"
:toPage="dataCenterRouter.RESORCE_SHARE"
/></el-col>
<el-col class="card-item"><SystemConstruct /></el-col>
</div>
......@@ -49,7 +52,6 @@ import { DataCenterRouter } from "@/route/dataCenter";
import Mock from "./cradMock";
import { mapState } from "vuex";
export default defineComponent({
components: {
Performance,
......@@ -74,11 +76,10 @@ export default defineComponent({
return Mock[this.curDataType].list2x;
},
},
data() {
return {
dataCenterRouter: DataCenterRouter,
};
},
});
......
src/views/dataCenter/map/model/CardList/index.vue
浏览文件 @ 449e9d73
......@@ -12,7 +12,9 @@
<el-col :span="14"> {{ item.label }}</el-col>
<el-col :span="10">
<el-row align="middle" justify="end">
<span class="font-size20 color-pramiry">{{ item.value || "--" }}</span>
<span class="font-size20 color-pramiry">{{
item.value || "--"
}}</span>
<span class="font-size12 color-999">{{ item.unit }}</span>
</el-row>
</el-col>
......@@ -44,8 +46,10 @@ export default defineComponent({
MapTitle,
},
setup() {},
methods: {
detailsHandle() {
console.log("===", this.toPage);
this.toPage && this.$router.push(this.toPage);
},
},
......
src/views/dataCenter/map/model/CardList/industrialMcok.js
浏览文件 @ 449e9d73
......@@ -14,7 +14,7 @@ export default {
valueUnit: "亿元",
},
],
"typeTwo": [{
"typeThree": [{
title: "军民融合主营业务收入",
rate: "23.75",
value: "5421.69",
......@@ -29,7 +29,7 @@ export default {
valueUnit: "亿元",
},
],
"typeThree": [{
"typeTwo": [{
title: "军民融合主营业务收入",
rate: "31.5%",
value: "3545.5",
......
src/views/dataCenter/map/model/CardList/strongArmyMock.js
浏览文件 @ 449e9d73
......@@ -20,7 +20,7 @@ export default {
enlistVal: 1470,
enlistRateVal: "0.5%"
},
"typeTwo": {
"typeThree": {
// 贯彻国防要求的建设项目
country: [{
label: "贯彻国防要求的建设项目",
......@@ -41,7 +41,7 @@ export default {
enlistVal: 1470,
enlistRateVal: 0.5
},
"typeThree": {
"typeTwo": {
// 贯彻国防要求的建设项目
country: [{
label: "贯彻国防要求的建设项目",
......
src/views/dataCenter/map/model/CardList/systemConstructMock.js
浏览文件 @ 449e9d73
......@@ -5,13 +5,13 @@ export default {
fullTime: 142, // 专职
partTime: 125 // 兼职
},
"typeTwo": {
"typeThree": {
meetingCount: 43, // 各地召开融委全体会议次数
workeCount: 93, // 与当地军分区（警备区）建立并落实军地协作工作机制
fullTime: 142, // 专职
partTime: 125 // 兼职
},
"typeThree": {
"typeTwo": {
meetingCount: 43, // 各地召开融委全体会议次数
workeCount: 93, // 与当地军分区（警备区）建立并落实军地协作工作机制
fullTime: 142, // 专职
......
src/views/dataCenter/map/model/Income/mock.js
浏览文件 @ 449e9d73
......@@ -15,7 +15,7 @@ export default {
growthRate: ["",60,80],
},
],
"typeTwo": [
"typeThree": [
{
name: "国防科工军品收入",
type: "level_1",
......@@ -31,7 +31,7 @@ export default {
growthRate: ["",60,80],
},
],
"typeThree": [
"typeTwo": [
{
name: "国防科工军品收入",
type: "level_1",
......
src/views/dataCenter/map/model/InvestmentProgress/mock.js
浏览文件 @ 449e9d73
......@@ -8,7 +8,7 @@ export default {
growthRate: [],
},
],
"typeTwo": [
"typeThree": [
{
name: "投资金额",
type: "level_2",
......@@ -17,7 +17,7 @@ export default {
growthRate: [],
},
],
"typeThree": [
"typeTwo": [
{
name: "投资金额",
type: "level_2",
......
src/views/dataCenter/map/model/Performance/mock.js
浏览文件 @ 449e9d73
......@@ -29,7 +29,7 @@ export default {
value: [],
},
],
"typeTwo": [{
"typeThree": [{
name: "服务强军兴军",
type: "level_1",
value: [],
......@@ -59,7 +59,7 @@ export default {
value: [],
},
],
"typeThree": [{
"typeTwo": [{
name: "服务强军兴军",
type: "level_1",
value: [25, 27, 18, 22, 28, 24, 19, 20, 21, 22, 19],
......
src/views/dataCenter/map/model/RankList/mock.js
浏览文件 @ 449e9d73
export default {
"typeOne": [],
"typeTwo": [],
"typeThree": [
"typeThree": [],
"typeTwo": [
{
name: "南湖区",
score: 69.5,
......
src/views/dataCenter/resourceShare/index.vue 0 → 100644
浏览文件 @ 449e9d73
<template>
<el-row class="map-warpper" :gutter="16">
<el-col class="map-left" :span="8">
<div class="footer-item card-item">
<TargetBar />
</div>
</el-col>
<el-col :span="16">
<el-row class="map-right card-item">
<el-col :span="12">
<IncomExtendLine
echartsId="activityBar"
echartsTitle="军地需求对接活动情况"
echartsDesText="活动分布情况"
:cardItems="extendCardItems"
/>
</el-col>
<el-col :span="11" :offset="1">
<IncomDistribution />
</el-col>
</el-row>
</el-col>
</el-row>
<!-- foot -->
<el-row class="footer-warpper" :gutter="16">
<el-col class="map-right" :span="16">
<div class="footer-item card-item">
<BusinessIncome />
</div>
</el-col>
<el-col class="map-left" :span="8">
<div class="business-extend footer-item card-item">
<Industrial
echartsId="industryDistribute"
echartsTitle="军工科研设备设施开放共享情况"
:cardItems="industryCardItems"
/>
</div>
</el-col>
</el-row>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import TargetBar from "./model/TargetBar/index.vue";
import IncomExtendLine from "./model/IncomExtendLine/index.vue";
import IncomDistribution from "./model/IncomDistribution/index.vue";
import BusinessIncome from "./model/BusinessIncome/index.vue";
import Industrial from "./model/Industrial/index.vue";
import Mock from "./mock";
import { mapState } from "vuex";
/**
* 资源共享
*/
export default defineComponent({
components: {
TargetBar,
IncomExtendLine,
IncomDistribution,
BusinessIncome,
Industrial,
},
setup() {},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
industryCardItems() {
return Mock[this.curDataType].industryCardItems;
},
extendCardItems() {
return Mock[this.curDataType].extendCardItems;
},
},
data() {
return {
};
},
});
</script>
<style lang="scss" scoped>
.card-item {
background: #fff;
border-radius: 5px;
padding: 16px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
box-shadow: 2px 2px 10px #eee;
flex: 1;
height: 100%;
box-sizing: border-box;
}
.map-warpper {
box-sizing: border-box;
.map-right {
padding-bottom: 0;
}
}
.footer-warpper {
margin-top: 20px;
.business-extend {
min-height: 430px;
height: 100%;
}
}
</style>
src/views/dataCenter/resourceShare/mock.js 0 → 100644
浏览文件 @ 449e9d73
export default {
"typeOne": {
industryCardItems: [{
label: "国防科技工业产值总量",
value: 0
},
{
label: "国防科技工业产值总量增长率",
value: 0,
},
],
extendCardItems: [{
label: "参与军民融合产业互动的规模以上企业主营业务收入",
value: "7633.65",
},
{
label: "参与军民融合产业互动的规模以上企业主营业务收入增长率",
value: "26.6",
},
],
},
"typeThree": {
industryCardItems: [{
label: "国防科技工业产值总量",
value: 1656.9
},
{
label: "国防科技工业产值总量增长率",
value: 19
},
],
extendCardItems: [{
label: "参与军民融合产业互动的规模以上企业主营业务收入",
value: "5421.69",
},
{
label: "参与军民融合产业互动的规模以上企业主营业务收入增长率",
value: "23.75",
},
],
},
"typeTwo": {
industryCardItems: [{
label: "国防科技工业产值总量",
value: "1113.4"
},
{
label: "国防科技工业产值总量增长率",
value: "22.8",
},
],
extendCardItems: [{
label: "参与军民融合产业互动的规模以上企业主营业务收入",
value: "3545.5",
},
{
label: "参与军民融合产业互动的规模以上企业主营业务收入增长率",
value: "31.5",
},
],
}
}
\ No newline at end of file
src/views/dataCenter/resourceShare/model/BusinessIncome/index.vue 0 → 100644
浏览文件 @ 449e9d73
<template>
<MapTitle text="军民资源共享信息平台情况" />
<div class="describes">
<div class="meeting">
<div>军民资源共享信息平台数量</div>
<div class="frequency">
{{ seriesData[0].count || "--" }}
<span class="second">个</span>
</div>
</div>
<div class="text">军民资源共享信息平台分布情况</div>
</div>
<div id="numPlatforms" class="platform-bar-echarts-line"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
let MAP_ECHARTS = null;
const xAxisCity = [
"杭州",
"宁波",
"温州",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
];
/**
* 全省军民协同创新平台情况/国防科技工业产值规模分布 -- 折线图
*/
export default defineComponent({
components: {
MapTitle,
},
setup() {},
data() {
return {
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
optionBar() {
const seriesBar = this.seriesData.map((item) => {
return {
type: "bar",
itemStyle: {
color: "#634cf0",
},
barWidth: 20,
data: item.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
};
});
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: (params) => {
let html = ``;
html += `<div class="munition-echart ">
<span class=" title color_1">${params[0].axisValue}市</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>个
</div>
`;
return html;
},
},
legend: {},
grid: {
top: "12%",
left: "2%",
right: "2%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
name: "数量(个)",
},
xAxis: {
type: "category",
data: xAxisCity,
},
series: [...seriesBar],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById("numPlatforms");
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
if (!this.mapEcharts) {
return;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</script>
<style>
.munition-echart {
width: 60px;
}
.munition-echart .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.munition-echart .title {
padding-left: 10px;
font-weight: 600;
font-size: 12px;
color: #666;
position: relative;
}
.munition-echart .title::before {
position: absolute;
top: 5px;
left: 0;
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
}
.munition-echart .text {
padding-left: 20px;
margin-bottom: 20px;
}
.munition-echart .text:last-of-type {
margin: 0;
}
.munition-echart .text-color_1 {
color: #4198ff;
}
.munition-echart .color_1::before {
background: #4198ff;
}
</style>
<style lang="scss" scoped>
.platform-bar-echarts-line {
flex: 1;
height: calc(100% - 140px);
box-sizing: border-box;
}
.describes {
margin: 0 10px;
height: 100px;
box-sizing: border-box;
.meeting {
height: 50px;
line-height: 50px;
border-radius: 4px;
color: #666666;
background: rgba(248, 249, 251, 1);
display: flex;
justify-content: space-between;
padding: 0 10px 0 10px;
box-sizing: border-box;
margin-top: 10px;
.frequency {
color: rgba(65, 152, 255, 1);
font-weight: 500;
}
.second{
color: #999;
}
}
.text {
color: #4198ff;
margin-top: 10px;
font-size: 14px;
}
}
</style>
src/views/dataCenter/resourceShare/model/BusinessIncome/mock.js 0 → 100644
浏览文件 @ 449e9d73
export default {
"typeOne": {
seriesData: [{
value: [5204.49, 6029.77, 7633.65, 3545.5]
}],
},
"typeThree": {
seriesData: [{
count: 0,
value: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}],
},
"typeTwo": {
seriesData: [{
count: 222,
value: [43, 25, 16, 16, 28, 26, 15, 17, 8, 16, 12]
}],
},
}
\ No newline at end of file
src/views/dataCenter/resourceShare/model/IncomDistribution/index.vue 0 → 100644
浏览文件 @ 449e9d73
<template>
<div class="describes">
<div class="meeting">
<div>合同成交总额</div>
<div class="frequency">
{{ seriesData[0].count || "--" }}
<span class="second">亿元</span>
</div>
</div>
<div class="text">合同成交额分布情况</div>
</div>
<el-row class="echart-foot">
<el-col :span="13"
><div id="incomDistribution" class="incom-distribution"></div
></el-col>
<el-col :span="11">
<div class="list-item-wrapper">
<div
class="list-item"
v-for="(item, index) in this.seriesData"
:key="item.label"
>
<el-row align="middle">
<div
class="square"
:style="{ background: pieColor[`level_${index + 1}`] }"
></div>
<span>{{ item.label }}</span>
</el-row>
<div class="pie-value">
{{ item.value || "--" }}
<span>万元</span>
</div>
</div>
</div>
</el-col>
</el-row>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
let MAP_ECHARTS = null;
const PieColor = {
level_1: "#6fdef7",
level_2: "#9cbcfa",
level_3: "#1781df",
level_4: "#ffa741",
level_5: "#47d6ad",
level_6: "#f78a77",
level_7: "#8a8aa8",
level_8: "#3bb4a6",
level_9: "#634cf0",
level_10: "#ffcf3c",
level_11: "#b470fc",
};
/**
* 合同成交总额
*/
export default defineComponent({
components: {
MapTitle,
},
setup() {},
data() {
return {
mapEcharts: null,
pieColor: PieColor,
};
},
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
optionBar() {
const seriesBar = {
type: "pie",
radius: [20, 140],
center: ["25%", "50%"],
roseType: "radius",
itemStyle: {
borderRadius: 5,
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
data: this.seriesData.map((valItem, index) => {
return {
value: valItem.value,
label: valItem.label,
itemStyle: {
color: PieColor[`level_${index + 1}`],
},
tooltip: {
borderColor: "none",
className: "business-pie-tooltip",
formatter: `<div class="business-pie-tooltip">
<span class='title'>${valItem.label}</span>：
<br />
<div class='pie-text'>
<span>${valItem.value}</span>万元
</div>
</div>`,
},
};
}),
};
return {
tooltip: {
trigger: "item",
},
grid: {
left: "10%",
right: "5%",
bottom: "3%",
containLabel: true,
},
series: [seriesBar],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById("incomDistribution");
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
if (!this.mapEcharts) {
return;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</script>
<style>
.business-pie-tooltip .title {
color: #333;
font-weight: bold;
}
.business-pie-tooltip .pie-text {
padding-left: 10px;
margin-top: 5px;
font-size: 12px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.business-pie-tooltip .pie-text span {
color: #4198ff;
margin-right: 5px;
font-size: 16px;
}
</style>
<style lang="scss" scoped>
.describes {
margin: 30px 0 10px 0;
height: 100px;
box-sizing: border-box;
.meeting {
height: 50px;
line-height: 50px;
border-radius: 4px;
color: #666666;
background: rgba(248, 249, 251, 1);
display: flex;
justify-content: space-between;
padding: 0 10px 0 10px;
box-sizing: border-box;
margin-top: 10px;
.frequency {
color: rgba(65, 152, 255, 1);
font-weight: 500;
}
.second{
color: #999;
}
}
.text {
color: #4198ff;
margin-top: 10px;
font-size: 14px;
}
}
.echart-foot {
flex: 1;
height: 100%;
.list-item-wrapper {
display: flex;
flex-wrap: wrap;
.list-item {
width: 120px;
margin-bottom: 15px;
border-radius: 5px;
box-sizing: border-box;
.el-row {
font-size: 14px;
color: #333;
}
.pie-value {
// margin-top: 5px;
padding-left: 20px;
font-size: 12px;
color: #999;
display: flex;
align-items: center;
color: #4198ff;
font-size: 18px;
span {
font-size: 12px;
color: rgba(153, 153, 153, 1);
}
}
.square {
width: 8px;
height: 8px;
margin-right: 5px;
}
}
}
}
.incom-distribution {
height: 335px;
width: 500px;
box-sizing: border-box;
}
</style>
src/views/dataCenter/resourceShare/model/IncomDistribution/mock.js 0 → 100644
浏览文件 @ 449e9d73
export default {
"typeOne": {
},
"typeThree": {
seriesData: [{
label: "杭州市",
value: 0
},
{
label: "宁波市",
value: 0
},
{
label: "温州市",
value: 0
},
{
label: "湖州市",
value: 0
},
{
label: "嘉兴市",
value: 0
},
{
label: "绍兴市",
value: 0
}, {
label: "金华市",
value: 0
}, {
label: "衢州市",
value: 0
}, {
label: "舟山市",
value: 0
}, {
label: "台州市",
value: 0
}, {
label: "丽水市",
value: 0
},
]
},
"typeTwo": {
seriesData: [{
label: "杭州市",
value: 14348.7
},
{
label: "宁波市",
value: 11374.5
},
{
label: "温州市",
value: 2500
},
{
label: "湖州市",
value: 11374.5
},
{
label: "嘉兴市",
value: 3248
},
{
label: "绍兴市",
value: 7300
}, {
label: "金华市",
value: 2560
}, {
label: "衢州市",
value: 4306
}, {
label: "舟山市",
value: 2600
}, {
label: "台州市",
value: 2500
}, {
label: "丽水市",
value: 3334
},
]
}
}
\ No newline at end of file
src/views/dataCenter/resourceShare/model/IncomExtendLine/index.vue 0 → 100644
浏览文件 @ 449e9d73
<template>
<MapTitle :text="echartsTitle" />
<div class="describes">
<div class="meeting">
<div>军地需求对接活动数量</div>
<div class="frequency">
{{ seriesData[0].count || "--" }}
<span class="second">次</span>
</div>
</div>
<div class="text">{{ echartsDesText }}</div>
</div>
<div :id="echartsId" class="bar-echarts-line"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
let MAP_ECHARTS = null;
const xAxisCity = [
"杭州",
"宁波",
"温州",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
];
/**
* 全省军民协同创新平台情况/国防科技工业产值规模分布 -- 折线图
*/
export default defineComponent({
props: {
echartsTitle: {
type: String,
required: true,
},
echartsDesText: {
type: String,
required: true,
},
cardItems: {
type: Array,
required: true,
dafault: () => [],
},
echartsData: {
type: Array,
// required: true,
dafault: () => [],
},
echartsAxisValue: {
type: Array,
// required: true,
dafault: () => [],
},
echartsId: {
type: String,
required: true,
},
},
components: {
MapTitle,
},
setup() {},
data() {
return {
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
optionBar() {
const seriesBar = this.seriesData.map((item) => {
return {
type: "bar",
itemStyle: {
color: "#4198ff",
},
barWidth: 20,
data: item.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
};
});
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: (params) => {
let html = ``;
html += `<div class="munition-echart ">
<span class=" title color_1">${params[0].axisValue}市</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>次
</div>
`;
return html;
},
},
legend: {},
grid: {
top: "10%",
left: "2%",
right: "2%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
name: "数量(次)",
},
xAxis: {
type: "category",
data: xAxisCity,
},
series: [...seriesBar],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById(this.echartsId);
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
if (!this.mapEcharts) {
return;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</script>
<style>
.munition-echart {
width: 60px;
}
.munition-echart .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.munition-echart .title {
padding-left: 10px;
font-weight: 600;
font-size: 12px;
color: #666;
position: relative;
}
.munition-echart .title::before {
position: absolute;
top: 5px;
left: 0;
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
}
.munition-echart .text {
padding-left: 20px;
margin-bottom: 20px;
}
.munition-echart .text:last-of-type {
margin: 0;
}
.munition-echart .text-color_1 {
color: #4198ff;
}
.munition-echart .color_1::before {
background: #4198ff;
}
</style>
<style lang="scss" scoped>
.bar-echarts-line {
flex: 1;
height: calc(100% - 150px);
box-sizing: border-box;
}
.describes {
margin: 0 10px;
height: 100px;
box-sizing: border-box;
.meeting {
height: 50px;
line-height: 50px;
border-radius: 4px;
color: #666666;
background: rgba(248, 249, 251, 1);
display: flex;
justify-content: space-between;
padding: 0 10px 0 10px;
box-sizing: border-box;
margin-top: 10px;
.frequency {
color: rgba(65, 152, 255, 1);
font-weight: 500;
}
.second{
color: #999;
}
}
.text {
color: #4198ff;
margin-top: 10px;
font-size: 14px;
}
}
</style>
src/views/dataCenter/resourceShare/model/IncomExtendLine/mock.js 0 → 100644
浏览文件 @ 449e9d73
export default {
"typeOne": {
seriesData: [{
value: [5204.49, 6029.77, 7633.65, 3545.5]
}],
},
"typeThree": {
seriesData: [{
count:0,
value: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}],
},
"typeTwo": {
seriesData: [{
count:45,
value: [3, 5, 3, 5, 4, 7, 2, 3,5, 7, 1]
}],
},
}
\ No newline at end of file
src/views/dataCenter/resourceShare/model/Industrial/index.vue 0 → 100644
浏览文件 @ 449e9d73
<template>
<MapTitle :text="echartsTitle" />
<div :id="echartsId" class="incom-echarts-line"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
let MAP_ECHARTS = null;
const xAxisValue = ["2018年", "2019年", "2020年", "2021年"];
/**
*
*/
export default defineComponent({
props: {
echartsTitle: {
type: String,
required: true,
},
echartsId: {
type: String,
required: true,
},
},
components: {
MapTitle,
},
setup() {},
data() {
return {
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
optionBar() {
const seriesBarList = this.seriesData.map((item, index) => {
return {
type: "bar",
itemStyle: {
color: "#4198FF",
},
label: {
show: true,
position: "right",
},
barWidth: 18,
data: item.value.map((barItem, barIndex) => {
return {
value: barItem,
};
}),
};
});
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "incom-echart-tooltip",
formatter: (params) => {
let html = `<span class="name">${params[0].axisValue}</span>`;
html += `<div class="incom-echart-tooltip ">
<span class="text text-color_1">${params[0].data.value}</span>个
</div>`;
return html;
},
},
grid: {
left: "2%",
right: "10%",
bottom: "3%",
containLabel: true,
},
legend: {
right: "2%",
},
yAxis: {
type: "category",
data: xAxisValue,
},
xAxis: {
type: "value",
},
series: [...seriesBarList],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById(this.echartsId);
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
if (!this.mapEcharts) {
return;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</script>
<style>
.incom-echart-tooltip {
width: 80px;
}
.incom-echart-tooltip .name {
padding-left: 10px;
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
position: relative;
}
.incom-echart-tooltip .name::before {
position: absolute;
top: 5px;
left: 0;
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
background: #4198ff;
}
.incom-echart-tooltip .text {
padding-left: 20px;
margin-bottom: 20px;
}
.incom-echart-tooltip .text:last-of-type {
margin: 0;
}
.incom-echart-tooltip .text-color_1 {
color: #4198ff;
}
</style>
<style lang="scss" scoped>
.incom-echarts-line {
flex: 1;
height: calc(100% - 40px);
box-sizing: border-box;
}
</style>
src/views/dataCenter/resourceShare/model/Industrial/mock.js 0 → 100644
浏览文件 @ 449e9d73
export default {
"typeOne": {
seriesData: [{
name: "产值规模",
type: "level_2",
echartType: "bar",
value: [],
}],
},
"typeThree": {
seriesData: [{
value: [687, 212, 193, 156],
}],
},
"typeTwo": {
seriesData: [{
value: [687, 212, 193, 156],
}],
},
}
\ No newline at end of file
src/views/dataCenter/resourceShare/model/TargetBar/index.vue 0 → 100644
浏览文件 @ 449e9d73
<template>
<MapTitle text="资源开放共享创新总览" />
<div class="echarts-search">
<div class="title">各市资源开放共享创新指标情况</div>
</div>
<div id="shareTargetBar" class="target-bar"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
const xAxisValue = [
"杭州",
"宁波",
"温州",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
];
let MAP_ECHARTS = null;
/**
* 产业融合发展总览——柱状图
*/
export default defineComponent({
components: {
MapTitle,
},
setup() {},
data() {
return {
value: 1,
options: [
{ label: "得分情况", value: 1 },
{ label: "军转民收入及增长率", value: 2 },
{ label: "规模以上企业收入及增长率", value: 3 },
{ label: "国防科工产值", value: 4 },
],
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() {
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
textStyle: {},
className: "target-bar-tooltip",
formatter:
"<span class='title'>{b0}</span>: <br /> <span class='bar-text'>{c0}</span> 分",
},
legend: {},
grid: {
top: 0,
left: "-5%",
right: "5%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
show: false,
max: 20,
},
xAxis: {
type: "category",
data: xAxisValue,
},
series: [
{
type: "bar",
itemStyle: {
color: "#4198ff",
},
barWidth: 20,
label: {
show: true,
position: "top",
// formatter: "{c}亿元"
},
data: this.seriesData,
},
],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById("shareTargetBar");
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
if (!this.mapEcharts) {
return;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</script>
<style>
.target-bar-tooltip .title {
color: #333;
font-weight: bold;
}
.target-bar-tooltip .bar-text {
padding-left: 10px;
color: #4198ff;
}
</style>
<style lang="scss" scoped>
.echarts-search {
padding-left: 10px;
.title {
color: #4198ff;
margin: 10px 0;
font-size: 16px;
}
}
.target-bar {
flex: 1;
min-height: 250px;
height: calc(100% - 50px);
box-sizing: border-box;
margin-top: 10px;
}
</style>
src/views/dataCenter/resourceShare/model/TargetBar/mock.js 0 → 100644
浏览文件 @ 449e9d73
export default {
"typeOne": [],
"typeThree": [13.2, 14, 10, 10, 14, 12.5, 7.5, 13.5, 10, 12, 10],
"typeTwo": [13.2, 14, 10, 10, 14, 12.5, 7.5, 13.5, 10, 12, 10],
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论