Skip to content

C
cxsfjx_project_echarts
提交 005a2889 authored 作者: 冯小芳's avatar 冯小芳
浏览文件
操作

fix(首页):指标预警提交

上级 33de2569
隐藏空白字符变更
内嵌 并排
正在显示 包含 333 行增加 和 9 行删除
package-lock.json
浏览文件 @ 005a2889
......@@ -5001,6 +5001,11 @@
"integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
"dev": true
},
"throttle-debounce": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
"integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg=="
},
"to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
......@@ -5422,6 +5427,14 @@
"vscode-vue-languageservice": "^0.27.0"
}
},
"vue3-seamless-scroll": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/vue3-seamless-scroll/-/vue3-seamless-scroll-2.0.1.tgz",
"integrity": "sha512-mI3BaDU3pjcPUhVSw3/xNKdfPBDABTi/OdZaZqKysx4cSdNfGRbVvGNDzzptBbJ5S7imv5T55l6x/SqgnxKreg==",
"requires": {
"throttle-debounce": "5.0.0"
}
},
"vuex": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
......
package.json
浏览文件 @ 005a2889
......@@ -25,6 +25,7 @@
"vite-plugin-mocker": "^1.0.7",
"vue": "^3.2.16",
"vue-router": "^4.0.11",
"vue3-seamless-scroll": "^2.0.1",
"vuex": "^4.0.2"
},
"devDependencies": {
......
src/assets/font/font.css 0 → 100644
浏览文件 @ 005a2889
@font-face {
/*给字体命名*/
font-family: 'YouSheBiaoTiHei';
/*引入字体文件*/
src: url('./YouSheBiaoTiHei.ttf');
}
\ No newline at end of file
src/main.ts
浏览文件 @ 005a2889
......@@ -5,12 +5,17 @@ import App from './App.vue'
import router from "./route/index"
import store from './store'
import vue3SeamlessScroll from 'vue3-seamless-scroll'
// 引入字体
import '../src/assets/font/font.css';
const app = createApp(App);
app.use(ElementPlus);
app.use(router)
app.use(store)
app.use(vue3SeamlessScroll)
app.mount('#app')
......
src/views/dataCenter/map/index.vue
浏览文件 @ 005a2889
......@@ -15,8 +15,8 @@
<div class="sfqx" v-if="curDataType == '2022Two'">
<p>创新示范区县</p>
<div class="text">
<div v-for="(txt,index) in sfqx" :key="index">
{{txt}}
<div v-for="(txt, index) in sfqx" :key="index">
{{ txt }}
</div>
</div>
</div>
......@@ -25,13 +25,15 @@
</el-col>
<el-col :span="7">
<div class="map-right">
<div class="card-item rank-list">
<RankList />
</div>
<div class="card-item incom-graphic">
<Income />
<IndicatorWarning />
</div>
<!-- <div class="card-item incom-graphic">
<Income />
</div> -->
</div>
</el-col>
</el-row>
......@@ -42,13 +44,21 @@
<StrongArmyCard />
</el-col>
<el-col class="card-item">
<CardItem title="军民协同创新" :infoList="list" :toPage="dataCenterRouter.INNOVATION" />
<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" />
<CardItem
:infoList="list2x"
title="资源开放共享"
:toPage="dataCenterRouter.RESORCE_SHARE"
/>
</el-col>
<el-col class="card-item">
<SystemConstruct />
......@@ -62,6 +72,7 @@ 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 IndicatorWarning from "./model/indicatorWarning/index.vue";
import StrongArmyCard from "./model/CardList/strongArmy.vue";
import CardItem from "./model/CardList/index.vue";
import Industrial from "./model/CardList/industrial.vue";
......@@ -78,12 +89,13 @@ export default defineComponent({
Map,
InvestmentProgress,
Income,
IndicatorWarning,
StrongArmyCard,
CardItem,
Industrial,
SystemConstruct,
},
setup() { },
setup() {},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
......@@ -99,7 +111,15 @@ export default defineComponent({
data() {
return {
dataCenterRouter: DataCenterRouter,
sfqx: ["上城区,西湖区,萧山区", "海曙区,鄞州区,象山县", "南湖区,德清县,长兴县", "诸暨市,永康市,衢江区", "温岭市,缙云县,滨江区", "北仑区,海宁市,柯桥区", "普陀区"]
sfqx: [
"上城区,西湖区,萧山区",
"海曙区,鄞州区,象山县",
"南湖区,德清县,长兴县",
"诸暨市,永康市,衢江区",
"温岭市,缙云县,滨江区",
"北仑区,海宁市,柯桥区",
"普陀区",
],
};
},
});
......
src/views/dataCenter/map/model/indicatorWarning/index.vue 0 → 100644
浏览文件 @ 005a2889
<template>
<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="6">预警等级</el-col>
<el-col :span="12">风险事件</el-col>
</el-row>
</div>
</div>
<div class="contentBox">
<vue3-seamless-scroll
class="table-list"
:list="tableData"
:step="0.3"
:hover="true"
>
<el-row
class="table_cell"
v-for="(item, index) in tableData"
:key="index"
:dataIndex="index"
>
<el-col :span="6">
<div class="num">
<div>{{ item.num }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="grade-box">
<img
v-if="item.grade == 1"
src="../../../../../assets/img/grade1.png"
class="grade-icon"
/>
<img
v-else
src="../../../../../assets/img/grade2.png"
class="grade-icon"
/>
<div
class="name"
:style="{ color: gradeType[item.grade].color }"
>
{{ gradeType[item.grade].name }}
</div>
</div>
</el-col>
<el-col :span="12">{{ item.event }}</el-col>
</el-row>
</vue3-seamless-scroll>
</div>
</div>
</div>
</template>
<script>
import MapTitle from "@/components/mapTitle/index.vue";
import { Bottom, Top } from "@element-plus/icons";
import Mock from "./mock";
import { mapState } from "vuex";
export default {
components: {
MapTitle,
Bottom,
Top,
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
tableData() {
return Mock[this.curDataType];
},
},
data() {
return {
gradeType: {
1: {
name: "高",
color: "#ef4b4b",
},
2: {
name: "中",
color: "#f78131",
},
},
};
},
};
</script>
<style>
/* 火狐出行滚动条 */
.rank-list .el-scrollbar__view::-webkit-scrollbar {
display: none;
width: 0 !important;
}
/* .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;
font-weight: bold;
font-size: 14px;
background-color: #0e4781 !important;
.tableBox {
color: #ffffff;
width: calc(100% - 0px);
.tabletit {
margin: 0px 20px;
}
.el-col {
color: #d4f7ff;
font-size: 12px;
padding: 8px 0;
line-height: 23px;
}
.el-row {
border-bottom: 1px dashed #10529a;
}
}
}
.contentBox {
color: #fff;
font-size: 16px;
height: 200px;
.table-list {
width: 100%;
height: 100%;
overflow: hidden;
.el-row {
padding: 0 20px;
border-bottom: 1px dashed #10529a;
display: flex;
align-items: center;
}
// .el-row:nth-child(even) {
// background-color: #3395ff30;
// }
.el-col {
color: #d4f7ff;
font-size: 12px;
padding: 8px 0;
line-height: 23px;
}
.num {
font-family: "YouSheBiaoTiHei";
color: #ffffff;
font-size: 17px;
}
.grade-box {
display: flex;
align-items: center;
.grade-icon {
width: 15px;
}
.name {
margin-left: 10px;
font-family: "YouSheBiaoTiHei";
font-size: 16px;
}
}
}
}
</style>
src/views/dataCenter/map/model/indicatorWarning/mock.js 0 → 100644
浏览文件 @ 005a2889
export default {
"2022Two": [
{
num: 2, grade: 2, event: "全年重大示范项目完成率滞后",
},
{
num: 10, grade: 2, event: "截止本季度，军工单位科技成果转让收入规模偏低",
},
{
num: 12, grade: 1, event: "新增保密资质企业数少；未启动省级军民融合产业示范基地评价",
},
{
num: 15, grade: 2, event: "县市区资源共享平台建设滞后",
},
{
num: 16, grade: 2, event: "军民需求对接活动偏少",
},
],
"2022One": [
{
num: 2, grade: 2, event: "全年重大示范项目完成率滞后",
},
{
num: 10, grade: 2, event: "截止本季度，军工单位科技成果转让收入规模偏低",
},
{
num: 12, grade: 1, event: "新增保密资质企业数少；未启动省级军民融合产业示范基地评价",
},
{
num: 15, grade: 2, event: "县市区资源共享平台建设滞后",
},
{
num: 16, grade: 2, event: "军民需求对接活动偏少",
},
],
"typeFour": [
{
num: 2, grade: 2, event: "全年重大示范项目完成率滞后",
},
{
num: 10, grade: 2, event: "截止本季度，军工单位科技成果转让收入规模偏低",
},
{
num: 12, grade: 1, event: "新增保密资质企业数少；未启动省级军民融合产业示范基地评价",
},
{
num: 15, grade: 2, event: "县市区资源共享平台建设滞后",
},
{
num: 16, grade: 2, event: "军民需求对接活动偏少",
},
],
"typeThree": [
{
num: 2, grade: 2, event: "全年重大示范项目完成率滞后",
},
{
num: 10, grade: 2, event: "截止本季度，军工单位科技成果转让收入规模偏低",
},
{
num: 12, grade: 1, event: "新增保密资质企业数少；未启动省级军民融合产业示范基地评价",
},
{
num: 15, grade: 2, event: "县市区资源共享平台建设滞后",
},
{
num: 16, grade: 2, event: "军民需求对接活动偏少",
},
],
"typeTwo": [
{
num: 2, grade: 2, event: "全年重大示范项目完成率滞后",
},
{
num: 10, grade: 2, event: "截止本季度，军工单位科技成果转让收入规模偏低",
},
{
num: 12, grade: 1, event: "新增保密资质企业数少；未启动省级军民融合产业示范基地评价",
},
{
num: 15, grade: 2, event: "县市区资源共享平台建设滞后",
},
{
num: 16, grade: 2, event: "军民需求对接活动偏少",
},
],
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论