ljf
/
shuili-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 增加水利工程详情模块

sy-water-data-board-ui
chenhaojie 1 year ago
parent
7f4cb54287
commit
b87920c8a4
4 changed files with 254 additions and 218 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      public/index.html
  2. 282
      src/utils/index.js
  3. 173
      src/views/aiSupervision/waterSetting/runScene/index.vue
  4. 7
      vue.config.js

10
public/index.html
View File

@ -7,9 +7,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="./config.js"></script>
<link href="./lib/Cesium/Widgets/widgets.css" rel="stylesheet" />
<link href="./lib/sycim.min.css" rel="stylesheet" />
<script src="./lib/sycim.min.js"></script>
<script>
window.Cesium = sycim.Cesium;
sycim.config.baseUrl = "./lib/Cesium/";
</script>
<script src="./lib/SuperMap3D/SuperMap3D.js"></script>
<title><%= webpackConfig.name %></title>
<style>
html,
body,

282
src/utils/index.js
View File

@ -1,18 +1,19 @@
import { parseTime } from './ruoyi'
import { parseTime } from './ruoyi';
import CanvasToImage from './canvas2Image';
/**
* 表格时间格式化
*/
export function formatDate(cellValue) {
if (cellValue == null || cellValue == "") return "";
var date = new Date(cellValue)
var year = date.getFullYear()
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
if (cellValue == null || cellValue == '') return '';
var date = new Date(cellValue);
var year = date.getFullYear();
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}
/**
@ -22,39 +23,29 @@ export function formatDate(cellValue) {
*/
export function formatTime(time, option) {
if (('' + time).length === 10) {
time = parseInt(time) * 1000
time = parseInt(time) * 1000;
} else {
time = +time
time = +time;
}
const d = new Date(time)
const now = Date.now()
const d = new Date(time);
const now = Date.now();
const diff = (now - d) / 1000
const diff = (now - d) / 1000;
if (diff < 30) {
return '刚刚'
return '刚刚';
} else if (diff < 3600) {
// less 1 hour
return Math.ceil(diff / 60) + '分钟前'
return Math.ceil(diff / 60) + '分钟前';
} else if (diff < 3600 * 24) {
return Math.ceil(diff / 3600) + '小时前'
return Math.ceil(diff / 3600) + '小时前';
} else if (diff < 3600 * 24 * 2) {
return '1天前'
return '1天前';
}
if (option) {
return parseTime(time, option)
return parseTime(time, option);
} else {
return (
d.getMonth() +
1 +
'月' +
d.getDate() +
'日' +
d.getHours() +
'时' +
d.getMinutes() +
'分'
)
return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分';
}
}
@ -63,18 +54,18 @@ export function formatTime(time, option) {
* @returns {Object}
*/
export function getQueryObject(url) {
url = url == null ? window.location.href : url
const search = url.substring(url.lastIndexOf('?') + 1)
const obj = {}
const reg = /([^?&=]+)=([^?&=]*)/g
url = url == null ? window.location.href : url;
const search = url.substring(url.lastIndexOf('?') + 1);
const obj = {};
const reg = /([^?&=]+)=([^?&=]*)/g;
search.replace(reg, (rs, $1, $2) => {
const name = decodeURIComponent($1)
let val = decodeURIComponent($2)
val = String(val)
obj[name] = val
return rs
})
return obj
const name = decodeURIComponent($1);
let val = decodeURIComponent($2);
val = String(val);
obj[name] = val;
return rs;
});
return obj;
}
/**
@ -83,14 +74,14 @@ export function getQueryObject(url) {
*/
export function byteLength(str) {
// returns the byte length of an utf8 string
let s = str.length
let s = str.length;
for (var i = str.length - 1; i >= 0; i--) {
const code = str.charCodeAt(i)
if (code > 0x7f && code <= 0x7ff) s++
else if (code > 0x7ff && code <= 0xffff) s += 2
if (code >= 0xDC00 && code <= 0xDFFF) i--
const code = str.charCodeAt(i);
if (code > 0x7f && code <= 0x7ff) s++;
else if (code > 0x7ff && code <= 0xffff) s += 2;
if (code >= 0xdc00 && code <= 0xdfff) i--;
}
return s
return s;
}
/**
@ -98,13 +89,13 @@ export function byteLength(str) {
* @returns {Array}
*/
export function cleanArray(actual) {
const newArray = []
const newArray = [];
for (let i = 0; i < actual.length; i++) {
if (actual[i]) {
newArray.push(actual[i])
newArray.push(actual[i]);
}
}
return newArray
return newArray;
}
/**
@ -112,13 +103,13 @@ export function cleanArray(actual) {
* @returns {Array}
*/
export function param(json) {
if (!json) return ''
if (!json) return '';
return cleanArray(
Object.keys(json).map(key => {
if (json[key] === undefined) return ''
return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
Object.keys(json).map((key) => {
if (json[key] === undefined) return '';
return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]);
})
).join('&')
).join('&');
}
/**
@ -126,21 +117,21 @@ export function param(json) {
* @returns {Object}
*/
export function param2Obj(url) {
const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ');
if (!search) {
return {}
return {};
}
const obj = {}
const searchArr = search.split('&')
searchArr.forEach(v => {
const index = v.indexOf('=')
const obj = {};
const searchArr = search.split('&');
searchArr.forEach((v) => {
const index = v.indexOf('=');
if (index !== -1) {
const name = v.substring(0, index)
const val = v.substring(index + 1, v.length)
obj[name] = val
const name = v.substring(0, index);
const val = v.substring(index + 1, v.length);
obj[name] = val;
}
})
return obj
});
return obj;
}
/**
@ -148,9 +139,9 @@ export function param2Obj(url) {
* @returns {string}
*/
export function html2Text(val) {
const div = document.createElement('div')
div.innerHTML = val
return div.textContent || div.innerText
const div = document.createElement('div');
div.innerHTML = val;
return div.textContent || div.innerText;
}
/**
@ -161,20 +152,20 @@ export function html2Text(val) {
*/
export function objectMerge(target, source) {
if (typeof target !== 'object') {
target = {}
target = {};
}
if (Array.isArray(source)) {
return source.slice()
return source.slice();
}
Object.keys(source).forEach(property => {
const sourceProperty = source[property]
Object.keys(source).forEach((property) => {
const sourceProperty = source[property];
if (typeof sourceProperty === 'object') {
target[property] = objectMerge(target[property], sourceProperty)
target[property] = objectMerge(target[property], sourceProperty);
} else {
target[property] = sourceProperty
target[property] = sourceProperty;
}
})
return target
});
return target;
}
/**
@ -183,18 +174,16 @@ export function objectMerge(target, source) {
*/
export function toggleClass(element, className) {
if (!element || !className) {
return
return;
}
let classString = element.className
const nameIndex = classString.indexOf(className)
let classString = element.className;
const nameIndex = classString.indexOf(className);
if (nameIndex === -1) {
classString += '' + className
classString += '' + className;
} else {
classString =
classString.substr(0, nameIndex) +
classString.substr(nameIndex + className.length)
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
}
element.className = classString
element.className = classString;
}
/**
@ -203,9 +192,9 @@ export function toggleClass(element, className) {
*/
export function getTime(type) {
if (type === 'start') {
return new Date().getTime() - 3600 * 1000 * 24 * 90
return new Date().getTime() - 3600 * 1000 * 24 * 90;
} else {
return new Date(new Date().toDateString())
return new Date(new Date().toDateString());
}
}
@ -216,38 +205,38 @@ export function getTime(type) {
* @return {*}
*/
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result
let timeout, args, context, timestamp, result;
const later = function () {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
const last = +new Date() - timestamp;
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
timeout = setTimeout(later, wait - last);
} else {
timeout = null
timeout = null;
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
}
};
return function (...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
context = this;
timestamp = +new Date();
const callNow = immediate && !timeout;
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args)
context = args = null
result = func.apply(context, args);
context = args = null;
}
return result
}
return result;
};
}
/**
@ -259,17 +248,17 @@ export function debounce(func, wait, immediate) {
*/
export function deepClone(source) {
if (!source && typeof source !== 'object') {
throw new Error('error arguments', 'deepClone')
throw new Error('error arguments', 'deepClone');
}
const targetObj = source.constructor === Array ? [] : {}
Object.keys(source).forEach(keys => {
const targetObj = source.constructor === Array ? [] : {};
Object.keys(source).forEach((keys) => {
if (source[keys] && typeof source[keys] === 'object') {
targetObj[keys] = deepClone(source[keys])
targetObj[keys] = deepClone(source[keys]);
} else {
targetObj[keys] = source[keys]
targetObj[keys] = source[keys];
}
})
return targetObj
});
return targetObj;
}
/**
@ -277,16 +266,16 @@ export function deepClone(source) {
* @returns {Array}
*/
export function uniqueArr(arr) {
return Array.from(new Set(arr))
return Array.from(new Set(arr));
}
/**
* @returns {string}
*/
export function createUniqueString() {
const timestamp = +new Date() + ''
const randomNum = parseInt((1 + Math.random()) * 65536) + ''
return (+(randomNum + timestamp)).toString(32)
const timestamp = +new Date() + '';
const randomNum = parseInt((1 + Math.random()) * 65536) + '';
return (+(randomNum + timestamp)).toString(32);
}
/**
@ -296,7 +285,7 @@ export function createUniqueString() {
* @returns {boolean}
*/
export function hasClass(ele, cls) {
return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
/**
@ -305,7 +294,7 @@ export function hasClass(ele, cls) {
* @param {string} cls
*/
export function addClass(ele, cls) {
if (!hasClass(ele, cls)) ele.className += ' ' + cls
if (!hasClass(ele, cls)) ele.className += ' ' + cls;
}
/**
@ -315,23 +304,21 @@ export function addClass(ele, cls) {
*/
export function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
ele.className = ele.className.replace(reg, ' ')
const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
export function makeMap(str, expectsLowerCase) {
const map = Object.create(null)
const list = str.split(',')
const map = Object.create(null);
const list = str.split(',');
for (let i = 0; i < list.length; i++) {
map[list[i]] = true
map[list[i]] = true;
}
return expectsLowerCase
? val => map[val.toLowerCase()]
: val => map[val]
return expectsLowerCase ? (val) => map[val.toLowerCase()] : (val) => map[val];
}
export const exportDefault = 'export default '
export const exportDefault = 'export default ';
export const beautifierConf = {
html: {
@ -372,36 +359,32 @@ export const beautifierConf = {
e4x: true,
indent_empty_lines: true
}
}
};
// 首字母大小
export function titleCase(str) {
return str.replace(/( |^)[a-z]/g, L => L.toUpperCase())
return str.replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
}
// 下划转驼峰
export function camelCase(str) {
return str.replace(/-[a-z]/g, str1 => str1.substr(-1).toUpperCase())
return str.replace(/-[a-z]/g, (str1) => str1.substr(-1).toUpperCase());
}
export function isNumberStr(str) {
return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str);
}
export function copytree(tree, all = true) {
const objectTag = "[object Object]";
const arrayTag = "[object Array]";
const objectTag = '[object Object]';
const arrayTag = '[object Array]';
const _tostring = (value) =>
Object.prototype.toString.call(value);
const _tostring = (value) => Object.prototype.toString.call(value);
// 记录所有的对象
const map = new WeakMap();
function copyTree(tree, all = true) {
const treeTag = _tostring(tree);
const res =
treeTag === objectTag ? {} : treeTag === arrayTag ? [] : tree;
const res = treeTag === objectTag ? {} : treeTag === arrayTag ? [] : tree;
if (treeTag !== objectTag && treeTag !== arrayTag) return res;
@ -434,9 +417,28 @@ export function copytree(tree, all = true) {
export function splitArr(data, senArrLen) {
let data_len = data.length;
let ret = []
let ret = [];
for (let i = 0; i < data_len; i += senArrLen) {
ret.push(data.slice(i, i + senArrLen))
ret.push(data.slice(i, i + senArrLen));
}
return ret
return ret;
}
export function getCanvasImageAndViewPoint(viewer, w = 300, h = 300) {
viewer.scene.render();
console.log(CanvasToImage);
const imgNew = CanvasToImage.convertToImage(viewer.canvas, 'jpeg', w, h);
return {
...getCameraViewPoint(viewer),
imageSrc: imgNew.src
};
}
export function getCameraViewPoint(viewer) {
return {
position: viewer.camera.positionWC.clone(),
heading: viewer.camera.heading,
pitch: viewer.camera.pitch,
roll: viewer.camera.roll
};
}

173
src/views/aiSupervision/waterSetting/runScene/index.vue
View File

@ -1,7 +1,11 @@
<script>
import { MessageBox } from 'element-ui';
import RunSceneDetail from './detail/index.vue';
export default {
name: 'RunSceneConfig',
components: {
RunSceneDetail
},
data() {
return {
keyword: '',
@ -55,7 +59,8 @@ export default {
label: '分组2',
id: 2
}
]
],
showDetail: false
};
},
methods: {
@ -72,6 +77,7 @@ export default {
});
},
viewDetail(item) {
this.showDetail = true;
console.log(item);
},
editItem(item) {
@ -96,6 +102,9 @@ export default {
cancelButtonText: '取消',
type: 'warning'
}).then((res) => {});
},
goBack() {
this.showDetail = false;
}
}
};
@ -103,40 +112,43 @@ export default {
<template>
<div class="slider-right">
<div class="top-title">水利工程运行场景配置</div>
<div class="table-box">
<div class="top-search">
<el-button type="primary" @click="createProject">新建项目</el-button>
<el-input class="search-input" placeholder="请输入场景名称或场景编号" v-model="keyword">
<el-button slot="append">搜索</el-button>
</el-input>
</div>
<el-table height="625" :data="tableData" border>
<el-table-column type="index" align="left" label="序号" width="80"> </el-table-column>
<el-table-column prop="num" align="left" label="项目编号" width="180"> </el-table-column>
<el-table-column prop="name" align="left" label="项目名称" width="180"> </el-table-column>
<el-table-column prop="interface_adress" align="left" label="接口地址"> </el-table-column>
<el-table-column prop="resource" align="left" label="关联图层资源目录" width="180"> </el-table-column>
<el-table-column align="center" label="操作" width="180">
<template slot-scope="scope">
<el-button type="text" @click="viewDetail(scope.row)">详情</el-button>
<el-button type="text" @click="editItem(scope.row)">编辑</el-button>
<el-button type="text" @click="deleteItem(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-box">
<el-pagination
background
class="pagination"
:current-page="pageData.pageNum"
:page-sizes="pageData.pageSizes"
layout="total, prev, pager, next, sizes, jumper"
:total="pageData.total"
>
</el-pagination>
<div class="content-wrapper" v-show="!showDetail">
<div class="top-title">水利工程运行场景配置</div>
<div class="table-box">
<div class="top-search">
<el-button type="primary" @click="createProject">新建项目</el-button>
<el-input class="search-input" placeholder="请输入场景名称或场景编号" v-model="keyword">
<el-button slot="append">搜索</el-button>
</el-input>
</div>
<el-table height="625" :data="tableData" border>
<el-table-column type="index" align="left" label="序号" width="80"> </el-table-column>
<el-table-column prop="num" align="left" label="项目编号" width="180"> </el-table-column>
<el-table-column prop="name" align="left" label="项目名称" width="180"> </el-table-column>
<el-table-column prop="interface_adress" align="left" label="接口地址"> </el-table-column>
<el-table-column prop="resource" align="left" label="关联图层资源目录" width="180"> </el-table-column>
<el-table-column align="center" label="操作" width="180">
<template slot-scope="scope">
<el-button type="text" @click="viewDetail(scope.row)">详情</el-button>
<el-button type="text" @click="editItem(scope.row)">编辑</el-button>
<el-button type="text" @click="deleteItem(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-box">
<el-pagination
background
class="pagination"
:current-page="pageData.pageNum"
:page-sizes="pageData.pageSizes"
layout="total, prev, pager, next, sizes, jumper"
:total="pageData.total"
>
</el-pagination>
</div>
</div>
</div>
<RunSceneDetail v-show="showDetail" @back="goBack"></RunSceneDetail>
<el-dialog
class="sy-dialog"
width="50%"
@ -173,64 +185,71 @@ export default {
</template>
<style scoped lang="less">
.top-title {
height: 50px;
background-color: white;
display: flex;
padding-left: 16px;
align-items: center;
font-weight: 600;
}
.table-box {
.slider-right,
.content-wrapper {
width: 100%;
height: calc(100% - 50px - 24px);
margin-top: 24px;
padding: 16px;
background-color: white;
height: 100%;
overflow: hidden;
.top-search {
.top-title {
height: 50px;
background-color: white;
display: flex;
padding-left: 16px;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
font-weight: 600;
}
.table-box {
width: 100%;
height: calc(100% - 50px - 24px);
margin-top: 24px;
padding: 16px;
background-color: white;
.top-search {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
.search-input {
width: 300px;
.el-input-group__append .el-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
.search-input {
width: 300px;
.el-input-group__append .el-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
}
.search-btn {
margin-left: 10px;
background-color: #37b29e;
border: none;
.search-btn {
margin-left: 10px;
background-color: #37b29e;
border: none;
&:hover {
background-color: #5ac6b9;
}
&:hover {
background-color: #5ac6b9;
}
&:active {
background-color: #2b8070;
&:active {
background-color: #2b8070;
}
}
}
}
.pagination-box {
margin-top: 16px;
margin-right: 16px;
text-align: right;
}
.pagination-box {
margin-top: 16px;
margin-right: 16px;
text-align: right;
}
.sy-dialog {
.el-form {
.el-form-item {
.el-form-item__content {
.el-select {
width: 100%;
.sy-dialog {
.el-form {
.el-form-item {
.el-form-item__content {
.el-select {
width: 100%;
}
}
}
}

7
vue.config.js
View File

@ -50,6 +50,13 @@ module.exports = {
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '/tianhui-admin-web'
}
},
'/mapserver': {
target: 'http://172.16.32.63/tiles',
changeOrigin: true,
pathRewrite: {
'^/mapserver': ''
}
}
},
disableHostCheck: true

Write Preview
Loading…
Cancel
Save