536 lines
17 KiB
HTML
536 lines
17 KiB
HTML
<!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> |