Skip to content

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

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

上级 33de2569
隐藏空白字符变更
内嵌 并排
正在显示 包含 333 行增加 和 9 行删除
package-lock.json
浏览文件 @ 005a2889
...@@ -5001,6 +5001,11 @@ ...@@ -5001,6 +5001,11 @@
"integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
"dev": true "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": { "to-fast-properties": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
...@@ -5422,6 +5427,14 @@ ...@@ -5422,6 +5427,14 @@
"vscode-vue-languageservice": "^0.27.0" "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": { "vuex": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz", "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
......
package.json
浏览文件 @ 005a2889
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
"vite-plugin-mocker": "^1.0.7", "vite-plugin-mocker": "^1.0.7",
"vue": "^3.2.16", "vue": "^3.2.16",
"vue-router": "^4.0.11", "vue-router": "^4.0.11",
"vue3-seamless-scroll": "^2.0.1",
"vuex": "^4.0.2" "vuex": "^4.0.2"
}, },
"devDependencies": { "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' ...@@ -5,12 +5,17 @@ import App from './App.vue'
import router from "./route/index" import router from "./route/index"
import store from './store' import store from './store'
import vue3SeamlessScroll from 'vue3-seamless-scroll'
// 引入字体
import '../src/assets/font/font.css';
const app = createApp(App); const app = createApp(App);
app.use(ElementPlus); app.use(ElementPlus);
app.use(router) app.use(router)
app.use(store) app.use(store)
app.use(vue3SeamlessScroll)
app.mount('#app') app.mount('#app')
......
src/views/dataCenter/map/index.vue
浏览文件 @ 005a2889
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
<div class="sfqx" v-if="curDataType == '2022Two'"> <div class="sfqx" v-if="curDataType == '2022Two'">
<p>创新示范区县</p> <p>创新示范区县</p>
<div class="text"> <div class="text">
<div v-for="(txt,index) in sfqx" :key="index"> <div v-for="(txt, index) in sfqx" :key="index">
{{txt}} {{ txt }}
</div> </div>
</div> </div>
</div> </div>
...@@ -25,13 +25,15 @@ ...@@ -25,13 +25,15 @@
</el-col> </el-col>
<el-col :span="7"> <el-col :span="7">
<div class="map-right"> <div class="map-right">
<div class="card-item rank-list"> <div class="card-item rank-list">
<RankList /> <RankList />
</div> </div>
<div class="card-item incom-graphic"> <div class="card-item incom-graphic">
<Income /> <IndicatorWarning />
</div> </div>
<!-- <div class="card-item incom-graphic">
<Income />
</div> -->
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -42,13 +44,21 @@ ...@@ -42,13 +44,21 @@
<StrongArmyCard /> <StrongArmyCard />
</el-col> </el-col>
<el-col class="card-item"> <el-col class="card-item">
<CardItem title="军民协同创新" :infoList="list" :toPage="dataCenterRouter.INNOVATION" /> <CardItem
title="军民协同创新"
:infoList="list"
:toPage="dataCenterRouter.INNOVATION"
/>
</el-col> </el-col>
<el-col class="card-item"> <el-col class="card-item">
<Industrial /> <Industrial />
</el-col> </el-col>
<el-col class="card-item"> <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>
<el-col class="card-item"> <el-col class="card-item">
<SystemConstruct /> <SystemConstruct />
...@@ -62,6 +72,7 @@ import RankList from "./model/RankList/index.vue"; ...@@ -62,6 +72,7 @@ import RankList from "./model/RankList/index.vue";
import Map from "./model/Map/index.vue"; import Map from "./model/Map/index.vue";
import InvestmentProgress from "./model/InvestmentProgress/index.vue"; import InvestmentProgress from "./model/InvestmentProgress/index.vue";
import Income from "./model/Income/index.vue"; import Income from "./model/Income/index.vue";
import IndicatorWarning from "./model/indicatorWarning/index.vue";
import StrongArmyCard from "./model/CardList/strongArmy.vue"; import StrongArmyCard from "./model/CardList/strongArmy.vue";
import CardItem from "./model/CardList/index.vue"; import CardItem from "./model/CardList/index.vue";
import Industrial from "./model/CardList/industrial.vue"; import Industrial from "./model/CardList/industrial.vue";
...@@ -78,12 +89,13 @@ export default defineComponent({ ...@@ -78,12 +89,13 @@ export default defineComponent({
Map, Map,
InvestmentProgress, InvestmentProgress,
Income, Income,
IndicatorWarning,
StrongArmyCard, StrongArmyCard,
CardItem, CardItem,
Industrial, Industrial,
SystemConstruct, SystemConstruct,
}, },
setup() { }, setup() {},
computed: { computed: {
...mapState({ ...mapState({
curDataType: (state) => state.curDataType, curDataType: (state) => state.curDataType,
...@@ -99,7 +111,15 @@ export default defineComponent({ ...@@ -99,7 +111,15 @@ export default defineComponent({
data() { data() {
return { return {
dataCenterRouter: DataCenterRouter, 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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论