点击刷新
<!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>
© 著作权归作者所有
举报
发表评论
0/200
