侧边栏bug和基本信息模块

main
严飞永 3 weeks ago
parent 5af939f6a1
commit 99dd539df8

@ -60,6 +60,7 @@
"vue-count-to": "1.0.13", "vue-count-to": "1.0.13",
"vue-cropper": "0.5.5", "vue-cropper": "0.5.5",
"vue-meta": "2.4.0", "vue-meta": "2.4.0",
"vue-quill-editor": "^3.0.6",
"vue-router": "3.4.9", "vue-router": "3.4.9",
"vuedraggable": "2.24.3", "vuedraggable": "2.24.3",
"vuex": "3.6.0", "vuex": "3.6.0",

@ -70,6 +70,8 @@
height: 100%; height: 100%;
width: 100% !important; width: 100% !important;
background-image: url(../images/侧边栏2.png); background-image: url(../images/侧边栏2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
} }
.el-menu-item, .el-submenu__title { .el-menu-item, .el-submenu__title {

@ -25,12 +25,12 @@
<i class="el-icon-caret-bottom"/> <i class="el-icon-caret-bottom"/>
</div> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<router-link to="/user/profile"> <!-- <router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item> <el-dropdown-item>个人中心</el-dropdown-item>
</router-link> </router-link> -->
<el-dropdown-item @click.native="setting = true"> <!-- <el-dropdown-item @click.native="setting = true">
<span>布局设置</span> <span>布局设置</span>
</el-dropdown-item> </el-dropdown-item> -->
<el-dropdown-item divided @click.native="logout"> <el-dropdown-item divided @click.native="logout">
<span>退出登录</span> <span>退出登录</span>
</el-dropdown-item> </el-dropdown-item>

@ -4,7 +4,6 @@
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
@toggleClick="toggleSideBar" /> @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" /> <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
</div> </div>
</div> </div>
</template> </template>
@ -113,10 +112,6 @@ export default {
float: left; float: left;
} }
.topmenu-container {
position: absolute;
left: 50px;
}
.errLog-container { .errLog-container {
display: inline-block; display: inline-block;

@ -2,7 +2,7 @@ import Cookies from 'js-cookie'
const state = { const state = {
sidebar: { sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, opened: true,
withoutAnimation: false, withoutAnimation: false,
hide: false hide: false
}, },
@ -15,18 +15,18 @@ const mutations = {
if (state.sidebar.hide) { if (state.sidebar.hide) {
return false; return false;
} }
state.sidebar.opened = !state.sidebar.opened // state.sidebar.opened = !state.sidebar.opened
state.sidebar.withoutAnimation = false // state.sidebar.withoutAnimation = false
if (state.sidebar.opened) { // if (state.sidebar.opened) {
Cookies.set('sidebarStatus', 1) // Cookies.set('sidebarStatus', 1)
} else { // } else {
Cookies.set('sidebarStatus', 0) // Cookies.set('sidebarStatus', 0)
} // }
}, },
CLOSE_SIDEBAR: (state, withoutAnimation) => { CLOSE_SIDEBAR: (state, withoutAnimation) => {
Cookies.set('sidebarStatus', 0) // Cookies.set('sidebarStatus', 0)
state.sidebar.opened = false // state.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation // state.sidebar.withoutAnimation = withoutAnimation
}, },
TOGGLE_DEVICE: (state, device) => { TOGGLE_DEVICE: (state, device) => {
state.device = device state.device = device

@ -0,0 +1,3 @@
<template>
<div>1234</div>
</template>

@ -1,351 +1,330 @@
<template> <template>
<div> <div>
<!-- 表单查询项 --> <!-- 表单查询项 -->
<div class="headerbox"> <div v-if="!previewMode" class="headerbox">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="200"> <el-form size="small" :inline="true" label-width="200">
<el-row> <el-row>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="文件标题" prop="postName" style="width: 100%;"> <el-form-item label="文件标题" style="width: 100%;">
<el-input v-model="queryParams.postName" placeholder="请输入模板标题" clearable <el-input placeholder="请输入模板标题" clearable />
@keyup.enter.native="handleQuery" /> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="5">
<el-col :span="5"> <el-form-item label="发布时间">
<el-form-item label="发布时间" prop=""> <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="8">
<el-col :span="8"> <el-form-item>
<el-form-item> <el-button type="primary" icon="el-icon-search" size="mini">查询</el-button>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button> <el-button icon="el-icon-refresh" size="mini">重置</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button> </el-form-item>
</el-form-item> </el-col>
</el-col> </el-row>
</el-row> </el-form>
</div>
<!-- 表格内容区 -->
<div v-if="!previewMode" class="tablebox">
<!-- 按钮行 -->
<div class="tablebtntwo">
<el-button type="primary" icon="el-icon-upload2" size="mini" @click="handleExport"></el-button>
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"></el-button>
</div>
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" prop="id" />
<el-table-column label="文件标题" align="center" prop="title" />
<el-table-column label="发布单位" align="center" prop="unit" />
<el-table-column label="发布人" align="center" prop="author" />
<el-table-column label="发布时间" align="center" prop="date" />
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" style="color: gray;" @click="handlePreview(scope.row)"></el-button>
<el-button size="mini" type="text" @click="handleEdit(scope.row)"></el-button>
<el-button size="mini" type="text" style="color: #F25353;" @click="handleDelete(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" /> -->
</div>
</el-form> <!-- 新增/编辑的弹窗 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="文件标题">
<el-input v-model="form.title" placeholder="请输入文件标题" />
</el-form-item>
<el-form-item label="发布时间">
<el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
</el-form-item>
<el-form-item label="发布单位">
<el-input v-model="form.unit" placeholder="请输入发布单位" />
</el-form-item>
<el-form-item label="发布人">
<el-input v-model="form.author" placeholder="请输入发布人" />
</el-form-item>
<el-form-item label="内容">
<!-- 富文本编辑器 -->
<quill-editor class="editor" v-model="form.content" :options="editorOption"></quill-editor>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div> </div>
<!-- 表格内容区 --> </el-dialog>
<div class="tablebox">
<!-- 导出行 --> <!-- 预览的展示区 -->
<div class="tablebtntwo"> <div v-if="previewMode" class="previewbox">
<el-row :gutter="10" class="mb8"> <!-- 按钮区域 -->
<el-col :span="1.5"> <div class="previewhead">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" <div class="headone">预览</div>
v-hasPermi="['system:post:add']">新增</el-button> <div class="headtwo">
</el-col> <el-button type="primary" size="mini" icon="el-icon-upload2" @click="handleReturn"></el-button>
<el-col :span="1.5"> <el-button type="primary" size="mini" icon="el-icon-back" @click="handleReturn"></el-button>
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
v-hasPermi="['system:post:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
v-hasPermi="['system:post:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
v-hasPermi="['system:post:export']">导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</div> </div>
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" prop="postId" />
<el-table-column label="文件标题" align="center" prop="postName" />
<el-table-column label="发布单位" align="center" prop="postCode" />
<el-table-column label="发布人" align="center" prop="postSort" />
<el-table-column label="发布时间" align="center" prop="postSort" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-view" @click="getInfo(scope.row)"
v-hasPermi="['system:post:detail']">预览</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['system:post:edit']">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['system:post:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
</div> </div>
<!-- 标题栏 -->
<!-- 添加或修改项目对话框 --> <div class="previewnick">
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <h1>{{ previewData.title }}</h1>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> </div>
<el-form-item label="项目名称" prop="postName"> <!-- 发布信息栏 -->
<el-input v-model="form.postName" placeholder="请输入项目名称" /> <div class="previewinfo">
</el-form-item> <div class="previewinfoitem">发布时间{{ previewData.date }}</div>
<el-form-item label="项目编码" prop="postCode"> <div class="previewinfoitem">发布单位{{ previewData.unit }}</div>
<el-input v-model="form.postCode" placeholder="请输入编码名称" /> <div class="previewinfoitem">发布人{{ previewData.author }}</div>
</el-form-item> </div>
<el-form-item label="项目顺序" prop="postSort"> <!-- 内容区域 -->
<el-input-number v-model="form.postSort" controls-position="right" :min="0" /> <div class="previewcontent">
</el-form-item> <quill-editor class="editor preview-editor" v-model="previewData.content" :options="previewEditorOption" readonly></quill-editor>
<el-form-item label="项目状态" prop="status"> </div>
<el-radio-group v-model="form.status">
<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label
}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<!-- 批量导入对话框 :headers="upload.headers" -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls"
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<!-- <div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
</div> -->
<span>仅允许导入xlsxlsx格式文件</span>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm"> </el-button>
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
</div> </div>
</template> </div>
</template>
<script>
import { listPost, getPost, delPost, addPost, updatePost } from "@/api/system/post"; <script>
import { quillEditor } from "vue-quill-editor";
export default { import "quill/dist/quill.core.css";
name: "Post", import "quill/dist/quill.snow.css";
dicts: ['sys_normal_disable'], import "quill/dist/quill.bubble.css";
data() {
return { //
// const toolbarOptions = () => {
loading: true, return [
// ["bold", "italic", "underline", "strike"], // 线 线
ids: [], [{ list: "ordered" }, { list: "bullet" }], //
// [{ indent: "-1" }, { indent: "+1" }], //
single: true, [{ size: ["small", false, "large", "huge"] }], //
// [{ header: [1, 2, 3, 4, 5, 6, false] }], //
multiple: true, [{ color: [] }, { background: [] }], //
// [{ align: [] }], //
showSearch: true, ["clean"], //
// ["link"], //
total: 0, ];
// };
postList: [],
// export default {
title: "", components: { quillEditor },
// data() {
open: false, return {
// loading: false,
queryParams: { postList: [
pageNum: 1, { id: 1, title: '文件1的名称', unit: '单位A', author: '张三', date: '2023-01-01', content: '<p>这是文件1的内容</p>' },
pageSize: 10, { id: 2, title: '文件2的名称', unit: '单位B', author: '李四', date: '2023-02-01', content: '<p>这是文件2的内容</p>' },
postCode: undefined, { id: 3, title: '文件3的名称', unit: '单位C', author: '王五', date: '2023-03-01', content: '<p>这是文件3的内容</p>' }
postName: undefined, ],
status: undefined total: 3,
}, queryParams: {
// pageNum: 1,
form: {}, pageSize: 10
//
rules: {
postName: [
{ required: true, message: "项目名称不能为空", trigger: "blur" }
],
postCode: [
{ required: true, message: "项目编码不能为空", trigger: "blur" }
],
postSort: [
{ required: true, message: "项目顺序不能为空", trigger: "blur" }
]
},
//
upload: {
//
open: false,
//
title: "导入",
//
isUploading: false,
//
updateSupport: 0,
//
// headers: { Authorization: "Bearer " + getToken() },
//
// url: process.env.VUE_APP_BASE_API + "/tc/assetApp/importData"
// url: location.origin + "/api/tc/assetApp/importData"
},
};
},
created() {
this.getList();
},
methods: {
//
handleImport() {
this.upload.open = true;
},
//
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
//
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
this.getList();
},
//
submitFileForm() {
this.$refs.upload.submit();
},
/** 查询项目列表 */
getList() {
this.loading = true;
listPost(this.queryParams).then(response => {
this.postList = response.rows;
this.total = response.total;
this.loading = false;
});
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
postId: undefined,
postCode: undefined,
postName: undefined,
postSort: 0,
status: "0",
remark: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
}, },
// dialogVisible: false,
handleSelectionChange(selection) { dialogTitle: '新增',
this.ids = selection.map(item => item.postId) form: {
this.single = selection.length != 1 id: null,
this.multiple = !selection.length title: '',
date: '',
unit: '',
author: '',
content: ''
}, },
/** 新增按钮操作 */ rules: {
handleAdd() { title: [{ required: true, message: '请输入文件标题', trigger: 'blur' }],
this.reset(); date: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
this.open = true; unit: [{ required: true, message: '请输入发布单位', trigger: 'blur' }],
this.title = "添加项目"; author: [{ required: true, message: '请输入发布人', trigger: 'blur' }]
}, },
/** 修改按钮操作 */ editorOption: {
handleUpdate(row) { placeholder: "请输入内容",
this.reset(); modules: {
const postId = row.postId || this.ids toolbar: {
getPost(postId).then(response => { container: toolbarOptions(),
this.form = response.data; },
this.open = true; },
this.title = "修改项目";
});
}, },
/** 详情按钮操作 */ previewMode: false, //
getInfo(row) { previewData: {}, //
this.$store.commit("SET_CRUMBS", this.$route.meta.title + "详情"); previewEditorOption: {
const postIds = row.postId || this.ids; readOnly: true,
this.$router.push({ path: `/manage-info/${postIds}` }); modules: {
toolbar: false, //
},
}, },
/** 提交按钮 */ };
submitForm: function () { },
this.$refs["form"].validate(valid => { methods: {
if (valid) { handleAdd() {
if (this.form.postId != undefined) { this.dialogTitle = '新增';
updatePost(this.form).then(response => { this.dialogVisible = true;
this.$modal.msgSuccess("修改成功"); this.form = { id: null, title: '', date: '', unit: '', author: '', content: '' };
this.open = false; },
this.getList(); handleEdit(row) {
}); this.dialogTitle = '编辑';
} else { this.dialogVisible = true;
addPost(this.form).then(response => { this.form = { ...row };
this.$modal.msgSuccess("新增成功"); },
this.open = false; handleDelete(row) {
this.getList(); this.$confirm('确定删除该文件吗?', '提示', {
}); confirmButtonText: '确定',
} cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.postList = this.postList.filter(item => item.id !== row.id);
this.total -= 1;
this.$message({ type: 'success', message: '删除成功!' });
});
},
handlePreview(row) {
this.previewMode = true;
this.previewData = { ...row };
this.previewData.content = row.content; // HTML
},
handleReturn() {
this.previewMode = false;
this.previewData = {};
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
if (this.form.id) {
const index = this.postList.findIndex(item => item.id === this.form.id);
this.postList.splice(index, 1, this.form);
} else {
this.form.id = this.postList.length + 1;
this.postList.push(this.form);
this.total += 1;
} }
}); this.dialogVisible = false;
}, this.$message({ type: 'success', message: '操作成功!' });
/** 删除按钮操作 */ }
handleDelete(row) { });
const postIds = row.postId || this.ids; },
this.$modal.confirm('是否确认删除项目编号为"' + postIds + '"的数据项?' + '删除这条信息之后有可能找不回来了,请思考一下哟!').then(function () { cancel() {
return delPost(postIds); this.dialogVisible = false;
}).then(() => { },
this.getList(); handleSelectionChange(selection) {
this.$modal.msgSuccess("删除成功"); console.log(selection);
}).catch(() => { }); },
}, handleExport() {
/** 导出按钮操作 */ this.$message({ type: 'info', message: '导出功能待实现' });
handleExport() { },
this.download('system/post/export', { extractTextContent(html) {
...this.queryParams const tempDiv = document.createElement('div');
}, `post_${new Date().getTime()}.xlsx`) tempDiv.innerHTML = html;
} return tempDiv.textContent || tempDiv.innerText || '';
} }
};
</script>
<style scoped>
.headerbox {
background-color: #fff;
border-radius: .5rem;
padding: 1rem;
margin: .5rem;
border: 1px solid #eee;
}
.tablebox {
background-color: #fff;
border-radius: .5rem;
padding: 1rem;
margin: .5rem;
border: 1px solid #eee;
}
.tablehead {
display: flex;
justify-content: space-between;
align-items: center;
}
.headbtn {
display: flex;
} }
};
.tablebtntwo { </script>
margin-top: 1rem;
margin-bottom: 1rem; <style scoped>
} .headerbox {
</style> background-color: #fff;
border-radius: .5rem;
padding: 1rem;
margin: .5rem;
border: 1px solid #eee;
}
.tablebox {
background-color: #fff;
border-radius: .5rem;
padding: 1rem;
margin: .5rem;
border: 1px solid #eee;
}
.tablebtntwo {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 1rem;
margin-bottom: 1rem;
}
.editor {
height: 300px;
margin-bottom: 50px;
}
.previewbox {
width: 90%;
height: auto;
margin-left: 5%;
margin-top: .3rem;
display: flex;
flex-direction: column;
padding: 1rem;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.previewhead {
width: 100%;
height: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.headtwo {
display: flex;
gap: .5rem;
}
.previewnick {
margin-top: .3rem;
width: 100%;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 3px solid #2B62F1;
color: #2B62F1;
}
.previewinfo {
display: flex;
gap: 1rem;
justify-content: flex-start;
margin-top: 1rem;
}
.previewcontent {
margin-top: 1rem;
}
/* 去掉预览模式下编辑器的边框 */
.preview-editor ::v-deep .ql-container.ql-snow {
border: none !important;
}
.preview-editor ::v-deep .ql-editor {
padding: 0 0 !important;
}
.preview-editor ::v-deep .ql-editor {
pointer-events: none; /* 禁止鼠标交互 */
user-select: none; /* 禁止文本选择 */
}
</style>

@ -307,10 +307,10 @@ export default {
}, },
handleAddBuilding() { handleAddBuilding() {
// //
if (!this.buildingForm.buildingNumber) { // if (!this.buildingForm) {
this.$message.error('请填写楼栋编号'); // this.$message.error('');
return; // return;
} // }
// dynamicTags // dynamicTags
this.dynamicTags.push(this.buildingForm.buildingNumber + '栋'); this.dynamicTags.push(this.buildingForm.buildingNumber + '栋');

@ -18,7 +18,7 @@
<!-- 视频 --> <!-- 视频 -->
<div class="image-container"> <div class="image-container">
<div v-for="(image, index) in images" :key="index" class="image-box"> <div v-for="(image, index) in images" :key="index" class="image-box">
<img :src="image.src" alt="项目录像" class="image"> <img :src="image.src" alt="现场实况" class="image">
<!-- 播放按钮 --> <!-- 播放按钮 -->
<div class="player-button"> <div class="player-button">
<img src="../../../assets/images/detailsicon/icon-bf@2x (1).png" alt=""> <img src="../../../assets/images/detailsicon/icon-bf@2x (1).png" alt="">
@ -27,7 +27,9 @@
<div class="close-button" @click="removeImage(index)"> <div class="close-button" @click="removeImage(index)">
<img src="../../../assets/images/detailsicon/icon-关闭@2x.png" alt=""> <img src="../../../assets/images/detailsicon/icon-关闭@2x.png" alt="">
</div> </div>
<!-- 播放按钮 --> <!-- 是否在线 -->
<div v-if="image.isOnline" class="online-status online">线</div>
<div v-else class="online-status offline">离线</div>
</div> </div>
</div> </div>
</div> </div>
@ -38,16 +40,18 @@ export default {
data() { data() {
return { return {
images: [ images: [
{ src: '' }, { src: 'https://picsum.photos/300/200?random=1', isOnline: true },
{ src: '' }, { src: 'https://picsum.photos/300/200?random=2', isOnline: false },
{ src: '' }, { src: 'https://picsum.photos/300/200?random=3', isOnline: true },
// //
] ]
}; };
}, },
methods: { methods: {
removeImage(index) { removeImage(index) {
this.images.splice(index, 1); if (confirm('确定要删除该实况吗?')) {
this.images.splice(index, 1);
}
} }
} }
}; };
@ -145,4 +149,23 @@ export default {
width: 4.19rem; width: 4.19rem;
height: 4.19rem; height: 4.19rem;
} }
.online-status {
position: absolute;
top: 1rem;
right: 1.3rem;
padding: 0.2rem 0.5rem;
font-size: 0.8rem;
color: white;
box-shadow: 0rem 0.13rem 0.31rem 0rem rgba(0, 0, 0, 0.3);
border-radius: 0.63rem 0.63rem 0.63rem 0.63rem
}
.online-status.online {
background: #0DB770;
}
.online-status.offline {
background: #E34242;
}
</style> </style>

@ -7,18 +7,8 @@
<span>月度进展信息</span> <span>月度进展信息</span>
</div> </div>
<div class="topright" style="visibility: hidden;"> <div class="topright" style="visibility: hidden;">
<el-button type="primary" size="medium" plain <el-button></el-button>
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;"> <el-button></el-button>
<img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
编辑
</el-button>
<el-button type="primary" size="medium" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
导出
</el-button>
</div> </div>
</div> </div>
<!-- 内容区 --> <!-- 内容区 -->

@ -349,7 +349,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: .7rem; font-size: .7rem;
z-index: 999; z-index: 98;
} }
.map-thumbnail { .map-thumbnail {

@ -1,9 +1,8 @@
<template> <template>
<div class="container"> <div class="container">
<!-- 顶部操作栏 -->
<!-- 内容区域 --> <!-- 内容区域 -->
<div class="main-content"> <div class="main-content">
<!-- 右侧地图缩略图 --> <!-- 地图缩略图 -->
<div class="map-thumbnail"> <div class="map-thumbnail">
<div id="mars2dContainerSSS" class="mars2d-container"></div> <div id="mars2dContainerSSS" class="mars2d-container"></div>
</div> </div>
@ -52,8 +51,8 @@ export default {
] ]
}, },
], ],
center: { lat: 31.324918, lng: 120.618391 }, center: { lat: 31.324918, lng: 120.618391 },
zoom: 9, zoom: 10,
zoomControl: true, zoomControl: true,
}, },
map: null, // map: null, //
@ -74,7 +73,7 @@ export default {
addDistrictsLayer() { addDistrictsLayer() {
const geoJsonLayer = new mars2d.layer.GeoJsonLayer({ const geoJsonLayer = new mars2d.layer.GeoJsonLayer({
name: "苏州市各区", name: "苏州市各区",
url: "http://data.mars2d.cn/file/geojson/areas/100000_full.json", url: "https://geo.datav.aliyun.com/areas_v3/bound/320500_full.json",
symbol: { symbol: {
type: "polygon", type: "polygon",
styleOptions: { styleOptions: {
@ -97,25 +96,17 @@ export default {
console.log("数据加载完成", event); console.log("数据加载完成", event);
const arrdata = [ const arrdata = [
{ name: "辽宁省", Y: 41.485959939, X: 124.049036594, value: 6, id: 0 }, { name: "姑苏区", Y: 31.318468, X: 120.618391, value: 15, id: 0 },
{ name: "天津市", Y: 39.292278417, X: 117.337698238, value: 1, id: 1 }, { name: "吴中区", Y: 31.285618, X: 120.641166, value: 10, id: 1 },
{ name: "河北省", Y: 38.887537102, X: 115.05608039, value: 3, id: 2 }, { name: "相城区", Y: 31.385618, X: 120.581166, value: 8, id: 2 },
{ name: "山东省", Y: 36.384634338, X: 118.335456608, value: 8, id: 3 }, { name: "吴江区", Y: 31.165618, X: 120.641166, value: 12, id: 3 },
{ name: "江苏省", Y: 31.949468221, X: 119.175534669, value: 12, id: 4 }, { name: "工业园区", Y: 31.305618, X: 120.741166, value: 7, id: 4 },
{ name: "上海市", Y: 31.205117603, X: 121.507670825, value: 1, id: 5 }, { name: "高新区", Y: 31.325618, X: 120.541166, value: 5, id: 5 },
{ name: "浙江省", Y: 29.249913493, X: 120.438160114, value: 7, id: 6 }, { name: "虎丘区", Y: 31.335618, X: 120.561166, value: 3, id: 6 },
{ name: "福建省", Y: 26.032479861, X: 118.134283206, value: 4, id: 7 }, { name: "常熟市", Y: 31.655618, X: 120.751166, value: 6, id: 7 },
{ name: "广东省", Y: 23.69235645, X: 113.489506429, value: 18, id: 8 }, { name: "张家港市", Y: 31.865618, X: 120.551166, value: 4, id: 8 },
{ name: "广西壮族自治区", Y: 23.806009465, X: 108.79016159, value: 6, id: 9 }, { name: "昆山市", Y: 31.385618, X: 120.961166, value: 9, id: 9 },
{ name: "海南省", Y: 19.210592585, X: 109.774303805, value: 11, id: 10 }, { name: "太仓市", Y: 31.555618, X: 121.121166, value: 2, id: 10 },
{ name: "云南省", Y: 24.224322869, X: 101.862567546, value: 1, id: 11 },
{ name: "四川省", Y: 30.627387401, X: 102.694776433, value: 2, id: 12 },
{ name: "重庆市", Y: 30.057271884, X: 107.874570298, value: 1, id: 13 },
{ name: "湖北省", Y: 30.975494014, X: 112.27112659, value: 14, id: 14 },
{ name: "湖南省", Y: 27.610006298, X: 111.708571339, value: 2, id: 15 },
{ name: "江西省", Y: 27.613817395, X: 115.721821513, value: 2, id: 16 },
{ name: "安徽省", Y: 31.825459619, X: 117.226379045, value: 7, id: 17 },
{ name: "黑龙江省", Y: 46.951327674, X: 128.132064887, value: 2, id: 18 }
]; ];
this.bindYewuData(event.graphics, arrdata); this.bindYewuData(event.graphics, arrdata);
}); });
@ -123,26 +114,40 @@ export default {
// //
geoJsonLayer.on(mars2d.EventType.click, (event) => { geoJsonLayer.on(mars2d.EventType.click, (event) => {
const graphic = event.graphic; const graphic = event.graphic;
this.map.fitBounds(graphic.getBounds()); if (graphic) {
this.map.fitBounds(graphic.getBounds());
} else {
console.error("Graphic is undefined in click event");
}
}); });
geoJsonLayer.on(mars2d.EventType.mouseover, (event) => { geoJsonLayer.on(mars2d.EventType.mouseover, (event) => {
console.log("Mouseover event:", event); //
const graphic = event.graphic; const graphic = event.graphic;
graphic.setStyle({ if (graphic) {
outlineColor: "#666", graphic.setStyle({
outlineWidth: 3, outlineColor: "#666",
fillOpacity: 0.7 outlineWidth: 3,
}); fillOpacity: 0.7
graphic.bringToFront(); });
graphic.bringToFront();
} else {
console.error("Graphic is undefined in mouseover event");
}
}); });
geoJsonLayer.on(mars2d.EventType.mouseout, (event) => { geoJsonLayer.on(mars2d.EventType.mouseout, (event) => {
console.log("Mouseout event:", event); //
const graphic = event.graphic; const graphic = event.graphic;
graphic.setStyle({ if (graphic) {
outlineColor: "white", graphic.setStyle({
outlineWidth: 2, outlineColor: "white",
fillOpacity: 0.5 outlineWidth: 2,
}); fillOpacity: 0.5
});
} else {
console.error("Graphic is undefined in mouseout event");
}
}); });
}, },
// //
@ -212,6 +217,7 @@ export default {
}, },
mounted() { mounted() {
this.initMap(); this.initMap();
console.log('Initializing map with options:', this.mapOptions);
this.addLegend(); // mounted addLegend this.addLegend(); // mounted addLegend
}, },
beforeDestroy() { beforeDestroy() {

@ -46,28 +46,28 @@
{ {
date: '2016-05-02', date: '2016-05-02',
name: '大众电脑生成制造基地', name: '大众电脑生成制造基地',
address: ' 1518 弄', address: '高贸区',
data: '1000', data: '1000',
status: '在建' status: '在建'
}, },
{ {
date: '2016-05-04', date: '2016-05-04',
name: '大众电脑生成制造基地', name: '大众电脑生成制造基地',
address: ' 1517 弄', address: ' 科创区',
data: '1500', data: '1500',
status: '拟建' status: '拟建'
}, },
{ {
date: '2016-05-01', date: '2016-05-01',
name: '大众电脑生成制造基地', name: '大众电脑生成制造基地',
address: ' 1519 弄', address: ' 度假区',
data: '2000', data: '2000',
status: '已建' status: '已建'
}, },
{ {
date: '2016-05-03', date: '2016-05-03',
name: '大众电脑生成制造基地', name: '大众电脑生成制造基地',
address: ' 1516 弄', address: ' 苏相合作区',
data: '2500', data: '2500',
status: '在建' status: '在建'
} }

@ -33,7 +33,7 @@
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input> </el-input>
<div class="login-code"> <div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img" /> <img :src="codeUrl" @click="getCode" class="login-code-img" style="width: 8.56rem;" />
</div> </div>
</el-form-item> </el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:1rem 18.6rem 25px 0px;"></el-checkbox> <el-checkbox v-model="loginForm.rememberMe" style="margin:1rem 18.6rem 25px 0px;"></el-checkbox>

@ -1,8 +1,8 @@
<template> <template>
<div> <div class="bigone">
<!-- 标题 --> <!-- 标题 -->
<div class="containerheadone"> <div class="containerheadone" id="listtop">
<Title :id="9"></Title> <Title :id="9" ></Title>
<el-button type="primary" size="medium" plain <el-button type="primary" size="medium" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;"
@click="goBack"> @click="goBack">
@ -11,7 +11,7 @@
</div> </div>
<div class="containerbody"> <div class="containerbody">
<!-- 目录 --> <!-- 目录 -->
<div class="containerhead"> <div class="containerhead" >
<el-menu :default-active="activeSection" mode="horizontal" @select="scrollToSection" <el-menu :default-active="activeSection" mode="horizontal" @select="scrollToSection"
class="custom-menu"> class="custom-menu">
<el-menu-item v-for="(item, index) in sections" :key="index" :index="item.id" <el-menu-item v-for="(item, index) in sections" :key="index" :index="item.id"
@ -69,13 +69,12 @@
<Others></Others> <Others></Others>
</div> </div>
<!-- 落图实例 --> <!-- 落图实例 -->
<div> <div>
<luotu/> <luotu/>
</div> </div>
<!-- 返回顶部 -->
<!-- <el-backtop target=".backtop"></el-backtop> -->
</div> </div>
<!-- 返回顶部按钮 -->
<el-button icon="el-icon-caret-top" circle id="back-to-top" @click="scrollToTop" plain></el-button>
</div> </div>
</template> </template>
@ -95,7 +94,6 @@ import Projectpicturetwo from '../components/ProjectDetails/Projectpicturetwo.vu
import Others from '../components/ProjectDetails/Others.vue'; import Others from '../components/ProjectDetails/Others.vue';
import luotu from '@/views/components/ProjectDetails/luotugongnengshifan.vue' import luotu from '@/views/components/ProjectDetails/luotugongnengshifan.vue'
export default { export default {
components: { components: {
luotu, luotu,
@ -133,10 +131,6 @@ export default {
projectId: null projectId: null
}; };
}, },
created() {
this.projectId = this.$route.params.id;
this.loadData();
},
methods: { methods: {
loadData() { loadData() {
// projectId // projectId
@ -154,11 +148,14 @@ export default {
} }
}, },
scrollToTop() { scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' }); const basicSection = document.getElementById('listtop');
if (basicSection) {
basicSection.scrollIntoView({ behavior: 'smooth' });
}
}, },
goBack() { goBack() {
this.$router.go(-1); // this.$router.go(-1); //
} },
} }
}; };
</script> </script>
@ -229,7 +226,21 @@ export default {
background-color: #2B62F1; background-color: #2B62F1;
border-bottom: none; border-bottom: none;
} }
.bottombox{
.bottombox {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.bigone {
position: relative;
}
#back-to-top {
position: fixed;
bottom: 5px;
right: 5px;
z-index: 99;
font-size: 18px;
}
</style> </style>

@ -6,7 +6,8 @@
<el-row> <el-row>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="项目名称" prop="postName" style="width: 100%;"> <el-form-item label="项目名称" prop="postName" style="width: 100%;">
<el-input v-model="queryParams.postName" placeholder="请输入项目名称" clearable @keyup.enter.native="handleQuery" /> <el-input v-model="queryParams.postName" placeholder="请输入项目名称" clearable
@keyup.enter.native="handleQuery" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="9"> <el-col :span="9">
@ -18,7 +19,8 @@
<el-col :span="5"> <el-col :span="5">
<el-form-item label="现状分类" prop="status"> <el-form-item label="现状分类" prop="status">
<el-select v-model="queryParams.status" placeholder="现状分类" clearable> <el-select v-model="queryParams.status" placeholder="现状分类" clearable>
<el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" /> <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -47,19 +49,20 @@
<div class="tablehead"> <div class="tablehead">
<div class="headtitle"><span>项目清单</span></div> <div class="headtitle"><span>项目清单</span></div>
<div class="headbtn"> <div class="headbtn">
<el-button type="primary" icon="el-icon-search" @click="downloadTemplate"></el-button> <el-button type="primary" icon="el-icon-download" @click="downloadTemplate"></el-button>
<el-button type="primary" icon="el-icon-download" size="mini" @click="handleImport"></el-button> <el-button type="primary" size="mini" @click="handleImport"></el-button>
</div> </div>
</div> </div>
<!-- 导出行 --> <!-- 导出行 -->
<div class="tablebtntwo"> <div class="tablebtntwo">
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="primary" icon="el-icon-upload2" size="medium" @click="handleExport" v-hasPermi="['system:post:export']"></el-button> <el-button type="primary" icon="el-icon-upload2" size="medium" @click="handleExport"
v-hasPermi="['system:post:export']">导出</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-dropdown @command="handleExportCommand"> <el-dropdown @command="handleExportCommand">
<el-button type="primary" size="medium"> <el-button type="primary" size="medium">
导出材料<i class="el-icon-arrow-down el-icon--right"></i> 导出材料<i class="el-icon-arrow-down el-icon--right"></i>
</el-button> </el-button>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
@ -83,13 +86,17 @@
<el-table-column label="当前状态" align="center" prop="status" /> <el-table-column label="当前状态" align="center" prop="status" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-view" @click="getInfo(scope.row)" v-hasPermi="['system:post:detail']"></el-button> <el-button size="mini" type="text" icon="el-icon-view" @click="getInfo(scope.row)"
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']"></el-button> v-hasPermi="['system:post:detail']">详情</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']"></el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['system:post:edit']">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['system:post:remove']">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
</div> </div>
<!-- 添加或修改项目对话框 --> <!-- 添加或修改项目对话框 -->
@ -106,7 +113,8 @@
</el-form-item> </el-form-item>
<el-form-item label="项目状态" prop="status"> <el-form-item label="项目状态" prop="status">
<el-radio-group v-model="form.status"> <el-radio-group v-model="form.status">
<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio> <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label
}}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
@ -120,7 +128,9 @@
</el-dialog> </el-dialog>
<!-- 批量导入对话框 --> <!-- 批量导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> <el-upload ref="upload" :limit="1" accept=".xlsx, .xls"
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip"> <div class="el-upload__tip text-center" slot="tip">
@ -325,7 +335,7 @@ export default {
}).catch(error => { }).catch(error => {
console.error('删除项目失败', error); console.error('删除项目失败', error);
}); });
}).catch(() => {}); }).catch(() => { });
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {

@ -19,7 +19,7 @@
<el-col :span="5"> <el-col :span="5">
<el-form-item label="现状分类" prop="status"> <el-form-item label="现状分类" prop="status">
<el-select v-model="queryParams.status" placeholder="现状分类" clearable> <el-select v-model="queryParams.status" placeholder="现状分类" clearable>
<el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" <el-option v-for="dict in dict.type.xzfl" :key="dict.value" :label="dict.label"
:value="dict.value" /> :value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -121,7 +121,7 @@
export default { export default {
name: "Post", name: "Post",
dicts: ['sys_normal_disable'], dicts: ['xzfl'],
data() { data() {
return { return {
// //

@ -0,0 +1,3 @@
<template>
<div>123123</div>
</template>

@ -13,13 +13,13 @@
<el-col :span="7"> <el-col :span="7">
<el-form-item label="工业大类" prop="industryCategory" style="width: 100%;"> <el-form-item label="工业大类" prop="industryCategory" style="width: 100%;">
<el-input v-model="queryParams.industryCategory" placeholder="请输入工业大类" clearable style="width: 20.5rem;" <el-input v-model="queryParams.industryCategory" placeholder="请输入工业大类" clearable style="width: 20.5rem;"
@keyup.enter.native="handleQuery" maxlength="50" show-word-limit /> @keyup.enter.native="handleQuery" show-word-limit />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="7"> <el-col :span="7">
<el-form-item label="产业" prop="industry" style="width: 100%;"> <el-form-item label="产业" prop="industry" style="width: 100%;">
<el-input v-model="queryParams.industry" placeholder="请输入产业" clearable style="width: 20.5rem;" <el-input v-model="queryParams.industry" placeholder="请输入产业" clearable style="width: 20.5rem;"
@keyup.enter.native="handleQuery" maxlength="50" show-word-limit /> @keyup.enter.native="handleQuery" show-word-limit />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>

@ -36,7 +36,7 @@ module.exports = {
proxy: { proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
target: `http://192.168.0.125:7071`, target: `http://192.168.0.121:7071`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '' ['^' + process.env.VUE_APP_BASE_API]: ''

Loading…
Cancel
Save