创建新仓库
This commit is contained in:
@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 添加配置 -->
|
||||
<el-button style="margin-bottom: 5px;" type="primary" size="small" @click="addAir">添加配置</el-button>
|
||||
<el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%">
|
||||
<!-- @row-dblclick="rowClick2" -->
|
||||
<el-table-column width="35" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-radio class="radio" :label="scope.row" v-model="currentRow" @change="handleCurrentChange(scope.row)">{{ ""
|
||||
}}</el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="plane_service" label="无人机服务地址" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column property="ai_service" label="ai识别服务地址" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column property="srs_host" label="srs服务器地址" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column property="srs_rtmp_port" label="srs(rtmp端口)" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column property="srs_webrtc_port" label="srs(webrtc端口)" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="small" @click.stop="editRow(scope.row)">编辑</el-button>
|
||||
<el-button type='danger' size="small" @click.stop="deleteRow(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 需要分页 -->
|
||||
<div style="margin-top: 10px;">
|
||||
<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="queryparams.page_size"
|
||||
style="display: flex;justify-content: center;" :current-page="queryparams.page" @size-change="handleSizeChange"
|
||||
@current-change="handleCurrent"></el-pagination>
|
||||
</div>
|
||||
<!-- 使用el-dialog添加配置,服务器地址和ai地址 -->
|
||||
<el-dialog :title="title" :modal="false" :visible.sync="dialogVisible" :append-to-body="true" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules">
|
||||
<el-form-item label="无人机服务地址" prop="plane_service">
|
||||
<el-input v-model="form.plane_service" placeholder="请输入服务器地址"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="ai识别服务地址" prop="ai_service">
|
||||
<el-input v-model="form.ai_service" placeholder="请输入ai地址"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="srs服务器地址" prop="srs_host">
|
||||
<el-input v-model="form.srs_host" placeholder="请输入srs服务器地址"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="srs(rtmp服务端口)" prop="srs_rtmp_port">
|
||||
<el-input v-model="form.srs_rtmp_port" placeholder="请输入rtmp服务端口"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="srs(webrtc服务端口)" prop="srs_webrtc_port">
|
||||
<el-input v-model="form.srs_webrtc_port" placeholder="请输入webrtc服务端口"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="text-align: right;">
|
||||
<el-button type="primary" @click="submitForm('form')">确 定</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">取 消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addUavConfig, getUavConfig, delUavConfig, updateUavConfig, selectUavConfig } from "@/api/gisAPI.js"
|
||||
import { setDockAir, setDockSocketUrl, setAiUrl, setHost, setRtmpPort, setRtcPort } from "@/utils/auth.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
plane_service: '',
|
||||
ai_service: '',
|
||||
srs_host: '',
|
||||
srs_rtmp_port: '',
|
||||
srs_webrtc_port: '',
|
||||
},
|
||||
rules: {
|
||||
plane_service: [{
|
||||
required: true,
|
||||
message: '请输入服务器地址',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
ai_service: [{
|
||||
required: true,
|
||||
message: '请输入ai地址',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
srs_host: [{
|
||||
required: true,
|
||||
message: '请输入srs服务器地址',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
srs_rtmp_port: [{
|
||||
required: true,
|
||||
message: '请输入rtmp服务端口',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
srs_webrtc_port: [{
|
||||
required: true,
|
||||
message: '请输入webrtc服务端口',
|
||||
trigger: 'blur'
|
||||
}]
|
||||
},
|
||||
queryparams: {
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
plane_service: '',
|
||||
ai_service: ''
|
||||
},
|
||||
tableData: [],
|
||||
currentRow: null,
|
||||
total: 0,
|
||||
title: '添加无人机配置',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getAir();
|
||||
},
|
||||
methods: {
|
||||
// 选中当前行
|
||||
setCurrent(row) {
|
||||
this.$refs.singleTable.setCurrentRow(row);
|
||||
},
|
||||
handleCurrentChange(row) {
|
||||
this.currentRow = row;
|
||||
this.setCurrent(row);
|
||||
this.selectUav();
|
||||
},
|
||||
rowClick2(row, column, event) {
|
||||
if (this.currentRow && row.plane_service == this.currentRow.plane_service) {
|
||||
this.setCurrent();
|
||||
this.currentRow = null;
|
||||
} else {
|
||||
this.currentRow = row;
|
||||
}
|
||||
},
|
||||
addAir() {
|
||||
this.form = {
|
||||
plane_service: '',
|
||||
ai_service: '',
|
||||
srs_host: '',
|
||||
srs_rtmp_port: '',
|
||||
srs_webrtc_port: '',
|
||||
}
|
||||
this.title = '添加无人机配置';
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 选中配置
|
||||
selectUav() {
|
||||
let current = {
|
||||
id: this.currentRow.ID,
|
||||
selected: true
|
||||
}
|
||||
if (this.currentRow) {
|
||||
console.log(this.currentRow);
|
||||
if (this.currentRow.plane_service) {
|
||||
console.log(this.currentRow.plane_service);
|
||||
setDockAir(this.currentRow.plane_service);
|
||||
// 将HTTP服务地址转换为WebSocket地址
|
||||
let url = this.currentRow.plane_service.replace('http:', 'ws:') + '/websocket';
|
||||
// console.log(url);
|
||||
setDockSocketUrl(url);
|
||||
}
|
||||
if (this.currentRow.ai_service) {
|
||||
// console.log(this.currentRow.ai_service);
|
||||
setAiUrl(this.currentRow.ai_service);
|
||||
}
|
||||
if (this.currentRow.srs_host) {
|
||||
setHost(this.currentRow.srs_host);
|
||||
}
|
||||
if (this.currentRow.srs_rtmp_port) {
|
||||
setRtmpPort(this.currentRow.srs_rtmp_port);
|
||||
}
|
||||
if (this.currentRow.srs_webrtc_port) {
|
||||
setRtcPort(this.currentRow.srs_webrtc_port);
|
||||
}
|
||||
}
|
||||
|
||||
selectUavConfig(current).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message({
|
||||
message: '更新成功!',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取配置
|
||||
getAir() {
|
||||
getUavConfig(this.queryparams).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.list || [];
|
||||
this.total = res.data.total;
|
||||
this.currentRow = this.tableData.filter(item => item.selected == true)[0] || null;
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
// 添加配置
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title == '添加无人机配置') {
|
||||
this.addUav();
|
||||
} else {
|
||||
this.updateAir();
|
||||
}
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加配置
|
||||
addUav() {
|
||||
addUavConfig(this.form).then(res => {
|
||||
console.log(res);
|
||||
if (res.code == 0) {
|
||||
this.$message({
|
||||
message: '添加成功!',
|
||||
type: 'success'
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
this.getAir();
|
||||
}
|
||||
})
|
||||
},
|
||||
// 更新配置
|
||||
updateAir() {
|
||||
updateUavConfig(this.form).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message({
|
||||
message: '更新成功!',
|
||||
type: 'success'
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
this.getAir();
|
||||
}
|
||||
})
|
||||
},
|
||||
// 编辑配置
|
||||
editRow(row) {
|
||||
this.title = '编辑无人机配置';
|
||||
this.dialogVisible = true;
|
||||
this.form = row;
|
||||
},
|
||||
// 删除配置
|
||||
deleteRow(row) {
|
||||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delUavConfig({ ids: [row.ID] }).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message({
|
||||
message: '删除成功!',
|
||||
type: 'success'
|
||||
});
|
||||
this.getAir();
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 分页
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
this.queryparams.page_size = val;
|
||||
// this.getAir();
|
||||
},
|
||||
// 当前页
|
||||
handleCurrent(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
this.queryparams.page = val;
|
||||
// this.getAir();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* 将radio的label隐藏 */
|
||||
.el-radio__label {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="index">
|
||||
|
||||
<div class="item">
|
||||
<span>appKey：</span>
|
||||
<input class="content" type="text" v-model="appKey">
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>appSecret：</span>
|
||||
<input class="content" type="text" v-model="appSecret">
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>{{ $t('headerTitles.isc.url') }}：</span>
|
||||
<div class="content Ip" name="ip">
|
||||
<div class="selectBox">
|
||||
<select v-model="select">
|
||||
<option value="http://">http://</option>
|
||||
<option value="https://">https://</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div style="background-color: #fff;line-height: 36px;font-weight: bold;padding: 0 5px;">//</div> -->
|
||||
<input type="text" v-model="ip" style=" flex: auto">
|
||||
<div style="background-color: #fff;line-height: 36px;font-weight: bold;padding: 0 5px;">:</div>
|
||||
<input class="port" type="text" v-model="port">
|
||||
</div>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<el-button size="mini" @click="submit">{{ $t('headerTitles.isc.setInfo') }}</el-button>
|
||||
<el-button size="mini" @click="tongbu">{{ $t('headerTitles.isc.updateEquipment') }}</el-button>
|
||||
</div>
|
||||
|
||||
<!-- <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
|
||||
<el-select v-model="select" slot="prepend" placeholder="请选择">
|
||||
<el-option label="http://" value="http://"></el-option>
|
||||
<el-option label="https://" value="https://"></el-option>
|
||||
</el-select>
|
||||
<el-input slot="append" ></el-input>
|
||||
</el-input> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getIscInfo, setIscInfo,tongbuIsc } from "@/api/gisAPI"
|
||||
export default {
|
||||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
appKey: "",
|
||||
appSecret: "",
|
||||
select: 'https://',
|
||||
ip: "",
|
||||
port: ""
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
getInfo() {
|
||||
getIscInfo(res => {
|
||||
console.log('获取信息', res);
|
||||
this.appKey = res.appKey
|
||||
this.appSecret = res.appSecret
|
||||
try {
|
||||
let url = new URL(res.url)
|
||||
this.port = url.port
|
||||
this.select = url.protocol+"//"
|
||||
this.ip = url.hostname
|
||||
} catch (e) {
|
||||
this.$message.error("获取的地址不合法")
|
||||
}
|
||||
})
|
||||
},
|
||||
tongbu(){
|
||||
tongbuIsc({},res=>{
|
||||
console.log(res);
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
let str = this.select+ this.ip + ":" + this.port
|
||||
try {
|
||||
new URL(str)
|
||||
setIscInfo({
|
||||
"appKey": this.appKey,
|
||||
"appSecret": this.appSecret,
|
||||
url: str
|
||||
}, res => {
|
||||
if(res==null){
|
||||
this.$message.success("操作成功")
|
||||
}
|
||||
})
|
||||
} catch (e) {
|
||||
this.$message.error("输入的IP地址不合法")
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.index {
|
||||
height: 17vw;
|
||||
|
||||
.item {
|
||||
// height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 15px 0;
|
||||
|
||||
&>input {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
width: 110px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
height: 36px;
|
||||
text-indent: 10px;
|
||||
}
|
||||
|
||||
select {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: calc(75% - 110px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.Ip {
|
||||
color: #000;
|
||||
// background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
.selectBox {
|
||||
height: 36px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.port {
|
||||
border-radius: 0 5px 5px 0;
|
||||
width: 70px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="permission">
|
||||
<!-- 用户权限抽屉 -->
|
||||
<div v-if="type == 'role'">
|
||||
<el-drawer title="权限配置" :visible.sync="drawer" direction="rtl" :before-close="handleClose" :modal="false">
|
||||
<div v-for="item in list" :key="item.key" class="item">
|
||||
<div class="name">{{ item.name }}:</div>
|
||||
<div class="val" v-for="(val, index) in item.list" :key="index">
|
||||
<el-checkbox v-model="val.status" @change="submitrole(val)">{{ val.name }}</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
<div v-else-if="type == 'user'">
|
||||
<el-drawer title="用户配置" :visible.sync="drawer" direction="rtl" :before-close="handleClose" :modal="false">
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<template v-for="item in list">
|
||||
<el-checkbox :label="item.role_id" @change="submituser(item)">{{ item.role_name }}</el-checkbox>
|
||||
</template>
|
||||
</el-checkbox-group>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRole, editRole, useraddRole } from "@/api/gisAPI";
|
||||
|
||||
export default {
|
||||
name: "permission",
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
list: [],
|
||||
types: ["user", "source", "role", "depart"],
|
||||
role_id: '',
|
||||
type: '',
|
||||
checkList: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
//用户权限抽屉-yjq
|
||||
this.$recvChanel("drawer", (props) => {
|
||||
console.log(props)
|
||||
this.list = []
|
||||
this.drawer = props.drawer;
|
||||
this.type = props.type
|
||||
|
||||
if (props.type == 'role') {
|
||||
this.role_id = props.id
|
||||
this.getlist(props.id)
|
||||
} else if (props.type == 'user') {
|
||||
this.list = props.data
|
||||
this.checkList = []
|
||||
this.checkList.push(props.row.role_id)
|
||||
this.list.forEach(item => {
|
||||
item.username = props.row.username
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 用户权限抽屉-yjq
|
||||
handleClose(done) {
|
||||
this.$changeComponentShow("#modal", false);
|
||||
done();
|
||||
|
||||
},
|
||||
getname(key) {
|
||||
let s = ""
|
||||
switch (key) {
|
||||
case "user":
|
||||
s = "用户"
|
||||
break;
|
||||
case "source":
|
||||
s = "资源"
|
||||
break;
|
||||
case "role":
|
||||
s = "角色"
|
||||
break;
|
||||
case "depart":
|
||||
s = "部门"
|
||||
break;
|
||||
case "permission":
|
||||
s = "权限"
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return s
|
||||
},
|
||||
//获取角色列表
|
||||
getlist(id) {
|
||||
getRole({ role_id: id }).then((res) => {
|
||||
console.log(res)
|
||||
let _map = new Map()
|
||||
res.data.list.forEach((item) => {
|
||||
if (_map.has(item.p_type)) {
|
||||
_map.get(item.p_type).list.push(item)
|
||||
} else {
|
||||
_map.set(item.p_type, { key: item.p_type, name: this.getname(item.p_type), list: [item] })
|
||||
}
|
||||
});
|
||||
window._map = _map
|
||||
let arr = Array.from(_map.values())
|
||||
console.log(arr)
|
||||
arr.sort(function (a, b) {
|
||||
return a.name - b.name
|
||||
})
|
||||
this.list = arr
|
||||
});
|
||||
|
||||
},
|
||||
// 修改权限
|
||||
submitrole(e) {
|
||||
console.log(e)
|
||||
editRole({
|
||||
"role_id": this.role_id,
|
||||
"key": e.key,
|
||||
"status": e.status
|
||||
}, (res) => {
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
//修改用户的角色
|
||||
submituser(e) {
|
||||
this.checkList = []
|
||||
this.checkList[0] = e.role_id
|
||||
useraddRole({
|
||||
"username": e.username,
|
||||
"role_id": e.role_id
|
||||
}, (res) => {
|
||||
this.$sendChanel("getUserList", true)
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.permission {
|
||||
|
||||
.item {
|
||||
.name {
|
||||
margin: 30px 0 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.val {
|
||||
padding-left: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.user_item {
|
||||
//padding-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div class="set_Agreement" id="set_Agreement">
|
||||
<!-- <div class="agreement_move" id="agreement_move">-->
|
||||
<!-- {{ $t('headerTitles.service.agreements.setAgreement') }}-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="close" @click="onClose">✖</div>-->
|
||||
<div class="agreement_detail">
|
||||
<div>
|
||||
<span>{{ $t('headerTitles.service.agreements.Agreement') }}</span>
|
||||
<el-select :disabled="disabled" v-model="agreement" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in agreementList"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ $t('headerTitles.service.agreements.port') }}</span>
|
||||
<input :disabled="disabled" type="number" min="1" max="65535"/>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ $t('headerTitles.service.agreements.location') }}</span>
|
||||
<div class="nvr_address">
|
||||
<input :disabled="disabled" type="number" v-model="adress.A" max="255" min="1">
|
||||
<span></span>
|
||||
<input :disabled="disabled" type="number" v-model="adress.B" max="255" min="1">
|
||||
<span></span>
|
||||
<input :disabled="disabled" type="number" v-model="adress.C" max="255" min="1">
|
||||
<span></span>
|
||||
<input :disabled="disabled" type="number" v-model="adress.D" max="255" min="1">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <button class="btn" @click="onSubmit">确认</button>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {setMove} from '../../js/moveDiv'
|
||||
export default {
|
||||
name: "setAgreement",
|
||||
props:['disabled'],
|
||||
data(){
|
||||
return{
|
||||
agreement:1,
|
||||
agreementList:[
|
||||
{id:1,label:'HTTPS'},
|
||||
{id:2,label:'HTTP'},
|
||||
],
|
||||
adress:{
|
||||
A:192,
|
||||
B:168,
|
||||
C:1,
|
||||
D:1
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// setMove('agreement_move','set_Agreement')
|
||||
},
|
||||
methods:{
|
||||
onClose(){
|
||||
this.$parent.agreement_show=false
|
||||
},
|
||||
onSubmit(){ //提交确认
|
||||
console.log('确认提交')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.set_Agreement{
|
||||
//position: absolute;
|
||||
//left: 50%;
|
||||
//top: 50%;
|
||||
width: 400px;
|
||||
//height: 240px;
|
||||
//transform: translate(-50%,-50%);
|
||||
//background: #f1f1f1;
|
||||
z-index: 8888;
|
||||
//border: 2px solid #0ff;
|
||||
border-radius: 5px;
|
||||
.agreement_move{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
//background: #08efe4c2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.close{
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
border: 2px solid #0ff;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background: #0acefb;
|
||||
cursor: pointer;
|
||||
}
|
||||
.agreement_detail{
|
||||
width: 100%;
|
||||
//height: calc(100% - 30px);
|
||||
//background: #65bbd2;
|
||||
//margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
.nvr_address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
margin-right: 10px;
|
||||
border-radius: 4px;
|
||||
margin-left: 4px;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 30px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
width: 50px;
|
||||
box-sizing: border-box;
|
||||
padding-left:4px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
}
|
||||
>div{
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 5px 0;
|
||||
.el-select{
|
||||
width: 100px !important;
|
||||
.el-input__inner{
|
||||
height: 30px !important;
|
||||
}
|
||||
}
|
||||
>span{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-width: 100px;
|
||||
font-size: 16px;
|
||||
color: #0ff;
|
||||
font-weight: bolder;
|
||||
}
|
||||
>input{
|
||||
outline: none;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
padding: 10px ;
|
||||
width: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
font-size: 16px;
|
||||
font-weight: bolder;
|
||||
margin: 0 auto;
|
||||
outline: none;
|
||||
border: 1px solid #0ff;
|
||||
background: #0acefb;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,43 @@
|
||||
function setMove(downId, moveID) {
|
||||
let moveDiv = document.getElementById(downId);
|
||||
// console.log(moveDiv)
|
||||
moveDiv.style.cssText += ";cursor:move;";
|
||||
let informationBox = document.getElementById(moveID);
|
||||
const sty = (() => {
|
||||
if (window.document.currentStyle) {
|
||||
return (dom, attr) => dom.currentStyle[attr];
|
||||
} else {
|
||||
return (dom, attr) => getComputedStyle(dom, false)[attr];
|
||||
}
|
||||
})();
|
||||
moveDiv.onmousedown = e => {
|
||||
// 鼠标按下，计算当前元素距离可视区的距离
|
||||
const disX = e.clientX - moveDiv.offsetLeft;
|
||||
const disY = e.clientY - moveDiv.offsetTop;
|
||||
// 获取到的值带px 正则匹配替换
|
||||
let styL = sty(informationBox, "left");
|
||||
let styT = sty(informationBox, "top");
|
||||
// 第一次获取到的值为组件自带50% 移动之后赋值为px
|
||||
if (styL.includes("%")) {
|
||||
styL = +document.body.clientWidth * (+styL.replace(/\%/g, "") / 100);
|
||||
styT = +document.body.clientHeight * (+styT.replace(/\%/g, "") / 100);
|
||||
} else {
|
||||
styL = +styL.replace(/\px/g, "");
|
||||
styT = +styT.replace(/\px/g, "");
|
||||
}
|
||||
document.onmousemove = function(e) {
|
||||
// 通过事件委托，计算移动的距离
|
||||
let left = e.clientX - disX;
|
||||
let top = e.clientY - disY;
|
||||
// 移动当前元素
|
||||
informationBox.style.cssText += `;left:${left + styL}px;top:${top +
|
||||
styT}px;`;
|
||||
};
|
||||
document.onmouseup = function(e) {
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
module.exports.setMove = setMove;
|
||||
1573
src/renderer/components/myHeaderAll/systemPopup/js/utilTools.js
Normal file
1573
src/renderer/components/myHeaderAll/systemPopup/js/utilTools.js
Normal file
File diff suppressed because it is too large
Load Diff
1737
src/renderer/components/myHeaderAll/systemPopup/systemPopup.vue
Normal file
1737
src/renderer/components/myHeaderAll/systemPopup/systemPopup.vue
Normal file
File diff suppressed because it is too large
Load Diff
1908
src/renderer/components/myHeaderAll/systemPopup/systemPopup_b.vue
Normal file
1908
src/renderer/components/myHeaderAll/systemPopup/systemPopup_b.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user