elink-star
/
epmet-work-pc
17
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

问题清单列表、地图头部样式

v1.1
mk 2 years ago
parent
ca68a02b9d
commit
8eab57b88f
2 changed files with 127 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      src/views/dataBoard/overview/components/map-top.vue
  2. 155
      src/views/dataBoard/overview/components/wtqd.vue

15
src/views/dataBoard/overview/components/map-top.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="m-per">
<template v-if="level != 'grid'">
<!-- <template v-if="level != 'grid'">
<div class="item" :class="selectIndex === 'staffAgency' ? 'xz' : ''">
<div class="item-info" @click="selectIcon('staffAgency')">
<div>
@ -110,7 +110,19 @@
</div>
</div>
</div>
</template> -->
<template>
<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input3" class="input-with-select">
<el-select v-model="searchSelect" slot="prepend" placeholder="请选择">
<el-option label="需求"></el-option>
<el-option label="问题" ></el-option>
<el-option label="资源" ></el-option>
<el-option label="不满意事项"></el-option>
</el-select>
<el-button slot="append">搜索</el-button>
</el-input>
</template>
</div>
</template>
<script>
@ -134,6 +146,7 @@ export default {
return {
selectIndex: "",
numData: {},
searchSelect:'不满意事项'
};
},
watch: {

155
src/views/dataBoard/overview/components/wtqd.vue
View File

@ -2,63 +2,83 @@
<div class="m-wtqd">
<title-small text="难点赌点" />
<div class="t-list f-hflex">
<swiper ref="orderSwiper" :options="swiperOptions">
<swiper-slide v-for="(items, index) in tableData" :key="index" class="swiper-slide">
<swiper ref="orderSwiper" :options="swiperOptions" v-if="nddd">
<swiper-slide
v-for="(items, index) in nddd"
:key="index"
class="swiper-slide"
>
<div
:class="['item', 'f-flex']"
v-for="(item, index) in items"
:key="index"
>
<span>{{ item.time }}</span>
<span>{{ item.title }}</span>
<span>{{ item.createdTime.substr(5,5) }}</span>
<span>{{ item.eventContent }}</span>
</div>
</swiper-slide>
</swiper>
<div class="no-data">暂无数据</div>
</div>
<title-small text="矛盾纠纷" />
<div class="t-list f-hflex">
<swiper ref="orderSwiper" :options="swiperOptions">
<swiper-slide v-for="(items, index) in tableData" :key="index" class="swiper-slide">
<swiper ref="orderSwiper" :options="swiperOptions" v-if="mdjf">
<swiper-slide
v-for="(items, index) in mdjf"
:key="index"
class="swiper-slide"
>
<div
:class="['item', 'f-flex']"
class="item f-flex bto-border"
v-for="(item, index) in items"
:key="index"
>
<span>{{ item.time }}</span>
<span>{{ item.title }}</span>
<span>{{ item.createdTime.substr(5,5) }}</span>
<span>{{ item.eventContent }}</span>
</div>
</swiper-slide>
</swiper>
<div class="no-data">暂无数据</div>
</div>
<title-small text="自身问题" />
<div class="t-list f-hflex">
<swiper ref="orderSwiper" :options="swiperOptions">
<swiper-slide v-for="(items, index) in tableData" :key="index" class="swiper-slide">
<swiper ref="orderSwiper" class="swiper-containers" :options="swiperOptions" v-if="zswt">
<swiper-slide
v-for="(items, index) in zswt"
:key="index"
class="swiper-slide"
>
<div
:class="['item', 'f-flex']"
v-for="(item, index) in items"
:key="index"
>
<span>{{ item.time }}</span>
<span>{{ item.title }}</span>
<span>{{ item.createdTime.substr(5,5) }}</span>
<span>{{ item.eventContent }}</span>
</div>
</swiper-slide>
</swiper>
<div class="no-data">暂无数据</div>
</div>
<title-small text="超出服务范围" />
<div class="t-list f-hflex">
<swiper ref="orderSwiper" :options="swiperOptions">
<swiper-slide v-for="(items, index) in tableData" :key="index" class="swiper-slide">
<div
:class="['item', 'f-flex']"
<swiper ref="orderSwiper" class="swiper-containers" :options="swiperOptions" v-if="ccfwfw">
<swiper-slide
v-for="(items, index) in ccfwfw"
:key="index"
class="swiper-slide"
>
<div
class="item f-flex bto-border"
v-for="(item, index) in items"
:key="index"
>
<span>{{ item.time }}</span>
<span>{{ item.title }}</span>
<span>{{ item.createdTime.substr(5,5) }}</span>
<span>{{ item.eventContent }}</span>
</div>
</swiper-slide>
</swiper>
<div class="no-data">暂无数据</div>
</div>
<title-small text="不满意问题数" />
<div class="f-flex white f-mean">
@ -71,10 +91,7 @@
"
>
<div><span class="f-pingfang">12345热线不满意数</span></div>
<div class="f-darkGray">
<b class="f-font34 f-yellow">0</b
>人
</div>
<div class="f-darkGray"><b class="f-font34 f-yellow">0</b>人</div>
</div>
<div
class="f-hflex"
@ -85,10 +102,7 @@
"
>
<div><span class="f-pingfang">满意度调查不满意数</span></div>
<div class="f-darkGray">
<b class="f-font34 f-green">0</b
>人
</div>
<div class="f-darkGray"><b class="f-font34 f-green">0</b>人</div>
</div>
<div
class="f-hflex"
@ -99,10 +113,7 @@
"
>
<div><span class="f-pingfang">社区自评不满意数</span></div>
<div class="f-darkGray">
<b class="f-font34 f-skyBlue">0</b
>人
</div>
<div class="f-darkGray"><b class="f-font34 f-skyBlue">0</b>人</div>
</div>
</div>
</div>
@ -111,7 +122,7 @@
import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { requestPost } from "@/js/dai/request";
export default {
name: "wtqd",
props: {
@ -156,8 +167,8 @@ export default {
title: "小区进行老旧小区改造后，1号楼1单元楼下出现1单元楼下出现",
},
],
// 就是现在是每4条滚动一次我想要它一直滚动
createdTime: '2022-05-20 10:50:58',
// 就是现在是每4条滚动一次我想要它一直滚动
swiperOptions: {
direction: "vertical", // 滑动方向，可以是 'horizontal' 或 'vertical'
autoplay: {
@ -167,6 +178,11 @@ export default {
loop: false, // 是否启用循环模式
speed: 1000, // 滑动速度，单位是毫秒
},
nddd:[],
mdjf:[],
zswt:[],
ccfwfw:[]
};
},
watch: {
@ -180,8 +196,7 @@ export default {
mounted() {
this.getReport(this.currentLevelData);
this.getData();
this.tableData = this.groupList(this.tableData, 4);
this.fetchDataAndProcess()
},
components: {
titleSmall,
@ -212,7 +227,46 @@ export default {
this.report = data;
});
},
async fetchData() {
const results = [];
for (let i = 0; i < 4; i++) {
try {
let url = "/governance/icEventOld/list";
let params = {
pageSize: 100,
pageNo: 1,
gridId: "",
sourceType: "",
eventContent: "",
name: "",
mobile: "",
startTime: "",
endTime: "",
status: "",
firstIdList: [],
secondIdList: [],
type: `${i+1}`,
};
const response = await requestPost(url,params); // 替换为实际的接口调用
results.push(response.data);
} catch (error) {
console.error("Error fetching data:", error);
// 处理错误情况
}
}
return results;
},
// 在调用处
async fetchDataAndProcess() {
const apiResults = await this.fetchData();
this.nddd =this.groupList(apiResults[0],4);
this.mdjf =this.groupList(apiResults[1],4);
this.zswt =this.groupList(apiResults[2],3);
this.ccfwfw =this.groupList(apiResults[3],3);
},
groupList(array, subGroupLength) {
let index = 0;
let newArray = [];
@ -250,13 +304,24 @@ export default {
.f-darkGray {
margin-top: 15px;
}
.no-data{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-30px);
}
.t-list {
flex: 1;
width: 100%;
position: relative;
.swiper-container {
height: 200px;
width: 100%;
}
.swiper-containers{
height: 150px;
width: 100%;
}
.item {
align-items: center;
height: 40px;
@ -277,16 +342,22 @@ export default {
text-overflow: ellipsis;
}
&:hover {
color: #02FCFF ;
box-shadow: 0 0 10px #38b2ff , 0 0 5px #38b2ff ;
color: #02fcff;
box-shadow: 0 0 10px #38b2ff, 0 0 5px #38b2ff;
}
}
}
.swiper-slide{
padding: 0 4px;
.swiper-slide {
padding: 0 4px;
.bto-border{
height: 1px;
border-bottom: 1px solid;
border-image: linear-gradient(to right, #1c3e69 0%, #4eafd5 50%, #1c3e69 100%);
border-image-slice: 1;
}
}
.white{
height: 100px;
.white {
height: 100px;
}
</style>
Write Preview
Loading…
Cancel
Save