monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 1182689ad157f3cba5040d7548d1b99af7ee7972 1 parent ee883715

乙方运维代码迁移优化

Inline Side-by-side
Showing 17 changed files with 797 additions and 540 deletions
... ... @@ -8,7 +8,7 @@
:multiple="true"
:auto-upload="false">
<template #trigger>
<el-button size="small" type="primary">选择则文件</el-button>
<el-button size="small" type="primary">选择文件</el-button>
</template>
支持格式：
<el-tooltip placement="top" effect="light">
... ... @@ -18,9 +18,9 @@
<i class="el-icon-chat-round"></i>
</el-tooltip>
<template #tip>
<div class="el-upload__tip">
文件命名规范建议：以文档编号+"-" 开头，如：3101-基本信息.xls
</div>
<!-- <div class="el-upload__tip">-->
<!-- 文件命名规范建议：以文档编号+"-" 开头，如：3101-基本信息.xls-->
<!-- </div>-->
</template>
</el-upload>
</template>
... ...
export default {
name: 'projectDOCndex',
template: '',
components: {},
data() {
return {}
},
setup() {
let height = Vue.ref(window.innerHeight - 130);
const {proxy} = Vue.getCurrentInstance();
let columns = Vue.ref([
{
prop: 'fileName',
label: '年度',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm1',
label: '1月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm2',
label: '2月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm3',
label: '3月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm4',
label: '4月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm5',
label: '5月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm6',
label: '6月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm7',
label: '7月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm8',
label: '8月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm9',
label: '9月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm110',
label: '10月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm11',
label: '11月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm12',
label: '12月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
}
]);
let dataList = Vue.ref([]);
let currentPage = Vue.ref(1);
let total = Vue.ref(0);
// 获取表格树
let getPage = () => {
}
return {
columns,
height,
dataList,
currentPage,
total,
getPage
}
}
}
... ...
<div>
<div>
<!-- 人员信息总汇-->
<el-divider content-position="left">项目评价汇总</el-divider>
<cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="true"
:showBorder="true" :currentPage="currentPage" :total="total" :loading="true"
:showPage="true" :height="height - 54"></cm-table-page>
</div>
</div>
... ...
export default {
name: 'projectPJIndex',
template: '',
components: {},
data() {
return {}
},
setup() {
let height = Vue.ref(window.innerHeight - 130);
const {proxy} = Vue.getCurrentInstance();
let columns = Vue.ref([
{
prop: 'fileName',
label: '年度',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm1',
label: '1月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm2',
label: '2月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm3',
label: '3月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm4',
label: '4月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm5',
label: '5月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm6',
label: '6月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm7',
label: '7月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm8',
label: '8月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm9',
label: '9月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm110',
label: '10月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm11',
label: '11月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm12',
label: '12月',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
}
]);
let dataList = Vue.ref([]);
let currentPage = Vue.ref(1);
let total = Vue.ref(0);
// 获取表格树
let getPage = () => {
}
return {
columns,
height,
dataList,
currentPage,
total,
getPage
}
}
}
... ...
<div>
<el-row>
<el-col :span="12">
<div id="main" style="width: 500px;height:600px;"></div>
</el-col>
<el-col :span="12">
<div id="score" style="width: 600px;height:400px;"></div>
</el-col>
</el-row>
<el-dialog
v-model="dialogVisible"
title="3月各项评分"
width="60%"
:before-close="handleClose"
>
<el-table border :data="tableData" stripe @cell-dblclick='handleCell' header-row-class-name="tbl-header-class" style="width: 100%;margin: 20px 0;">
<el-table-column prop="date" label="分类" align="center" min-width="100" />
<el-table-column prop="date" label="项目" align="center" min-width="100" />
<el-table-column prop="name" label="分值" align="center" min-width="100" />
<el-table-column prop="name" label="打分人" align="center" min-width="100"/>
<el-table-column prop="name" label="得分" align="center" min-width="100">
<template #default="scope">
<el-input v-model="scope.row.name" style='width: 80px;'></el-input>
</template>
</el-table-column>
<el-table-column prop="name" label="扣分原因" align="center" min-width="100">
<template #default="scope">
<el-input v-model="scope.row.name" style='width: 80px;'></el-input>
</template>
</el-table-column>
</el-table>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" size="small" @click="dialogVisible = false">确认</el-button>
<el-button size="small"@click="dialogVisible = false">关闭</el-button>
</span>
</template>
</el-dialog>
</div>
... ...
export default {
name: 'projectPJTIndex',
template: '',
components: {},
data() {
return {}
},
setup() {
let height = Vue.ref(window.innerHeight - 130);
const {proxy} = Vue.getCurrentInstance();
let columns = Vue.ref([
{
prop: 'fileName',
label: '日常资料',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm1',
label: '文档资料',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm2',
label: '项目保密协议',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
}
]);
let dataList = Vue.ref([]);
let currentPage = Vue.ref(1);
let total = Vue.ref(0);
// 获取表格树
let getPage = () => {
}
return {
columns,
height,
dataList,
currentPage,
total,
getPage
}
}
}
... ...
<div>
<div>
<!-- 人员信息总汇-->
<project-ry/>
</div>
</div>
<div>
<!-- 项目评价总汇-->
<project-pj/>
</div>
<div>
<!-- 项目资料总汇-->
<project-zl/>
</div>
</div>
... ...
export default {
name: 'projectIndex',
template: '',
components: {
'project-ry': Vue.defineAsyncComponent(
() => myImport('components/page/operationMaintenance/ry/index')
),
'project-pj': Vue.defineAsyncComponent(
() => myImport('components/page/operationMaintenance/pj/index')
),
'project-zl': Vue.defineAsyncComponent(
() => myImport('components/page/operationMaintenance/zl/index')
),
},
data() {
return {
props: {
label: 'title',
children: 'children'
}
}
},
setup() {
let height = Vue.ref(window.innerHeight - 130);
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
})
return {
}
}
}
... ...
<div>
<div>
<!-- 人员信息总汇-->
<el-divider content-position="left">人员信息汇总</el-divider>
<cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="true"
:showBorder="true" :currentPage="currentPage" :total="total" :loading="true"
:showPage="true" :height="height - 54"></cm-table-page>
</div>
</div>
... ...
export default {
name: 'projectUserIndex',
template: '',
components: {},
data() {
return {
}
},
setup() {
let height = Vue.ref(window.innerHeight - 130);
const {proxy} = Vue.getCurrentInstance();
let columns = Vue.ref([{
prop: 'fileName',
label: '运维人员姓名',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
}, {
prop: 'createUser',
label: '在职状态',
sortable: true,
width: '120px'
}, {
prop: 'createTime',
label: '个人信息',
sortable: true,
width: '180px'
}, {
prop: 'createTime',
label: '个人保密协议书',
sortable: true,
width: '180px'
}, {
prop: 'createTime',
label: '月度总结',
sortable: true,
width: '180px'
}]);
let dataList = Vue.ref([]);
let currentPage = Vue.ref(1);
let total = Vue.ref(0);
// 获取表格树
let getPage = () => {
}
return {
columns,
height,
dataList,
currentPage,
total,
getPage
}
}
}
... ...
<div>
<el-form
:model="ruleForm"
label-width="120px"
size="small"
>
<el-row>
<el-col :span="8">
<el-form-item label="姓名" prop="nickname" class="form-class">
<el-input v-model="ruleForm.nickname" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex" class="form-class">
<el-radio-group v-model="ruleForm.sex">
<el-radio label="1">男</el-radio>
<el-radio label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="学历" prop="education" class="form-class">
<el-input v-model="ruleForm.education" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="手机号" prop="name" class="form-class">
<el-input v-model="ruleForm.phone" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="电子邮箱" prop="name" class="form-class">
<el-input v-model="ruleForm.email" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="入职时间" prop="name" class="form-class">
<el-date-picker
v-model="ruleForm.entryTime"
type="date"
style='width: 190px;'
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="获得证书" prop="name" class="form-class">
<el-input v-model="ruleForm.certificate" style='width: 190px;'></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="所在公司" prop="name" class="form-class">
<el-input v-model="ruleForm.company" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="年龄" prop="name" class="form-class">
<el-input v-model="ruleForm.age" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="毕业院校" prop="name" class="form-class">
<el-input v-model="ruleForm.university" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="座机号码" prop="name" class="form-class">
<el-input v-model="ruleForm.tel" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="家庭住址" prop="name" class="form-class">
<el-input v-model="ruleForm.post" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="离职时间" prop="name" class="form-class">
<el-date-picker
v-model="ruleForm.quitTime"
type="date"
style='width: 190px;'
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-image style="width: 200px; height: 200px" :src="imageUrl"></el-image>
<el-upload
class="upload-demo"
:show-file-list="false"
action=""
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:http-request="uploadFile"
multiple
:limit="3"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">上传照片</el-button>
</el-upload>
</el-col>
</el-row>
<div style="text-align: center;">
<el-button type="primary" size="small" @click="handleSave">保存</el-button>
</div>
<!-- <el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>Create</el-button
>
<el-button @click="resetForm('ruleForm')">Reset</el-button>
</el-form-item> -->
</el-form>
</div>
... ...
export default {
name: 'projectPJIndex',
template: '',
components: {},
data() {
return {}
},
setup() {
let height = Vue.ref(window.innerHeight - 130);
const {proxy} = Vue.getCurrentInstance();
let ruleForm = Vue.reactive({
nickname:'',
sex: '',
phone: '',
tel: '',
email: '',
post: '',
headImgUrl: '',
age: '',
university: '',
education: '',
quitTime: '',
entryTime:'',
company: '',
certificate: ''
})
return {
ruleForm
}
}
}
... ...
<div>
<div>
<!-- 人员信息总汇-->
<el-divider content-position="left">项目资料汇总</el-divider>
<cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="true"
:showBorder="true" :currentPage="currentPage" :total="total" :loading="true"
:showPage="true" :height="height - 54"></cm-table-page>
</div>
</div>
... ...
export default {
name: 'projectZLlIndex',
template: '',
components: {},
data() {
return {}
},
setup() {
let height = Vue.ref(window.innerHeight - 130);
const {proxy} = Vue.getCurrentInstance();
let columns = Vue.ref([
{
prop: 'fileName',
label: '日常资料',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm1',
label: '文档资料',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
},
{
prop: 'm2',
label: '项目保密协议',
sortable: true,
align: 'left',
render: function (row) {
return `<i class="iconfont 22222" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
}
}
]);
let dataList = Vue.ref([]);
let currentPage = Vue.ref(1);
let total = Vue.ref(0);
// 获取表格树
let getPage = () => {
}
return {
columns,
height,
dataList,
currentPage,
total,
getPage
}
}
}
... ...
... ... @@ -8,263 +8,10 @@
</el-col>
<!-- 右侧显示 -->
<el-col :span="19" class='col-class'>
<!-- 表单 -->
<div>
<el-form
:model="ruleForm"
label-width="120px"
size="small"
>
<el-row>
<el-col :span="8">
<el-form-item label="姓名" prop="nickname" class="form-class">
<el-input v-model="ruleForm.nickname" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex" class="form-class">
<el-radio-group v-model="ruleForm.sex">
<el-radio label="1">男</el-radio>
<el-radio label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="学历" prop="education" class="form-class">
<el-input v-model="ruleForm.education" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="手机号" prop="name" class="form-class">
<el-input v-model="ruleForm.phone" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="电子邮箱" prop="name" class="form-class">
<el-input v-model="ruleForm.email" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="入职时间" prop="name" class="form-class">
<el-date-picker
v-model="ruleForm.entryTime"
type="date"
style='width: 190px;'
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="获得证书" prop="name" class="form-class">
<el-input v-model="ruleForm.certificate" style='width: 190px;'></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="所在公司" prop="name" class="form-class">
<el-input v-model="ruleForm.company" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="年龄" prop="name" class="form-class">
<el-input v-model="ruleForm.age" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="毕业院校" prop="name" class="form-class">
<el-input v-model="ruleForm.university" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="座机号码" prop="name" class="form-class">
<el-input v-model="ruleForm.tel" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="家庭住址" prop="name" class="form-class">
<el-input v-model="ruleForm.post" style='width: 190px;'></el-input>
</el-form-item>
<el-form-item label="离职时间" prop="name" class="form-class">
<el-date-picker
v-model="ruleForm.quitTime"
type="date"
style='width: 190px;'
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-image style="width: 200px; height: 200px" :src="imageUrl"></el-image>
<el-upload
class="upload-demo"
:show-file-list="false"
action=""
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:http-request="uploadFile"
multiple
:limit="3"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">上传照片</el-button>
</el-upload>
</el-col>
</el-row>
<div style="text-align: center;">
<el-button type="primary" size="small" @click="handleSave">保存</el-button>
</div>
<!-- <el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>Create</el-button
>
<el-button @click="resetForm('ruleForm')">Reset</el-button>
</el-form-item> -->
</el-form>
</div>
<!-- 图标echarts -->
<el-row>
<el-col :span="12">
<div id="main" style="width: 500px;height:600px;"></div>
</el-col>
<el-col :span="12">
<div id="score" style="width: 600px;height:400px;"></div>
</el-col>
</el-row>
<!-- 点击柱状图弹框 -->
<el-dialog
v-model="dialogVisible"
title="3月各项评分"
width="60%"
:before-close="handleClose"
>
<el-table border :data="tableData" stripe @cell-dblclick='handleCell' header-row-class-name="tbl-header-class" style="width: 100%;margin: 20px 0;">
<el-table-column prop="date" label="分类" align="center" min-width="100" />
<el-table-column prop="date" label="项目" align="center" min-width="100" />
<el-table-column prop="name" label="分值" align="center" min-width="100" />
<el-table-column prop="name" label="打分人" align="center" min-width="100"/>
<el-table-column prop="name" label="得分" align="center" min-width="100">
<template #default="scope">
<el-input v-model="scope.row.name" style='width: 80px;'></el-input>
</template>
</el-table-column>
<el-table-column prop="name" label="扣分原因" align="center" min-width="100">
<template #default="scope">
<el-input v-model="scope.row.name" style='width: 80px;'></el-input>
</template>
</el-table-column>
</el-table>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" size="small" @click="dialogVisible = false">确认</el-button>
<el-button size="small"@click="dialogVisible = false">关闭</el-button>
</span>
</template>
</el-dialog>
<!-- 上传下载预览-->
<div>
<el-row>
<el-col :span="12" style='text-align: left;'>
<el-input v-model="name" placeholder="请输入内容" size="small" style='width: 150px;margin-right: 10px;'></el-input>
<el-button type="primary" size="small" @click="onSearchs">查询</el-button>
</el-col>
<el-col :span="12" style='text-align: right;display: flex;'>
<!-- <el-button type="primary" size="small" @click="dialogVisible = false">预览</el-button> -->
<!-- 上传 -->
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-change="handleChange"
:file-list="fileList"
:show-file-list="false"
>
<el-button size="small" type="primary">上传</el-button>
</el-upload>
<!-- 下载 -->
<el-button type="primary" size="small" @click="dialogVisible = false" style='margin-left:10px;'>下载</el-button>
<el-button type="primary" size="small" @click="handleEmpower">授权</el-button>
</el-col>
</el-row>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="<" name="first">
<el-table :data="tableData" header-row-class-name="tbl-header-class" height="600px" style="width: 100%;margin: 20px 0;">
<el-table-column type="selection" align="center" width="55"/>
<el-table-column type="index" label="序号" align="center" width="50" />
<el-table-column prop="date" label="文档名称" min-width="400" >
<template #default="scope">
<el-link type="primary" @click="openDetailPage(scope.row)">{{scope.row.date}}</el-link>
</template>
</el-table-column>
<el-table-column prop="name" label="提交人" align="center" width="180" />
<el-table-column prop="name" label="提交时间" align="center" width="180" />
<el-table-column prop="name" label="操作" width="180" >
<template #default="scope">
<el-button type="primary" size="small" @click="dialogVisible = false">下载</el-button>
<el-button type="primary" size="small" @click="handleEmpower">授权</el-button>
</template>
</el-table-column>
</el-table>
<div style='text-align: left;'>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label=">" name="second">
<el-table :data="tableData" header-row-class-name="tbl-header-class" height="600px" style="width: 100%;margin: 20px 0;">
<el-table-column type="selection" align="center" width="55"/>
<el-table-column type="index" label="序号" align="center" width="50" />
<el-table-column prop="date" label="文档名称" min-width="400" >
<template #default="scope">
<img style="width: 50px; height: 50px" src="./1.png"/>
<el-link type="primary" @click="openDetailPage(scope.row)">{{scope.row.date}}</el-link>
</template>
</el-table-column>
<el-table-column prop="name" label="提交人" align="center" width="180" />
<el-table-column prop="name" label="提交时间" align="center" width="180" />
<el-table-column prop="name" label="操作" width="180" >
<template #default="scope">
<el-button type="primary" size="small" @click="dialogVisible = false">下载</el-button>
<el-button type="primary" size="small" @click="handleEmpower">授权</el-button>
</template>
</el-table-column>
</el-table>
<div style='text-align: left;'>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</el-tab-pane>
</el-tabs>
<el-dialog
v-model="dialogVisibles"
title="授权"
width="50%"
:before-close="handleClose"
>
<el-transfer
v-model="leftValue"
style="text-align: left; display: inline-block"
filterable
:left-default-checked="[2, 3]"
:right-default-checked="[1]"
:render-content="renderFunc"
:titles="['Source', 'Target']"
:button-texts="[' ', ' ']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}',
}"
:data="data"
@change="handleChange"
>
<template #left-footer>
<el-button class="transfer-footer" size="small">Operation</el-button>
</template>
<template #right-footer>
<el-button class="transfer-footer" size="small">Operation</el-button>
</template>
</el-transfer>
<div style="margin-top: 30px;">
<el-button type="primary" size="small" @click="dialogVisibles = false">保存</el-button>
<el-button size="small"@click="dialogVisibles = false">关闭</el-button>
</div>
</el-dialog>
</div>
<!-- 失活的组件将会被缓存！-->
<keep-alive>
<component v-bind:is="componentName"></component>
</keep-alive>
</el-col>
</el-row>
</div>
... ...
... ... @@ -2,262 +2,42 @@ export default {
name: 'operationMaintenance',
template: '',
components: {
'uploadImage': Vue.defineAsyncComponent(
() => myImport('components/common/uploadImage/index')
),
// 所有汇总
'COLLECT_ALL': Vue.defineAsyncComponent(
() => myImport('components/page/operationMaintenance/project/index')
),
// 人员汇总
'COLLECT_USER': Vue.defineAsyncComponent(
() => myImport('components/page/operationMaintenance/ry/index')
),
// 评价汇总
'COLLECT_EVALUATE': Vue.defineAsyncComponent(
() => myImport('components/page/operationMaintenance/pj/index')
),
// 资料汇总
'COLLECT_MATERIAL': Vue.defineAsyncComponent(
() => myImport('components/page/operationMaintenance/zl/index')
),
//文档
'DOCUMENT': Vue.defineAsyncComponent(
() => myImport('components/page/operationMaintenance/doc/index')
),
// 评分图(项目评价具体年份)
'EVALUATE': Vue.defineAsyncComponent(
() => myImport('components/page/operationMaintenance/pjt/index')
),
// 人员信息
'USER': Vue.defineAsyncComponent(
() => myImport('components/page/operationMaintenance/user/index')
),
},
setup() {
const { proxy } = Vue.getCurrentInstance()
let activeName= Vue.ref('first')
let imageUrl = Vue.ref('')
let rowData = Vue.ref('5')
let dialogVisible = Vue.ref(false)
let dialogVisibles = Vue.ref(false)
let dataSource = Vue.ref([]);
let tableDataFile = Vue.ref([]);
let tableDataPersonnel = Vue.ref([]);
let tableDataEvaluate = Vue.ref([]);
let tableDataProject = Vue.ref([]);
let tableData = Vue.ref([
{
date: '2016-05-03',
name: '√',
address: '√',
},
{
date: '2016-05-02',
name: '×',
address: '×',
},
{
date: '2016-05-04',
name: '×',
address: '×',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
])
let ruleForm = Vue.reactive({
nickname:'',
sex: '',
phone: '',
tel: '',
email: '',
post: '',
headImgUrl: '',
age: '',
university: '',
education: '',
quitTime: '',
entryTime:'',
company: '',
certificate: ''
})
// 分页信息
const pageInfo = Vue.reactive({
total: 0,
limit: 50,
page: 1,
keyWords:''
})
// 柱状图
let init = () => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 20, 36, 10, 10, 20, 10, 20],
itemStyle: { //上方显示数值
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
fontSize: 12
}
}
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且弹出数据名称
myChart.on('click', function (params) {
console.log(params);
dialogVisible.value = true
});
}
// 饼状图
let inits = () => {
// 基于准备好的dom，初始化echarts实例
var myCharts = echarts.init(document.getElementById('score'));
// 接口
var arr=[]
proxy.$http.post("/api-web/manage/ddic/findSucDdics/OPS_SECOND_PARTY?",'', function (res) {
if (res && res.data) {
res.data.forEach(item=>{
arr.push({value:item.ddicDesc,name:item.ddicName})
})
// 指定图表的配置项和数据
var option = {
title: {
text: '评分分类值占比'
},
tooltip:{
triggeer:'item',
formatter: '{b} : {c} ({d}%)'
},
series : [
{
name: '访问来源',
type: 'pie', // 设置图表类型为饼图
radius: '40%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
center: ["35%", "53%"],
data:arr,
label:{
normal:{
show: true,
formatter: '{b}:({d}%)'
},
labelLine :{show:true}
}
}
],
};
// 使用刚指定的配置项和数据显示图表。
myCharts.setOption(option);
} else {
proxy.$global.showMsg('暂无数据！');
}
})
}
// 人员信息总汇
let getListPersonnel=()=>{
proxy.$http.get("/api-web/bOpsProject/page", params, function (res) {
if (res && res.data) {
tableDataPersonnel.value = res.data;
} else {
proxy.$global.showMsg('暂无数据！');
}
},function (){
proxy.$global.showMsg('没有查询到记录！');
});
}
// 项目评价总汇
let getListEvaluate=()=>{
proxy.$http.get("/api-web/bOpsFile/page", params, function (res) {
if (res && res.data) {
tableDataEvaluate.value = res.data;
} else {
proxy.$global.showMsg('暂无数据！');
}
},function (){
proxy.$global.showMsg('没有查询到记录！');
});
}
let componentName = Vue.ref('COLLECT_ALL');
// 项目资料总汇
let getListProject=()=>{
proxy.$http.get("/api-web/bOpsProject/page", params, function (res) {
if (res && res.data) {
tableDataProject.value = res.data;
} else {
proxy.$global.showMsg('暂无数据！');
}
},function (){
proxy.$global.showMsg('没有查询到记录！');
});
}
//文档上传下载
let getListFile=()=>{
proxy.$http.get("/api-web/bOpsFile/page", params, function (res) {
if (res && res.data) {
tableDataFile.value = res.data;
} else {
proxy.$global.showMsg('暂无数据！');
}
},function (){
proxy.$global.showMsg('没有查询到记录！');
});
}
//信息保存
let handleSave=(data)=>{
proxy.$http.post("/api-web/bOpsPerson/saveOrUpdate", ruleForm, function (res) {
if (res && res.data) {
proxy.$global.showMsg('保存成功！');
} else {
proxy.$global.showMsg('暂无数据！');
}
},function (){
proxy.$global.showMsg('没有查询到记录！');
});
}
let handleEmpower=(node, data)=> {
dialogVisibles.value=true
}
// 上传
let uploadFile=(res, file)=> {
// let url=URL.createObjectURL(res.raw)
debugger
const formData = new FormData()
formData.append('files', file)
formData.append('customerId', 'platform')
formData.append('businessTypeKey', 'admin1')
formData.append('busibessJoin', '')
console.log(res,111)
console.log(file,222)
}
// 下载
let handkeDownload=()=>{
proxy.$http.downloadFile(`/api-web/assets/configmanager/resource/assets?resId=${id}`, {}, function (res) {
if (res && res.map) {
}
})
}
let handleCell=(row)=>{
// this.$set(row,'show',true)
console.log(data)
}
let handleThree=(row)=>{
// emit('openDetailPage',row)
}
// 搜索
let onSearch = () => {
let getTree = () => {
var params = {
// page: pageInfo.page,
// limit: pageInfo.limit,
... ... @@ -273,41 +53,20 @@ export default {
proxy.$global.showMsg('没有查询到记录！');
});
}
let handleNodeClick=(data)=> {
console.log(data.label,999)
let comName= data.map.nodeType.view.code;
console.log(comName)
componentName.value = comName;
}
Vue.onMounted(() => {
onSearch()
init()
inits()
getTree();
})
// 搜索
return {
activeName,
ruleForm,
handleSave,
getListFile,
tableDataFile,
tableDataPersonnel,
tableDataEvaluate,
tableDataProject,
getListPersonnel,
getListEvaluate,
getListProject,
handleNodeClick,
onSearch,
handkeDownload,
imageUrl,
uploadFile,
handleEmpower,
dialogVisibles,
dialogVisible,
handleCell,
rowData,
pageInfo,
tableData,
dataSource,
handleThree,
handleNodeClick,
componentName
};
},
}
\ No newline at end of file
}
... ...