yangjun
/
hldy_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

字段调整

This commit is contained in:
1378012178@qq.com 2025-06-12 14:15:00 +08:00
parent a4ba10534c
commit 6c25f21f19
9 changed files with 724 additions and 522 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -1,13 +1,10 @@
<!DOCTYPE html> <!doctype html>
<html lang="zh_CN" id="htmlRoot"> <html lang="zh_CN" id="htmlRoot">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" /> <meta name="renderer" content="webkit" />
<meta <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<title><%= title %></title> <title><%= title %></title>
<link rel="icon" href="<%= basePublicPath %>/logo.png" /> <link rel="icon" href="<%= basePublicPath %>/logo.png" />
@ -170,13 +167,14 @@
<!-- 百度统计 --> <!-- 百度统计 -->
<script> <script>
var _hmt = _hmt || []; var _hmt = _hmt || [];
(function() { (function () {
var hm = document.createElement("script"); var hm = document.createElement('script');
hm.src = "https://hm.baidu.com/hm.js?0febd9e3cacb3f627ddac64d52caac39"; hm.src = 'https://hm.baidu.com/hm.js?0febd9e3cacb3f627ddac64d52caac39';
var s = document.getElementsByTagName("script")[0]; var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s); s.parentNode.insertBefore(hm, s);
})(); })();
</script> </script>
<!-- 腾讯地图 -->
<script src="https://map.qq.com/api/gljs?v=1.exp&key=2E6BZ-ZC3E3-BMX3D-OWFUI-FLY2F-MLFFJ"></script>
</body> </body>
</html> </html>

27
package.json
View File

