|
|
@@ -3,65 +3,68 @@
|
|
|
<el-row class="tool-bar">
|
|
|
<el-col :span="12" class="left">
|
|
|
<div class="content-title">
|
|
|
- 网格管理
|
|
|
+ 网格区域管理
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="12" class="right">
|
|
|
- <el-input v-model="conditions.keywords" class="search-input m-right-15" size="mini" placeholder="请输入内容">
|
|
|
- <el-button slot="append" icon="el-icon-search" size="mini" @click="getData()" />
|
|
|
- </el-input>
|
|
|
-
|
|
|
+ <el-input v-model="conditions.keywords" style="width: 200px;" class="filter-item" prefix-icon="el-icon-search" size="mini" placeholder="请输入内容" @keyup.enter.native="getData" />
|
|
|
+ <el-button class="filter-item" style="margin-left: 10px;" type="primary" size="mini" icon="el-icon-search" @click="getData">查询</el-button>
|
|
|
<el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">添加</el-button>
|
|
|
-
|
|
|
- <el-button type="primary" size="mini" :disabled="!(exportItems&&exportItems.length>0)" @click="downloadQrcode">下载二维码</el-button>
|
|
|
+ <el-button type="primary" :disabled="!(exportItems&&exportItems.length>0)" size="mini" @click="downloadQrcode">下载二维码</el-button>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row class="content-body">
|
|
|
- <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 240px)" @selection-change="changeSelection">
|
|
|
+ <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 240px)" size="mini" @selection-change="changeSelection">
|
|
|
<el-table-column type="selection" />
|
|
|
<el-table-column type="index" label="序号" align="center" header-align="center" width="80" />
|
|
|
|
|
|
- <el-table-column label="网格名称" align="center" header-align="center">
|
|
|
+ <el-table-column label="名称 " align="center" header-align="center">
|
|
|
<template v-slot="{row}">
|
|
|
<span>{{ row.gridTitle }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column label="等级" align="center" header-align="center" min-width="100">
|
|
|
+ <el-table-column label="分类" align="center" header-align="center" width="100">
|
|
|
+ <template v-slot="{row}">
|
|
|
+ <el-tag type="primary"><span>{{ row.gridCatTitle }}</span></el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="等级" align="center" header-align="center" width="80">
|
|
|
<template v-slot="{row}">
|
|
|
- <span>{{ row.gridLevel | gridLevelFilter }}</span>
|
|
|
+ <span><el-tag type="warning">{{ row.gridLevel | gridLevelFilter }}</el-tag></span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column label="责任部门" align="center" header-align="center" min-width="150">
|
|
|
+ <el-table-column label="责任部门" align="center" header-align="center" width="150">
|
|
|
<template v-slot="{row}">
|
|
|
<span>{{ row.groupName }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column label="责任人" align="center" header-align="center" min-width="120">
|
|
|
+ <el-table-column label="责任人" align="center" header-align="center" width="220">
|
|
|
<template v-slot="{row}">
|
|
|
<span><i class="el-icon-user" /> {{ row.accountName }}[{{ row.positionName }}]</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column label="二维码" header-align="center" align="center" width="70">
|
|
|
+ <el-table-column label="二维码" header-align="center" align="center" width="80">
|
|
|
<template v-slot="{row}">
|
|
|
- <span class="icon iconfont icon-erweima" @click="showQrcode(row)" />
|
|
|
+ <span class="icon risk-icon icon-erweima" @click="showQrcode(row)" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column label="小程序" align="center" header-align="center" width="70">
|
|
|
+ <el-table-column label="小程序" align="center" header-align="center" width="80">
|
|
|
<template v-slot="{row}">
|
|
|
<el-link>
|
|
|
- <span v-if="row.miniNum> 0" @click="handleMini(row)"> <i class="el-icon-apple" /> </span>
|
|
|
- <span v-else @click="handleMini(row)">绑定 </span>
|
|
|
+ <span v-if="row.miniNum > 0" @click="handleMini(row)"> <i class="el-icon-apple" /> </span>
|
|
|
+ <span v-else @click="handleMini(row)">绑定</span>
|
|
|
</el-link>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column label="说明" align="left" header-align="left">
|
|
|
+ <el-table-column label="说明" align="left" header-align="left" width="120">
|
|
|
<template v-slot="{row}">
|
|
|
<span>{{ row.gridDesc }}</span>
|
|
|
</template>
|
|
|
@@ -81,76 +84,51 @@
|
|
|
</el-row>
|
|
|
<grid ref="AddGrid" title="添加" @formSuccess="getData" />
|
|
|
<grid ref="EditGrid" title="编辑" @formSuccess="getData" />
|
|
|
- <QrCode ref="qrcode" />
|
|
|
- <div id="qrcode" ref="qrcodeModal" style="position:fixed;top:-9999px;" />
|
|
|
+ <QrCode ref="Qrcode" />
|
|
|
<MiniProgramTargetConfig ref="MiniTargetConfig" :target-type="targetType" @formSuccess="getData" />
|
|
|
- <MapLayer ref="MapLayer" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import QRCode from 'qrcodejs2'
|
|
|
-import html2canvas from 'html2canvas'
|
|
|
-import JSZip from 'jszip'
|
|
|
-import saveAs from 'file-saver'
|
|
|
-
|
|
|
-import Grid from './components/Grid'
|
|
|
+import Grid from './components/Grid.vue'
|
|
|
import { MiniProgramTargetConfig, QrCode } from '@/components'
|
|
|
-import MapLayer from './components/MapLayer'
|
|
|
-import Pagination from '@/components/Pagination'
|
|
|
+import Pagination from '@/components/Pagination/index.vue'
|
|
|
import { getGridByPage, deleteGridById } from '@/api/system/gridApi'
|
|
|
-import { getSettingById } from '@/api/system/settingApi'
|
|
|
-import { getUserData } from '@/utils/auth'
|
|
|
|
|
|
-let zip = new JSZip()
|
|
|
export default {
|
|
|
name: 'GridIndex',
|
|
|
components: {
|
|
|
Pagination,
|
|
|
MiniProgramTargetConfig,
|
|
|
Grid,
|
|
|
- MapLayer,
|
|
|
QrCode
|
|
|
},
|
|
|
filters: {
|
|
|
gridLevelFilter(gridLevel) {
|
|
|
- const gridLevelMap = ['未设定', '重大', '较大', '一般', '较小']
|
|
|
+ const gridLevelMap = ['默认', '重大', '较大', '一般', '较小']
|
|
|
return gridLevelMap[gridLevel]
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- dataList: null,
|
|
|
+ dataList: undefined,
|
|
|
listLoading: false,
|
|
|
total: 0,
|
|
|
- targetType: 1,
|
|
|
+ targetType: 2,
|
|
|
conditions: {
|
|
|
- page: 2,
|
|
|
+ page: 1,
|
|
|
limit: 10,
|
|
|
keywords: ''
|
|
|
},
|
|
|
- ocId: undefined,
|
|
|
- miniUrl: '',
|
|
|
exportItems: []
|
|
|
}
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
- const userData = getUserData()
|
|
|
- this.ocId = userData.ocId
|
|
|
- this.getMiniUrl()
|
|
|
this.getData()
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
- // 获取小程序地址
|
|
|
- async getMiniUrl() {
|
|
|
- const settingId = 1
|
|
|
- this.listLoading = true
|
|
|
- const { data } = await getSettingById(settingId)
|
|
|
- this.listLoading = false
|
|
|
- this.miniUrl = data.settingValue
|
|
|
- },
|
|
|
|
|
|
// 初始化数据
|
|
|
async getData() {
|
|
|
@@ -165,11 +143,13 @@ export default {
|
|
|
handleAdd() {
|
|
|
this.$refs['AddGrid'].showAddModel()
|
|
|
},
|
|
|
+
|
|
|
// 修改
|
|
|
handleEdit(data) {
|
|
|
const { gridId } = data
|
|
|
this.$refs['EditGrid'].showEditModel(gridId)
|
|
|
},
|
|
|
+
|
|
|
// 删除
|
|
|
handleDelete(data) {
|
|
|
const { gridId, gridTitle } = data
|
|
|
@@ -185,103 +165,43 @@ export default {
|
|
|
this.$message({ type: 'info', message: '已取消删除' })
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
+ // 多选
|
|
|
changeSelection(selection) {
|
|
|
var len = selection.length
|
|
|
this.hanleModal = (len > 0)
|
|
|
this.exportItems = selection
|
|
|
},
|
|
|
+
|
|
|
+ // 显示二维码
|
|
|
showQrcode(row) {
|
|
|
- const code = this.miniUrl + '?ocId=' + this.ocId + '&code=' + row.gridCode
|
|
|
- this.$refs.qrcode.draw(code)
|
|
|
+ const code = row.gridCode
|
|
|
+ this.$refs.Qrcode.draw(code)
|
|
|
},
|
|
|
+
|
|
|
+ // 下载二维码
|
|
|
downloadQrcode() {
|
|
|
if (this.exportItems && this.exportItems.length > 0) {
|
|
|
- var content = JSON.parse(JSON.stringify(this.exportItems))
|
|
|
- this.downloadMaterial(content)
|
|
|
+ const arrData = []
|
|
|
+ for (let i = 0; i < this.exportItems.length; i++) {
|
|
|
+ const item = this.exportItems[i]
|
|
|
+ arrData.push({ type: 2, code: item.gridCode, title: item.gridTitle })
|
|
|
+ }
|
|
|
+ this.$refs.Qrcode.download(arrData, '网格区域')
|
|
|
} else { this.$message.error('没有可下载的数据!') }
|
|
|
},
|
|
|
- downloadMaterial(content) { // 下载物料
|
|
|
- this.batch(content, '网格管理')
|
|
|
- },
|
|
|
- async batch(arr, fileName) {
|
|
|
- var self = this
|
|
|
- window.loading = this.$loading({
|
|
|
- lock: true,
|
|
|
- text: '制作二维码中!',
|
|
|
- spinner: 'el-icon-loading',
|
|
|
- background: 'rgba(0, 0, 0, 0.7)'
|
|
|
- })
|
|
|
-
|
|
|
- zip = new JSZip()
|
|
|
- for (var i = 0; i < arr.length; i++) {
|
|
|
- var item = arr[i]
|
|
|
- const code = this.miniUrl + '?ocId=' + this.ocId + '&code=' + item.gridCode
|
|
|
- await self.drawQrcode(code).catch(() => {
|
|
|
- window.loading.close()
|
|
|
- this.$message.error('导出失败')
|
|
|
- })
|
|
|
- await self.packMaterial(item.gridTitle).catch(() => {
|
|
|
- window.loading.close()
|
|
|
- this.$message.error('导出失败')
|
|
|
- })
|
|
|
- }
|
|
|
- zip.generateAsync({
|
|
|
- type: 'blob'
|
|
|
- }).then((blob) => {
|
|
|
- saveAs(blob, fileName + '二维码物料.zip')
|
|
|
- window.loading.close()
|
|
|
- })
|
|
|
- },
|
|
|
- drawQrcode(url, sleep = 300) { // 绘制二维码
|
|
|
- this.$refs.qrcodeModal.innerHTML = ''
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- new QRCode('qrcode', {
|
|
|
- width: 400,
|
|
|
- height: 400,
|
|
|
- text: url.toString()
|
|
|
- })
|
|
|
- setTimeout(function() {
|
|
|
- resolve()
|
|
|
- }, sleep)
|
|
|
- })
|
|
|
- },
|
|
|
|
|
|
- packMaterial(name) { // 打包处理
|
|
|
- if (!name) name = 'xxx'
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- html2canvas(document.getElementById('qrcode'), {
|
|
|
- backgroundColor: null,
|
|
|
- useCORS: true,
|
|
|
- dpi: 500,
|
|
|
- scale: 5
|
|
|
- }).then((canvas) => {
|
|
|
- let dataURL = canvas.toDataURL('photo/png')
|
|
|
- dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, '')
|
|
|
- zip.file(name + '.jpg', dataURL, { base64: true })
|
|
|
- resolve()
|
|
|
- }).catch((e) => {
|
|
|
- reject(e)
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 显示小程序绑定配置
|
|
|
+ // 显示App绑定配置
|
|
|
handleMini(data) {
|
|
|
const { gridId } = data
|
|
|
this.$refs['MiniTargetConfig'].showModel(gridId)
|
|
|
- },
|
|
|
-
|
|
|
- // 设定地图位置
|
|
|
- handleMapLayer(data) {
|
|
|
- const { layerId } = data
|
|
|
- this.$refs['MapLayer'].showModel(layerId)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
- .content-container {
|
|
|
- height: calc(100vh - 90px);
|
|
|
- }
|
|
|
+.content-container {
|
|
|
+ height: calc(100vh - 95px);
|
|
|
+}
|
|
|
|
|
|
</style>
|