<template>
|
<div class="facility-container">
|
|
<div class="right-content">
|
<div class="search-box">
|
|
<el-select v-model="pointId" filterable placeholder="请选择报表">
|
<el-option
|
v-for="(item,index) in reportedList"
|
:key="index"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
|
<el-select v-model="pointId" filterable placeholder="请选择监控点">
|
<el-option
|
v-for="(item,index) in pointList"
|
:key="index"
|
:label="item.pointName"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
<div class="date">
|
<div v-for="item in dateList" :class="item.active === 1 ? 'date-active' : '' " @click="changeDate(item.dictValue)">{{item.dictLabel}}</div>
|
</div>
|
<el-button class="search-btn" @click="searchPoint">搜索</el-button>
|
<el-button class="search-btn" @click="exportToExcel">导出</el-button>
|
</div>
|
<div class="table-box">
|
<div class="table-title">{{reportName}}报表</div>
|
<div class="table-content">
|
<el-table v-loading="loading" :data="tableData" width="100%" max-height="690px">
|
<el-table-column
|
label="序号"
|
align="center"
|
prop="num"
|
fixed="left"
|
>
|
</el-table-column>
|
<el-table-column
|
v-for="(item, key, index) of tableHeader"
|
:prop="key.toString()"
|
:label="item"
|
:key="index"
|
align="center"
|
>
|
<template #default="scope">
|
<div v-if="key.toString() === 'detail'" class="table-handle">
|
<div @click="toDetail(scope.row)"></div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="pagination">
|
<el-pagination
|
v-model:current-page="pageParam.page"
|
background
|
:page-size="pageParam.limit"
|
layout="total,prev, pager, next, jumper"
|
:total="pageParam.total"
|
@current-change="currentPage"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import pointApi from "@/api/facility/point";
|
import { sysDictData } from '@/api/system/dict'
|
import { PREURL} from '@/config/index'
|
// import * as XLSX from 'xlsx';
|
import defaultImage from '@/assets/images/screen/facility/no-img.png'
|
//导出
|
// const exportToExcel = () => {
|
// const dataVal = hisData.value
|
// const worksheet = XLSX.utils.json_to_sheet(dataVal);
|
// const workbook = XLSX.utils.book_new();
|
// XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
|
// XLSX.writeFile(workbook, 'data.xlsx');
|
// };
|
|
|
const dateList = ref()
|
const dateValue = ref()
|
const getDate = async () =>{
|
await sysDictData().searchType('date_type').then((res)=>{
|
dateList.value = res.data
|
dateList.value.forEach((item,index)=>{
|
if(index === 0){
|
item.active = 1
|
}else{
|
item.active = 0
|
}
|
item.dictLabel = item.dictLabel.replace('统计','')
|
})
|
dateValue.value = dateList.value[0].dictValue
|
})
|
}
|
getDate()
|
//选中日期
|
const changeDate = (dateType) =>{
|
dateValue.value = dateType
|
dateList.value.forEach((item)=>{
|
item.active = 0
|
if(item.dictValue === dateType){
|
item.active = 1
|
}
|
})
|
getData({dateType:dateValue.value,pointId:pointId.value})
|
}
|
//监控点列表
|
const pointList = ref([])
|
const pointId = ref();
|
const getPointList = async() =>{
|
|
//区域列表
|
let res = await pointApi().search({limit: 100, page: 1})
|
if(res.code == 200){
|
pointList.value = res.data.list
|
pointId.value = pointList.value[0].id
|
console.log("获取监控点数据",pointList.value);
|
}else{
|
proxy.$modal.msgError('获取数据失败,请刷新再试！')
|
}
|
}
|
getPointList()
|
//选中数据
|
const searchPoint = () =>{
|
getData({dateType:dateValue.value,pointId:pointId.value})
|
}
|
//选择报表类型
|
const reportedList = ref([
|
{id:1,name:"压力报表"},
|
{id:2,name:"水质报表"},
|
])
|
|
|
//搜索
|
const searchParam = ref()
|
const searchList = () =>{
|
getTableData({keywords:searchParam.value})
|
}
|
const reportName = ref("压力")
|
/**
|
* Table表格权限数据报表相关
|
*/
|
const pageParam = ref({
|
total:200,
|
limit:15,
|
page:1,
|
})
|
const tableData = ref([]);
|
let tableHeader = ref({
|
pointName: "所属设备",
|
pointyName: "数据1",
|
address2: "数据2",
|
installDate3: "数据3",
|
detail2: "采集时间",
|
})
|
|
/** 获取报表 */
|
const loading = ref(false);
|
async function getTableData(val) {
|
loading.value = true;
|
if(val){
|
if(!val.limit){
|
val.limit = 5
|
}
|
if(!val.page){
|
val.page = 1
|
}
|
}else{
|
val = { limit:5,page:1 }
|
}
|
await pointApi().search(val).then((res) =>{
|
tableData.value = res.data.list
|
//添加序号
|
tableData.value.forEach((item,index) =>{
|
item.num = index + 1
|
})
|
//设置详情为tableData第一项
|
formDetail.value.facilityName = tableData.value[0].facilityName
|
formDetail.value.supplier = tableData.value[0].supplier
|
formDetail.value.installDate = tableData.value[0].installDate
|
formDetail.value.facilityUrl = tableData.value[0].facilityUrl
|
console.log('formDetail.value.facilityUrl',formDetail.value.facilityUrl)
|
//分页参数
|
pageParam.value.total = res.data.total
|
pageParam.value.limit = res.data.limit
|
pageParam.value.page = res.data.page
|
})
|
loading.value = false;
|
}
|
//分页
|
const currentPage = (val) =>{
|
getTableData({page:val})
|
}
|
// 详情
|
|
const formDetail = ref({
|
facilityName:'',
|
supplier:'',
|
installDate:'',
|
facilityUrl:'',
|
})
|
const defaultImg = ref(defaultImage)
|
const toDetail = (row) =>{
|
formDetail.value.facilityName = row.facilityName
|
formDetail.value.supplier = row.supplier
|
formDetail.value.installDate = row.installDate
|
formDetail.value.facilityUrl = row.facilityUrl
|
console.log('todetail',formDetail.value.facilityUrl)
|
}
|
const backgroundStyle = computed(() => ({
|
backgroundImage: `url('${ PREURL+ formDetail.value.facilityUrl }')`,
|
backgroundSize: 'contain',
|
backgroundRepeat: 'no-repeat',
|
backgroundPosition: 'center',
|
}));
|
onMounted(async ()=>{
|
await getTableData()
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.facility-container{
|
width: 100%;
|
height:100%;
|
padding:0 3% 1% 3%;
|
display:flex;
|
justify-content: space-between;
|
}
|
.left-content{
|
width:22%;
|
height:100%;
|
background-image: url("../../../assets/images/screen/facility/left-box.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding:4% 1% 1%;
|
.left-title{
|
width: 100%;
|
height:5%;
|
background-image: url("../../../assets/images/screen/facility/left-title.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
font-weight: 400;
|
font-size: 20px;
|
color: #FFFFFF;
|
padding-left:9%;
|
padding-top:1%;
|
}
|
.img-box{
|
width:83%;
|
height:35%;
|
background: rgba(244, 248, 250, 0.21);
|
border-radius: 10px;
|
margin: 15% auto 0;
|
padding: 1%;
|
.left-img{
|
width:100%;
|
height:100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
.left-detail{
|
width:100%;
|
height: 30%;
|
//background: rgba(255, 255, 255, 0.29);
|
padding:6% 10% 10%;
|
p{
|
font-weight: 400;
|
font-size: 16px;
|
color: #FFFFFF;
|
//background: rgba(0, 175, 240, 0.51);
|
}
|
}
|
}
|
.right-content{
|
width:100%;//698
|
height:100%;//918.7
|
display:flex;
|
justify-content: space-between;
|
flex-direction: column;
|
align-items: center;
|
padding:1% 0;
|
.date{
|
|
width: 322px;
|
height: 50px;
|
background-image: url("../../../assets/images/screen/statistics/date.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
margin: 0 20px;
|
display: flex;
|
align-items: center;
|
justify-content:center;
|
font-weight: 400;
|
font-size: 18px;
|
color: #DDDDDD;
|
div{
|
width: 25%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.date-active{
|
background-image: url("../../../assets/images/screen/statistics/select-date.png");
|
}
|
}
|
.search-box{
|
width:100%;
|
height:6%;
|
display: flex;
|
:deep(.el-select__wrapper){
|
height: 50%;
|
width: 100%;
|
background:transparent !important;
|
border: 1px solid #1fb0be !important;
|
border-radius: 5px 0 0 5px;
|
}
|
.search-input{
|
width:70%;
|
height:100%;
|
margin-right:3%;
|
:deep(.el-input__wrapper){
|
background:linear-gradient(to right ,rgba(6,92,135,0.56),rgba(6,92,135,0.16)) !important;
|
border: 1px solid #1fb0be !important;
|
border-radius: 8px !important;
|
}
|
.el-input.is-focus .el-input__inner{
|
border-color: #2ec4d2 !important;
|
}
|
}
|
.search-btn{
|
width:7%;
|
height:100%;
|
background-color: #2a6bb6 !important;
|
border: 1px solid #03e9ff !important;
|
border-radius: 8px !important;
|
font-weight: 400;
|
font-size: 22px;
|
color: #B9F9FF;
|
}
|
}
|
.table-box{
|
width:100%;
|
height:89%;
|
background-image: url("../../../assets/images/screen/facility/right-box.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
.table-title{
|
height:10%;
|
width:100%;
|
display: flex;
|
justify-content:center;
|
align-items: center;
|
font-weight: 500;
|
font-size: 22px;
|
color: #8DFEFF;
|
}
|
.table-content{
|
height:80%;
|
width:100%;
|
padding: 1% 4%;
|
//background: #1D2129;
|
//修改边框和字体
|
:deep(.el-table){
|
--el-table-border-color:rgba(0,0,0,0);
|
font-weight: 400;
|
font-size: 20px;
|
color: #D1D1D1;
|
}
|
//修改头部字体
|
:deep(.el-table__header th){
|
font-weight: 400;
|
font-size: 20px;
|
color: #D1D1D1;
|
}
|
/*最外层透明*/
|
:deep(.el-table),
|
:deep(.el-table__expanded-cell){
|
background-color: transparent !important;
|
}
|
/* 表格内背景颜色 */
|
:deep(.el-table th),
|
:deep(.el-table tr),
|
:deep(.el-table td){
|
background-color: transparent !important;
|
border-bottom:1px solid #1D627D !important;
|
}
|
//:deep(.el-table tr){
|
// border:1px solid #000 !important;
|
//}
|
/*去除底边框*/
|
:deep(.el-table td.el-table__cell){
|
border:0;
|
}
|
:deep(.el-table th.el-table__cell.is-leaf) {
|
border: 0;
|
}
|
/*去除底部灰条.el-table::before*/
|
:deep(.el-table::before) {
|
display: none;
|
}
|
.table-handle{
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
div{
|
width:30px;
|
height: 30px;
|
background-image: url("../../../assets/images/screen/facility/detail.png");
|
}
|
}
|
}
|
.pagination{
|
width:100%;
|
height:10%;
|
display:flex;
|
justify-content:center;
|
:deep(.el-pagination__total),
|
:deep(.el-pagination__goto),
|
:deep(.el-pagination__classifier){
|
color: #bcd4f3
|
}
|
:deep(.el-pager li) {
|
font-size: 15px;
|
color: #BAEBEC;
|
background: transparent;
|
padding: 0 4px;
|
border: 1px solid #BAEBEC;
|
border-radius: 0;
|
margin: 0 4px;
|
min-width: 25px;
|
height: 25px;
|
}
|
:deep(.el-pagination button) {
|
color: #BAEBEC;
|
background: transparent;
|
padding: 0 4px;
|
border-radius: 0;
|
margin: 0 4px;
|
}
|
:deep(.el-pagination .btn-next .el-icon),
|
:deep(.el-pagination .btn-prev .el-icon) {
|
font-size: 18px !important;
|
}
|
:deep(.el-input__wrapper) {
|
background: transparent;
|
box-shadow: 0 0 0 1px #BAEBEC inset;
|
border-radius: 0;
|
height: 25px;
|
min-width: 30px;
|
}
|
:deep(.el-input__inner) {
|
font-size: 16px;
|
color: #BAEBEC;
|
height: 25px;
|
line-height: 30px !important;
|
}
|
:deep(.el-pager li.is-active) {
|
background-color: #1FB0BE;
|
color: #ffffff;
|
border: 1px solid #1FB0BE;
|
}
|
}
|
}
|
}
|
</style>
|