@ -21,18 +21,19 @@
"husky:install": "husky install" "husky:install": "husky install"
}, },
"dependencies": { "dependencies": {
"@jeecg/online": "3.7.1-RC",
"@iconify/iconify": "^3.1.1",
"@ant-design/colors": "^7.2.0", "@ant-design/colors": "^7.2.0",
"@ant-design/icons-vue": "^7.0.1", "@ant-design/icons-vue": "^7.0.1",
"@iconify/iconify": "^3.1.1",
"@jeecg/online": "3.7.1-RC",
"@tinymce/tinymce-vue": "4.0.7",
"@traptitech/markdown-it-katex": "^3.6.0",
"@vant/area-data": "^1.5.2",
"@vue/shared": "^3.5.13", "@vue/shared": "^3.5.13",
"@vueuse/core": "^10.11.1", "@vueuse/core": "^10.11.1",
"@tinymce/tinymce-vue": "4.0.7",
"@zxcvbn-ts/core": "^3.0.4", "@zxcvbn-ts/core": "^3.0.4",
"ant-design-vue": "^4.2.6", "ant-design-vue": "^4.2.6",
"axios": "^1.7.9", "axios": "^1.7.9",
"china-area-data": "^5.0.1", "china-area-data": "^5.0.1",
"@vant/area-data": "^1.5.2",
"clipboard": "^2.0.11", "clipboard": "^2.0.11",
"codemirror": "^5.65.18", "codemirror": "^5.65.18",
"cron-parser": "^4.9.0", "cron-parser": "^4.9.0",
@ -43,14 +44,13 @@
"echarts": "^5.6.0", "echarts": "^5.6.0",
"emoji-mart-vue-fast": "^15.0.3", "emoji-mart-vue-fast": "^15.0.3",
"enquire.js": "^2.1.6", "enquire.js": "^2.1.6",
"event-source-polyfill": "^1.0.31",
"highlight.js": "^11.11.1",
"intro.js": "^7.2.0", "intro.js": "^7.2.0",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"lodash.get": "^4.4.2", "lodash.get": "^4.4.2",
"markdown-it": "^14.1.0", "markdown-it": "^14.1.0",
"markdown-it-link-attributes": "^4.0.1", "markdown-it-link-attributes": "^4.0.1",
"event-source-polyfill": "^1.0.31",
"highlight.js": "^11.11.1",
"@traptitech/markdown-it-katex": "^3.6.0",
"md5": "^2.3.0", "md5": "^2.3.0",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
@ -69,6 +69,7 @@
"vue-cropperjs": "^5.0.0", "vue-cropperjs": "^5.0.0",
"vue-i18n": "^9.14.2", "vue-i18n": "^9.14.2",
"vue-infinite-scroll": "^2.0.2", "vue-infinite-scroll": "^2.0.2",
"vue-jsonp": "^2.1.0",
"vue-print-nb-jeecg": "^1.0.12", "vue-print-nb-jeecg": "^1.0.12",
"vue-router": "^4.5.0", "vue-router": "^4.5.0",
"vue-types": "^5.1.3", "vue-types": "^5.1.3",
@ -83,6 +84,7 @@
"@commitlint/config-conventional": "^18.6.3", "@commitlint/config-conventional": "^18.6.3",
"@iconify/json": "^2.2.292", "@iconify/json": "^2.2.292",
"@purge-icons/generated": "^0.10.0", "@purge-icons/generated": "^0.10.0",
"@rys-fe/vite-plugin-theme": "^0.8.6",
"@types/codemirror": "^5.60.15", "@types/codemirror": "^5.60.15",
"@types/crypto-js": "^4.2.2", "@types/crypto-js": "^4.2.2",
"@types/fs-extra": "^11.0.4", "@types/fs-extra": "^11.0.4",
@ -104,11 +106,13 @@
"@vue/compiler-sfc": "^3.5.13", "@vue/compiler-sfc": "^3.5.13",
"@vue/test-utils": "^2.4.6", "@vue/test-utils": "^2.4.6",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"big.js": "^6.2.2",
"commitizen": "^4.3.1", "commitizen": "^4.3.1",
"conventional-changelog-cli": "^4.1.0", "conventional-changelog-cli": "^4.1.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"cz-git": "^1.11.0", "cz-git": "^1.11.0",
"czg": "^1.11.0", "czg": "^1.11.0",
"dingtalk-jsapi": "^3.0.42",
"dotenv": "^16.4.7", "dotenv": "^16.4.7",
"eslint": "^8.57.1", "eslint": "^8.57.1",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
@ -144,6 +148,7 @@
"ts-jest": "^29.2.5", "ts-jest": "^29.2.5",
"ts-node": "^10.9.2", "ts-node": "^10.9.2",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"unocss": "^0.58.9",
"vite": "^6.0.7", "vite": "^6.0.7",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.2", "vite-plugin-html": "^3.2.2",
@ -152,15 +157,11 @@
"vite-plugin-optimize-persist": "^0.1.2", "vite-plugin-optimize-persist": "^0.1.2",
"vite-plugin-package-config": "^0.1.1", "vite-plugin-package-config": "^0.1.1",
"vite-plugin-purge-icons": "^0.10.0", "vite-plugin-purge-icons": "^0.10.0",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-qiankun": "^1.0.15", "vite-plugin-qiankun": "^1.0.15",
"@rys-fe/vite-plugin-theme": "^0.8.6", "vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-setup-extend-plus": "^0.1.0", "vite-plugin-vue-setup-extend-plus": "^0.1.0",
"unocss": "^0.58.9",
"vue-eslint-parser": "^9.4.3", "vue-eslint-parser": "^9.4.3",
"vue-tsc": "^1.8.27", "vue-tsc": "^1.8.27"
"dingtalk-jsapi": "^3.0.42",
"big.js": "^6.2.2"
}, },
"repository": { "repository": {
"type": "git", "type": "git",

134
src/components/TencentMap/TencentMap.vue Normal file
View File

@ -0,0 +1,134 @@
<template>
<div class="map-wrapper">
<div id="map-container" ref="mapContainer" style="width: 100%; height: 300px;"></div>
<button @click="resetMap" class="reset-button">复位视图</button>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
const props = defineProps({
latitude: {
type: Number,
default: 43.8171 // 长春市纬度
},
longitude: {
type: Number,
default: 125.3235 // 长春市经度
}
});
const mapContainer = ref<HTMLElement | null>(null);
let map: any = null;
let marker: any = null;
// 初始化地图（确保交互正常）
const initMap = () => {
if (!mapContainer.value) return;
// 创建地图实例（关键配置）
map = new TMap.Map(mapContainer.value, {
center: new TMap.LatLng(props.latitude, props.longitude),
zoom: 14,
pitch: 40,
rotation: 0,
viewMode: '2D', // 必须设置为3D才能旋转
dragEnable: true, // 启用拖动
zoomEnable: true, // 启用缩放
});
console.log("地图初始化完成");
// 添加标记
addMarker(new TMap.LatLng(props.latitude, props.longitude));
};
// 添加图钉标记
const addMarker = (position: any) => {
if (marker) {
map.remove(marker);
}
marker = new TMap.MultiMarker({
map: map,
styles: {
marker: new TMap.MarkerStyle({
width: 20,
height: 30,
anchor: { x: 10, y: 30 }
})
},
geometries: [{
id: 'location-marker',
position: position,
properties: {
title: '目标位置'
},
styleId: 'marker'
}]
});
};
// 复位功能
const resetMap = () => {
if (!map) {
console.error("地图对象为空");
return;
}
map.setCenter(new TMap.LatLng(props.latitude, props.longitude));
map.setZoom(14);
map.setPitch(40);
map.setRotation(0);
};
// 监听坐标变化
watch(() => [props.latitude, props.longitude], () => {
if (!map) return;
const newCenter = new TMap.LatLng(props.latitude, props.longitude);
map.setCenter(newCenter);
addMarker(newCenter);
});
onMounted(() => {
// 确保TMap加载完成
if (window.TMap) {
initMap();
} else {
const script = document.createElement('script');
script.src = 'https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY';
script.onload = initMap; // 加载完成后调用 initMap
document.head.appendChild(script);
}
});
</script>
<style scoped>
.map-wrapper {
position: relative;
width: 90%;
margin-left: 5%;
margin-bottom: 20px;
}
.reset-button {
position: absolute;
bottom: 5px;
right: 25px;
padding: 8px;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
z-index: 1000;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 50px;
font-size: 13px;
}
.reset-button:hover {
background: #f5f5f5;
}
</style>

534
src/components/terminal/Terminal.vue
View File

@ -1,54 +1,43 @@
<template> <template>
<div class="terminal-container"> <div class="terminal-container">
<div class="terminal-header"> <div class="terminal-header">
<span>SSH终端</span> <span>SSH终端</span>
<div> <div>
<a-button @click="connect" type="primary" size="small">连接</a-button> <a-button @click="connect" type="primary" size="small">连接</a-button>
<a-button @click="disconnect" size="small" style="margin-left: 8px">断开</a-button> <a-button @click="disconnect" size="small" style="margin-left: 8px">断开</a-button>
</div> </div>
</div> </div>
<div class="terminal-body" ref="terminalBody"> <div class="terminal-body" ref="terminalBody">
<div v-for="(line, index) in outputLines" :key="index" class="terminal-line"> <div v-for="(line, index) in outputLines" :key="index" class="terminal-line">
<span v-if="line.type === 'input'" class="input-prompt">$ </span> <span v-if="line.type === 'input'" class="input-prompt">$ </span>
<span :class="line.type">{{ line.text }}</span> <span :class="line.type">{{ line.text }}</span>
</div> </div>
<div class="terminal-input-line"> <div class="terminal-input-line">
<span class="input-prompt">$ </span> <span class="input-prompt">$ </span>
<input <input v-model="currentCommand" @keyup.enter="executeCommand" @keyup.up="historyUp"
v-model="currentCommand" @keyup.down="historyDown" ref="commandInput" class="terminal-input" />
@keyup.enter="executeCommand" </div>
@keyup.up="historyUp" </div>
@keyup.down="historyDown"
ref="commandInput"
class="terminal-input"
/>
</div>
</div>
<a-modal <a-modal v-model:visible="connectionModalVisible" title="SSH连接配置" @ok="handleConnect"
v-model:visible="connectionModalVisible" :ok-button-props="{ disabled: connecting }" :cancel-button-props="{ disabled: connecting }">
title="SSH连接配置" <a-form :model="connectionForm" :rules="formRules" layout="vertical">
@ok="handleConnect" <a-form-item label="主机地址" name="host">
:ok-button-props="{ disabled: connecting }" <a-input v-model:value="connectionForm.host" />
:cancel-button-props="{ disabled: connecting }" </a-form-item>
> <a-form-item label="端口" name="port">
<a-form :model="connectionForm" :rules="formRules" layout="vertical"> <a-input-number v-model:value="connectionForm.port" :min="1" :max="65535" />
<a-form-item label="主机地址" name="host"> </a-form-item>
<a-input v-model:value="connectionForm.host" /> <a-form-item label="用户名" name="username">
</a-form-item> <a-input v-model:value="connectionForm.username" />
<a-form-item label="端口" name="port"> </a-form-item>
<a-input-number v-model:value="connectionForm.port" :min="1" :max="65535" /> <a-form-item label="密码" name="password">
</a-form-item> <a-input-password v-model:value="connectionForm.password" />
<a-form-item label="用户名" name="username"> </a-form-item>
<a-input v-model:value="connectionForm.username" /> </a-form>
</a-form-item> </a-modal>
<a-form-item label="密码" name="password"> </div>
<a-input-password v-model:value="connectionForm.password" />
</a-form-item>
</a-form>
</a-modal>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -56,254 +45,301 @@ import { defineComponent, ref, nextTick, onMounted, onBeforeUnmount } from 'vue'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
interface TerminalLine { interface TerminalLine {
type: 'input' | 'output' | 'error' | 'system' type: 'input' | 'output' | 'error' | 'system'
text: string text: string
} }
interface ConnectionForm { interface ConnectionForm {
host: string host: string
port: number port: number
username: string username: string
password: string password: string
} }
export default defineComponent({ export default defineComponent({
name: 'SshTerminal', name: 'SshTerminal',
setup() { setup() {
const outputLines = ref<TerminalLine[]>([]) const outputLines = ref<TerminalLine[]>([])
const currentCommand = ref('') const currentCommand = ref('')
const commandHistory = ref<string[]>([]) const commandHistory = ref<string[]>([])
const historyIndex = ref(-1) const historyIndex = ref(-1)
const connectionModalVisible = ref(false) const connectionModalVisible = ref(false)
const connecting = ref(false) const connecting = ref(false)
const connected = ref(false) const connected = ref(false)
const socket = ref<WebSocket | null>(null) const socket = ref<WebSocket | null>(null)
const terminalBody = ref<HTMLElement | null>(null) const terminalBody = ref<HTMLElement | null>(null)
const commandInput = ref<HTMLInputElement | null>(null) const commandInput = ref<HTMLInputElement | null>(null)
const connectionForm = ref<ConnectionForm>({ const connectionForm = ref<ConnectionForm>({
host: '', host: '121.36.88.64',
port: 22, port: 22,
username: '', username: '',
password: '' password: ''
}) })
const formRules = { const formRules = {
host: [{ required: true, message: '请输入主机地址' }], host: [{ required: true, message: '请输入主机地址' }],
port: [{ required: true, message: '请输入端口' }], port: [{ required: true, message: '请输入端口' }],
username: [{ required: true, message: '请输入用户名' }], username: [{ required: true, message: '请输入用户名' }],
password: [{ required: true, message: '请输入密码' }] password: [{ required: true, message: '请输入密码' }]
}
const clientId = Math.random().toString(36).substring(2, 10)
const addOutput = (type: TerminalLine['type'], text: string) => {
outputLines.value.push({ type, text })
scrollToBottom()
}
const scrollToBottom = () => {
nextTick(() => {
if (terminalBody.value) {
terminalBody.value.scrollTop = terminalBody.value.scrollHeight
} }
})
}
const connect = () => { const clientId = Math.random().toString(36).substring(2, 10)
connectionModalVisible.value = true
}
const handleConnect = () => { const addOutput = (type: TerminalLine['type'], text: string) => {
connecting.value = true outputLines.value.push({ type, text })
initWebSocket() scrollToBottom()
} }
const initWebSocket = () => { const scrollToBottom = () => {
const wsUrl = `ws://${window.location.host}/jeecg-boot/ws/ssh/${clientId}` nextTick(() => {
socket.value = new WebSocket(wsUrl) if (terminalBody.value) {
terminalBody.value.scrollTop = terminalBody.value.scrollHeight
socket.value.onopen = () => { }
const { host, port, username, password } = connectionForm.value })
const connectMsg = `connect:${host}:${port}:${username}:${password}` }
socket.value?.send(connectMsg)
connected.value = true const connect = () => {
connecting.value = false connectionModalVisible.value = true
connectionModalVisible.value = false }
addOutput('system', 'SSH连接已建立')
} const handleConnect = () => {
connecting.value = true
socket.value.onmessage = (event) => { initWebSocket()
addOutput('output', event.data) }
}
const initWebSocket = () => {
socket.value.onerror = (error) => { const wsUrl = `ws://localhost:8080/nursing-unit/ws/ssh/${clientId}`
addOutput('error', '连接错误: ' + error) socket.value = new WebSocket(wsUrl)
connecting.value = false
connected.value = false socket.value.onopen = () => {
} const { host, port, username, password } = connectionForm.value
const connectMsg = `connect:${host}:${port}:${username}:${password}`
socket.value.onclose = () => { socket.value?.send(connectMsg)
if (connected.value) { connected.value = true
addOutput('system', 'SSH连接已断开') connecting.value = false
connectionModalVisible.value = false
addOutput('system', 'SSH连接已建立')
}
socket.value.onmessage = (event) => {
addOutput('output', event.data)
}
socket.value.onerror = (error) => {
addOutput('error', '连接错误: ' + error)
connecting.value = false
connected.value = false
}
socket.value.onclose = () => {
if (connected.value) {
addOutput('system', 'SSH连接已断开')
}
connected.value = false
connecting.value = false
}
}
const disconnect = () => {
if (connected.value && socket.value) {
socket.value.send('disconnect')
socket.value.close()
}
}
const executeCommand = () => {
if (!currentCommand.value.trim()) return
if (!connected.value) {
addOutput('system', '请先建立SSH连接')
return
}
// 添加到历史记录
commandHistory.value.push(currentCommand.value)
historyIndex.value = commandHistory.value.length
// 显示输入的命令
addOutput('input', currentCommand.value)
// 发送命令
socket.value?.send(currentCommand.value)
currentCommand.value = ''
scrollToBottom()
}
const historyUp = () => {
if (commandHistory.value.length === 0) return
if (historyIndex.value > 0) {
historyIndex.value--
currentCommand.value = commandHistory.value[historyIndex.value]
}
}
const historyDown = () => {
if (historyIndex.value < commandHistory.value.length - 1) {
historyIndex.value++
currentCommand.value = commandHistory.value[historyIndex.value]
} else if (historyIndex.value === commandHistory.value.length - 1) {
historyIndex.value++
currentCommand.value = ''
}
}
const focusInput = () => {
nextTick(() => {
commandInput.value?.focus()
})
}
const handleKeyDown = (event: KeyboardEvent) => {
// 检测 Ctrl+C 组合键
if (event.ctrlKey && event.key === 'c') {
event.preventDefault()
if (connected.value && socket.value) {
// 发送中断信号
socket.value.send('\x03') // Ctrl+C 的 ASCII 码
addOutput('system', '^C') // 显示中断符号
}
}
}
onMounted(() => {
focusInput()
// 添加键盘事件监听
window.addEventListener('keydown', handleKeyDown)
})
onBeforeUnmount(() => {
if (socket.value) {
socket.value.close()
}
// 移除键盘事件监听
window.removeEventListener('keydown', handleKeyDown)
})
return {
outputLines,
currentCommand,
connectionModalVisible,
connecting,
connectionForm,
formRules,
terminalBody,
commandInput,
connect,
handleConnect,
disconnect,
executeCommand,
historyUp,
historyDown
} }
connected.value = false
connecting.value = false
}
} }
const disconnect = () => {
if (connected.value && socket.value) {
socket.value.send('disconnect')
socket.value.close()
}
}
const executeCommand = () => {
if (!currentCommand.value.trim()) return
if (!connected.value) {
addOutput('system', '请先建立SSH连接')
return
}
// 添加到历史记录
commandHistory.value.push(currentCommand.value)
historyIndex.value = commandHistory.value.length
// 显示输入的命令
addOutput('input', currentCommand.value)
// 发送命令
socket.value?.send(currentCommand.value)
currentCommand.value = ''
scrollToBottom()
}
const historyUp = () => {
if (commandHistory.value.length === 0) return
if (historyIndex.value > 0) {
historyIndex.value--
currentCommand.value = commandHistory.value[historyIndex.value]
}
}
const historyDown = () => {
if (historyIndex.value < commandHistory.value.length - 1) {
historyIndex.value++
currentCommand.value = commandHistory.value[historyIndex.value]
} else if (historyIndex.value === commandHistory.value.length - 1) {
historyIndex.value++
currentCommand.value = ''
}
}
const focusInput = () => {
nextTick(() => {
commandInput.value?.focus()
})
}
onMounted(() => {
focusInput()
})
onBeforeUnmount(() => {
if (socket.value) {
socket.value.close()
}
})
return {
outputLines,
currentCommand,
connectionModalVisible,
connecting,
connectionForm,
formRules,
terminalBody,
commandInput,
connect,
handleConnect,
disconnect,
executeCommand,
historyUp,
historyDown
}
}
}) })
</script> </script>
<style scoped> <style scoped>
.terminal-container { .terminal-container {
height: 100%; height: 500px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #1e1e1e; background-color: #121212;
color: #f0f0f0; color: #f0f0f0;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
} }
.terminal-header { .terminal-header {
padding: 8px 16px; padding: 8px 12px;
background-color: #333; background-color: #1a1a1a;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid #444; border-bottom: 1px solid #2a2a2a;
font-family: 'Lucida Console', 'Consolas', monospace;
} }
.terminal-body { .terminal-body {
flex: 1; flex: 1;
padding: 8px; padding: 10px;
overflow-y: auto; overflow-y: auto;
font-family: 'Courier New', monospace; font-family: 'Lucida Console', 'Consolas', monospace;
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
background-color: #121212;
} }
.terminal-line { .terminal-line {
margin-bottom: 4px; margin-bottom: 4px;
word-break: break-all; word-break: break-all;
white-space: pre-wrap; white-space: pre-wrap;
} }
.terminal-input-line { .terminal-input-line {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: rgba(255, 255, 255, 0.05);
padding: 8px;
border-radius: 2px;
} }
.input-prompt { .input-prompt {
color: #4caf50; color: #00ff00;
margin-right: 8px; margin-right: 8px;
font-weight: bold;
} }
.terminal-input { .terminal-input {
flex: 1; flex: 1;
background: transparent; background: transparent;
border: none; border: none;
color: #fff; color: #ffffff;
font-family: 'Courier New', monospace; font-family: 'Lucida Console', 'Consolas', monospace;
font-size: 14px; font-size: 14px;
outline: none; outline: none;
padding: 4px 8px;
border-radius: 2px;
background-color: rgba(255, 255, 255, 0.08);
}
.terminal-input:focus {
background-color: rgba(255, 255, 255, 0.12);
} }
.output { .output {
color: #f0f0f0; color: #f0f0f0;
} }
.error { .error {
color: #ff5252; color: #ff5555;
} }
.input { .input {
color: #bbdefb; color: #00ffff;
} }
.system { .system {
color: #ff9800; color: #ffff55;
}
.terminal-body::-webkit-scrollbar {
width: 6px;
}
.terminal-body::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
.terminal-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
}
.terminal-body::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
} }
</style> </style>

