Skip to content

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

fix():指标预警改为滚动显示

上级 5d3da792
隐藏空白字符变更
内嵌 并排
正在显示 包含 109 行增加 和 74 行删除
src/views/dataCenter/map/model/indicatorWarning/index.vue
浏览文件 @ 4aba7f41
...@@ -14,41 +14,49 @@ ...@@ -14,41 +14,49 @@
</div> </div>
</div> </div>
<div class="contentBox"> <div class="contentBox">
<div class="table-list"> <el-carousel
<el-row height="200px"
class="table_cell" trigger="click"
v-for="(item, index) in tableData" :loop="true"
:key="index" :interval="2500"
:dataIndex="index" direction="vertical"
> :autoplay="true"
<el-col :span="6"> >
<div class="num"> <el-carousel-item v-for="(data, idx) in carouselData" :key="idx">
<div>{{ item.num }}</div> <el-row
</div> class="table-list"
</el-col> v-for="(item, index) in data"
<el-col :span="6"> :key="index"
<div class="grade-box"> >
<img <el-col :span="6">
v-if="item.grade == 1" <div class="num">
src="../../../../../assets/img/grade1.png" <div>{{ item.num }}</div>
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>
</div> </el-col>
</el-col> <el-col :span="6">
<el-col :span="12">{{ item.event }}</el-col> <div class="grade-box">
</el-row> <img
</div> 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>
</el-carousel-item>
</el-carousel>
</div> </div>
</div> </div>
</div> </div>
...@@ -72,6 +80,15 @@ export default { ...@@ -72,6 +80,15 @@ export default {
tableData() { tableData() {
return Mock[this.curDataType]; return Mock[this.curDataType];
}, },
carouselData() {
let carouselData = [];
for (let i = 0; i < this.tableData.length; i += 5) {
const list = this.tableData.slice(i, i + 5);
carouselData.push(list);
}
console.log(carouselData);
return carouselData;
},
}, },
data() { data() {
return { return {
...@@ -115,7 +132,7 @@ export default { ...@@ -115,7 +132,7 @@ export default {
height: 40px; height: 40px;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
background-color: #0e4781 !important; background-color: #3395ff30 !important;
.tableBox { .tableBox {
color: #ffffff; color: #ffffff;
...@@ -130,52 +147,40 @@ export default { ...@@ -130,52 +147,40 @@ export default {
padding: 8px 0; padding: 8px 0;
line-height: 23px; line-height: 23px;
} }
.el-row {
border-bottom: 1px dashed #10529a;
}
} }
} }
.contentBox { .contentBox {
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
// height: 200px; .el-row {
padding: 0 24px 0 20px;
.table-list { display: flex;
width: 100%; align-items: center;
height: 100%; }
overflow: hidden; .el-row:nth-child(even) {
.el-row { background-color: #3395ff13;
padding: 0 20px; }
// border-bottom: 1px dashed #10529a; .el-col {
display: flex; color: #d4f7ff;
align-items: center; font-size: 12px;
} padding: 8px 0;
.el-row:nth-child(even) { line-height: 18px;
background-color: #3395ff30; }
} .num {
.el-col { font-family: "YouSheBiaoTiHei";
color: #d4f7ff; color: #ffffff;
font-size: 12px; font-size: 17px;
padding: 8px 0; }
line-height: 18px; .grade-box {
display: flex;
align-items: center;
.grade-icon {
width: 15px;
} }
.num { .name {
margin-left: 10px;
font-family: "YouSheBiaoTiHei"; font-family: "YouSheBiaoTiHei";
color: #ffffff; font-size: 16px;
font-size: 17px;
}
.grade-box {
display: flex;
align-items: center;
.grade-icon {
width: 15px;
}
.name {
margin-left: 10px;
font-family: "YouSheBiaoTiHei";
font-size: 16px;
}
} }
} }
} }
......
src/views/dataCenter/map/model/indicatorWarning/mock.js
浏览文件 @ 4aba7f41
...@@ -15,6 +15,12 @@ export default { ...@@ -15,6 +15,12 @@ export default {
{ {
num: 16, grade: 2, event: "军民需求对接活动偏少", num: 16, grade: 2, event: "军民需求对接活动偏少",
}, },
{
num: 17, grade: 1, event: "部分县市区未严格落实组织管理体系建设要求",
},
{
num: 24, grade: 1, event: "部分县市区任务落实不力",
},
], ],
"2022One": [ "2022One": [
...@@ -33,6 +39,12 @@ export default { ...@@ -33,6 +39,12 @@ export default {
{ {
num: 16, grade: 2, event: "军民需求对接活动偏少", num: 16, grade: 2, event: "军民需求对接活动偏少",
}, },
{
num: 17, grade: 1, event: "部分县市区未严格落实组织管理体系建设要求",
},
{
num: 24, grade: 1, event: "部分县市区任务落实不力",
},
], ],
"typeFour": [ "typeFour": [
{ {
...@@ -50,6 +62,12 @@ export default { ...@@ -50,6 +62,12 @@ export default {
{ {
num: 16, grade: 2, event: "军民需求对接活动偏少", num: 16, grade: 2, event: "军民需求对接活动偏少",
}, },
{
num: 17, grade: 1, event: "部分县市区未严格落实组织管理体系建设要求",
},
{
num: 24, grade: 1, event: "部分县市区任务落实不力",
},
], ],
"typeThree": [ "typeThree": [
{ {
...@@ -67,6 +85,12 @@ export default { ...@@ -67,6 +85,12 @@ export default {
{ {
num: 16, grade: 2, event: "军民需求对接活动偏少", num: 16, grade: 2, event: "军民需求对接活动偏少",
}, },
{
num: 17, grade: 1, event: "部分县市区未严格落实组织管理体系建设要求",
},
{
num: 24, grade: 1, event: "部分县市区任务落实不力",
},
], ],
"typeTwo": [ "typeTwo": [
{ {
...@@ -84,6 +108,12 @@ export default { ...@@ -84,6 +108,12 @@ export default {
{ {
num: 16, grade: 2, event: "军民需求对接活动偏少", num: 16, grade: 2, event: "军民需求对接活动偏少",
}, },
{
num: 17, grade: 1, event: "部分县市区未严格落实组织管理体系建设要求",
},
{
num: 24, grade: 1, event: "部分县市区任务落实不力",
},
], ],
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论