Skip to content

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

fix(产业融合发展): 部署版本0.0.3 - 打包相对路径

上级 e9d452d2
显示空白字符变更
内嵌 并排
正在显示 包含 3080 行增加 和 0 行删除
.env 0 → 100644
浏览文件 @ 461e2191
VITE_DEV_API="/mock"
VITE_PRD_API="/mock"
\ No newline at end of file
.eslintrc.js 0 → 100644
浏览文件 @ 461e2191
module.exports = {
root: true,
parserOptions: {
sourceType: 'module'
},
parser: 'vue-eslint-parser',
env: {
browser: true,
node: true,
es6: true
},
rules: {
'no-console': 'off'
}
}
\ No newline at end of file
.gitignore 0 → 100644
浏览文件 @ 461e2191
node_modules
.DS_Store
dist
dist-ssr
*.local
.vscode/extensions.json 0 → 100644
浏览文件 @ 461e2191
{
"recommendations": ["johnsoncodehk.volar"]
}
.vscode/settings.json 0 → 100644
浏览文件 @ 461e2191
{
"liveServer.settings.port": 5501
}
\ No newline at end of file
index.html 0 → 100644
浏览文件 @ 461e2191
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>创新示范平台</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
package-lock.json 0 → 100644
浏览文件 @ 461e2191
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
浏览文件 @ 461e2191
{
"name": "vue3-app",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"@element-plus/icons": "0.0.11",
"@vitejs/plugin-legacy": "^1.6.1",
"@vitejs/plugin-vue-jsx": "^1.2.0",
"@vue/babel-plugin-jsx": "^1.1.1",
"axios": "^0.22.0",
"echarts": "^5.2.1",
"element-plus": "^1.1.0-beta.19",
"install": "^0.13.0",
"node-sass": "^6.0.1",
"npm": "^8.1.0",
"path": "^0.12.7",
"sass": "^1.43.2",
"sass-loader": "^12.2.0",
"style-loader": "^3.3.0",
"vite-plugin-mocker": "^1.0.7",
"vue": "^3.2.16",
"vue-router": "^4.0.11"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^7.19.1",
"typescript": "^4.4.3",
"vite": "^2.6.4",
"vue-tsc": "^0.3.0"
}
}
public/mocks/app/navList.json 0 → 100644
浏览文件 @ 461e2191
{
"data": [
{
"icon": "",
"link": "/home",
"name": "首页"
},
{
"icon": "",
"link": "/evaluatIndicator",
"name": "评价指标",
"children": [
{
"icon": "",
"link": "/evaluatIndicator",
"name": "首页"
},
{
"icon": "",
"link": "/evaluatIndicator/army",
"name": "服务强军兴军"
},
{
"icon": "",
"link": "/evaluatIndicator/industrial",
"name": "产业融合发展"
},
{
"icon": "",
"link": "/evaluatIndicator",
"name": "军民协同创新"
},
{
"icon": "",
"link": "/evaluatIndicator",
"name": "资源开放共享"
},
{
"icon": "",
"link": "/evaluatIndicator",
"name": "五大体系建设"
}
]
},
{
"icon": "",
"link": "/",
"name": "动态分析"
},
{
"icon": "",
"link": "/",
"name": "数据填报"
}
],
"success": true,
"errorMsg": "报错信息"
}
\ No newline at end of file
public/mocks/evaluatIndicator/mapGeoData.json 0 → 100644
浏览文件 @ 461e2191
This source diff could not be displayed because it is too large. You can view the blob instead.
public/mocks/evaluatIndicator/mapPointList.json 0 → 100644
浏览文件 @ 461e2191
{
"data": [
{
"name": "杭州市",
"number": 80,
"value": [
120.153576,
30.287459
]
},
{
"name": "宁波市",
"number": 62,
"value": [
121.549792,
29.868388
]
},
{
"name": "温州市",
"number": 62,
"value": [
120.672111,
28.000575
]
},
{
"name": "嘉兴市",
"number": 62,
"value": [
120.750865,
30.762653
]
},
{
"name": "湖州市",
"number": 62,
"value": [
120.102398,
30.867198
]
},
{
"name": "绍兴市",
"number": 62,
"value": [
120.582112,
29.997117
]
},
{
"name": "金华市",
"number": 62,
"value": [
119.649506,
29.089524
]
},
{
"name": "衢州市",
"number": 62,
"value": [
118.87263,
28.941708
]
},
{
"name": "舟山市",
"number": 62,
"value": [
122.106863,
30.016028
]
},
{
"name": "台州市",
"number": 62,
"value": [
121.428599,
28.661378
]
},
{
"name": "丽水市",
"number": 62,
"value": [
119.921786,
28.451993
]
}
],
"code": 200
}
\ No newline at end of file
src/App.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<div class="app-container">
<AppHead />
<div class="main-warpper">
<router-view > </router-view>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import AppHead from "./layout/head.vue";
export default defineComponent({
components: {
AppHead,
},
setup() {},
});
</script>
<style>
* {
padding: 0;
margin: 0;
}
#app {
height: 100vh;
box-sizing: border-box;
}
.app-container {
display: flex;
flex-direction: column;
height: 100%;
}
.main-warpper {
padding: 0 20px 20px;
flex: 1;
background: #f5f9fb;
box-sizing: border-box;
}
</style>
src/assets/scss/common.scss 0 → 100644
浏览文件 @ 461e2191
$color: "#333"
\ No newline at end of file
src/axios/index.ts 0 → 100644
浏览文件 @ 461e2191
import Axios from "axios"
import responseMiddle from "./responseMiddle"
const ENV_PARAMS = import.meta.env; // 这是Vite官方指导获取环境变量的方式
/**
* 判断是生产环境还是本地环境
* 生成环境使用 /api 前缀
* 本地环境使用 /mock 前缀
*/
export const getBaseUrl = (): string => {
const { DEV, VITE_DEV_API, VITE_PRD_API } = ENV_PARAMS;
return DEV ? VITE_DEV_API : VITE_PRD_API;
};
const axios = Axios.create({
baseURL: getBaseUrl(),
timeout: 1000,
});
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return responseMiddle(response);
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default axios;
\ No newline at end of file
src/axios/responseMiddle.ts 0 → 100644
浏览文件 @ 461e2191
import { AxiosResponse } from "axios"
export default (response: AxiosResponse) => {
const { data } = response;
// console.log("---", response)
return response.data
}
\ No newline at end of file
src/components/mapTitle/index.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<div class="title">
{{ this.text }}
<span v-if="detailsHandle" @click="detailsHandle && detailsHandle()">{{textRight || "详情"}}</span>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
props: {
text: {
type: String,
required: true,
},
detailsHandle: {
type: Function,
},
textRight: {
type: String,
}
},
});
</script>
<style lang="scss" scoped>
.title {
position: relative;
margin-left: 8px;
color: #333;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
&::before {
content: " ";
display: inline-block;
position: absolute;
top: 10%;
left: -10px;
width: 5px;
height: 80%;
background: #4197ff;
}
span {
font-weight: 400;
color: #666;
cursor: pointer;
font-size: 14px;
&:hover {
color: #4197ff;
}
}
}
</style>
\ No newline at end of file
src/env.d.ts 0 → 100644
浏览文件 @ 461e2191
/// <reference types="vite/client" />
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}
src/layout/head.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<div class="app-head-warpper">
<!-- 一级导航栏 -->
<!-- <el-row :gutter="20" class="app-header" type="flex" align="cneter">
<el-col :span="6" class="title">创新示范绩效评价</el-col>
<el-col
v-for="(item, index) in navList"
:key="item.name"
:span="4"
class="nav-item"
:class="{
'active-nav': index === activeIndex,
}"
>
<div class="rote-link-item" @click="navClick(item, index)">
<el-icon color="#333" class="no-inherit" />
<nav>{{ item.name }}</nav>
</div>
</el-col>
</el-row> -->
<div class="container">
<!-- 二级导航栏 -->
<el-row
v-if="(secodndList || []).length > 0"
class="second-nav"
:gutter="20"
>
<el-col v-for="(item, index) in secodndList" :key="index" :span="4">
<el-card
shadow="hover"
:class="{
'second-active-nav': index === secondIndex,
}"
@click="secondHandle(item, index)"
>
{{ item.name }}
</el-card>
</el-col>
</el-row>
<!-- 行动轨迹记录 -->
<div class="proceed-record">
<el-row align="middle">
<el-icon><ArrowLeftBold /></el-icon>
返回
<el-divider direction="vertical"></el-divider>
</el-row>
<el-row>
<div
v-for="(item, index) in proceedActiveList"
:key="item"
class="proceed-item"
:class="{
'lignht-color': index === proceedActiveList.length - 1,
}"
@click="toPage(item)"
>
<el-icon
v-if="index > 0"
:color="index === proceedActiveList.length - 1 ? '#409EFC' : ''"
><CaretRight
/></el-icon>
{{ item.name }}
</div>
</el-row>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { getNavList } from "./service";
import { ArrowLeftBold, CaretRight } from "@element-plus/icons";
export default defineComponent({
components: {
ArrowLeftBold,
CaretRight,
},
data() {
return {
navList: [],
secodndList: [],
activeIndex: 0,
secondIndex: 0,
proceedActiveList: [
{
name: "创新示范绩效评价",
path: "/",
},
{
name: "数据中心",
path: "/",
},
],
};
},
async mounted() {
const { data: navList } = await getNavList();
this.navList = navList || [];
// @ts-ignore
this.secodndList = navList[this.activeIndex]?.children || [];
},
watch: {
$route() {
const { name } = this.$route;
if (name === "EvaluatIndicator") {
this.proceedActiveList = [
{
name: "创新示范绩效评价",
path: "/",
},
{
name: "数据中心",
path: "/",
},
];
} else {
this.proceedActiveList = [
{
name: "创新示范绩效评价",
path: "/",
},
{
name: "数据中心",
path: "/",
},
{
name: "产品融合发展",
path: "/evaluatIndicator/industrial",
},
];
}
},
},
methods: {
navClick(item: {}, index: number) {
const { link, children = [] } = item;
this.activeIndex = index;
this.secondIndex = 0;
this.secodndList = children;
this.$router.push(link);
},
secondHandle(item: {}, index: number) {
this.secondIndex = index;
this.$router.push(item.link);
},
toPage(item) {
this.$router.push(item.path)
}
},
});
</script>
<style lang="scss" scoped>
// $main-color: "#4198ff";
.app-head-warpper {
background: #f5f9fb;
box-sizing: border-box;
.container {
padding: 0 20px;
box-sizing: border-box;
}
// 一级导航栏
.app-header {
background: linear-gradient(to right, #0655bc, #317bdd);
height: 85px;
margin: 0 0 20px !important;
box-sizing: border-box;
.title {
font-size: 26px;
display: flex;
align-items: center;
font-weight: bold;
color: #fff;
letter-spacing: 5px;
}
.nav-item {
display: flex;
align-items: center;
justify-content: center;
.rote-link-item {
display: flex;
align-items: center;
color: #fff;
nav {
font-size: 20px;
cursor: pointer;
&:hover {
color: #4198ff;
}
}
}
}
.active-nav {
background: #06489e;
}
}
// 二级导航栏
.second-nav {
box-sizing: border-box;
margin-bottom: 20px;
cursor: pointer;
.el-card {
text-align: center;
}
.second-active-nav {
color: #fff;
background: #4198ff;
}
}
// 行动轨迹记录
.proceed-record {
margin-top: 20px;
margin-bottom: 20px;
padding: 0 20px;
background: #fff;
border-radius: 5px;
height: 40px;
display: flex;
align-items: center;
box-sizing: border-box;
font-size: 14px;
color: #999;
.proceed-item {
color: #999;
display: flex;
align-items: center;
cursor: pointer;
margin-left: 5px;
cursor: pointer;
&:hover {
color: #4198ff;
}
.el-icon {
margin-right: 2px;
}
}
.lignht-color {
color: #4198ff;
}
}
}
</style>
src/layout/service.ts 0 → 100644
浏览文件 @ 461e2191
import request from "../axios/index"
export const getNavList = async () => {
return request({
url: '../../public/mocks/app/navList.json'
})
}
src/main.ts 0 → 100644
浏览文件 @ 461e2191
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from "./route/index"
const app = createApp(App);
app.use(ElementPlus);
app.use(router)
app.mount('#app')
src/route/evaluatIndicator.ts 0 → 100644
浏览文件 @ 461e2191
/**
* 评价体系模块——路由
*/
export enum evaluatIndicatorRouter {
EVALUAT_INDICATOR = "/evaluatIndicator",
INDUSTRIAL = "/evaluatIndicator/industrial",
ARMY = "/evaluatIndicator/army",
}
export default [
{
path: "/evaluatIndicator",
name: "EvaluatIndicator",
component: () => import("@/views/evaluatIndicator/index/index.vue")
},
{
path: evaluatIndicatorRouter.INDUSTRIAL,
name: "Industrial",
component: () => import("@/views/evaluatIndicator/industrial/index.vue")
},
{
path: "/:pathMatch(.*)*",
redirect: "/evaluatIndicator",
},
]
\ No newline at end of file
src/route/index.ts 0 → 100644
浏览文件 @ 461e2191
import { createRouter, createWebHistory } from "vue-router"
import evaluatIndicator from "./evaluatIndicator"
import navigation from "./navigation";
const routes: any[] = [
...evaluatIndicator
]
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
return { top: 0 }
},
})
export default navigation(router);
\ No newline at end of file
src/route/navigation.tsx 0 → 100644
浏览文件 @ 461e2191
import {Router} from "vue-router"
export default (router: Router) => {
const token = localStorage.getItem("token")
// router.beforeEach((to, from, next) => {
// if(!token) {
// to.path === "/login" ? next() : router.replace("/login");
// }else {
// next()
// }
// })
return router
}
\ No newline at end of file
src/views/evaluatIndicator/army/index.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<div>军队相关</div>
</template>
\ No newline at end of file
src/views/evaluatIndicator/index/index.vue 0 → 100644
浏览文件 @ 461e2191
<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>
</el-col>
<el-col class="map-middle" :span="8">
<div class="card-item"><Map /></div>
</el-col>
<el-col class="map-right" :span="8">
<div class="performance-com card-item"><InvestmentProgress /></div>
<div class="card-item incom-graphic"><Income /></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 :infoList="list" title="军民协同创新"
/></el-col>
<el-col class="card-item"><Industrial /></el-col>
<el-col class="card-item"
><CardItem :infoList="list2x" title="资源开发共享"
/></el-col>
<el-col class="card-item"><SystemConstruct /></el-col>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Performance from "./model/Performance/index.vue";
import RankList from "./model/RankList/index.vue";
import Map from "./model/Map/index.vue";
import InvestmentProgress from "./model/InvestmentProgress/index.vue";
import Income from "./model/Income/index.vue";
import StrongArmyCard from "./model/CardList/strongArmy.vue";
import CardItem from "./model/CardList/index.vue";
import Industrial from "./model/CardList/industrial.vue";
import SystemConstruct from "./model/CardList/systemConstruct.vue";
export default defineComponent({
components: {
Performance,
RankList,
Map,
InvestmentProgress,
Income,
StrongArmyCard,
CardItem,
Industrial,
SystemConstruct,
},
setup() {},
data() {
return {
list: [
{ label: "领跑产品", value: "20", unit: "个" },
{ label: "军地协同创新平台", value: "20", unit: "个" },
{ label: "新兴领域研发经费", value: "20", unit: "亿元" },
],
list2x: [
{ label: "军工科研设备设施开放共享", value: "20", unit: "个" },
{ label: "军民资源共享信息平台数量", value: "20", unit: "个" },
{ label: "军地需求对接活动数量", value: "20", unit: "个" },
],
};
},
});
</script>
<style lang="scss" scoped>
.card-item {
background: #fff;
border-radius: 5px;
padding: 15px 8px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
box-shadow: 2px 2px 10px #eee;
// &:hover {
// // transform: translateY(-5px);
// transition: all 0.2s;
// }
}
.map-warpper {
height: 640px;
box-sizing: border-box;
flex: 1;
.map-left {
.rank-list {
margin-top: 16px;
height: 312px;
box-sizing: border-box;
}
}
.map-middle {
height: 640px;
box-sizing: border-box;
display: flex;
padding-left: -8px !important;
width: 100%;
height: 100%;
.card-item {
flex: 1;
}
}
.map-right {
.incom-graphic {
margin-top: 16px;
height: 312px;
box-sizing: border-box;
}
}
}
// 卡片信息展示
.card-list {
margin-top: 16px;
box-sizing: border-box;
display: flex;
.el-col {
flex: 1;
margin-right: 16px;
height: 310px;
&:last-of-type {
margin-right: 0;
}
}
}
</style>
src/views/evaluatIndicator/index/model/CardList/common.css 0 → 100644
浏览文件 @ 461e2191
.font-size20{
font-size: 20px;
}
.font-size14{
font-size: 14px;
}
.font-size12{
font-size: 12px;
}
.color-999{
color: #999;
}
.color-666{
color: #666;
}
.color-pramiry{
color: #4198ff;
margin-right:5px;
}
.item-bg {
padding: 8px;
background: #f8f9fb;
border-radius: 5px;
}
\ No newline at end of file
src/views/evaluatIndicator/index/model/CardList/index.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<MapTitle :text="title" textRight="更多" :detailsHandle="detailsHandle" />
<div class="info">
<el-row
v-for="item in infoList"
:key="item.label"
class="font-size14 color-666 item-bg margin-bottom8"
justify="space-between"
align="middle"
>
<el-col :span="18"> {{ item.label }}</el-col>
<el-col :span="6">
<el-row align="middle">
<span class="font-size20 color-pramiry">{{ item.value }}</span>
<span class="font-size12 color-999">{{ item.unit }}</span>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script lang="ts">
/**
* 卡片信息--- 军民协同创新 / 资源共享开放
*/
import { defineComponent } from "vue";
import MapTitle from "../../../../../components/mapTitle/index.vue";
export default defineComponent({
props: {
title: {
type: String,
required: true,
},
infoList: {
type: Array,
required: true,
},
},
components: {
MapTitle,
},
setup() {},
methods: {
detailsHandle() {},
},
});
</script>
<style lang="scss" scoped>
@import url("./common.css");
.info {
padding: 10px 5px;
display: flex;
flex-direction: column;
height: 100%;
.margin-bottom8 {
margin-bottom: 8px;
&:last-of-type {
margin-bottom: 0;
}
}
.el-row {
height: 28%;
}
}
</style>
src/views/evaluatIndicator/index/model/CardList/industrial.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<MapTitle
text="产业融合发展"
textRight="更多"
:detailsHandle="detailsHandle"
/>
<div class="info">
<el-row class="year" align="middle">
<el-icon color="#409EFC"> <Aim /> </el-icon>
2021年
</el-row>
<el-row class="info-item font-size14 color-666 item-bg margin-bottom8">
<el-row class="title">
军民融合
</el-row>
<el-col :span="24">
<el-row justify="space-between">
<div class="item-row">
<span class="font-size14 color-666">增长率</span>
<el-col class="font-size20 color-pramiry">30% </el-col>
</div>
<div class="item-row">
<span class="font-size14 color-666">主营业务收入</span>
<el-col class="font-size20 color-pramiry"
>30 <span class="font-size12 color-999">亿元</span>
</el-col>
</div>
</el-row>
</el-col>
</el-row>
<el-row class="info-item font-size14 color-666 item-bg margin-bottom8">
<el-row class="title">
国防科技工业
</el-row>
<el-col :span="24">
<el-row justify="space-between">
<div class="item-row">
<span class="font-size14 color-666">增长率</span>
<el-col class="font-size20 color-pramiry">30% </el-col>
</div>
<div class="item-row">
<span class="font-size14 color-666">产值</span>
<el-col class="font-size20 color-pramiry"
>30 <span class="font-size12 color-999">亿元</span>
</el-col>
</div>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script lang="ts">
/**
* 卡片信息--- 产业融合发展
*/
import { defineComponent } from "vue";
import MapTitle from "../../../../../components/mapTitle/index.vue";
import { Aim } from "@element-plus/icons";
import {evaluatIndicatorRouter} from "../../../../../route/evaluatIndicator"
export default defineComponent({
components: {
MapTitle,
Aim,
},
setup() {},
methods: {
detailsHandle() {
this.$router.push(evaluatIndicatorRouter.INDUSTRIAL)
},
},
});
</script>
<style lang="scss" scoped>
@import url("./common.css");
.info {
padding: 10px 5px;
display: flex;
flex-direction: column;
height: 100%;
.margin-bottom8 {
margin-bottom: 8px;
&:last-of-type {
margin-bottom: 0;
}
}
.year {
margin: 10px 0;
}
.item-row {
padding: 0 20px;
display: flex;
flex-direction: column;
text-align: center;
}
.info-item {
margin-bottom: 10px;
padding: 15px 10px;
&:last-of-type {
margin-bottom: 0;
}
.title {
margin-bottom: 5px;
color: #333;
font-weight: bold;
}
}
}
</style>
src/views/evaluatIndicator/index/model/CardList/strongArmy.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<MapTitle
text="服务强军兴军"
textRight="更多"
:detailsHandle="detailsHandle"
/>
<div class="info">
<div class="text-list item-bg">
<el-row
class="font-size14 color-666"
justify="space-between"
align="middle"
>
贯彻国防要求的建设项目
<el-row align="middle">
<span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">亿元</span>
</el-row>
</el-row>
<el-row
class="font-size14 color-666"
justify="space-between"
align="middle"
>
总投资
<el-row align="middle">
<span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">亿元</span>
</el-row>
</el-row>
<el-row
class="font-size14 color-666"
justify="space-between"
align="middle"
>
项目建设进度
<el-row align="middle">
<span class="font-size20 color-pramiry">30%</span>
</el-row>
</el-row>
</div>
<!-- foot -->
<el-row class="foot-wrapper" :gutter="10">
<el-col :span="16">
<el-row class="item-bg margin-bottom8">
<el-col class="font-size14 color-666">国防科技工业军品收入</el-col>
<el-col>
<span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">亿元</span>
</el-col>
</el-row>
<el-row class="item-bg">
<el-col class="font-size14 color-666">民口单位军需品收入</el-col>
<el-col>
<span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">亿元</span>
</el-col>
</el-row>
</el-col>
<el-col class="font-size14 color-666 item-bg" :span="8">
<el-row class="margin-bottom8">
<el-col class="font-size14 color-666">应届大学生应征入伍</el-col>
<el-col>
<span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">人</span>
</el-col>
</el-row>
<el-row>
<el-col class="font-size14 color-666">应征入伍率</el-col>
<el-col>
<span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">亿元</span>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script lang="ts">
/**
* 卡片信息--- 服务强军兴军
*/
import { defineComponent } from "vue";
import MapTitle from "../../../../../components/mapTitle/index.vue";
export default defineComponent({
components: {
MapTitle,
},
setup() {},
methods: {
detailsHandle() {},
},
});
</script>
<style lang="scss" scoped>
@import url("./common.css");
.info {
padding: 10px 5px;
.text-list {
.el-row {
margin-bottom: 6px;
&:last-of-type {
margin-bottom: 0;
}
}
}
}
.foot-wrapper {
margin-top: 10px;
.margin-bottom8 {
margin-bottom: 8px;
}
}
</style>
src/views/evaluatIndicator/index/model/CardList/systemConstruct.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<MapTitle
text="五大体系建设"
textRight="更多"
:detailsHandle="detailsHandle"
/>
<div class="info">
<el-row class="year" align="middle">
<el-icon color="#409EFC"> <Aim /> </el-icon>
2021年
</el-row>
<el-row class="item-bg margin-bottom12" align="middle" justify="space-between">
<el-col class="font-size14 color-666" :span="18"
>各地召开融委全体会议次数</el-col
>
<el-col class="font-size20 color-pramiry" :span="5">
30 <span class="font-size12 color-999">次</span>
</el-col>
</el-row>
<el-row class="item-bg margin-bottom12" align="middle" justify="space-between">
<el-col class="font-size14 color-666" :span="18"
>与当地军分区（警备区）建立并落实军地协作机制</el-col
>
<el-col class="font-size20 color-pramiry" :span="5">
30 <span class="font-size12 color-999">次</span>
</el-col>
</el-row>
<el-row class="info-item font-size14 color-666 item-bg margin-bottom12">
<el-row class="title">
各地军民融合办工作人员
</el-row>
<el-col :span="24">
<el-row justify="space-between">
<div class="item-row">
<span class="font-size14 color-666">专职</span>
<el-col class="font-size20 color-pramiry">
30 <span class="font-size12 color-999">人</span>
</el-col>
</div>
<div class="item-row">
<span class="font-size14 color-666">兼职</span>
<el-col class="font-size20 color-pramiry">
30 <span class="font-size12 color-999">人</span>
</el-col>
</div>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script lang="ts">
/**
* 卡片信息--- 五大体系建设
*/
import { defineComponent } from "vue";
import MapTitle from "../../../../../components/mapTitle/index.vue";
import { Aim } from "@element-plus/icons";
export default defineComponent({
components: {
MapTitle,
Aim,
},
setup() {},
methods: {
detailsHandle() {},
},
});
</script>
<style lang="scss" scoped>
@import url("./common.css");
.info {
padding: 0 5px 10px 5px;
display: flex;
flex-direction: column;
height: 100%;
.margin-bottom12 {
margin-bottom: 12px;
&:last-of-type {
margin-bottom: 0;
}
}
.year {
margin: 10px 0;
}
.info-item {
margin-bottom: 10px;
padding: 15px 10px;
&:last-of-type {
margin-bottom: 0;
}
.title {
margin-bottom: 5px;
color: #333;
font-weight: bold;
}
.item-row {
padding: 0 20px;
flex-direction: column;
display: flex;
text-align: center;
}
}
.color-pramiry {
text-align: center;
}
}
</style>
src/views/evaluatIndicator/index/model/Income/index.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<MapTitle text="国防科工军品收入及民口单位军品收入情况" />
<div id="incomEcharts" class="incom-echarts"></div>
</template>
<script lang="ts">
/**
* 绩效评价情况——柱状图
*/
import { defineComponent } from "vue";
import MapTitle from "../../../../../components/mapTitle/index.vue";
import * as echarts from "echarts";
enum Echart_color_Enum {
level_1 = "#fac858",
level_2 = "#4198ff",
}
const seriesData = [
{
name: "国防科工军品收入",
type: "level_1",
echartType: "bar",
growthRate: [80, 85, 95, 65, 85, 70, 85],
barValue: [1820, 1032, 2045, 1852],
},
{
name: "民口单位军品收入",
type: "level_2",
echartType: "bar",
barValue: [1232, 1264, 156, 2661, 15616],
growthRate: [50, 60, 70, 80, 80, 60, 85],
},
];
const xAxisValue = ["2018", "2019", "2020", "2021"];
export default defineComponent({
components: {
MapTitle,
},
setup() {},
data() {
return {
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
computed: {
option() {
const seriesBarList = seriesData.map((item, index) => {
return {
name: item.name,
type: "bar",
itemStyle: {
color: Echart_color_Enum[item.type],
},
data: item.barValue.map((barItem, barIndex) => {
return {
value: barItem,
class: `color_${index + 1}`,
rate: item.growthRate[barIndex],
};
}),
};
});
const seriesLineList = seriesData.map((item) => {
return {
type: "line",
tooltip: {
show: false,
},
itemStyle: {
color: Echart_color_Enum[item.type],
},
emphasis: {
focus: "series",
},
yAxisIndex: 1,
data: item.growthRate,
};
});
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "tooltip-income",
formatter: (params) => {
let html = "";
console.log("---", params);
params.forEach((item) => {
const { data = {} } = item;
html += `<div class="tooltip-income">
<span class="title">${item.seriesName}</span>
<div class="row-item">
<div>金额 <p><span class="${data.class}">${data.value}</span>万元</p></div>
<div>增长率 <p><span class="${data.class}">${data.rate}%</span></p></div>
</div>
</div>`;
});
return html;
},
},
legend: {},
grid: {
left: "0%",
right: "5%",
bottom: "3%",
containLabel: true,
},
yAxis: [
{
type: "value",
name: "万元",
min: 1000,
max: 5000,
},
{
type: "value",
name: "增长率%",
min: 0,
max: 100,
},
],
xAxis: {
type: "category",
data: xAxisValue,
},
series: [...seriesBarList, ...seriesLineList],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById("incomEcharts");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.option);
this.mapEcharts = mapEcharts;
},
},
unmounted() {
if (!this.mapEcharts) {
return;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</script>
<style>
.tooltip-income .title {
font-weight: 600;
color: #333;
}
.tooltip-income .row-item {
padding: 0 15px 10px 15px;
display: flex;
align-items: center;
font-size: 14px;
justify-content: space-between;
}
.tooltip-income .row-item div {
margin-right: 15px;
}
.tooltip-income .row-item p {
font-size: 12px;
color: #999;
}
.tooltip-income .row-item p span {
font-size: 18px;
margin-right: 5px;
}
.tooltip-income .color_1 {
color: #fac858;
}
.tooltip-income .color_2 {
color: #4198ff;
}
</style>
<style lang="scss" scoped>
.incom-echarts {
flex: 1;
height: 260px;
box-sizing: border-box;
margin-top: 10px;
}
</style>
src/views/evaluatIndicator/index/model/InvestmentProgress/index.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<MapTitle text="各市项目投资和建设进度情况" />
<div id="InvestmentProgress" class="investment-progress"></div>
</template>
<script lang="ts">
/**
* 绩效评价情况——柱状图
*/
import { defineComponent } from "vue";
import MapTitle from "../../../../../components/mapTitle/index.vue";
import * as echarts from "echarts";
enum Bar_Enum {
level_1 = "#fac858",
level_2 = "#4198ff",
}
const seriesData = [
{
name: "国防要求建设项目",
type: "level_1",
echartType: "bar",
growthRate: [80, 85, 95, 65, 85, 70, 85],
barValue: [820, 832, 901, 934, 1290, 1330, 1320],
},
{
name: "省军民融合重大示范项目",
type: "level_2",
echartType: "bar",
barValue: [820, 832, 901, 934, 1290, 1330, 1320],
growthRate: [50, 60, 70, 80, 80, 60, 85],
},
];
const xAxisValue = [
"杭州",
"宁波",
"温州",
"胡洲",
"嘉兴",
"绍兴",
"金华",
"衡州",
"舟山",
"台州",
"丽水",
];
export default defineComponent({
components: {
MapTitle,
},
setup() {},
data() {
return {
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
computed: {
optionBar() {
const seriesBarList = seriesData.map((item, index) => {
return {
name: item.name,
type: "bar",
itemStyle: {
color: Bar_Enum[item.type],
},
data: item.barValue.map((barItem, barIndex) => {
return {
value: barItem,
class: `color_${index + 1}`,
rate: item.growthRate[barIndex],
};
}),
};
});
const seriesLineList = seriesData.map((item) => {
return {
tooltip: {
show: false,
},
type: "line",
itemStyle: {
color: Bar_Enum[item.type],
},
yAxisIndex: 1,
emphasis: {
focus: "series",
},
data: item.growthRate,
};
});
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "tooltip-progress",
formatter: (params) => {
let html = "";
params.forEach((item) => {
const { data = {} } = item;
console.log(data);
html += `<div class="tooltip-progress">
<span class="title">${item.seriesName}</span>
<div class="row-item">
<div>金额 <p><span class="${data.class}">${data.value}</span>亿元</p></div>
<div>完成率 <p><span class="${data.class}">${data.rate}%</span></p></div>
</div>
</div>`;
});
return html;
},
},
legend: {},
grid: {
left: "0%",
right: "5%",
bottom: "3%",
containLabel: true,
},
yAxis: [
{
type: "value",
},
{
type: "value",
name: "增长率%",
min: 0,
max: 100,
},
],
xAxis: {
type: "category",
data: xAxisValue,
},
series: [...seriesLineList, ...seriesBarList],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById("InvestmentProgress");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
},
},
unmounted() {
if (!this.mapEcharts) {
return;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</script>
<style>
.tooltip-progress .title {
font-weight: 600;
color: #333;
}
.tooltip-progress .row-item {
padding: 0 15px 10px 15px;
display: flex;
align-items: center;
font-size: 14px;
justify-content: space-between;
}
.tooltip-progress .row-item p {
font-size: 12px;
color: #999;
}
.tooltip-progress .row-item p span {
font-size: 18px;
margin-right: 5px;
}
.tooltip-progress .color_1 {
color: #fac858;
}
.tooltip-progress .color_2 {
color: #4198ff;
}
</style>
<style lang="scss" scoped>
.investment-progress {
flex: 1;
height: 250px;
box-sizing: border-box;
margin-top: 10px;
}
</style>
src/views/evaluatIndicator/index/model/Map/index.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<div id="map" class="map-item"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import * as echarts from "echarts";
// import { getMapGeoData, getMapPointList } from "../service";
// import mapGeoData from "../../../../../../mocks/evaluatIndicator/mapGeoData.json"
import MapGeoData from "./mapGeoData"
import MapPointList from "./mapPointList"
export default defineComponent({
setup() {},
mounted() {
this.initEcharts();
},
data() {
return {
pointList: [],
mapEcharts: null
};
},
computed: {
options() {
return {
tooltip: {
borderColor: '#333',
formatter: function (params) {
return (
params.name
);
},
},
geo: {
map: "ZJ",
show: true,
// roam: true,
label: {
emphasis: {
show: false,
},
},
itemStyle: {
normal: {
areaColor: "#c6e7fe",
borderColor: "#4198ff",
shadowColor: "#c6e7fe",
},
emphasis: {
color: "#75c3f9", //悬浮背景
},
},
},
series: [
{
type: "scatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
period: 4,
brushType: "stroke",
scale: 2,
},
label: {
normal: {
show: true,
position: "right",
color: "#333",
formatter: "{b}",
fontWeight: "bold",
},
emphasis: {
show: true,
color: "#4198ff",
},
},
itemStyle: {
color: '#f3696a',
},
symbol: "pin",
symbolSize: 40,
data: this.pointList,
},
],
};
},
},
methods: {
async initEcharts() {
// const { data: getMapData } = await getMapGeoData();
// const { data: pointList } = await getMapPointList();
const { data: getMapData } = MapGeoData;
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;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</script>
<style lang="scss" scoped>
.map-item {
flex: 1;
box-sizing: border-box;
height: 100%;
}
</style>
src/views/evaluatIndicator/index/model/Map/mapGeoData.js 0 → 100644
浏览文件 @ 461e2191
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/evaluatIndicator/index/model/Map/mapPointList.js 0 → 100644
浏览文件 @ 461e2191
export default{
"data": [
{
"name": "杭州市",
"number": 80,
"value": [
120.153576,
30.287459
]
},
{
"name": "宁波市",
"number": 62,
"value": [
121.549792,
29.868388
]
},
{
"name": "温州市",
"number": 62,
"value": [
120.672111,
28.000575
]
},
{
"name": "嘉兴市",
"number": 62,
"value": [
120.750865,
30.762653
]
},
{
"name": "湖州市",
"number": 62,
"value": [
120.102398,
30.867198
]
},
{
"name": "绍兴市",
"number": 62,
"value": [
120.582112,
29.997117
]
},
{
"name": "金华市",
"number": 62,
"value": [
119.649506,
29.089524
]
},
{
"name": "衢州市",
"number": 62,
"value": [
118.87263,
28.941708
]
},
{
"name": "舟山市",
"number": 62,
"value": [
122.106863,
30.016028
]
},
{
"name": "台州市",
"number": 62,
"value": [
121.428599,
28.661378
]
},
{
"name": "丽水市",
"number": 62,
"value": [
119.921786,
28.451993
]
}
],
"code": 200
}
\ No newline at end of file
src/views/evaluatIndicator/index/model/Performance/index.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<MapTitle
text="全省军民融合创新示范绩效评价情况(2020年度)"
:detailsHandle="detailsHandle"
/>
<div id="performanceBar" class="performance-bar"></div>
</template>
<script lang="ts">
/**
* 绩效评价情况——柱状图
*/
import { defineComponent } from "vue";
import MapTitle from "../../../../../components/mapTitle/index.vue";
import * as echarts from "echarts";
enum Bar_Enum {
level_1 = "#4f5d81",
level_2 = "#429a9d",
level_3 = "#007fb2",
level_4 = "#eca933",
level_5 = "#4198ff",
}
const seriesData = [
{
name: "服务强军兴军",
type: "level_1",
value: [820, 832, 901, 934, 1290, 1330, 1320],
},
{
name: "产业融合发展",
type: "level_2",
value: [820, 832, 901, 934, 1290, 1330, 1320],
},
{
name: "军民协同创新",
type: "level_3",
value: [820, 832, 901, 934, 1290, 1330, 1320],
},
{
name: "资源开放共享",
type: "level_4",
value: [820, 832, 901, 934, 1290, 1330, 1320],
},
{
name: "五大体系建设",
type: "level_5",
value: [820, 832, 901, 934, 1290, 1330, 1320],
},
];
const xAxisValue = [
"杭州",
"宁波",
"温州",
"胡洲",
"嘉兴",
"绍兴",
"金华",
"衡州",
"舟山",
"台州",
"丽水",
];
export default defineComponent({
components: {
MapTitle,
},
setup() {},
data() {
return {
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
computed: {
optionBar() {
const seriesList = seriesData.map((item) => {
return {
name: item.name,
type: "bar",
stack: "total",
label: {
show: true,
},
itemStyle: {
color: Bar_Enum[item.type],
},
emphasis: {
focus: "series",
},
data: item.value,
};
});
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
textStyle: {
color: "#4198ff",
},
},
legend: {},
grid: {
left: "0%",
right: "5%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
},
xAxis: {
type: "category",
data: xAxisValue,
},
series: seriesList,
};
},
},
methods: {
detailsHandle() {
console.log("---点击详情跳转");
},
initEcharts() {
const dom = document.getElementById("performanceBar");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
},
},
unmounted() {
if (!this.mapEcharts) {
return;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</script>
<style lang="scss" scoped>
.performance-bar {
flex: 1;
height: 250px;
box-sizing: border-box;
margin-top: 10px;
}
</style>
src/views/evaluatIndicator/index/model/RankList/index.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<MapTitle text="创新示区、县排名" />
<el-scrollbar height="260px">
<el-table
:data="tableData"
size="small"
style="width: 100%"
:header-row-style="() => {
return {
background: 'red'
}
}"
>
<el-table-column type="index" label="序号" />
<el-table-column prop="name" label="地区" />
<el-table-column prop="score" label="分数" />
</el-table>
</el-scrollbar>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "../../../../../components/mapTitle/index.vue";
const TabData = [
{
name: "上城区",
score: 50,
},
{
name: "萧山区",
score: 50,
},
{
name: "海曙区",
score: 50,
},
{
name: "西湖区",
score: 50,
},
{
name: "象山县",
score: 50,
},
];
export default defineComponent({
components: {
MapTitle,
},
setup() {},
data() {
return {
tableData: TabData,
};
},
methods: {
detailsHandle() {},
},
});
</script>
<style lang="scss" scoped>
.el-scrollbar {
margin-top: 10px;
}
</style>
src/views/evaluatIndicator/index/model/service.ts 0 → 100644
浏览文件 @ 461e2191
import request from "../../../../axios/index"
// 获取地图数据JOSN格式
export async function getMapGeoData() {
return request({
url: '../../../../../public/mocks/evaluatIndicator/mapGeoData.json',
})
}
// 获取地图标记点
export async function getMapPointList() {
return request({
url: '../../../../../public/mocks/evaluatIndicator/mapPointList.json',
})
}
src/views/evaluatIndicator/industrial/index.vue 0 → 100644
浏览文件 @ 461e2191
<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 class="map-right card-item" :span="16">
<el-row :gutter="10">
<el-col :span="12">
<IncomExtendLine
echartsId="incomExtend"
echartsTitle="全省军民协同创新平台情况"
echartsDesText="主营业务收入趋势"
:cardItems="extendCardItems"
/>
</el-col>
<el-col :span="12"><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">
<IncomExtendLine
echartsId="industryDistribute"
echartsTitle="国防科技工业产值规模分布"
echartsDesText="工业总产值趋势图"
: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";
export default defineComponent({
components: {
TargetBar,
IncomExtendLine,
IncomDistribution,
BusinessIncome,
},
setup() {},
data() {
return {
industryCardItems: [
{ label: "国防科技工业产值总量", value: "202" },
{
label: "国防科技工业产值总量增长率",
value: "19",
},
],
extendCardItems: [
{ label: "参与军民融合产业互动的规模以上企业主营收入", value: "202" },
{
label: "参与军民融合产业互动的规模以上企业主营收入增长率",
value: "19",
},
],
};
},
});
</script>
<style lang="scss" scoped>
.card-item {
background: #fff;
border-radius: 5px;
padding: 15px 8px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
box-shadow: 2px 2px 10px #eee;
}
.map-warpper {
box-sizing: border-box;
.map-right{
padding-bottom: 0;
}
}
.footer-warpper {
margin-top: 20px;
.business-extend {
height: 430px;
}
}
</style>
src/views/evaluatIndicator/industrial/model/BusinessIncome/index.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<MapTitle text="军民融合产业主营业务收入" />
<el-row>
<el-col :span="10">
<div id="businessIncome" class="business-income"></div>
</el-col>
<el-col class="pie-items" :span="12" :offset="2">
<el-row :gutter="15">
<el-col
class="pie-item"
v-for="(item, index) in pieList"
:key="item.lable"
:span="11"
>
<el-row align="middle">
<div
class="square"
:style="{ background: pieColor[`level_${index + 1}`] }"
></div>
{{ item.label }}
</el-row>
<div class="pie-value">
<span>{{ item.value }}</span
>万元
</div>
</el-col>
</el-row>
</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 { Aim } from "@element-plus/icons";
const PIE_LIST = [
{ label: "数字军工(网络、人工智能)领域", value: 220 },
{ label: "高端装备领域", value: 220 },
{ label: "核电(新能源领域)", value: 80 },
{ label: "生物安全领域", value: 120 },
{ label: "航空航天领域", value: 150 },
{ label: "船舶与海洋装备领域", value: 60 },
{ label: "军队现代后勤保障领域", value: 100 },
{ label: "军用材料与基础件配套领域", value: 220 },
{ label: "其他", value: 160 },
];
const PieColor = {
level_1: "#1781df",
level_2: "#67bbf9",
level_3: "#fac858",
level_4: "#9cbcfa",
level_5: "#f78a77",
level_6: "#6fdef7",
level_7: "#008faa",
level_8: "#ffa741",
level_9: "#47d6ad",
};
/**
* 军民融合产业主营业务收入
*/
export default defineComponent({
components: {
MapTitle,
Aim,
},
setup() {},
data() {
return {
pieList: PIE_LIST,
pieColor: PieColor,
mapEcharts: null
};
},
mounted() {
this.initEcharts();
},
computed: {
optionBar() {
const pieData = PIE_LIST.map((item, index) => {
return {
value: item.value,
itemStyle: {
color: PieColor[`level_${index + 1}`],
},
tooltip: {
borderColor: "none",
className: "business-pie-tooltip",
formatter: `<div class="business-pie-tooltip">
<span class='title'>${item.label}</span>：
<br />
<div class='pie-text'>
<span>${item.value}</span>万元
</div>
</div>`,
},
};
});
return {
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "center",
},
series: [
{
name: "Access From",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "20",
formatter: "营业额(万元)\n \n{c}",
},
},
labelLine: {
show: false,
},
data: pieData,
},
],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById("businessIncome");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts
},
},
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;
font-size: 20px;
}
</style>
<style lang="scss" scoped>
.business-income {
flex: 1;
height: 400px;
box-sizing: border-box;
margin-top: 10px;
}
.pie-items {
.pie-item {
margin: 0 15px 10px 0;
padding: 10px 15px;
border-radius: 5px;
background: #f8f9fb;
.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;
span {
margin-right: 5px;
color: #4198ff;
font-size: 20px;
}
}
.square {
width: 8px;
height: 8px;
margin-right: 5px;
}
}
}
</style>
src/views/evaluatIndicator/industrial/model/IncomDistribution/index.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<div class="title">主营业务收入分布</div>
<div id="incomDistribution" class="incom-distribution"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "../../../../../components/mapTitle/index.vue";
import * as echarts from "echarts";
const seriesData = [
{
name: "国防要求建设项目",
type: "level_1",
value: [820, 832, 901, 934, 1290, 1330, 1320],
},
];
const xAxisValue = [
"杭州",
"宁波",
"温州",
"胡洲",
"嘉兴",
"绍兴",
"金华",
"衡州",
"舟山",
"台州",
"丽水",
];
/**
* 主营业务收入分布——柱状图
*/
export default defineComponent({
components: {
MapTitle,
},
setup() {},
data() {
return {
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
computed: {
optionBar() {
const seriesBarList = seriesData.map((item) => {
return {
type: "bar",
itemStyle: {
color: "#4198ff",
},
data: item.value,
};
});
const seriesLineList = seriesData.map((item) => {
return {
type: "line",
stack: "Total",
itemStyle: {
color: "#fac858",
},
emphasis: {
focus: "series",
},
data: item.value,
};
});
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
textStyle: {
color: "#4198ff",
},
},
legend: {},
grid: {
left: "0%",
right: "5%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
show: false,
},
xAxis: {
type: "category",
data: xAxisValue,
},
series: [...seriesBarList, ...seriesLineList],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById("incomDistribution");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
},
},
unmounted() {
if (!this.mapEcharts) {
return;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</script>
<style lang="scss" scoped>
.title {
color: #4198ff;
margin: 30px 0 10px 0;
font-size: 14px;
}
.incom-distribution {
flex: 1;
height: 300px;
box-sizing: border-box;
margin-top: 10px;
}
</style>
src/views/evaluatIndicator/industrial/model/IncomExtendLine/index.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<MapTitle :text="echartsTitle" />
<div class="describes">
<div class="card-items">
<div class="item" v-for="item in cardItems" :key="item.text">
<span>{{ item.label }}</span>
<div class="value-des">
<span>{{ item.value || "--" }}</span
>亿元
</div>
</div>
</div>
<div class="text">{{ echartsDesText }}</div>
</div>
<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";
const seriesData = [
{
// name: "国防要求建设项目",
type: "level_1",
value: [820, 832, 1260],
},
];
const xAxisValue = ["2019", "2020", "2021"];
/**
* 全省军民协同创新平台情况/国防科技工业产值规模分布 -- 折线图
*/
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();
},
computed: {
optionBar() {
const seriesLine = seriesData.map((item) => {
return {
type: "line",
itemStyle: {
color: "#4198ff",
},
emphasis: {
focus: "series",
},
label: {
show: true,
position: "top",
formatter: "{c}万元",
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#4198ff",
},
{
offset: 1,
color: "#fff",
},
]),
},
data: item.value,
};
});
return {
tooltip: {
trigger: "axis",
textStyle: {
color: "#4198ff",
},
},
legend: {},
grid: {
top: 0,
left: "0%",
right: "5%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
show: false,
},
xAxis: {
type: "category",
data: xAxisValue,
},
series: seriesLine,
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById(this.echartsId);
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
},
},
unmounted() {
if (!this.mapEcharts) {
return;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</script>
<style lang="scss" scoped>
.incom-echarts-line {
flex: 1;
height: calc(100% - 195px);
box-sizing: border-box;
}
.describes {
padding-left: 10px;
margin: 0 10px;
height: 150px;
box-sizing: border-box;
.card-items {
margin: 15px 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
.item {
padding: 10px 15px;
margin-right: 15px;
background: #f8f9fb;
border-radius: 5px;
font-size: 14px;
color: #333;
&:last-of-type {
margin-right: 0;
}
.value-des {
margin-top: 10px;
font-size: 12px;
color: #999;
span {
font-size: 20px;
margin-right: 5px;
color: #4198ff;
}
}
}
}
.text {
color: #4198ff;
margin-top: 10px;
font-size: 14px;
}
}
</style>
src/views/evaluatIndicator/industrial/model/TargetBar/index.vue 0 → 100644
浏览文件 @ 461e2191
<template>
<MapTitle text="产业融合发展总览" />
<div class="echarts-search">
<div class="title">各市产业融合创新指标情况</div>
<el-row class="" justify="space-between">
<div class="years" align="middle">
<span
v-for="(item, index) in years"
:key="item"
:class="{
active: index === curYearIndex,
}"
@click="yearHandle(index)"
>{{ item }}年</span
>
</div>
<el-select v-model="value" size="small" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-row>
</div>
<div id="TargetBar" class="target-bar"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "../../../../../components/mapTitle/index.vue";
import * as echarts from "echarts";
const xAxisValue = [
"杭州",
"宁波",
"温州",
"胡洲",
"嘉兴",
"绍兴",
"金华",
"衡州",
"舟山",
"台州",
"丽水",
];
/**
* 产业融合发展总览——柱状图
*/
export default defineComponent({
components: {
MapTitle,
},
setup() {},
data() {
return {
value: "",
options: [
{ label: "得分情况", value: 1 },
{ label: "军转民收入及增长率", value: 2 },
{ label: "规模以上企业收入及增长率", value: 3 },
{ label: "国防科工产值", value: 4 },
],
years: [2019, 2020, 2021],
curYearIndex: 0,
mapEcharts: null
};
},
mounted() {
this.initEcharts();
},
computed: {
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,
},
xAxis: {
type: "category",
data: xAxisValue,
},
series: [
{
type: "bar",
itemStyle: {
color: "#4198ff",
},
label: {
show: true,
position: "top",
// formatter: "{c}亿元"
},
data: [820, 832, 901, 934, 1290, 1330, 1320],
},
],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById("TargetBar");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts
},
yearHandle(index: number) {
this.curYearIndex = index;
},
},
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: 14px;
}
.years {
display: flex;
align-items: center;
background: #f4f6f9;
border-radius: 5px;
overflow: hidden;
span {
padding: 0 12px;
height: 32px;
line-height: 32px;
font-size: 12px;
color: #333;
}
.active {
background-color: #4198ff;
color: #fff;
}
}
}
.target-bar {
flex: 1;
height: 250px;
box-sizing: border-box;
margin-top: 10px;
}
</style>
tsconfig.json 0 → 100644
浏览文件 @ 461e2191
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/views/login/signClick.tsx"]
}
vite.config.ts 0 → 100644
浏览文件 @ 461e2191
import { defineConfig, UserConfigExport } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import legacy from "@vitejs/plugin-legacy";
import viteMocker from "vite-plugin-mocker";
import { resolve } from 'path'
export default defineConfig({
// css: {
// preprocessorOptions: {
// scss: {
// additionalData: '@import "./src/assets/scss/common.scss";'
// }
// }
// },
resolve: {
alias: {
'@': resolve('./src')
}
},
base: './', // 打包路径
plugins: [
vue(),
vueJsx(),
legacy({
targets: ["ie >= 11"],
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
}),
viteMocker({
dir: "/mocks",
pattern: "/mock",
delay: [0, 200],
}),
],
server: {
// proxy: { // 配置域名代理
// "/api": {
// target: "http://jsonplaceholder.typicode.com",
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, ""),
// },
// },
},
});
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论