| | |
|---|
| | | style="width: 21rem"
|
|---|
| | | />
|
|---|
| | | <div>
|
|---|
| | | <el-radio-group v-model="select1" style="margin-left: 20px">
|
|---|
| | | <el-radio-group
|
|---|
| | | v-model="select1"
|
|---|
| | | style="margin-left: 20px"
|
|---|
| | | >
|
|---|
| | | <el-radio-button label="日报" />
|
|---|
| | | <el-radio-button label="周报" />
|
|---|
| | | <el-radio-button label="月报" />
|
|---|
| | |
|---|
| | | <component
|
|---|
| | | :is="dataType"
|
|---|
| | | style="padding-left: 0; margin-left: 30px"
|
|---|
| | | @sendPickerChild="showPickerChild"
|
|---|
| | | class="select11"
|
|---|
| | | @sendPickerChild="showPickerChild"
|
|---|
| | | />
|
|---|
| | | <el-date-picker
|
|---|
| | | v-if="dateDisplay"
|
|---|
| | |
|---|
| | | />
|
|---|
| | | <el-button
|
|---|
| | | type="primary"
|
|---|
| | | @click="getReportForm()"
|
|---|
| | | style="margin-left: 10px"
|
|---|
| | | >查询</el-button
|
|---|
| | | @click="getReportForm()"
|
|---|
| | | >
|
|---|
| | | <el-button type="primary" @click="exportExcel()">报表导出</el-button>
|
|---|
| | | 查询
|
|---|
| | | </el-button>
|
|---|
| | | <el-button
|
|---|
| | | type="primary"
|
|---|
| | | @click="exportExcel()"
|
|---|
| | | >
|
|---|
| | | 报表导出
|
|---|
| | | </el-button>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <div class="topTitle">
|
|---|
| | | <el-table
|
|---|
| | | :data="tableData"
|
|---|
| | | id="exportTabs"
|
|---|
| | | :data="tableData"
|
|---|
| | | max-height="730"
|
|---|
| | | @sort-change="changeTableSort"
|
|---|
| | | style="width: 100%"
|
|---|
| | | @sort-change="changeTableSort"
|
|---|
| | | >
|
|---|
| | | <el-table-column
|
|---|
| | | prop="name"
|
|---|
| | | label="站点名称"
|
|---|
| | | width="240"
|
|---|
| | | align="center"
|
|---|
| | | />
|
|---|
| | | <el-table-column
|
|---|
| | | label="综合指数"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column label="综合指数" align="center">
|
|---|
| | | <el-table-column
|
|---|
| | | prop="composite"
|
|---|
| | | label="指数"
|
|---|
| | | width="180"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.composite !== 0 ? scope.row.composite : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | label="排名"
|
|---|
| | | width="180"
|
|---|
| | | align="center"
|
|---|
| | | prop="compositeNum"
|
|---|
| | | sortable
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.compositeNum !== 0 ? scope.row.compositeNum : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column label="PM2.5" align="center">
|
|---|
| | | <el-table-column prop="pm25" label="浓度" width="180" align="center">
|
|---|
| | | <el-table-column
|
|---|
| | | label="PM2.5"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <el-table-column
|
|---|
| | | prop="pm25"
|
|---|
| | | label="浓度"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.pm25 !== 0 ? scope.row.pm25 : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | label="排名"
|
|---|
| | | width="180"
|
|---|
| | | align="center"
|
|---|
| | | prop="pm25Num"
|
|---|
| | | sortable
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.pm25Num !== 0 ? scope.row.pm25Num : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column label="臭氧" align="center">
|
|---|
| | | <el-table-column prop="o3" label="浓度" width="180" align="center">
|
|---|
| | | <el-table-column
|
|---|
| | | label="PM10"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <el-table-column
|
|---|
| | | prop="pm10"
|
|---|
| | | label="浓度"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.pm10 !== 0 ? scope.row.pm10 : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | label="排名"
|
|---|
| | | width="180"
|
|---|
| | | align="center"
|
|---|
| | | prop="pm10Num"
|
|---|
| | | sortable
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.pm10Num !== 0 ? scope.row.pm10Num : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | label="SO2"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <el-table-column
|
|---|
| | | prop="so2"
|
|---|
| | | label="浓度"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.so2 !== 0 ? scope.row.so2 : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | label="排名"
|
|---|
| | | align="center"
|
|---|
| | | prop="so2Num"
|
|---|
| | | sortable
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.so2Num !== 0 ? scope.row.so2Num : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | label="NO2"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <el-table-column
|
|---|
| | | prop="no2"
|
|---|
| | | label="浓度"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.no2 !== 0 ? scope.row.no2 : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | label="排名"
|
|---|
| | | align="center"
|
|---|
| | | prop="no2Num"
|
|---|
| | | sortable
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.no2Num !== 0 ? scope.row.no2Num : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | label="CO"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <el-table-column
|
|---|
| | | prop="co"
|
|---|
| | | label="浓度"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.co !== 0 ? scope.row.co : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | label="排名"
|
|---|
| | | align="center"
|
|---|
| | | prop="conum"
|
|---|
| | | sortable
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.conum !== 0 ? scope.row.conum : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | label="O3"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <el-table-column
|
|---|
| | | prop="o3"
|
|---|
| | | label="浓度"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.o3 !== 0 ? scope.row.o3 : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | label="排名"
|
|---|
| | | align="center"
|
|---|
| | | prop="o3Num"
|
|---|
| | | sortable
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.o3Num !== 0 ? scope.row.o3Num : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column label="TVOC" align="center">
|
|---|
| | | <el-table-column prop="tovc" label="浓度" width="180" align="center">
|
|---|
| | | <el-table-column
|
|---|
| | | label="TVOC"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <el-table-column
|
|---|
| | | prop="tovc"
|
|---|
| | | label="浓度"
|
|---|
| | | align="center"
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.tovc !== 0 ? scope.row.tovc : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | <el-table-column
|
|---|
| | | label="排名"
|
|---|
| | | width="180"
|
|---|
| | | align="center"
|
|---|
| | | prop="tovcnum"
|
|---|
| | | sortable
|
|---|
| | | >
|
|---|
| | | <template slot-scope="scope">
|
|---|
| | | {{
|
|---|
| | | scope.row.tovcnum !== 0 ? scope.row.tovcnum : '--'
|
|---|
| | | }}
|
|---|
| | | </template>
|
|---|
| | | </el-table-column>
|
|---|
| | | </el-table-column>
|
|---|
| | | </el-table>
|
|---|
| | |
|---|
| | | weekPicker,
|
|---|
| | | },
|
|---|
| | | props: {},
|
|---|
| | | data() {
|
|---|
| | | data () {
|
|---|
| | | // 这里存放数据
|
|---|
| | | return {
|
|---|
| | | newData: [],
|
|---|
| | |
|---|
| | | computed: {},
|
|---|
| | | // 监控data中的数据变化
|
|---|
| | | watch: {
|
|---|
| | | select1(nv, ov) {
|
|---|
| | | select1 (nv, ov) {
|
|---|
| | | if (nv === '日报') {
|
|---|
| | | this.dataType = 'HourPicker'
|
|---|
| | | this.unit = 1
|
|---|
| | |
|---|
| | | this.dateDisplay = false
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | newMac(newVal, oldval) {
|
|---|
| | | newMac (newVal, oldval) {
|
|---|
| | | this.newMac1 = []
|
|---|
| | | for (let i = 0; i < newVal.length; i++) {
|
|---|
| | | // console.log(newVal[i], 111)
|
|---|
| | |
|---|
| | | },
|
|---|
| | |
|
|---|
| | | // 生命周期 - 创建完成（可以访问当前 this 实例）
|
|---|
| | | created() {
|
|---|
| | | created () {
|
|---|
| | | this.getData()
|
|---|
| | | },
|
|---|
| | | // 生命周期 - 挂载完成（可以访问 DOM 元素）
|
|---|
| | | mounted() {},
|
|---|
| | | beforeCreate() {}, // 生命周期 - 创建之前
|
|---|
| | | beforeMount() {}, // 生命周期 - 挂载之前
|
|---|
| | | beforeUpdate() {}, // 生命周期 - 更新之前
|
|---|
| | | updated() {}, // 生命周期 - 更新之后
|
|---|
| | | beforeDestroy() {}, // 生命周期 - 销毁之前
|
|---|
| | | destroyed() {}, // 生命周期 - 销毁完成
|
|---|
| | | activated() {},
|
|---|
| | | mounted () {},
|
|---|
| | | beforeCreate () {}, // 生命周期 - 创建之前
|
|---|
| | | beforeMount () {}, // 生命周期 - 挂载之前
|
|---|
| | | beforeUpdate () {}, // 生命周期 - 更新之前
|
|---|
| | | updated () {}, // 生命周期 - 更新之后
|
|---|
| | | beforeDestroy () {}, // 生命周期 - 销毁之前
|
|---|
| | | destroyed () {}, // 生命周期 - 销毁完成
|
|---|
| | | activated () {},
|
|---|
| | | // 方法集合
|
|---|
| | | methods: {
|
|---|
| | | showPickerChild(data) {
|
|---|
| | | showPickerChild (data) {
|
|---|
| | | this.newData = data
|
|---|
| | | },
|
|---|
| | | // 重新添加rank排名(当表格的排序条件发生变化的时候会触发该事件)
|
|---|
| | | changeTableSort() {
|
|---|
| | | changeTableSort () {
|
|---|
| | | var sortTableData = this.$refs.mytable.tableData
|
|---|
| | | // console.log(this.$refs.mytable.tableData, 111)
|
|---|
| | | for (let i = 0; i < sortTableData.length; i++) {
|
|---|
| | |
|---|
| | | },
|
|---|
| | |
|
|---|
| | | // 导出报表
|
|---|
| | | exportExcel() {
|
|---|
| | | exportExcel () {
|
|---|
| | | /* generate workbook object from table */
|
|---|
| | | var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
|
|---|
| | | var wb = XLSX.utils.table_to_book(
|
|---|
| | |
|---|
| | | return wbout
|
|---|
| | | },
|
|---|
| | | // 请求站点信息
|
|---|
| | | getData() {
|
|---|
| | | getData () {
|
|---|
| | | this.$request({
|
|---|
| | | url: '/monitorPoint/queryMonitorPoints',
|
|---|
| | | method: 'get',
|
|---|
| | |
|---|
| | | label: this.defaultData[i].name,
|
|---|
| | | })
|
|---|
| | | this.options[i].children = []
|
|---|
| | | for (let j = 0; j < this.defaultData[i].devices.length; j++) {
|
|---|
| | | this.options[i].children.push({
|
|---|
| | | value: [
|
|---|
| | | this.defaultData[i].devices[j].name,
|
|---|
| | | this.defaultData[i].devices[j].mac,
|
|---|
| | | ],
|
|---|
| | | label: this.defaultData[i].devices[j].name,
|
|---|
| | | })
|
|---|
| | | if (this.defaultData[i].devices) {
|
|---|
| | | for (let j = 0; j < this.defaultData[i].devices.length; j++) {
|
|---|
| | | this.options[i].children.push({
|
|---|
| | | value: [
|
|---|
| | | this.defaultData[i].devices[j].name,
|
|---|
| | | this.defaultData[i].devices[j].mac,
|
|---|
| | | ],
|
|---|
| | | label: this.defaultData[i].devices[j].name,
|
|---|
| | | })
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | |
|---|
| | | })
|
|---|
| | | },
|
|---|
| | | // 请求报表数据
|
|---|
| | | getReportForm() {
|
|---|
| | | getReportForm () {
|
|---|
| | | console.log(this.newData)
|
|---|
| | | this.$request({
|
|---|
| | | // url: '/monitorPoint/listMonitoring',
|
|---|
