<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>园区大脑管理</title>
<link href="../../static/plugins/bootstrap/css/bootstrap.min.css" th:href="@{'/plugins/bootstrap/css/bootstrap.min.css'}" rel="stylesheet" type="text/css" />
<link href="../../static/common/font-awesome/css/font-awesome.min.css" th:href="@{'/common/font-awesome/css/font-awesome.min.css'}" rel="stylesheet">
<link href="../../static/admin/main/css/animate.css" th:href="@{'/admin/main/css/animate.css'}" rel="stylesheet">
<link href="../../static/admin/main/css/style.css" th:href="@{'/admin/main/css/style.css'}" rel="stylesheet">
<link href="../../static/common/bootstrap-table-master/bootstrap-table.min.css" th:href="@{'/common/bootstrap-table-master/bootstrap-table.min.css'}" rel="stylesheet">
<link href="../../static/common/bootstrap-datepicker-master/css/bootstrap-datepicker.min.css" th:href="@{'/common/bootstrap-datepicker-master/css/bootstrap-datepicker.min.css'}" rel="stylesheet">
<style type="text/css">
.float {
position: fixed;
right: 50px;
top: 26px;
}
[v-cloak] {
display: none;
}
.ibox-content {
/*height: -webkit-fill-available !important;*/
}
.add-module {
position: absolute;
right: 15px;
top: 6px;
}
.module-box {
display: flex;
flex-wrap: wrap;
}
/*中间列表*/
.module-div {
margin: 15px;
width: 200px;
height: 200px;
border: 1px solid #efefef;
}
.module-div .module-div-title {
margin-left: 10px;
}
.module-div .module-div-img {
width: 180px;
height: 100px;
text-align: center;
margin: 0 auto;
margin-bottom: 24px;
}
.module-div .module-div-img img {
width: 100%;
height: 100%;
}
.module-div .module-div-btn {
text-align: center;
}
/*缩略图上传*/
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.el-upload__input {
display: none !important;
}
.avatar-uploader-icon {
line-height: 178px !important;
}
</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" id="main" v-cloak>
<div class="row">
<div class="col-sm-3">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>区域列表</h5>
<div class="ibox-tools">
</div>
</div>
<div class="ibox-content">
<div class="row row-lg">
<div class="col-sm-12">
<div class="example-wrap">
<div class="example">
<div>
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false" node-key="id" :default-expanded-keys="idArr">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span @click="addParkHandle(node.label,node)">{{ node.label }}</span>
</span>
</el-tree>
<!-- 添加模块弹框 start-->
<el-dialog :title="mktitle" :visible.sync="MkDialogVisible" :modal-append-to-body='false' :append-to-body="true" stripe border fit height="350" style="width:100%">
<el-form :model="MkForm" ref="MkFormRef" class="demo-ruleForm" :rules="MkFormRules">
<el-form-item label="园区大脑名称:" label-width="120px" prop="screenName">
<el-input v-model="MkForm.screenName" autocomplete="off" placeholder="请填写名称"></el-input>
</el-form-item>
<el-form-item label="园区大脑地址:" label-width="120px" prop="screenUrl">
<el-input v-model="MkForm.screenUrl" autocomplete="off" placeholder="请填写地址"></el-input>
</el-form-item>
<el-form-item label="设备默认:" label-width="120px" prop="beused">
<el-radio-group v-model="MkForm.beused" @change="changeMkType">
<el-radio v-cloak :label="1">是</el-radio>
<el-radio v-cloak :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="缩略图上传:" label-width="120px" prop="imageUrl">
<el-upload ref="upload" action="http://61.174.54.85:8001/nvr/image/upload" name="imgFile" list-type="picture-card" :limit="1" :file-list="dialogImageUrl" :before-upload="beforeUpload" :on-preview="handlePictureCardPreview" :on-success="handleSuccess" :on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button v-cloak size="small" @click="mkResetForm('MkFormRef')">取消</el-button>
<el-button v-cloak size="small" type="primary" ref="submit-btn" @click="mkSubmitForm('MkFormRef')">确定
</el-button>
</div>
</el-dialog>
<!-- 添加模块弹框 end-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="ibox float-e-margins">
<div class="ibox-title" style="position: relative;">
<h5>大脑模块管理</h5>
<div class="add-module">
<el-button title="增加" size="small" type="primary" @click="addMoudule('mkForm')">添加</el-button>
</div>
<div class="ibox-tools">
</div>
</div>
<div class="ibox-content">
<div class="module-box">
<div v-for="(item,index) in mkList" class="module-div" v-if="mkList">
<div class="module-div-title">
<h4>{{item.screenName}}</h4>
</div>
<div class="module-div-img">
<img :src="'http://61.174.54.85:8001/nvr/image/' + item.imageUrl" alt="缩略图">
</div>
<div class="module-div-btn">
<el-button type="primary" plain size="small" @click="editMoudule(item)">编辑</el-button>
<el-button type="danger" plain size="small" @click="delMoudule(item.id)">删除</el-button>
</div>
</div>
<div v-if="!mkList || mkList.length == 0 ">暂无数据</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../static/plugins/jquery/jquery-3.1.1.js" th:src="@{'/plugins/jquery/jquery-3.1.1.js'}" type="text/javascript"></script>
<script src="../static/plugins/bootstrap/js/bootstrap.min.js" th:src="@{'/plugins/bootstrap/js/bootstrap.min.js'}"></script>
<script src="../static/plugins/hplus/js/plugins/treeview/bootstrap-treeview.js" th:src="@{'/plugins/hplus/js/plugins/treeview/bootstrap-treeview.js'}"></script>
<!-- Bootstrap table -->
<script src="../static/common/bootstrap-table-master/bootstrap-table.min.js" th:src="@{'/common/bootstrap-table-master/bootstrap-table.min.js'}"></script>
<script src="../static/common/bootstrap-table-master/extensions/export/bootstrap-table-export.js" th:src="@{'/common/bootstrap-table-master/extensions/export/bootstrap-table-export.js'}"></script>
<script src="../static/common/bootstrap-table-master/tableExport.js" th:src="@{'/common/bootstrap-table-master/tableExport.js'}"></script>
<script src="../static/common/bootstrap-table-master/locale/bootstrap-table-zh-CN.min.js" th:src="@{'/common/bootstrap-table-master/locale/bootstrap-table-zh-CN.min.js'}"></script>
<!-- Data picker -->
<script src="../static/common/bootstrap-datepicker-master/js/bootstrap-datepicker.min.js" th:src="@{'/common/bootstrap-datepicker-master/js/bootstrap-datepicker.min.js'}"></script>
<script src="../../static/common/layer/layer.js" th:src="@{'/common/layer/layer.js'}" type="text/javascript"></script>
<script src="../../static/admin/main/js/content.js" th:src="@{'/admin/main/js/content.js'}" type="text/javascript"></script>
<script src="../plug-in/element-ui/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="../plug-in/element-ui/index.css">
<!-- 引入组件库 -->
<script src="../plug-in/element-ui/index.js"></script>
<script src="../plug-in/element-ui/axios.min.js"></script>
<script src="../plug-in/element-ui/qs.min.js"></script>
<script>
var globalId;
var globalParam;
new Vue({
el: '#main',
data: function() {
return {
data: [],
defaultProps: {
children: 'children',
label: 'name'
},
visible2: false,
searchInput: '',
idArr: [],
dialogFormVisible: false,
alertVisible: false,
modifyType: '',
title: '',
areaId: '',
addParentData: {},
addChildData: {},
form: {
areaName: '',
areaType: '',
remark: '',
regionId: ''
},
empty: {
areaName: '',
areaType: '',
remark: ''
},
formLabelWidth: '120px',
rules: {
areaType: [{
required: true,
message: '请选择区域类型',
trigger: 'blur'
}],
areaName: [{
required: true,
message: '请输入区域名称',
trigger: 'blur'
}, {
min: 1,
max: 25,
message: '长度在 1 到 25 个字符',
trigger: 'blur'
}],
remark: [{
min: 0,
max: 200,
message: '长度在 0 到 200 个字符',
trigger: 'blur'
}]
},
MkDialogVisible: false,
disabled: false,
MkForm: {
parkId: '',
id: '',
screenName: '',
screenUrl: '',
beused: '',
imageUrl: ''
},
MkFormRules: {
screenName: [{
required: true,
message: '请输入大脑名称',
trigger: 'blur'
}],
screenUrl: [{
required: true,
message: '请输入大脑地址',
trigger: 'blur'
}],
beused: [{
required: true,
message: '请选择默认配置',
trigger: 'blur'
}],
imageUrl: [{
required: true,
message: '请上传缩略图',
trigger: 'blur'
}]
},
// imageUrl: '',
mktitle: '新增/编辑大脑',
businessLicenseImages: '',
dialogVisible: false,
dialogImageUrl: [],
fileList: [],
_parkId: '',
mkList: [],
mkListShow: false
};
},
methods: {
addParkHandle(val, node) {
// console.log('node', node)
if (node.level < 4) { //到第四极(园区层)，就不请求接口了
let that = this
axios.get('http://61.174.54.120:9000/parkcontroller/dataApi/getParksByCounty', {
params: {
county: val
}
}).then(function(res) {
let child = []
res.data.data.forEach(item => {
child.push({
pid: item.parkId,
name: item.parkName
})
})
if (res.data.success) {
that.data[0].children.forEach(item => {
item.children.forEach(item1 => {
if (item1.name == val) {
item1.children = child
}
})
})
}
});
};
if (node.level == 4) { //园区层级，根据parkId请求右侧
this._parkId = node.data.pid;
// console.log('this._parkId',this._parkId)
this.MkForm.parkId = node.data.pid;
//模板列表
this.MouduleList(this._parkId)
}
},
//模板列表
MouduleList(parkId) {
axios.get('/usercenter/screen/' + parkId).then(res => {
this.mkList = res.data.data;
});
},
//新增模块
addMoudule(formName) { //弹框
// this.clearform();
if (this.$refs[formName]) {
this.$refs[formName].resetFields(); //清空校验
}
this.MkDialogVisible = true;
},
//编辑模块
editMoudule(item) {
// console.log('item', item)
this.MkDialogVisible = true;
//请求编辑接口-
this.MkForm.id = item.id;
this.MkForm.screenName = item.screenName;
this.MkForm.screenUrl = item.screenUrl;
this.MkForm.beused = item.beused;
this.MkForm.imageUrl = item.imageUrl;
this.dialogImageUrl = [{
url: 'http://61.174.54.85:8001/nvr/image/' + item.imageUrl
}];
},
//删除模块
delMoudule(id) {
let _this = this;
_this.$confirm("是否删除?", "提示", {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.delete('/usercenter/screen/' + id).then(res => {
// console.log('res', res)
if (res.data.success == true) {
_this.$message({
type: 'success',
message: '删除成功!'
});
_this.MouduleList(_this._parkId);
} else {
_this.$message({
type: 'error',
message: '删除失败!'
});
}
});
});
},
mkResetForm(formName) { //取消
this.MkDialogVisible = false;
// this.clearform();
if (this.$refs[formName]) {
this.$refs[formName].resetFields(); //清空校验
}
},
mkSubmitForm(formName) { //保存模块
let _this = this;
// console.log('_this.MkForm',_this.MkForm)
this.$refs[formName].validate((valid) => {
if (valid) { //校验成功
if (!_this.MkForm.id) { //新增操作
axios.post('/usercenter/screen', _this.MkForm).then(function(res) {
// console.log('res',res)
if (res.status == 200) {
_this.$message({
type: 'success',
message: '保存成功!'
});
_this.MouduleList(_this._parkId);
_this.MkDialogVisible = false;
} else {
_this.$message({
type: 'error',
message: '保存失败!'
});
}
});
//----------------------
} else {
// console.log('编辑');
// console.log('_this.MkForm', _this.MkForm)
axios.post('/usercenter/screen/edit', _this.MkForm).then(function(res) {
if (res.data.success === true) {
_this
_this.$message({
type: 'success',
message: '保存成功!'
});
_this.MouduleList(_this._parkId);
_this.MkDialogVisible = false;
}
});
}
} else {
// console.log('error submit!!');
return false;
}
});
},
// clearform() { //清除内容
// Object.keys(this.MkForm).forEach((key) => {
// this.MkForm[key] = null
// });
// },
//模块设备是否默认
changeMkType: function(value) {
this.form.beused = value;
},
// 缩略图上传
handleAvatarSuccess(res, file) {
// this.imageUrl = URL.createObjectURL(file.raw);
this.MkForm.imageUrl = URL.createObjectURL(file.raw);
},
beforeUpload: function(file) {
const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
//const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = true;
if (!isJPG) {
this.$message.error('上传图片只能是 JPG 格式!');
}
// if (!isLt2M) {
// this.$message.error('上传图片大小不能超过 2MB!');
// }
return isJPG && isLt2M;
},
handlePictureCardPreview(file) {
// console.log("this.dialogImageUrl", file.url)
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleSuccess(res, file) {
if (res.code === 200) {
this.$message({
type: 'success',
message: '图片上传成功',
duration: 6000
});
this.MkForm.imageUrl = res.ObjectId; //返回ObjectId用于保存
}
},
handleRemove(file, fileList) {
// console.log('fileList', fileList)
this.MkForm.imageUrl = '';
},
// 缩略图end
handleNodeClick: function(data) {
},
resetInput: function(data) {
this.searchInput = '';
},
onSubmit: function(data) {
let that = this;
//if(that.searchInput !== globalParam && that.searchInput !=='' ){
if (that.searchInput !== globalParam) {
globalParam = that.searchInput;
axios.get('find', {
params: {
areaName: that.searchInput
}
}).then(function(res) {
that.visible2 = false;
that.data = res.data.data;
that.idArr = [];
that.data.forEach(province => {
province.children.forEach(city => {
city.children.forEach(o => {
that.idArr.push(o.id); //展开指定层级
})
})
});
})
}
},
submitForm: function(formName) { //表单提交
let _this = this;
this.$refs[formName].validate((valid) => {
if (valid) { //校验成功
if (_this.modifyType == 'add') { //新增操作
axios.post('create', _this.form).then(function(res) {
if (res.data.success === true) {
_this.dialogFormVisible = false;
this.$message({
type: 'success',
message: '保存成功!'
});
_this.form.areaId = res.data.data;
_this.form.id = _this.form.areaId;
_this.form.name = _this.form.areaName;
_this.append(_this.form, _this.addParentData);
}
});
} else {
axios.post('edit', { //修改操作
areaId: _this.areaId,
areaName: _this.form.areaName,
areaType: _this.form.areaType,
remark: _this.form.remark,
regionId: _this.form.regionId
}).then(function(res) {
if (res.data.success === true) {
_this.dialogFormVisible = false;
this.$message({
type: 'success',
message: '保存成功!'
});
}
});
}
} else {
// console.log('error submit!!');
return false;
}
});
},
leftTop: function(obj) { //窗口居中
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var scrolltop = $(document).scrollTop();
var scrollleft = $(document).scrollLeft();
var objLeft = (screenWidth - obj.width()) / 2 + scrollleft;
var objTop = (screenHeight - 500) / 2 + scrolltop;
obj.css({
left: objLeft + 'px',
top: objTop + 'px'
});
},
append(childData, data) { //添加节点
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.unshift(childData); //往树的开头添加子节点
},
remove(node, id) { //移除节点
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === id);
children.splice(index, 1);
},
},
mounted: function() {
let that = this;
axios.get('all').then(function(res) {
// that.data = res.data.data;
that.data = []
res.data.data.forEach(item => {
if (item.id == 330000 && item.name == '浙江省') {
that.data.push(item)
}
})
that.data.forEach(
m => {
that.idArr.push(m.id) //默认展开到市级
});
});
$(window).scroll(function() { //绑定弹窗dialog的窗口居中属性
that.leftTop($('.dialogs'));
});
}
})
</script>
</body>
</html>