4
src/views/biz/orgapplyinfo/OrgApplyInfoList.vue
View File

@ -110,11 +110,11 @@ const labelCol = reactive({
xs: 24, xs: 24,
sm: 4, sm: 4,
xl: 6, xl: 6,
xxl: 4 xxl: 5
}); });
const wrapperCol = reactive({ const wrapperCol = reactive({
xs: 24, xs: 24,
sm: 20, sm: 19,
}); });
// 高级查询配置 // 高级查询配置

20
src/views/biz/orgapplyinfo/components/OrgApplyInfoForm.vue
View File

@ -155,6 +155,12 @@
<a-col :span="24"> <a-col :span="24">
<SectionDivider :title="'机构信息'" /> <SectionDivider :title="'机构信息'" />
</a-col> </a-col>
<a-col :span="12">
<a-form-item label="机构所在地">
<span>{{ formData.orgProvince_dictText + formData.orgCity_dictText + formData.orgDistrict_dictText
}}</span>
</a-form-item>
</a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="机构地址" v-bind="validateInfos.orgAddress" id="OrgApplyInfoForm-orgAddress" <a-form-item label="机构地址" v-bind="validateInfos.orgAddress" id="OrgApplyInfoForm-orgAddress"
name="orgAddress"> name="orgAddress">
@ -195,6 +201,9 @@
</a-form> </a-form>
</template> </template>
</JFormContainer> </JFormContainer>
<!-- <a-col :span="24" v-if="!!formData.orgCoordinateLa && !!formData.orgCoordinateLo">
<TencentMap :latitude="formData.orgCoordinateLa" :longitude="formData.orgCoordinateLo" />
</a-col> -->
</a-spin> </a-spin>
</template> </template>
@ -207,6 +216,7 @@ import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../OrgApplyInfo.api'; import { saveOrUpdate } from '../OrgApplyInfo.api';
import { Form } from 'ant-design-vue'; import { Form } from 'ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue'; import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import TencentMap from '/@/components/TencentMap/TencentMap.vue';
const props = defineProps({ const props = defineProps({
formDisabled: { type: Boolean, default: false }, formDisabled: { type: Boolean, default: false },
@ -243,13 +253,21 @@ const formData = reactive<Record<string, any>>({
comCreditCode: '', comCreditCode: '',
comLegalPerson: '', comLegalPerson: '',
orgAddress: '', orgAddress: '',
orgCoordinate: '', orgCoordinateLo: '',
orgCoordinateLa: '',
orgLeader: '', orgLeader: '',
orgLeaderPhone: '', orgLeaderPhone: '',
orgBuildingNumber: '', orgBuildingNumber: '',
orgPropertyType: '', orgPropertyType: '',
orgBuildingArea: undefined, orgBuildingArea: undefined,
orgProvince: '',
orgCity: '',
orgDistrict: '',
orgProvince_dictText: '',
orgCity_dictText: '',
orgDistrict_dictText: '',
}); });
const tempNullVal = ref('')
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } }); const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });

