<template>
|
<div class="app-container">
|
<div>
|
<el-button
|
class="filter-item"
|
style="margin-left: 10px;"
|
type="primary"
|
icon="el-icon-refresh"
|
@click="refreshHandle"
|
>刷新</el-button>
|
<el-date-picker
|
v-model="dateRange"
|
:picker-options="pickerOptions"
|
type="datetimerange"
|
align="right"
|
unlink-panels
|
:clearable="pickClear"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width:25%;"/>
|
<el-select v-model="queryForm.enterprisetype" clearable placeholder="请选择企业类型">
|
<el-option
|
class="filter-item"
|
@keyup.enter.native="queryHandle"
|
v-for="item in enterpriseTypeList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-select v-model="queryForm.warnlevel" clearable placeholder="请选择警告级别" style="width: 10%">
|
<el-option
|
class="filter-item"
|
@keyup.enter.native="queryHandle"
|
v-for="item in warnLevelList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-input v-model="queryForm.enterprisename" class="filter-item" placeholder="企业名称" style="width: 20%;"/>
|
<el-button
|
class="filter-item"
|
type="primary"
|
icon="el-icon-search"
|
@click="queryHandle"
|
/>
|
<br>
|
<div style="display: block;padding-top: 10px">
|
<div class="basic_search">
|
<span>区域：</span>
|
<el-select v-model="queryForm.province" clearable filterable @change="changeArea('province')">
|
<el-option
|
v-for="item in provinceList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="basic_search">
|
<el-select v-model="queryForm.city" prop="city" clearable filterable @change="changeArea('city')">
|
<el-option
|
v-for="item in cityList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="basic_search">
|
<el-select v-model="queryForm.area" clearable filterable @change="changeArea('area')">
|
<el-option
|
v-for="item in districtList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="basic_search">
|
<el-select v-model="queryForm.town" clearable filterable @change="changeArea('town')" >
|
<el-option
|
v-for="item in streetList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="basic_search">
|
<el-select v-model="queryForm.community" clearable filterable>
|
<el-option
|
v-for="item in committeeList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
</div>
|
<br/>
|
<div class="table_content">
|
<el-table
|
v-loading="listLoading"
|
ref="warningTable"
|
:key="tableKey"
|
:data="stockWarningData"
|
border
|
fit
|
highlight-current-row
|
style="width: 100%;"
|
@sort-change="sortWarningChange"
|
>
|
<el-table-column
|
type="selection"
|
align="center"
|
width="80"
|
/>
|
<el-table-column
|
label="企业类型"
|
prop="enterprisetype"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.enterprisetype }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="企业编号"
|
prop="enterprisenumber"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.enterprisenumber }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="企业名称"
|
prop="enterprisename"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.enterprisename }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="办公地址"
|
prop="enterprisename"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.officeaddress }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="警告级别"
|
prop="warnlevel"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.warnlevel }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="报警内容"
|
prop="period"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.warncontent }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="是否处理"
|
prop="maximum"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.ismend | parseSms(scope.row.ismend) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="是否需要发短信"
|
prop="maximum"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.isneed | parseSms(scope.row.isneed) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="是否已发短信"
|
prop="maximum"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.issend | parseSms(scope.row.issend) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="更新人"
|
prop="modifiedby"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.modifiedby }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="更新时间"
|
prop="modifieddate"
|
align="center"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.modifieddate | parseTime('{y}-{m}-{d}') }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<br>
|
<el-pagination
|
v-show="recordTotal>0"
|
:current-page="currentPage"
|
:page-sizes="[10, 20, 30, 50]"
|
:page-size="pageSize"
|
:total="recordTotal"
|
layout="total, sizes, prev, pager, next, jumper"
|
background
|
style="float:right;"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
<div style="clear: both;" />
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import { getStockWarningList } from '@/api/warning'
|
import { parseTime, computePageCount } from '@/utils'
|
import { parseError } from '@/utils/messageDialog'
|
import Cookies from 'js-cookie'
|
import { Message, MessageBox } from 'element-ui'
|
import { dictionaryAllItems } from '@/api/dictionary';
|
import { checkBtnPermission } from '@/utils/permission'
|
import {getCityListData, getProvinceListData} from "@/api/area";
|
|
export default {
|
name: 'stock',
|
filters: {
|
parseSms(value) {
|
if (value == 1) {
|
return '是'
|
} else {
|
return '否'
|
}
|
},
|
},
|
computed: {
|
...mapGetters([
|
'userType'
|
])
|
},
|
data() {
|
return {
|
sort:'id',
|
order:'asc',
|
pageSize: 10,
|
recordTotal: 0,
|
currentPage: 1,
|
pageTotal: 0,
|
tableKey: 0,
|
stockWarningData: null,
|
listLoading: true,
|
queryForm: {
|
warnlevel: '',
|
enterprisetype:'',
|
enterprisename:'',
|
starttime:'',
|
endtime:'',
|
province:'',
|
city:'',
|
area:'',
|
town:'',
|
community:'',
|
},
|
enterpriseTypeList:[],
|
warnLevelList:[
|
{
|
label:"报警",
|
value:"报警",
|
},
|
{
|
label:"预警",
|
value:"预警",
|
}
|
],
|
dateRange: [],
|
pickClear:false,
|
pickerOptions: {
|
shortcuts: [{
|
text: '最近一周',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
|
end.setTime(end.getTime() + 3600 * 1000 * 24)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近一个月',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
|
end.setTime(end.getTime() + 3600 * 1000 * 24)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近三个月',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 89)
|
end.setTime(end.getTime() + 3600 * 1000 * 24)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近一年',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 364)
|
end.setTime(end.getTime() + 3600 * 1000 * 24)
|
picker.$emit('pick', [start, end])
|
}
|
}]
|
},
|
provinceList:[],
|
cityList:[],
|
districtList:[],
|
streetList:[],
|
committeeList:[],
|
}
|
},
|
created() {
|
this.setDateRange();
|
this.getProvince();
|
this.getDictionaryEnterpriseType();
|
this.getCertWarningList();
|
},
|
methods: {
|
setDateRange(){
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
|
let startyear = start.getFullYear();
|
let startmonth = start.getMonth()+1;
|
let startday = start.getDate();
|
let starthour = start.getHours();
|
let startmins = start.getMinutes();
|
let startsecs = start.getSeconds();
|
if (startmonth < 10){
|
startmonth = '0'+startmonth
|
}
|
if (startday < 10){
|
startday = '0' + startday
|
}
|
if (starthour < 10){
|
starthour = '0' + starthour
|
}
|
if (startmins < 10){
|
startmins = '0' + startmins
|
}
|
if (startsecs < 10){
|
startsecs = '0' + startsecs
|
}
|
|
this.dateRange[0] = startyear+'-'+startmonth+'-'+startday+' '+starthour+":"+startmins+":"+startsecs;
|
let enddate = new Date();
|
enddate.setTime(enddate.getTime() + 3600 * 1000 * 24)
|
let endyear = enddate.getFullYear();
|
let endmonth = enddate.getMonth()+1;
|
let endday = enddate.getDate();
|
let endhour = enddate.getHours();
|
let endmins = enddate.getMinutes();
|
let endsecs = enddate.getSeconds();
|
if (endmonth < 10){
|
endmonth = '0'+endmonth
|
}
|
if (endday < 10){
|
endday = '0' + endday
|
}
|
if (endhour < 10){
|
endhour = '0' + endhour
|
}
|
if (endmins < 10){
|
endmins = '0' + endmins
|
}
|
if (endsecs < 10){
|
endsecs = '0' + endsecs
|
}
|
this.dateRange[1] = endyear+'-'+endmonth+'-'+endday+' '+endhour+":"+endmins+":"+endsecs;
|
},
|
getDictionaryEnterpriseType() {
|
const _this = this
|
if (_this.enterpriseTypeList && _this.enterpriseTypeList.length > 0) {
|
return
|
}
|
const params = {}
|
params['dictionaryType'] = '安全监管分类'
|
dictionaryAllItems(params).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.enterpriseTypeList = res.result
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
}).catch(error => {
|
parseError({ error: error, vm: _this })
|
})
|
},
|
getCertWarningList() {
|
const _this = this
|
const params = {}
|
params['sort'] = _this.sort
|
params['order'] = _this.order
|
params['pageIndex'] = _this.currentPage
|
params['pageSize'] = _this.pageSize
|
for (const i in _this.queryForm) {
|
if (_this.queryForm[i] != undefined && _this.queryForm[i].toString() != '') {
|
params[i] = _this.queryForm[i]
|
}
|
}
|
_this.listLoading = true
|
getStockWarningList(params).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
const result = res.result;
|
_this.recordTotal = result.totalCount
|
_this.pageSize = result.pageSize
|
_this.pageTotal = computePageCount(result.totalCount, result.pageSize)
|
_this.currentPage = result.pageIndex
|
_this.stockWarningData = result.result
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
_this.listLoading = false
|
}).catch(error => {
|
_this.listLoading = false
|
parseError({ error: error, vm: _this })
|
})
|
},
|
refreshHandle: function() {
|
this.getCertWarningList()
|
},
|
queryHandle: function() {
|
this.currentPage = 1
|
this.getCertWarningList()
|
},
|
sortWarningChange: function(param){
|
this.sort = param.prop;
|
this.order = param.order;
|
this.getCertWarningList()
|
},
|
handleSizeChange: function(val) {
|
this.pageSize = val
|
this.currentPage = 1
|
this.getCertWarningList()
|
},
|
handleCurrentChange: function(val) {
|
this.currentPage = val
|
this.getCertWarningList()
|
},
|
getBtnPermission(btnType) {
|
return checkBtnPermission(this.userType, btnType)
|
},
|
async getProvince(){
|
let res = await getProvinceListData()
|
if(res.data.code === "200"){
|
this.provinceList = res.data.result.provinceList
|
}
|
},//获取省
|
async changeArea(value){
|
if(value === 'province'){
|
this.queryForm.city = ''
|
this.queryForm.area = ''
|
this.queryForm.town = ''
|
this.queryForm.community = ''
|
this.areaListQuery = {
|
type: 2,
|
parenttype: 1,
|
parentname: this.queryForm.province,
|
}
|
let res = await getCityListData(this.areaListQuery)
|
if(res.data.code === "200"){
|
this.cityList = res.data.result
|
}
|
}else if(value === 'city'){
|
this.queryForm.area = ''
|
this.queryForm.town = ''
|
this.queryForm.community = ''
|
this.areaListQuery = {
|
type: 3,
|
parenttype: 2,
|
parentname: this.queryForm.city,
|
}
|
let res = await getCityListData(this.areaListQuery)
|
if(res.data.code === "200"){
|
this.districtList = res.data.result
|
}
|
}else if(value === 'area'){
|
this.queryForm.town = ''
|
this.queryForm.community = ''
|
this.areaListQuery = {
|
type: 4,
|
parenttype: 3,
|
parentname: this.queryForm.area,
|
}
|
let res = await getCityListData(this.areaListQuery)
|
if(res.data.code === "200"){
|
this.streetList = res.data.result
|
}
|
}else if(value === 'town'){
|
this.queryForm.community = ''
|
this.areaListQuery = {
|
type: 5,
|
parenttype: 4,
|
parentname: this.queryForm.town,
|
}
|
let res = await getCityListData(this.areaListQuery)
|
if(res.data.code === "200"){
|
this.committeeList = res.data.result
|
}
|
}
|
},//市、镇、街道、委员会
|
}
|
}
|
</script>
|
|
<style scoped>
|
.basic_search{
|
display:inline-block;
|
}
|
</style>
|
