<template>
|
<div style="width: 100%">
|
<div style="width: 100%;height: 40px;position: relative;">
|
<el-cascader
|
v-model="region"
|
placeholder="选择省/市/区"
|
:options="options"
|
:props="{ checkStrictly: true }"
|
clearable
|
change-on-select
|
style="width: 15%;position: absolute;right: 90px"
|
/>
|
<div
|
style="display: inline-block;
|
position: absolute;right: 18px;
|
width: 60px;line-height: 30px;text-align: center;background: #409eff;color: #fff;margin: 5px;border-radius: 5px;cursor: pointer;font-size: 14px;"
|
@click="queryData"
|
>查询</div>
|
</div>
|
<div style="padding: 10px;display: flex;">
|
<el-table
|
ref="singleTable"
|
:data="tabInfo"
|
style="width: 58%;margin-left: 10px;cursor: pointer"
|
highlight-current-row
|
@cell-click="selectCell"
|
@current-change="handleCurrentChange"
|
>
|
<el-table-column
|
prop="time"
|
label="时间"
|
width="180"
|
/>
|
<el-table-column
|
prop="info"
|
label="信息"
|
/>
|
</el-table>
|
<el-card v-if="info.title" class="box-card" style="width: 40%;margin-right: 10px;margin-left: 10px;margin-top: 48px;height: 384px;position:relative;">
|
<div id="copyText" style="color: #8f939b;padding: 0 40px;font-size: 14px;">
|
<p style="color: #7f8389; font-weight: 500; height: 24px; line-height: 24px;">{{ info.title }}</p>
|
<p style="line-height: 24px;text-indent: 2em">{{ info.info }}</p>
|
<p style="line-height: 24px;text-indent: 2em;">{{ info.weatherCondition }}</p>
|
<p style="line-height: 24px;position: absolute;right: 60px;">{{ info.auther }}</p>
|
</div>
|
<p style="color: #5da7f4;font-weight: 600;position: absolute; bottom: 20px; right: 50px;cursor: pointer">
|
<i ref="copy" class="el-icon-document-copy" data-clipboard-action="copy" data-clipboard-target="#copyText" @click="copyLink"> 复制</i>
|
</p>
|
</el-card>
|
|
</div>
|
<el-pagination
|
v-if="tabInfo.length > 0"
|
background
|
:page-size="pageData.pageSize"
|
layout="prev, pager, next"
|
:total="pageData.total"
|
@current-change="currentChange"
|
/>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
region: [], // 区域查询,
|
options: [], // 区域数据
|
tabInfo: [],
|
tabData: [],
|
info: {},
|
currentRow: null,
|
copyBtn: null, // 存储初始化复制按钮事件,
|
// 分页数据
|
pageData: {
|
pageSize: 8,
|
current: 1,
|
total: 0
|
}
|
}
|
},
|
mounted() {
|
this.getRegion()
|
this.momDate().then(() => {
|
this.copyBtn = new this.$clipboard(this.$refs.copy)
|
})
|
},
|
created() {
|
},
|
// computed: {
|
// // copyBtn() {
|
// // const copyBtn = new this.clipboard(this.$refs.copy)
|
// // return copyBtn
|
// // }
|
// },
|
methods: {
|
// 获取联动数据
|
getRegion() {
|
this.$request({
|
url: '/organization/getMapPath',
|
method: 'get',
|
params: {
|
organizationId: this.$store.state.orgId
|
}
|
})
|
.then(res => {
|
const data = res.data
|
for (let i = 0; i < data.length; i++) {
|
this.options.push({
|
value: data[i].provinceCode,
|
label: data[i].provinceName
|
})
|
this.options[i].children = []
|
for (let j = 0; j < data[i].cities.length; j++) {
|
this.options[i].children.push({
|
value: data[i].cities[j].cityCode,
|
label: data[i].cities[j].cityName
|
})
|
this.options[i].children[j].children = []
|
for (let k = 0; k < data[i].cities[j].areas.length; k++) {
|
this.options[i].children[j].children.push({
|
value: data[i].cities[j].areas[k].areaCode,
|
label: data[i].cities[j].areas[k].areaName
|
})
|
}
|
}
|
}
|
})
|
.catch(err => {
|
console.log('请求Region失败')
|
console.log(err)
|
})
|
},
|
queryData() {
|
this.pageData.current = 1
|
this.momDate()
|
},
|
// 查询环比信息
|
momDate() {
|
let regionCode = ''
|
if (this.region.length > 0) {
|
const arr = [...this.region]
|
regionCode = arr.pop()
|
} else {
|
regionCode = this.$store.state.regionCode
|
}
|
return this.$request({
|
url: 'aqi/momDate',
|
method: 'get',
|
params: {
|
regionCode: regionCode,
|
size: this.pageData.pageSize,
|
current: this.pageData.current,
|
orgId: this.$store.state.orgId
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
this.tabData = res.data.resultList
|
this.pageData.total = res.data.totel
|
if (res.data.resultList && res.data.resultList.length > 0) {
|
this.tabInfo = res.data.resultList.map((item, index) => {
|
if (index === 0) {
|
this.info = item
|
}
|
const obj = {
|
time: item.time
|
}
|
const info = item.title + item.info + item.weatherCondition + item.auther
|
obj.info = info
|
return obj
|
})
|
this.setCurrent(this.tabInfo[0])
|
} else {
|
this.tabInfo = []
|
this.info = {}
|
}
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
},
|
setCurrent(row) {
|
this.$refs.singleTable.setCurrentRow(row)
|
},
|
|
// 选择行
|
selectCell(row, column, cell, event) {
|
const infoArr = this.tabData.filter(item => {
|
if (item.time === row.time) {
|
return item
|
}
|
})
|
if (infoArr.length > 0) {
|
this.info = infoArr[0]
|
}
|
},
|
// 点击换色
|
handleCurrentChange(val) {
|
this.currentRow = val
|
},
|
// 改变页码
|
currentChange(current) {
|
this.pageData.current = current
|
this.momDate()
|
},
|
// 复制
|
copyLink() {
|
const _this = this
|
const clipboard = _this.copyBtn
|
clipboard.on('success', function() {
|
_this.$message({ /* 这是使用了element-UI的信息弹框*/
|
message: '复制成功！',
|
type: 'success'
|
})
|
})
|
clipboard.on('error', function() {
|
_this.$message({
|
message: '复制失败，请手动选择复制！',
|
type: 'error'
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
/deep/.cell {
|
white-space: nowrap;
|
}
|
</style>
|
