widget.html
6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!doctype html>
<html lang="en">
<head>`
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/frontweb/libs/element-ui/lib-master/theme-chalk/index.css" />
<link rel="stylesheet" href="/frontweb/libs/layui-v2.5.5/css/layui_ssj.css">
<link rel="stylesheet" href="/frontweb/libs/layui-v2.5.5/css/layui.css">
<link rel="stylesheet" href="./css/style.css">
<script src="/frontweb/common/js/config.js"></script>
<script src="/frontweb/libs/vue/vue.js"></script>
<script src="/frontweb/libs/element/index.js"></script>
<script src="/frontweb/libs/jquery/jquery.min.js"></script>
<script src="/frontweb/libs/layui-v2.5.5/layui.js"></script>
<script src="/frontweb/libs/axios/axios.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="app" v-cloak>
<div class="header">
<div class="header-title">国土空间规划实施现状监测指标</div>
<div class="form">
<el-form :inline="true" :model="ZbzlList" ref="ZbzlList" class="demo-form-inline">
<el-form-item>
<el-input v-model="ZbzlList.zbmc" prefix-icon="el-icon-search" placeholder="请输入关键字"></el-input>
</el-form-item>
<el-form-item label="区域" style="width: 9.5rem">
<el-select v-model="ZbzlList.qydm" placeholder="西安市" style="width: 6.5rem">
<el-option v-for="item in zonings" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间" style="width: 11rem">
<el-date-picker v-model="ZbzlList.jcsj" type="year" placeholder="选择日期" style="width: 7.5rem">
</el-date-picker>
</el-form-item>
<el-form-item label="类型" style="width: 8.5rem">
<el-select v-model="ZbzlList.zblx" placeholder="全部" style="width: 5.5rem">
<el-option label="全部" value=""></el-option>
<el-option label="约束性" value="2"></el-option>
<el-option label="预期性" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态" style="width: 8.5rem">
<el-select v-model="ZbzlList.zbzt" placeholder="全部" style="width: 5.5rem">
<el-option label="全部" value=""></el-option>
<el-option label="正常" value="1"></el-option>
<el-option label="预警" value="2"></el-option>
<el-option label="报警" value="3"></el-option>
<el-option label="缺失" value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit(ZbzlList)">查询</el-button>
<el-button @click="resetForm('ZbzlList')">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
<div class="layui-table-list" v-loading="loading">
<el-table :data="tableData"
border
size="small"
:header-cell-style="{background:'#f2f2f2'}"
:span-method="objectSpanMethod"
width="99vw"
height="88vh"
style="width: 100vw">
<el-table-column prop="yjfl" label="一级分类" align="center"></el-table-column>
<el-table-column prop="ejfl" label="二级分类" align="center"></el-table-column>
<el-table-column prop="zbmc" label="监测指标" width="280" align="center"></el-table-column>
<el-table-column prop="dw" label="单位" width="120" align="center" :formatter="dwFormat"></el-table-column>
<el-table-column prop="zblx" label="类型" align="center" :formatter="zblxFormat"></el-table-column>
<el-table-column prop="jqz" label="基期值" align="center"></el-table-column>
<el-table-column prop="jqz2" label="近期值" align="center"></el-table-column>
<el-table-column prop="yqz" label="远期值" align="center"></el-table-column>
<el-table-column prop="zwz" label="展望值" align="center"></el-table-column>
<el-table-column prop="jcz" label="监测值" align="center"></el-table-column>
<el-table-column prop="zbzt" label="指标状态" align="center">
<template v-slot="scope" >
<!-- <span v-if="scope.row.zbzt === '4'" class='zt1before' style="color:#757575">缺失</span>-->
<!-- <span v-else-if="scope.row.zbzt === '2'" class="zt2before " style="color:#FF9836">预警</span>-->
<!-- <span v-else-if="scope.row.zbzt === '3'" class="zt3before" style="color:#F5151E">报警</span>-->
<!-- <span v-else class="zt5before" style="color:#52C41A">正常</span>-->
<!-- 指标状态改为缺失 2020年6月24日17:45:44 vers-->
<span class='zt1before' style="color:#757575">缺失</span>
</template>
</el-table-column>
</el-table>
<div class="table-page">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,15]"
:page-size="pagesize"
layout="prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</div>
<script src="./js/widget.js"></script>
</body>
</html>