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. 156
      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'">

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

@ -2,12 +2,34 @@
<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-header-th"
v-for="(item, index) in headerList"
:key="item.title"
:style="headerStyle[index]"
>
{{ item.title }}
</div>
</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'>
<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]">
<!-- 李佳琪、刘阳、赵欣、丁一、嘉敏、李岩、何嘉慧
@ -19,7 +41,12 @@
</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">
<img
src="../../../../../../assets/img/modules/visual/noData.png"
alt=""
srcset=""
class="no-data-img"
/>
</div>
</div>
</div>
@ -27,12 +54,12 @@
</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',
name: "warning-table",
components: {
ScreenLoading
ScreenLoading,
},
props: {
headerList: {
@ -40,23 +67,35 @@ props: {
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
}
default: true,
},
// // 表格平均分的份数
// ava: {
// type: Number,
@ -110,30 +149,46 @@ 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)
Vue.set(this.visiblePopList, index, true);
} else {
Vue.set(this.visiblePopList, indexs, false)
}
})
Vue.set(this.visiblePopList, indexs, false);
}
});
},
},
};
</script>
@ -155,7 +210,7 @@ mounted () {
background: rgba(8, 37, 134, 0.85);
font-size: 16px;
font-weight: 400;
color: #FFFFFF;
color: #ffffff;
&-th {
text-align: center;
@ -169,7 +224,7 @@ mounted () {
height: calc(100% - 50px);
font-size: 18px;
font-weight: 400;
color: #FFFFFF;
color: #ffffff;
&-tr {
width: 100%;
@ -185,8 +240,9 @@ mounted () {
.more {
font-size: 18px;
font-weight: 400;
color: #E4DC00;
color: #e4dc00;
position: relative;
cursor: pointer;
&-pop {
box-sizing: border-box;
@ -197,16 +253,17 @@ mounted () {
line-height: 20px;
border: 1px solid red;
position: absolute;
left: -100%;
right: -100%;
top: 150%;
background: #06186D;
border: 1px solid #1A64CC;
background: #06186d;
border: 1px solid #1a64cc;
border-radius: 5px;
font-size: 9px;
font-weight: 400;
color: #FFFFFF;
color: #ffffff;
padding: 16px 8px 10px 9px;
z-index: 1;
cursor: default;
// &::after{
// position: absolute;
// left: 30%;
@ -222,7 +279,6 @@ mounted () {
// transform: translate(-50%,0);
// }
}
}
}
}
@ -232,7 +288,8 @@ mounted () {
}
&-tr:hover {
background: url('../../../../../../assets/img/modules/visual/hover-bac.png') no-repeat center;
background: url("../../../../../../assets/img/modules/visual/hover-bac.png")
no-repeat center;
background-size: 100% 100%;
}
// 暂无数据
@ -248,7 +305,6 @@ mounted () {
}
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save