2
src/views/iot/tplink/camera/components/CameraBlockForm.vue
View File

@ -24,7 +24,7 @@
灵敏度 灵敏度
</a-col> </a-col>
<a-col :span="6"> <a-col :span="6">
<a-slider v-model:value="formData.digitalSensitivity" :disabled="!formData.enabled" :min="1" :max="100" @change="(value) => changeSensitivity(value)"/> <a-slider v-model:value="formData.digitalSensitivity" :disabled="!formData.enabled" :min="1" :max="100" @afterChange="(value) => changeSensitivity(value)"/>
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<a-input-number v-model:value="formData.digitalSensitivity" :disabled="!formData.enabled" :min="1" :max="100" style="margin-left: 12px" @change="(value) => changeSensitivity(value)"/> <a-input-number v-model:value="formData.digitalSensitivity" :disabled="!formData.enabled" :min="1" :max="100" style="margin-left: 12px" @change="(value) => changeSensitivity(value)"/>

505
src/views/iot/tplink/camera/components/CameraCommonForm.vue
View File

@ -12,7 +12,7 @@
<a-row> <a-row>
<a-col :span="2"></a-col> <a-col :span="2"></a-col>
<a-col :span="20"> <a-col :span="20">
<div id="video-container" class="video-container"></div> <div id="video-container" class="video-container"></div>
</a-col> </a-col>
</a-row> </a-row>
<a-row style="margin-top: 14px"> <a-row style="margin-top: 14px">
@ -46,10 +46,12 @@
亮度 亮度
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-slider v-model:value="formData.luma" :min="1" :max="100" @change="(value) => changeCommon('luma', value)"/> <a-slider v-model:value="formData.luma" :min="1" :max="100"
@afterChange="(value) => changeCommon('luma', value)" />
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<a-input-number v-model:value="formData.luma" :min="1" :max="100" style="margin-left: 12px" @change="(value) => changeCommon('luma', value)"/> <a-input-number v-model:value="formData.luma" :min="1" :max="100" style="margin-left: 12px"
@change="(value) => changeCommon('luma', value)" />
</a-col> </a-col>
</a-row> </a-row>
</a-col> </a-col>
@ -59,10 +61,12 @@
对比度 对比度
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-slider v-model:value="formData.contrast" :min="1" :max="100" @change="(value) => changeCommon('contrast', value)"/> <a-slider v-model:value="formData.contrast" :min="1" :max="100"
@afterChange="(value) => changeCommon('contrast', value)" />
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<a-input-number v-model:value="formData.contrast" :min="1" :max="100" style="margin-left: 12px" @change="(value) => changeCommon('contrast', value)"/> <a-input-number v-model:value="formData.contrast" :min="1" :max="100" style="margin-left: 12px"
@change="(value) => changeCommon('contrast', value)" />
</a-col> </a-col>
</a-row> </a-row>
</a-col> </a-col>
@ -72,10 +76,12 @@
饱和度 饱和度
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-slider v-model:value="formData.saturation" :min="1" :max="100" @change="(value) => changeCommon('saturation', value)"/> <a-slider v-model:value="formData.saturation" :min="1" :max="100"
@afterChange="(value) => changeCommon('saturation', value)" />
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<a-input-number v-model:value="formData.saturation" :min="1" :max="100" style="margin-left: 12px" @change="(value) => changeCommon('saturation', value)"/> <a-input-number v-model:value="formData.saturation" :min="1" :max="100" style="margin-left: 12px"
@change="(value) => changeCommon('saturation', value)" />
</a-col> </a-col>
</a-row> </a-row>
</a-col> </a-col>
@ -85,10 +91,12 @@
锐度 锐度
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-slider v-model:value="formData.sharpness" :min="1" :max="100" @change="(value) => changeCommon('sharpness', value)"/> <a-slider v-model:value="formData.sharpness" :min="1" :max="100"
@afterChange="(value) => changeCommon('sharpness', value)" />
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<a-input-number v-model:value="formData.sharpness" :min="1" :max="100" style="margin-left: 12px" @change="(value) => changeCommon('sharpness', value)"/> <a-input-number v-model:value="formData.sharpness" :min="1" :max="100" style="margin-left: 12px"
@change="(value) => changeCommon('sharpness', value)" />
</a-col> </a-col>
</a-row> </a-row>
</a-col> </a-col>
@ -98,21 +106,24 @@
宽动态 宽动态
</a-col> </a-col>
<a-col :span="16"> <a-col :span="16">
<a-select v-model:value="formData.wide_dynamic" @change="(value) => changeCommon('wide_dynamic', value)"> <a-select v-model:value="formData.wide_dynamic"
<a-select-option value="off">关闭</a-select-option> @change="(value) => changeCommon('wide_dynamic', value)">
<a-select-option value="on">开启</a-select-option> <a-select-option value="off">关闭</a-select-option>
</a-select> <a-select-option value="on">开启</a-select-option>
</a-select>
</a-col> </a-col>
</a-row> </a-row>
</a-col> </a-col>
<a-col :span="20" v-show="formData.wide_dynamic=='on'"> <a-col :span="20" v-show="formData.wide_dynamic == 'on'">
<a-row style="margin-bottom: 14px"> <a-row style="margin-bottom: 14px">
<a-col :span="6" class="labelText"></a-col> <a-col :span="6" class="labelText"></a-col>
<a-col :span="12"> <a-col :span="12">
<a-slider v-model:value="formData.wd_gain" :min="1" :max="100" @change="(value) => changeCommon('wd_gain', value)"/> <a-slider v-model:value="formData.wd_gain" :min="1" :max="100"
@afterChange="(value) => changeCommon('wd_gain', value)" />
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<a-input-number v-model:value="formData.wd_gain" :min="1" :max="100" style="margin-left: 12px" @change="(value) => changeCommon('wd_gain', value)"/> <a-input-number v-model:value="formData.wd_gain" :min="1" :max="100" style="margin-left: 12px"
@change="(value) => changeCommon('wd_gain', value)" />
</a-col> </a-col>
</a-row> </a-row>
</a-col> </a-col>
@ -127,7 +138,8 @@
照明模式 照明模式
</a-col> </a-col>
<a-col :span="16"> <a-col :span="16">
<a-select v-model:value="formData.night_vision_mode" @change="(value) => changeSwitch('night_vision_mode', value)"> <a-select v-model:value="formData.night_vision_mode"
@change="(value) => changeSwitch('night_vision_mode', value)">
<a-select-option value="wtl_night_vision">白光照明</a-select-option> <a-select-option value="wtl_night_vision">白光照明</a-select-option>
<a-select-option value="inf_night_vision">红外照明</a-select-option> <a-select-option value="inf_night_vision">红外照明</a-select-option>
<a-select-option value="md_night_vision">移动侦测全彩</a-select-option> <a-select-option value="md_night_vision">移动侦测全彩</a-select-option>
@ -135,7 +147,7 @@
</a-col> </a-col>
</a-row> </a-row>
</a-col> </a-col>
<a-col :span="20" v-show="formData.night_vision_mode=='md_night_vision'"> <a-col :span="20" v-show="formData.night_vision_mode == 'md_night_vision'">
<a-row style="margin-bottom: 14px"> <a-row style="margin-bottom: 14px">
<a-col :span="6" class="labelText"> <a-col :span="6" class="labelText">
防红外过曝 防红外过曝
@ -149,16 +161,18 @@
</a-col> </a-col>
</a-row> </a-row>
</a-col> </a-col>
<a-col :span="20" v-show="formData.night_vision_mode=='md_night_vision'&&formData.smartir=='manual'"> <a-col :span="20" v-show="formData.night_vision_mode == 'md_night_vision' && formData.smartir == 'manual'">
<a-row style="margin-bottom: 14px"> <a-row style="margin-bottom: 14px">
<a-col :span="6" class="labelText"> <a-col :span="6" class="labelText">
防过曝等级 防过曝等级
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-slider v-model:value="formData.smartir_level" :min="1" :max="100" @change="(value) => changeCommon('smartir_level', value)"/> <a-slider v-model:value="formData.smartir_level" :min="1" :max="100"
@afterChange="(value) => changeCommon('smartir_level', value)" />
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<a-input-number v-model:value="formData.smartir_level" :min="1" :max="100" style="margin-left: 12px" @change="(value) => changeCommon('smartir_level', value)"/> <a-input-number v-model:value="formData.smartir_level" :min="1" :max="100" style="margin-left: 12px"
@change="(value) => changeCommon('smartir_level', value)" />
</a-col> </a-col>
</a-row> </a-row>
</a-col> </a-col>
@ -176,16 +190,18 @@
</a-col> </a-col>
</a-row> </a-row>
</a-col> </a-col>
<a-col :span="20" v-show="formData.smartwtl=='manual'"> <a-col :span="20" v-show="formData.smartwtl == 'manual'">
<a-row style="margin-bottom: 14px"> <a-row style="margin-bottom: 14px">
<a-col :span="6" class="labelText"> <a-col :span="6" class="labelText">
白光等级 白光等级
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-slider v-model:value="formData.smartwtl_digital_level" :min="1" :max="100" @change="(value) => changeCommon('smartwtl_digital_level', value)"/> <a-slider v-model:value="formData.smartwtl_digital_level" :min="1" :max="100"
@afterChange="(value) => changeCommon('smartwtl_digital_level', value)" />
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<a-input-number v-model:value="formData.smartwtl_digital_level" :min="1" :max="100" style="margin-left: 12px" @change="(value) => changeCommon('smartwtl_digital_level', value)"/> <a-input-number v-model:value="formData.smartwtl_digital_level" :min="1" :max="100"
style="margin-left: 12px" @change="(value) => changeCommon('smartwtl_digital_level', value)" />
</a-col> </a-col>
</a-row> </a-row>
</a-col> </a-col>
@ -205,238 +221,237 @@ import {
onMounted, onMounted,
watch, watch,
} from 'vue'; } from 'vue';
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'; import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { getValueType } from '/@/utils'; import { getValueType } from '/@/utils';
import { Form } from 'ant-design-vue'; import { Form } from 'ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue'; import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import { import {
getImageCommon, getImageCommon,
setImageCommon, setImageCommon,
configRecovery, configRecovery,
getPreviewUrl, getPreviewUrl,
} from "../camera.api"; } from "../camera.api";
const props = defineProps({ const props = defineProps({
data: { type: Object, default: () => ({}) }, data: { type: Object, default: () => ({}) },
});
const formRef = ref();
const useForm = Form.useForm;
const formData = reactive<Record<string, any>>({
deviceIndex: '',//设备索引
streamType: 0,//码流类型 0 代表主码流，1 代码子码流
//视频预览参数
url: '',//预览通道对应的URL
backupUrl: '',//备选URL，当流媒体服务器存在内外网IP配置时，该字段不为null
wsUrl: '',//用于建立ws连接传输视频帧信息
wssUrl: '',//用于建立wss接传输视频帧信息
chroma: "0", //色度
luma: "0", //亮度
sharpness: "0", //锐度
saturation: "0", //饱和度
contrast: "0", //对比度
wd_gain: "0", //宽动态度
smartir_level: "0",//防过曝等级
wide_dynamic: "off", //宽动态 "off"//关闭 "on"//开启
smartir: "auto_ir",//防红外过曝："auto_ir_ae" //自动-增强模式 "auto_ir" //自动-标准模式 "manual"//手动——防过曝等级
smartwtl: "auto_wtl",//白光强度："auto_wtl_ae" //智能白光-柔和 ；"auto_wtl" //智能白光-标准 ； "manual" //手动——出现白光等级
smartwtl_digital_level: "0",//白光等级
flip_type: "center",//画面镜像旋转： "off"//关闭 "left_and_right"//左右 "up_and_down"//上下 "center"//中心
night_vision_mode: "md_night_vision",//照明模式："wtl_night_vision"//白光照明 ；"inf_night_vision"//红外照明 ； "md_night_vision"//移动侦测全彩——出现白光强度
});
const player = ref();
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 8 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
/**
* 恢复默认
*/
function restoreDefault() {
if (formData.deviceIndex == '') {
return
}
confirmLoading.value = true;
configRecovery({ "deviceIndex": formData.deviceIndex }).then(res => {
confirmLoading.value = false;
getCommon(formData.deviceIndex);
getSwitch(formData.deviceIndex);
}); });
const formRef = ref(); }
const useForm = Form.useForm;
const formData = reactive<Record<string, any>>({
deviceIndex: '',//设备索引
streamType: 0,//码流类型 0 代表主码流，1 代码子码流
//视频预览参数
url: '',//预览通道对应的URL
backupUrl: '',//备选URL，当流媒体服务器存在内外网IP配置时，该字段不为null
wsUrl: '',//用于建立ws连接传输视频帧信息
wssUrl: '',//用于建立wss接传输视频帧信息
chroma: "0", //色度
luma: "0", //亮度
sharpness: "0", //锐度
saturation: "0", //饱和度
contrast: "0", //对比度
wd_gain: "0", //宽动态度
smartir_level: "0",//防过曝等级
wide_dynamic: "off", //宽动态 "off"//关闭 "on"//开启
smartir: "auto_ir",//防红外过曝："auto_ir_ae" //自动-增强模式 "auto_ir" //自动-标准模式 "manual"//手动——防过曝等级
smartwtl: "auto_wtl",//白光强度："auto_wtl_ae" //智能白光-柔和 ；"auto_wtl" //智能白光-标准 ； "manual" //手动——出现白光等级
smartwtl_digital_level: "0",//白光等级
flip_type: "center",//画面镜像旋转： "off"//关闭 "left_and_right"//左右 "up_and_down"//上下 "center"//中心
night_vision_mode: "md_night_vision",//照明模式："wtl_night_vision"//白光照明 ；"inf_night_vision"//红外照明 ； "md_night_vision"//移动侦测全彩——出现白光强度
/**
* 播放
*/
async function preview(deviceIndex, streamType, url) {
if (deviceIndex == null) {
return
}
if (url != '') {
return
}
await getPreviewUrl({ "deviceIndex": deviceIndex, "streamType": streamType }).then(res => {
formData.url = res.url;
formData.backupUrl = res.backupUrl;
formData.wsUrl = res.wsUrl;
formData.wssUrl = res.wssUrl;
confirmLoading.value = false;
}); });
const player = ref(); const TumsPlayer = window['tums-player'].default;
const { createMessage } = useMessage(); player.value = new TumsPlayer('video-container', {
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 8 } }); type: "rtsp", // 协议类型，rtsp
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); url: formData.url, // 取流地址, getPreviewUrl接口获取
const confirmLoading = ref<boolean>(false); // url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取
socket: formData.wssUrl, // websocket地址, getPreviewUrl接口获取
/** pluginPath: '/static', // 当sdk资源不在根路径下时，需配置pluginPath
* 恢复默认 });
*/ let isPlaying = player.value.isPlaying();
function restoreDefault(){ if (!isPlaying) {
if(formData.deviceIndex==''){ if (player.value.isInit) {
return player.value.start();
} else {
player.value.play();
} }
confirmLoading.value=true; }
configRecovery({"deviceIndex":formData.deviceIndex}).then(res=>{ }
confirmLoading.value=false;
/**
* 销毁
*/
function destroy(player) {
if (player) {
player.value.destroy().then(() => {
}); // 销毁
}
}
/**
* 获取画面通用信息
*/
function getCommon(deviceIndex) {
if (deviceIndex == null) {
return
}
getImageCommon({
"deviceIndex": deviceIndex,
"type": "common"
}).then(res => {
formData.chroma = res.chroma; //色度
formData.luma = res.luma; //亮度
formData.sharpness = res.sharpness; //锐度
formData.saturation = res.saturation; //饱和度
formData.contrast = res.contrast; //对比度
formData.wd_gain = res.wd_gain; //宽动态度
formData.smartir_level = res.smartir_level; //防过曝等级
formData.wide_dynamic = res.wide_dynamic; //宽动态 "off"//关闭 "on"//开启
formData.smartir = res.smartir; //防红外过曝："auto_ir_ae" //自动-增强模式 "auto_ir" //自动-标准模式 "manual"//手动——防过曝等级
formData.smartwtl = res.smartwtl; //白光强度："auto_wtl_ae" //智能白光-柔和 ；"auto_wtl" //智能白光-标准 ； "manual" //手动——出现白光等级
formData.smartwtl_digital_level = res.smartwtl_digital_level; //白光等级
});
}
/**
* 获取照明设置信息
*/
function getSwitch(deviceIndex) {
if (deviceIndex == null) {
return
}
getImageCommon({
"deviceIndex": deviceIndex,
"type": "switch"
}).then(res => {
formData.flip_type = res.flip_type; //画面镜像翻转
formData.night_vision_mode = res.night_vision_mode; //照明模式
});
}
/**
* 设置画面信息
* @param paramKey
* @param paramValue
*/
function setCommon(paramKey, paramValue) {
setImageCommon({
"deviceIndex": formData.deviceIndex,
"type": formData.deviceIndex,
paramKey: paramValue
}).then(res => { });
}
/**
* 设置照明设置信息
* @param paramObj
* @param type
*/
function setCommonSwitch(paramObj, type) {
setImageCommon({
"deviceIndex": formData.deviceIndex,
"type": type,
"param": paramObj
}).then(res => { });
}
/**
* 更改画面信息
* @param attr
* @param value
*/
function changeCommon(attr, value) {
let param = {};
param[attr] = value;
setCommonSwitch(param, "common");
}
/**
* 更改照明设置信息
* @param attr
* @param value
*/
function changeSwitch(attr, value) {
let param = {};
param[attr] = value;
setCommonSwitch(param, "switch");
}
onMounted(() => {
watch(
() => props.data,
async () => {
formData.deviceIndex = props.data.deviceIndex;
getCommon(formData.deviceIndex); getCommon(formData.deviceIndex);
getSwitch(formData.deviceIndex); getSwitch(formData.deviceIndex);
}); preview(formData.deviceIndex, formData.streamType, formData.url);
} },
{ deep: true, immediate: true }
/** );
* 播放 });
*/
async function preview(deviceIndex,streamType,url) {
if(deviceIndex==null){
return
}
if (url!=''){
return
}
await getPreviewUrl({"deviceIndex":deviceIndex,"streamType":streamType}).then(res=>{
formData.url = res.url;
formData.backupUrl = res.backupUrl;
formData.wsUrl = res.wsUrl;
formData.wssUrl = res.wssUrl;
confirmLoading.value=false;
});
const TumsPlayer = window['tums-player'].default;
player.value = new TumsPlayer('video-container', {
type: "rtsp", // 协议类型，rtsp
url: formData.url, // 取流地址, getPreviewUrl接口获取
// url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取
socket: formData.wssUrl, // websocket地址, getPreviewUrl接口获取
pluginPath: '/static', // 当sdk资源不在根路径下时，需配置pluginPath
});
let isPlaying = player.value.isPlaying();
if (!isPlaying) {
if (player.value.isInit) {
player.value.start();
} else {
player.value.play();
}
}
}
/**
* 销毁
*/
function destroy(player){
if (player){
player.value.destroy().then(() => {
}); // 销毁
}
}
/**
* 获取画面通用信息
*/
function getCommon(deviceIndex){
if(deviceIndex==null){
return
}
getImageCommon({
"deviceIndex": deviceIndex,
"type": "common"
}).then(res=>{
formData.chroma = res.chroma; //色度
formData.luma = res.luma; //亮度
formData.sharpness = res.sharpness; //锐度
formData.saturation = res.saturation; //饱和度
formData.contrast = res.contrast; //对比度
formData.wd_gain = res.wd_gain; //宽动态度
formData.smartir_level = res.smartir_level; //防过曝等级
formData.wide_dynamic = res.wide_dynamic; //宽动态 "off"//关闭 "on"//开启
formData.smartir = res.smartir; //防红外过曝："auto_ir_ae" //自动-增强模式 "auto_ir" //自动-标准模式 "manual"//手动——防过曝等级
formData.smartwtl = res.smartwtl; //白光强度："auto_wtl_ae" //智能白光-柔和 ；"auto_wtl" //智能白光-标准 ； "manual" //手动——出现白光等级
formData.smartwtl_digital_level = res.smartwtl_digital_level; //白光等级
});
}
/**
* 获取照明设置信息
*/
function getSwitch(deviceIndex){
if(deviceIndex==null){
return
}
getImageCommon({
"deviceIndex": deviceIndex,
"type": "switch"
}).then(res=>{
formData.flip_type = res.flip_type; //画面镜像翻转
formData.night_vision_mode = res.night_vision_mode; //照明模式
});
}
/**
* 设置画面信息
* @param paramKey
* @param paramValue
*/
function setCommon(paramKey, paramValue){
setImageCommon({
"deviceIndex": formData.deviceIndex,
"type": formData.deviceIndex,
paramKey: paramValue
}).then(res=>{ });
}
/**
* 设置照明设置信息
* @param paramObj
* @param type
*/
function setCommonSwitch(paramObj,type){
setImageCommon({
"deviceIndex": formData.deviceIndex,
"type": type,
"param": paramObj
}).then(res=>{ });
}
/**
* 更改画面信息
* @param attr
* @param value
*/
function changeCommon(attr,value){
let param = {};
param[attr] = value;
setCommonSwitch(param,"common");
}
/**
* 更改照明设置信息
* @param attr
* @param value
*/
function changeSwitch(attr,value){
let param = {};
param[attr] = value;
setCommonSwitch(param,"switch");
}
onMounted(() => {
watch(
() => props.data,
async () => {
formData.deviceIndex = props.data.deviceIndex;
getCommon(formData.deviceIndex);
getSwitch(formData.deviceIndex);
preview(formData.deviceIndex,formData.streamType,formData.url);
},
{ deep: true, immediate: true }
);
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.antd-modal-form { .antd-modal-form {
padding: 14px; padding: 14px;
} }
.labelText { .labelText {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding-right: 8px; padding-right: 8px;
} }
.ant-select { .ant-select {
display: flex; display: flex;
} }
.video-container {
height: 500px;
width: 500px;
background-color: #010917;
}
.video-container {
height: 500px;
width: 500px;
background-color: #010917;
}
</style> </style>

2
src/views/synchronization/directive/index2.vue
View File

@ -168,7 +168,7 @@ const labelCol = reactive({
xs: 24, xs: 24,
sm: 4, sm: 4,
xl: 6, xl: 6,
xxl: 4 xxl: 5
}); });
const wrapperCol = reactive({ const wrapperCol = reactive({
xs: 24, xs: 24,