elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修复了若干产品提出的问题

shibei_master
dai 4 years ago
parent
fae02aa3c2
commit
412d8469ef
2 changed files with 212 additions and 156 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. 2
      src/views/modules/communityService/shzz/index.vue
  2. 366
      src/views/modules/visual/warning/components/screen-table/index.vue

2
src/views/modules/communityService/shzz/index.vue
View File

@ -53,7 +53,7 @@
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-col :span="24">
<div class="resi-cell">
<div class="resi-cell-label">服务时间</div>
<div class="resi-cell-value" :class="'resi-cell-value-radio'">

366
src/views/modules/visual/warning/components/screen-table/index.vue
View File

@ -1,62 +1,101 @@
<template>
<div class="warning-table">
<div class="table">
<div class="table-header">
<div class="table-header-th" v-for="(item,index) in headerList" :key='item.title' :style="headerStyle[index]">{{item.title}}</div>
<div class="table">
<div class="table-header">
<div
class="table-header-th"
v-for="(item, index) in headerList"
:key="item.title"
:style="headerStyle[index]"
>
{{ item.title }}
</div>
<div class="table-body">
<div class="table-body-tr" v-for="(value,index) in tableData" :key='index'>
<div class="td" v-for="(item,indexs) in value" :key="indexs" :style="tableContentStyle[indexs]">{{item}}
<span v-if="(indexs+1==value.length) && item.length>8" class="more" @click="onClickMorePop(index)" ref='morePop'>
更多>
<span class="more-pop" v-if="visiblePopList[index]">
<!-- 李佳琪、刘阳、赵欣、丁一、嘉敏、李岩、何嘉慧
</div>
<div class="table-body">
<div
class="table-body-tr"
v-for="(value, index) in tableData"
:key="index"
>
<div
class="td"
v-for="(item, indexs) in value"
:key="indexs"
:style="tableContentStyle[indexs]"
>
{{ item }}
<span
v-if="indexs + 1 == value.length && item.length > 8"
class="more"
@click.stop="onClickMorePop(index)"
ref="morePop"
>
更多>
<span class="more-pop" v-if="visiblePopList[index]">
<!-- 李佳琪、刘阳、赵欣、丁一、嘉敏、李岩、何嘉慧
李易峰、赵敏、何军、曲树惠 -->
{{item}}
</span>
{{ item }}
</span>
</div>
</div>
<screen-loading v-if="visibleLoading">加载中</screen-loading>
<div class="no-data" v-if="tableData.length==0 && !visibleLoading">
<img src="../../../../../../assets/img/modules/visual/noData.png" alt="" srcset="" class="no-data-img">
</span>
</div>
</div>
<screen-loading v-if="visibleLoading">加载中</screen-loading>
<div class="no-data" v-if="tableData.length == 0 && !visibleLoading">
<img
src="../../../../../../assets/img/modules/visual/noData.png"
alt=""
srcset=""
class="no-data-img"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import ScreenLoading from '../screen-loading/index'
import Vue from 'vue'
import ScreenLoading from "../screen-loading/index";
import Vue from "vue";
export default {
name: 'warning-table',
components:{
ScreenLoading
},
props: {
name: "warning-table",
components: {
ScreenLoading,
},
props: {
headerList: {
type: Array,
required: false,
default: () => {
return [
{ title: '序号' },
{ title: '所属网格'},
{ title: '所属小区'},
{ title: '楼号'},
{ title: '姓名' },
]
}
{ title: "序号" },
{ title: "所属网格" },
{ title: "所属小区" },
{ title: "楼号" },
{ title: "姓名" },
];
},
},
tableData: {
type: Array,
required: false,
default: () => {
return [
[1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
[2,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
]
}
// [
// 1,
// "商丘路社区第一网格",
// "商丘路小区",
// "2号楼",
// "杨颖、王平、刘佳敏、丁辉、杨萍",
// ],
// [
// 2,
// "商丘路社区第一网格",
// "商丘路小区",
// "2号楼",
// "杨颖、王平、刘佳敏、丁辉、杨萍",
// ],
];
},
},
// 单独给头部设置样式
headerStyle: {
@ -70,8 +109,8 @@ props: {
// {
// width:'200px'
// }
]
}
];
},
},
// 单独给内容设置样式
tableContentStyle: {
@ -85,13 +124,13 @@ props: {
// {
// width:'200px'
// }
]
}
];
},
},
visibleLoading: {
type: Boolean,
default: true,
},
visibleLoading:{
type:Boolean,
default:true
}
// // 表格平均分的份数
// ava: {
// type: Number,
@ -110,145 +149,162 @@ props: {
},
data() {
return {
visiblePopList:[false,false,false,false,false,false,false,false,false,false],
visiblePopList: [
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
],
};
},
mounted () {
// window.addEventListener('click', e => {
// if (this.$refs.morePop && !this.$refs.morePop.contains(e.target)) {
// this.visiblePopList.forEach((item,indexs)=>{
// Vue.set(this.visiblePopList, indexs, false)
// })
// }
// })
watch: {
tableData(arr) {
if (Array.isArray(arr)) {
this.visiblePopList = new Array(arr.length).fill(false);
}
},
},
created(){
mounted() {
window.addEventListener("click", (e) => {
this.visiblePopList = new Array(this.visiblePopList.length).fill(false);
});
},
created() {},
methods: {
onClickMorePop(index) {
this.visiblePopList.forEach((item,indexs)=>{
if(index==indexs){
Vue.set(this.visiblePopList, index, true)
}else{
Vue.set(this.visiblePopList, indexs, false)
}
})
}
onClickMorePop(index) {
this.visiblePopList.forEach((item, indexs) => {
if (index == indexs) {
Vue.set(this.visiblePopList, index, true);
} else {
Vue.set(this.visiblePopList, indexs, false);
}
});
},
},
};
</script>
<style lang="scss" scoped>
.warning-table{
box-sizing: border-box;
width: 100%;
height: 100%;
.table {
.warning-table {
box-sizing: border-box;
width: 100%;
height: 100%;
.table {
width: 100%;
height: 100%;
&-header {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
background: rgba(8, 37, 134, 0.85);
font-size: 16px;
font-weight: 400;
color: #ffffff;
&-th {
text-align: center;
width: calc(100% / 5);
}
}
&-body {
box-sizing: border-box;
width: 100%;
height: 100%;
&-header {
height: calc(100% - 50px);
font-size: 18px;
font-weight: 400;
color: #ffffff;
&-tr {
width: 100%;
height: 50px;
// height: calc(100% / 10);
display: flex;
justify-content: space-around;
align-items: center;
background: rgba(8, 37, 134, 0.85);
font-size: 16px;
font-weight: 400;
color: #FFFFFF;
&-th {
.td {
text-align: center;
width: calc(100% / 5);
}
}
.more {
font-size: 18px;
font-weight: 400;
color: #e4dc00;
position: relative;
cursor: pointer;
&-body {
box-sizing: border-box;
width: 100%;
height: calc(100% - 50px);
font-size: 18px;
font-weight: 400;
color: #FFFFFF;
&-tr {
width: 100%;
height: 50px;
// height: calc(100% / 10);
display: flex;
justify-content: space-around;
align-items: center;
.td {
text-align: center;
width: calc(100% / 5);
.more {
font-size: 18px;
&-pop {
box-sizing: border-box;
display: block;
box-sizing: border-box;
width: 215px;
height: auto;
line-height: 20px;
border: 1px solid red;
position: absolute;
right: -100%;
top: 150%;
background: #06186d;
border: 1px solid #1a64cc;
border-radius: 5px;
font-size: 9px;
font-weight: 400;
color: #E4DC00;
position: relative;
&-pop{
box-sizing: border-box;
display: block;
box-sizing: border-box;
width: 215px;
height: auto;
line-height: 20px;
border: 1px solid red;
position: absolute;
left: -100%;
top: 150%;
background: #06186D;
border: 1px solid #1A64CC;
border-radius: 5px;
font-size: 9px;
font-weight: 400;
color: #FFFFFF;
padding:16px 8px 10px 9px;
z-index: 1;
// &::after{
// position: absolute;
// left: 30%;
// top: -30%;
// display: flex;
// content:'';
// width: 0;
// height: 0;
// border-width: 13px;
// border-style: solid;
// border-color: transparent transparent rgba(26, 100, 204,0.5) transparent;
// // border-color: transparent transparent red transparent;
// transform: translate(-50%,0);
// }
}
color: #ffffff;
padding: 16px 8px 10px 9px;
z-index: 1;
cursor: default;
// &::after{
// position: absolute;
// left: 30%;
// top: -30%;
// display: flex;
// content:'';
// width: 0;
// height: 0;
// border-width: 13px;
// border-style: solid;
// border-color: transparent transparent rgba(26, 100, 204,0.5) transparent;
// // border-color: transparent transparent red transparent;
// transform: translate(-50%,0);
// }
}
}
}
}
&-tr:nth-child(2n) {
background: rgba(16, 75, 164, 0.24);
}
&-tr:nth-child(2n) {
background: rgba(16, 75, 164, 0.24);
}
&-tr:hover {
background: url('../../../../../../assets/img/modules/visual/hover-bac.png') no-repeat center;
background-size: 100% 100%;
}
// 暂无数据
.no-data{
width: 100%;
height: calc(100% - 50px);
display: flex;
align-items: center;
justify-content: center;
&-img{
width: 249px;
height: 172px;
}
&-tr:hover {
background: url("../../../../../../assets/img/modules/visual/hover-bac.png")
no-repeat center;
background-size: 100% 100%;
}
// 暂无数据
.no-data {
width: 100%;
height: calc(100% - 50px);
display: flex;
align-items: center;
justify-content: center;
&-img {
width: 249px;
height: 172px;
}
}
}
}
}
</style>
</style>

Write Preview
Loading…
Cancel
Save