侧边栏bug和基本信息模块

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

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

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

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

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

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

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

@ -1,351 +1,330 @@
<template>
<div>
<!-- 表单查询项 -->
<div class="headerbox">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="200">
<el-row>
<el-col :span="5">
<el-form-item label="文件标题" prop="postName" style="width: 100%;">
<el-input v-model="queryParams.postName" placeholder="请输入模板标题" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="发布时间" prop="">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
</el-form-item>
</el-col>
</el-row>
<div>
<!-- 表单查询项 -->
<div v-if="!previewMode" class="headerbox">
<el-form size="small" :inline="true" label-width="200">
<el-row>
<el-col :span="5">
<el-form-item label="文件标题" style="width: 100%;">
<el-input placeholder="请输入模板标题" clearable />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="发布时间">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini">查询</el-button>
<el-button icon="el-icon-refresh" size="mini">重置</el-button>
</el-form-item>
</el-col>
</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 class="tablebox">
</el-dialog>
<!-- 导出行 -->
<div class="tablebtntwo">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['system:post:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<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 v-if="previewMode" class="previewbox">
<!-- 按钮区域 -->
<div class="previewhead">
<div class="headone">预览</div>
<div class="headtwo">
<el-button type="primary" size="mini" icon="el-icon-upload2" @click="handleReturn"></el-button>
<el-button type="primary" size="mini" icon="el-icon-back" @click="handleReturn"></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="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>
<!-- 添加或修改项目对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="项目名称" prop="postName">
<el-input v-model="form.postName" placeholder="请输入项目名称" />
</el-form-item>
<el-form-item label="项目编码" prop="postCode">
<el-input v-model="form.postCode" placeholder="请输入编码名称" />
</el-form-item>
<el-form-item label="项目顺序" prop="postSort">
<el-input-number v-model="form.postSort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="项目状态" prop="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-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 class="previewnick">
<h1>{{ previewData.title }}</h1>
</div>
<!-- 发布信息栏 -->
<div class="previewinfo">
<div class="previewinfoitem">发布时间{{ previewData.date }}</div>
<div class="previewinfoitem">发布单位{{ previewData.unit }}</div>
<div class="previewinfoitem">发布人{{ previewData.author }}</div>
</div>
<!-- 内容区域 -->
<div class="previewcontent">
<quill-editor class="editor preview-editor" v-model="previewData.content" :options="previewEditorOption" readonly></quill-editor>
</div>
</div>
</template>
<script>
import { listPost, getPost, delPost, addPost, updatePost } from "@/api/system/post";
export default {
name: "Post",
dicts: ['sys_normal_disable'],
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
postList: [],
//
title: "",
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
postCode: undefined,
postName: undefined,
status: undefined
},
//
form: {},
//
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();
</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
//
const toolbarOptions = () => {
return [
["bold", "italic", "underline", "strike"], // 线 线
[{ list: "ordered" }, { list: "bullet" }], //
[{ indent: "-1" }, { indent: "+1" }], //
[{ size: ["small", false, "large", "huge"] }], //
[{ header: [1, 2, 3, 4, 5, 6, false] }], //
[{ color: [] }, { background: [] }], //
[{ align: [] }], //
["clean"], //
["link"], //
];
};
export default {
components: { quillEditor },
data() {
return {
loading: false,
postList: [
{ id: 1, title: '文件1的名称', unit: '单位A', author: '张三', date: '2023-01-01', content: '<p>这是文件1的内容</p>' },
{ id: 2, title: '文件2的名称', unit: '单位B', author: '李四', date: '2023-02-01', content: '<p>这是文件2的内容</p>' },
{ id: 3, title: '文件3的名称', unit: '单位C', author: '王五', date: '2023-03-01', content: '<p>这是文件3的内容</p>' }
],
total: 3,
queryParams: {
pageNum: 1,
pageSize: 10
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.postId)
this.single = selection.length != 1
this.multiple = !selection.length
dialogVisible: false,
dialogTitle: '新增',
form: {
id: null,
title: '',
date: '',
unit: '',
author: '',
content: ''
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加项目";
rules: {
title: [{ required: true, message: '请输入文件标题', trigger: 'blur' }],
date: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
unit: [{ required: true, message: '请输入发布单位', trigger: 'blur' }],
author: [{ required: true, message: '请输入发布人', trigger: 'blur' }]
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const postId = row.postId || this.ids
getPost(postId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改项目";
});
editorOption: {
placeholder: "请输入内容",
modules: {
toolbar: {
container: toolbarOptions(),
},
},
},
/** 详情按钮操作 */
getInfo(row) {
this.$store.commit("SET_CRUMBS", this.$route.meta.title + "详情");
const postIds = row.postId || this.ids;
this.$router.push({ path: `/manage-info/${postIds}` });
previewMode: false, //
previewData: {}, //
previewEditorOption: {
readOnly: true,
modules: {
toolbar: false, //
},
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.postId != undefined) {
updatePost(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addPost(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
};
},
methods: {
handleAdd() {
this.dialogTitle = '新增';
this.dialogVisible = true;
this.form = { id: null, title: '', date: '', unit: '', author: '', content: '' };
},
handleEdit(row) {
this.dialogTitle = '编辑';
this.dialogVisible = true;
this.form = { ...row };
},
handleDelete(row) {
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;
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const postIds = row.postId || this.ids;
this.$modal.confirm('是否确认删除项目编号为"' + postIds + '"的数据项?' + '删除这条信息之后有可能找不回来了,请思考一下哟!').then(function () {
return delPost(postIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => { });
},
/** 导出按钮操作 */
handleExport() {
this.download('system/post/export', {
...this.queryParams
}, `post_${new Date().getTime()}.xlsx`)
}
this.dialogVisible = false;
this.$message({ type: 'success', message: '操作成功!' });
}
});
},
cancel() {
this.dialogVisible = false;
},
handleSelectionChange(selection) {
console.log(selection);
},
handleExport() {
this.$message({ type: 'info', message: '导出功能待实现' });
},
extractTextContent(html) {
const tempDiv = document.createElement('div');
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 {
margin-top: 1rem;
margin-bottom: 1rem;
}
</style>
};
</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;
}
.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() {
//
if (!this.buildingForm.buildingNumber) {
this.$message.error('请填写楼栋编号');
return;
}
// if (!this.buildingForm) {
// this.$message.error('');
// return;
// }
// dynamicTags
this.dynamicTags.push(this.buildingForm.buildingNumber + '栋');

@ -18,7 +18,7 @@
<!-- 视频 -->
<div class="image-container">
<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">
<img src="../../../assets/images/detailsicon/icon-bf@2x (1).png" alt="">
@ -27,7 +27,9 @@
<div class="close-button" @click="removeImage(index)">
<img src="../../../assets/images/detailsicon/icon-关闭@2x.png" alt="">
</div>
<!-- 播放按钮 -->
<!-- 是否在线 -->
<div v-if="image.isOnline" class="online-status online">线</div>
<div v-else class="online-status offline">离线</div>
</div>
</div>
</div>
@ -38,16 +40,18 @@ export default {
data() {
return {
images: [
{ src: '' },
{ src: '' },
{ src: '' },
{ src: 'https://picsum.photos/300/200?random=1', isOnline: true },
{ src: 'https://picsum.photos/300/200?random=2', isOnline: false },
{ src: 'https://picsum.photos/300/200?random=3', isOnline: true },
//
]
};
},
methods: {
removeImage(index) {
this.images.splice(index, 1);
if (confirm('确定要删除该实况吗?')) {
this.images.splice(index, 1);
}
}
}
};
@ -145,4 +149,23 @@ export default {
width: 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>

@ -7,18 +7,8 @@
<span>月度进展信息</span>
</div>
<div class="topright" style="visibility: hidden;">
<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-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>
<el-button></el-button>
<el-button></el-button>
</div>
</div>
<!-- 内容区 -->

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

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

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

@ -33,7 +33,7 @@
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<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>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:1rem 18.6rem 25px 0px;"></el-checkbox>

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

@ -6,7 +6,8 @@
<el-row>
<el-col :span="5">
<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-col>
<el-col :span="9">
@ -18,7 +19,8 @@
<el-col :span="5">
<el-form-item label="现状分类" prop="status">
<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-form-item>
</el-col>
@ -47,19 +49,20 @@
<div class="tablehead">
<div class="headtitle"><span>项目清单</span></div>
<div class="headbtn">
<el-button type="primary" icon="el-icon-search" @click="downloadTemplate"></el-button>
<el-button type="primary" icon="el-icon-download" size="mini" @click="handleImport"></el-button>
<el-button type="primary" icon="el-icon-download" @click="downloadTemplate"></el-button>
<el-button type="primary" size="mini" @click="handleImport"></el-button>
</div>
</div>
<!-- 导出行 -->
<div class="tablebtntwo">
<el-row :gutter="10" class="mb8">
<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 :span="1.5">
<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>
</el-button>
<el-dropdown-menu slot="dropdown">
@ -83,13 +86,17 @@
<el-table-column label="当前状态" align="center" prop="status" />
<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>
<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" />
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
</div>
<!-- 添加或修改项目对话框 -->
@ -106,7 +113,8 @@
</el-form-item>
<el-form-item label="项目状态" prop="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-form-item>
<el-form-item label="备注" prop="remark">
@ -120,7 +128,9 @@
</el-dialog>
<!-- 批量导入对话框 -->
<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>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
@ -325,7 +335,7 @@ export default {
}).catch(error => {
console.error('删除项目失败', error);
});
}).catch(() => {});
}).catch(() => { });
},
/** 导出按钮操作 */
handleExport() {

@ -19,7 +19,7 @@
<el-col :span="5">
<el-form-item label="现状分类" prop="status">
<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" />
</el-select>
</el-form-item>
@ -121,7 +121,7 @@
export default {
name: "Post",
dicts: ['sys_normal_disable'],
dicts: ['xzfl'],
data() {
return {
//

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

@ -13,13 +13,13 @@
<el-col :span="7">
<el-form-item label="工业大类" prop="industryCategory" style="width: 100%;">
<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-col>
<el-col :span="7">
<el-form-item label="产业" prop="industry" style="width: 100%;">
<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-col>
</el-row>

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

Loading…
Cancel
Save