创建新仓库
This commit is contained in:
536
static/shpProperty.html
Normal file
536
static/shpProperty.html
Normal file
@ -0,0 +1,536 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="./Vue/index.css">
|
||||
<link rel="stylesheet" href="./Vue/w-e-text.css">
|
||||
<script src="./Vue/vue.js"></script>
|
||||
<script src="./Vue/index.js"></script>
|
||||
<script src="./dialog/httpVueLoader.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#shpProperty {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 8px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn input {
|
||||
/* //position: fixed; margin-bottom: 5px; */
|
||||
outline: none;
|
||||
/* padding-left: 5px; */
|
||||
padding: 4px 0 4px 5px;
|
||||
}
|
||||
|
||||
.tableBox {
|
||||
/* //width: 100vw; //height: ; overflow: auto; */
|
||||
flex: auto;
|
||||
overflow: auto;
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
|
||||
.tableBox table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border: 1px solid #00ffff;
|
||||
}
|
||||
|
||||
.tableBox input {
|
||||
border: none;
|
||||
padding-right: 15px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
/* //background-color: black; //color: #fff; display: block; //height: 23px; height: 100%; */
|
||||
}
|
||||
|
||||
.tableBox .none {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tableBox table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
/* 首行永远固定在头部 */
|
||||
background-color: #eaf4ff;
|
||||
}
|
||||
|
||||
.tableBox .cell-td {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
border-right: 1px solid #00ffff;
|
||||
border-bottom: 1px solid #00ffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom_scroll_bar::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgb(0, 217, 255);
|
||||
background-color: #0bf7f7;
|
||||
}
|
||||
|
||||
.custom_scroll_bar::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.paging {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.paging img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.paging span {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.selectedRow {
|
||||
background: #b0b1b1;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.attr,
|
||||
.richText {
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #b0b1b1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body><!--:style="treeNode.source_type=='sonShp'?'':'display:flex'"-->
|
||||
<div id="shpProperty">
|
||||
<div v-if="treeNode.source_type == 'sonShp'" id="headermy" class="header">
|
||||
<div id="attr" class="attr" @click="addActive($event,1)">属性</div>
|
||||
<div class="richText" @click="addActive($event,2)">富文本</div>
|
||||
</div>
|
||||
<div style="height: 100%;">
|
||||
<template v-if="sonShpShow">
|
||||
<!-- <p style="margin: 5px 0;">自定义文本信息</p> -->
|
||||
<div class="w-e-text" v-html="richText"></div>
|
||||
</template>
|
||||
<template v-if="shpShow">
|
||||
<div class="btn">
|
||||
<input type="text" ref="searchInput" placeholder="输入关键字搜索" @input="search">
|
||||
<button @click="exportExcel">导出</button>
|
||||
<label for="fruit">名称字段选择：</label>
|
||||
<select id="fruit" name="fruit" v-model="fieldValue" @change="changeField">
|
||||
<template v-for="item in fieldArr">
|
||||
<option v-if="item.key" :value="item.key">{{item.label}}</option>
|
||||
<option v-else :value="item">{{item}}</option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
<div class="tableBox">
|
||||
<table ref="table" border="0" class="custom_scroll_bar" :spellcheck="false" :contenteditable="contenteditable"
|
||||
cellspacing="0">
|
||||
<colgroup>
|
||||
<template v-for="field in fieldArr">
|
||||
<col style="width: 100px">
|
||||
</template>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<template v-for="field in fieldArr">
|
||||
<th v-if="field.key" class="cell-td" :title="field.label">{{ field.label }}</th>
|
||||
<th v-else class="cell-td" :title="field">{{ field }}</th>
|
||||
</template>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="(data,row_index) in paging.data">
|
||||
<tr @click="selectAttr(data,row_index)" :class="[row_index==select.row?'selectedRow':'']">
|
||||
<template v-for="(field,col_index) in fieldArr">
|
||||
<template v-if="col_index==select.col&&row_index==select.row">
|
||||
<td style=" position: relative;"><input v-model="value"></td>
|
||||
</template>
|
||||
<template v-else>
|
||||
<td v-if="field.key" :class="['cell-td',col_index==select.col+1&&row_index==select.row?'none':'']"
|
||||
@dblclick="editCell(row_index,col_index,data[field.key])" v-html="data[field.key] "
|
||||
:title="data[field.key]">
|
||||
</td>
|
||||
<td v-else :class="['cell-td',col_index==select.col+1&&row_index==select.row?'none':'']"
|
||||
@dblclick="editCell(row_index,col_index,data[field])" v-html="data[field] "
|
||||
:title="data[field]">
|
||||
</td>
|
||||
</template>
|
||||
</template>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="shpShow">
|
||||
<div class="paging">
|
||||
<img @click="changePageNum(-1)" src="./dialog/img/prev.png" alt="">
|
||||
<span>
|
||||
第{{ paging.pageNum }}页/共{{ paging.maxPageNum }}页
|
||||
(每页{{ paging.pageSize }}条，共{{ paging.total }}条数据)
|
||||
</span>
|
||||
<img @click="changePageNum(1)" src="./dialog/img/next.png" alt="">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--<div ref="addField">-->
|
||||
<add-field v-if="addFieldAble"></add-field>
|
||||
<!--</div>-->
|
||||
<delfield v-if="delFieldAble"></delfield>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
// import addField from "./dialog/addField.vue";
|
||||
// import shp from "../src/renderer/components/editor/components/shp.vue";
|
||||
const { WPCResolverDelegate } = require('electron-wpc');
|
||||
const FileSaver = require('file-saver')
|
||||
const XLSX = require('xlsx')
|
||||
|
||||
const ipcRenderer = require('electron').ipcRenderer
|
||||
new Vue({
|
||||
el: '#shpProperty',
|
||||
components: {
|
||||
"add-field": httpVueLoader("./dialog/addField.vue"),
|
||||
"delfield": httpVueLoader("./dialog/delField.vue")
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
fieldValue: "id",
|
||||
richText: "",
|
||||
addFieldAble: false,
|
||||
delFieldAble: false,
|
||||
treeNode: {},
|
||||
fieldArr: [],//字段数组
|
||||
dataArr: [],//源数据
|
||||
spliceData: [],//切割数据
|
||||
value: "",
|
||||
contenteditable: false,
|
||||
sonShpShow: false,
|
||||
shpShow: true,
|
||||
select: {
|
||||
row: -1,
|
||||
col: -1
|
||||
},
|
||||
paging: {
|
||||
data: [],//当前页数据
|
||||
pageSize: 50,
|
||||
pageNum: 1,
|
||||
maxPageNum: 1,
|
||||
total: 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeField(e) {
|
||||
console.log("changeField", e.target.value)
|
||||
this.fieldValue = e.target.value
|
||||
ipcRenderer.send('changeField', { field: e.target.value, id: this.treeNode.source_id, currentNode: this.treeNode, fileName: "" })
|
||||
},
|
||||
// 默认
|
||||
reset() {
|
||||
let headermy = document.querySelector('#attr')
|
||||
headermy.classList.add("active")
|
||||
},
|
||||
// 删除类名
|
||||
removeClass() {
|
||||
let headermy = document.querySelector('#headermy')
|
||||
let list = headermy.getElementsByTagName('div')
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const element = list[i].classList.remove('active');
|
||||
}
|
||||
},
|
||||
addActive(e, num) {
|
||||
this.removeClass()
|
||||
e.target.classList.add("active");
|
||||
if (num == 1) {
|
||||
this.sonShpShow = false
|
||||
this.shpShow = true
|
||||
} else {
|
||||
this.sonShpShow = true
|
||||
this.shpShow = false
|
||||
}
|
||||
},
|
||||
selectAttr(data, row_index) {
|
||||
console.log(data)
|
||||
this.select = {
|
||||
row: row_index,
|
||||
col: -2
|
||||
}
|
||||
console.log(this.select)
|
||||
const TAG = 'tag_for_win_provider';//需填入目标Provider的tagId.
|
||||
const resolverDelegate = new WPCResolverDelegate(TAG);//这里需要传入tag以指定Provider
|
||||
// （可选）可设置超时时间，如果超时时间内没有返回结果，则将catch timeout error.
|
||||
resolverDelegate.setTimeOut(6 * 1000);//default is 5s.
|
||||
//发送消息
|
||||
resolverDelegate.send('update_user_table', data)
|
||||
.then(res => {
|
||||
//结果返回
|
||||
console.log('<-update_user_table res', res);
|
||||
})
|
||||
.catch(e => {
|
||||
//处理失败
|
||||
console.error('<-receive error msg:', e)
|
||||
});
|
||||
},
|
||||
clickItem(item, i) {
|
||||
|
||||
},
|
||||
editCell(row_index, col_index, value) {
|
||||
// this.contenteditable=true
|
||||
this.select = {
|
||||
row: row_index,
|
||||
col: col_index
|
||||
}
|
||||
this.value = value
|
||||
this.$nextTick(() => {
|
||||
let input = document.getElementsByTagName("input")[0]
|
||||
let val = input.parentNode.offsetHeight - 2 + "px"
|
||||
|
||||
input.focus()
|
||||
// input.style.lineHeight = val
|
||||
// input.style.height =val
|
||||
})
|
||||
},
|
||||
search() {
|
||||
let val = this.$refs.searchInput.value
|
||||
console.log(val)
|
||||
console.log("源数据", this.dataArr)
|
||||
|
||||
let fuzzySearch = (list, keyWord, attribute = []) => {
|
||||
const reg = new RegExp(keyWord) // 创建正则表达式
|
||||
const arr = []
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let isFind = false
|
||||
for (let j = 0; j < attribute.length; j++) {
|
||||
if (list[i][attribute[j]]) {
|
||||
isFind = reg.test(list[i][attribute[j]])
|
||||
if (isFind) {
|
||||
arr.push(list[i])
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(arr)
|
||||
return arr
|
||||
}
|
||||
let arr = fuzzySearch(this.dataArr, val, this.fieldArr)
|
||||
console.log('arr', SSSSSS);
|
||||
|
||||
this.paging.total = JSON.parse(JSON.stringify(arr)).length
|
||||
console.log("结果", arr)
|
||||
this.spliceData = this.arrSplice(arr, this.paging.pageSize)
|
||||
this.paging.maxPageNum = this.spliceData.length
|
||||
|
||||
this.paging.data = this.spliceData[this.paging.pageNum - 1]
|
||||
// this.paging.data=JSON.parse(JSON.stringify(this.dataArr))
|
||||
},
|
||||
addField() {
|
||||
this.addFieldAble = !this.addFieldAble
|
||||
},
|
||||
delField() {
|
||||
this.delFieldAble = !this.delFieldAble
|
||||
/* this.$nextTick(()=>{
|
||||
console.log(document.getElementsByClassName("delField")[0])
|
||||
document.getElementsByClassName("delField")[0].__vue__.init(this.fieldArr)
|
||||
})*/
|
||||
},
|
||||
|
||||
selectMarker() {
|
||||
console.log("sss")
|
||||
},
|
||||
changePageNum(key) {
|
||||
if ((this.paging.pageNum == 1 && key == -1) || this.paging.pageNum == this.paging.maxPageNum && key == 1) {
|
||||
return
|
||||
} else {
|
||||
this.paging.pageNum += key
|
||||
}
|
||||
this.paging.data = this.spliceData[this.paging.pageNum - 1]
|
||||
},
|
||||
arrSplice(arr, chunkSize) {
|
||||
//定义一个空数组来接收返回值
|
||||
const resSplice = []
|
||||
while (arr.length > 0) {
|
||||
//注意：splice方法的返回值为删除的值，在这边即为原数组中切割掉的index为0-chunkSize的值
|
||||
const chunk = arr.splice(0, chunkSize)
|
||||
//将返回值添加到resSplice数组
|
||||
resSplice.push(chunk)
|
||||
}
|
||||
//return出去
|
||||
return resSplice
|
||||
},
|
||||
// 导出表格
|
||||
// exportExcel() {
|
||||
// console.log('fileSaverfileSaverfileSaverfileSaverfileSaver', fileSaver);
|
||||
// console.log('xlsxxlsxxlsxxlsxxlsxxlsxxlsxxlsxxlsxxlsx', xlsx);
|
||||
// },
|
||||
exportExcel() {
|
||||
const worksheet = XLSX.utils.table_to_sheet(this.$refs.table)
|
||||
const workbook = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
|
||||
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
|
||||
const data = new Blob([excelBuffer], { type: 'application/octet-stream' })
|
||||
FileSaver.saveAs(data, this.parentNode.source_name + '.xlsx')
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
document.getElementById("shpProperty").addEventListener('mousedown', (e) => {
|
||||
// e.preventDefault()
|
||||
// e.stopPropagation()
|
||||
if (e.target.localName !== 'input') {
|
||||
this.select = {
|
||||
row: -1,
|
||||
col: -1
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
ipcRenderer.on('data', (event, obj) => {
|
||||
let { treeNode, parentNode, shpData } = obj
|
||||
console.log(parentNode, treeNode);
|
||||
this.treeNode = treeNode
|
||||
this.parentNode = parentNode
|
||||
this.fieldValue = parentNode.detail.fieldName ?? "id"
|
||||
/* let arr = []
|
||||
let fieldArr = []
|
||||
for (const re in shpData) {
|
||||
shpData[re].forEach(item => {
|
||||
arr.push(item.attr)
|
||||
let attrArr = []
|
||||
for (const attrElement in item.attr) {
|
||||
attrArr.push(attrElement)
|
||||
/!* if (!fieldArr.includes(attrElement))
|
||||
fieldArr.push(attrElement)*!/
|
||||
}
|
||||
fieldArr.push(attrArr)
|
||||
})
|
||||
}
|
||||
fieldArr = fieldArr.sort((a, b) => a.length - b.length);
|
||||
//二维变一维；去重
|
||||
this.fieldArr = Array.from(new Set([].concat.apply([], fieldArr)))
|
||||
console.log(fieldArr)
|
||||
this.dataArr = arr*/
|
||||
this.dataArr = shpData[1]
|
||||
this.fieldArr = shpData[0]
|
||||
|
||||
console.log('DDDDDDDDDDDDDDDDDD', shpData);
|
||||
|
||||
{
|
||||
let data = JSON.parse(JSON.stringify(this.dataArr))
|
||||
this.spliceData = this.arrSplice(data, this.paging.pageSize)
|
||||
this.paging.maxPageNum = this.spliceData.length
|
||||
this.paging.total = this.dataArr.length
|
||||
this.paging.data = this.spliceData[this.paging.pageNum - 1]
|
||||
}
|
||||
console.log('this.paging', this.paging);
|
||||
|
||||
if (treeNode.source_type == 'sonShp') {
|
||||
this.richText = parentNode.detail.richText[treeNode.source_id]?.richTextContent
|
||||
this.$nextTick(() => {
|
||||
this.removeClass()
|
||||
this.reset()
|
||||
})
|
||||
}
|
||||
|
||||
// console.log('parentNode.detail.richText', parentNode.detail.richText);
|
||||
/*
|
||||
this.info = obj.info
|
||||
document.title = obj.source_name
|
||||
let arr = this.info.hrefs == "" ? [] : this.info.hrefs.split(";")
|
||||
console.log(arr)
|
||||
let resArr = []
|
||||
if (arr.length) {
|
||||
arr.forEach(item => {
|
||||
if (item != "") {
|
||||
let a = item.split("[|]")
|
||||
resArr.push({
|
||||
name: a[0],
|
||||
href: a[1],
|
||||
type: 'href'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
let cameraArr = []
|
||||
if (this.info.camera) {
|
||||
cameraArr = this.info.camera.split("[|]")
|
||||
}
|
||||
|
||||
console.log(resArr)
|
||||
if (cameraArr.length) {
|
||||
/!* resArr.push({
|
||||
device_id: cameraArr[0],
|
||||
channel_id: cameraArr[1],
|
||||
url,
|
||||
name: "摄像头",
|
||||
type: 'camera'
|
||||
})*!/
|
||||
}
|
||||
resArr.forEach(item => {
|
||||
if (item.hasOwnProperty("href")) {
|
||||
if (!item.href.startsWith('http')) {
|
||||
if (item.href.indexOf(":/") > -1) {
|
||||
ipcRenderer.send('setStaticFile', item.href)
|
||||
let name = item.href.replaceAll("\\", "/").split("/").pop()
|
||||
item.href = location.origin + "/" + name
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
this.tabsData = resArr
|
||||
console.log("this.tabsData", this.tabsData)
|
||||
console.log("this.tabsData", this.info)
|
||||
let hasRichText = Boolean(this.info.text)
|
||||
if (hasRichText) {
|
||||
this.tabsData.unshift({name: "富文本", href: this.info.text, type: 'richText'})
|
||||
}
|
||||
if (this.tabsData.length > 0) {
|
||||
if (this.info.type == "href") {
|
||||
this.activeIndex = hasRichText ? 1 : 0
|
||||
this.activeItem = this.tabsData[this.activeIndex]
|
||||
}
|
||||
if (this.info.type == "camera") {
|
||||
this.activeIndex = hasRichText ? (1 + arr.length) : arr.length
|
||||
this.activeItem = this.tabsData[this.activeIndex]
|
||||
}
|
||||
if (this.info.type == "richText") {
|
||||
this.activeIndex = 0
|
||||
this.activeItem = this.tabsData[0]
|
||||
}
|
||||
}*/
|
||||
// let height = document.getElementsByClassName("btn")[0].offsetHeight
|
||||
// document.getElementsByClassName("tableBox")[0].style.height=`calc( 100% - ${height}px)`
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user