Skip to content

Y
yq-ui
Commit 8c09c6d0 by zhaopanyu
Options

zpy

parent ed5a0dbb
Showing with 2386 additions and 615 deletions
src/api/sy.js 0 → 100644
import request from "@/utils/request";
// 首页查询
export function getListcx(id) {
return request({
url: "/system/zyyq/" + id,
method: "get",
});
}
//单条详情
export function getListdt() {
return request({
url: "/system/zyyq/list",
method: "get",
});
}
src/api/system/cb.js 0 → 100644
import request from '@/utils/request'
// 查询油气数智化-产品列表
export function listCb(query) {
return request({
url: '/system/cb/list',
method: 'get',
params: query
})
}
// 查询油气数智化-产品详细
export function getCb(id) {
return request({
url: '/system/cb/' + id,
method: 'get'
})
}
// 新增油气数智化-产品
export function addCb(data) {
return request({
url: '/system/cb',
method: 'post',
data: data
})
}
// 修改油气数智化-产品
export function updateCb(data) {
return request({
url: '/system/cb',
method: 'put',
data: data
})
}
// 删除油气数智化-产品
export function delCb(id) {
return request({
url: '/system/cb/' + id,
method: 'delete'
})
}
src/api/system/zb.js 0 → 100644
import request from '@/utils/request'
// 查询油气数智化-分类列表
export function listZb(query) {
return request({
url: '/system/zb/list',
method: 'get',
params: query
})
}
// 查询油气数智化-分类列表
export function listZbxlk(query) {
return request({
url: '/system/zb/listxlk',
method: 'get',
params: query
})
}
// 查询油气数智化-分类详细
export function getZb(id) {
return request({
url: '/system/zb/' + id,
method: 'get'
})
}
// 新增油气数智化-分类
export function addZb(data) {
return request({
url: '/system/zb',
method: 'post',
data: data
})
}
// 修改油气数智化-分类
export function updateZb(data) {
return request({
url: '/system/zb',
method: 'put',
data: data
})
}
// 删除油气数智化-分类
export function delZb(id) {
return request({
url: '/system/zb/' + id,
method: 'delete'
})
}
src/permission.js
......@@ -8,7 +8,7 @@ import { isRelogin } from "@/utils/request";
NProgress.configure({ showSpinner: false });
const whiteList = ["/login", "/register", "web"];
const whiteList = ["/login", "/register", "/web"];
router.beforeEach((to, from, next) => {
NProgress.start();
......
src/router/index.js
......@@ -44,9 +44,10 @@ export const constantRoutes = [
{
path: "/web",
component: () => import("@/views/gasDigitization"),
component: () => import("@/views/zyyq/index"),
hidden: true,
},
{
path: "/login",
component: () => import("@/views/login"),
......
src/views/gasDigitization/index.vue deleted 100644 → 0
<template>
<div class="container">
<el-row>
<img
src="../../assets/images/background1.png"
alt=""
style="
background-size: 100% 100%;
margin-top: 20px;
height: 300px;
width: 100%;
float: none;
margin: 0 auto;
"
/>
<img
src="../../assets/images/bt.png"
alt=""
style="
background-size: 100% 100%;
position: absolute;
top: 50%;
left: 50%;
height: 200px;
width: 50%;
transform: translate(-50%, -50%);
"
/>
</el-row>
<el-row class="content">
<el-col
:span="4"
style="padding: 20px; background-color: #fff; border-radius: 10px"
>
<!-- <el-collapse v-model="activeName" accordion>
<el-collapse-item
v-for="item in collapseData"
:key="item.name"
:title="item.title"
:name="item.name"
>
<template #title>
<span class="custom-title">{{ item.title }}</span>
</template>
<div
v-for="content in item.contents"
:key="content"
style="display: flex; flex-direction: row; align-items: center"
>
<span
style="
width: 5px;
height: 5px;
background: #165bff;
border-radius: 50%;
display: inline-block;
"
></span>
<a class="bttext">{{ content }}</a>
</div>
</el-collapse-item>
</el-collapse> -->
<el-collapse v-model="activeNameOuter" accordion>
<!-- 外层 collapse 循环 -->
<el-collapse-item
v-for="outerItem in collapseDataOuter"
:key="outerItem.name"
:title="outerItem.title"
:name="outerItem.name"
>
<el-collapse v-model="activeNameInner" accordion>
<el-collapse-item
v-for="innerItem in outerItem.collapseData"
:key="innerItem.name"
:name="innerItem.name"
>
<template #title>
<span class="custom-title">{{ innerItem.title }}</span>
</template>
<div
v-for="content in innerItem.contents"
:key="content"
style="
display: flex;
flex-direction: row;
align-items: center;
"
>
<span
style="
width: 5px;
height: 5px;
background: #165bff;
border-radius: 50%;
display: inline-block;
"
></span>
<a class="bttext">{{ content }}</a>
</div>
</el-collapse-item>
</el-collapse>
</el-collapse-item>
</el-collapse>
</el-col>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick" type="card">
<el-tab-pane label="产品简介" name="first">
<div class="text" v-html="bmjj"></div>
</el-tab-pane>
<el-tab-pane label="功能特点" name="second">
<div class="text" v-html="zzld"></div>
</el-tab-pane>
<el-tab-pane label="应用成效" name="third">
<div class="text" v-html="sjglry"></div>
</el-tab-pane>
<el-tab-pane label="用法介绍" name="third">
<div class="text" v-html="sjglry"></div>
</el-tab-pane>
</el-tabs>
</div>
</el-row>
</div>
</template>
<script>
// import { addTp } from "@/api/benchmarkVoting.js";
// import store from "@/store";
// import { encrypt, decrypt } from "@/js/aesEncrypt"
// import footerNav from "@/components/footerNav"
export default {
name: "gasDigitization",
// components: { footerNav },
data() {
return {
activeNameOuter: "outer1", // 外层 collapse 默认选中
activeNameInner: "1", // 内层 collapse 默认选中
collapseDataOuter: [
{
name: "outer1",
title: "外层折叠项 1",
collapseData: [
{
name: "1",
title: "智能化办公",
contents: ["大模型", "会议系统", "数字员工"],
},
{
name: "2",
title: "生产化信息",
contents: ["大模型", "哈哈哈哈", "嘻嘻嘻嘻"],
},
],
},
{
name: "outer2",
title: "外层折叠项 2",
collapseData: [
{
name: "3",
title: "基础设施",
contents: ["999", "777", "666"],
},
{
name: "4",
title: "其他",
contents: ["内容1", "内容2", "内容3"],
},
],
},
],
// -------------
activeName: "first",
currentImage: "",
isDialogVisible: false,
name: null,
ipdz: null,
yl1: null,
addLoading: false,
fwXz: [],
zyhXz: [],
kyXz: [],
yzXz: [],
dialogVisible: false,
selectedUnit: {},
showDialog: false, // 控制对话框显示的变量
form: {
yqsc: [], // 用于存储选中的单位
ky: [],
zyh: [],
fw: [],
},
selectedUnits: {
oilGasProduction: [],
research: [],
specialization: [],
serviceCoordination: [],
},
};
},
created() {},
computed: {},
mounted() {},
methods: {
handleChange(val) {
console.log(val);
},
handleClick(tab, event) {
console.log(tab, event);
},
closeDialog() {
this.isDialogVisible = false; // 关闭对话框
},
submitTp() {
this.addLoading = true;
const isValid =
this.fwXz.length > 0 &&
this.zyhXz.length > 0 &&
this.kyXz.length > 0 &&
this.yzXz.length > 0;
if (!isValid) {
this.$modal.msgError("每个板块至少选 1 家单位。");
this.addLoading = false;
return; // 终止提交
}
const params = {
name: this.name,
ipdz: this.ipdz,
yl1: this.yl1,
tpInfoCbListA: this.fwXz,
tpInfoCbListB: this.zyhXz,
tpInfoCbListC: this.kyXz,
tpInfoCbListD: this.yzXz,
};
addTp(params)
.then((response) => {
if (response.code == 200) {
this.$modal.msgSuccess("投票成功");
} else if (response.code == 500) {
this.$modal.msgError("已投票，请勿重复投票");
}
})
.finally(() => {
this.addLoading = false;
});
},
openDialog(unit) {
this.selectedUnit = unit; // 保存当前点击的单位信息
this.showDialog = true; // 显示弹窗
},
tc() {
window.location.href = "http://ipms.slof.com/tzLogout/sjbgtx";
},
},
};
</script>
<style scoped lang="scss">
// .content {
// margin: 20px 20% 40px 20%;
// position: relative;
//
// .text {
// font-size: 14px;
// text-indent: 2em;
// line-height: 25px;
// color: #101010;
// padding: 0px 20px;
// }
// }
::v-deep .el-tabs--card > .el-tabs__header {
border-bottom: 1px dashed #dddddd;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
border-left: none;
border-top: none;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
border-bottom: 1px dashed #dddddd;
}
::v-deep .el-tabs__item.is-top {
font-size: 16px !important;
}
.preview-img {
width: 100%;
/* 或者根据需要设置 */
height: auto;
/* 保持比例 */
}
.xzText {
font-family: "黑体", sans-serif;
/* 或者使用 "Heiti" */
font-size: 15.5px;
/* 黑色字体 */
}
.btdlg {
display: inline-block !important;
font-family: Microsoft YaHei !important;
font-weight: bold !important;
font-size: 14px !important;
color: #c80000 !important;
line-height: 30px !important;
}
.nrdlg {
display: inline-block !important;
font-family: Microsoft YaHei !important;
font-weight: bold !important;
font-size: 14px !important;
line-height: 30px !important;
}
.nrdlgnr {
display: inline-block !important;
font-family: Microsoft YaHei !important;
font-weight: bold !important;
font-size: 14px !important;
line-height: 30px !important;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
}
.imgdlg {
/* width: 560px; */
width: 100%;
height: 120px;
}
.imgdlgst {
/* width: 560px; */
width: 100%;
height: 220px;
}
.sj {
/* width: 560px; */
margin: 10px 0;
}
.cc {
text-indent: 2em;
}
.text-align {
display: flex;
justify-content: flex-end;
margin: 0px 10px;
}
.text {
margin-left: auto;
margin: 10px 15px;
}
.row {
display: flex;
flex-direction: row;
align-items: inherit;
justify-content: center;
margin: 20px 0 20px -30px;
}
.checkbox-group-inline {
display: flex;
flex-wrap: wrap;
}
.checkbox-group-inline .el-checkbox {
margin-right: 10px;
/* 给复选框之间增加一些间距 */
}
.box {
position: relative;
top: -20px;
left: 0;
margin-bottom: -20px;
width: 100%;
min-height: 102vh;
background-image: url(../../assets/images/background1.png) !important;
background-size: cover;
background-repeat: no-repeat;
background-position: left top;
background-color: #f55202;
}
.container {
max-width: 100vw;
overflow-y: auto;
height: 100vh;
}
.bg {
padding-bottom: 20px;
padding-top: 30px;
min-height: 102vh;
width: 100%;
background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.65) 100%
);
}
h1 {
text-align: center;
color: #333;
}
.toptit {
background-color: transparent;
border-radius: 8px 8px 0 0;
}
.content {
margin: 20px auto;
max-width: 70%;
padding: 20px;
background-color: #f0f8ff;
/* 设置背景色 */
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.bt {
text-indent: 3.6em;
margin: 20px auto;
/* max-width: 70%; */
width: 1200px;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow-y: auto;
}
.bt1 {
margin: 20px auto;
/* max-width: 70%; */
width: 1200px;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow-y: auto;
}
.tpxx {
margin: 20px auto;
max-width: 70%;
padding: 10px;
background-color: #f0f8ff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
text-align: left;
}
h2 {
font-size: 24px;
color: #333;
margin-bottom: 15px;
font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif;
}
p {
font-size: 16px;
color: #555;
line-height: 1.6;
font-family: "FangSong_GB2312";
}
.bttitle {
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 18px;
color: #000000;
line-height: 30px;
}
.yuan {
display: inline-block;
width: 10px;
height: 10px;
background: #c80000;
border-radius: 50%;
color: #c80000;
vertical-align: middle;
}
.title {
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 14px;
color: #c80000;
line-height: 30px;
}
.titlenr {
font-family: Microsoft YaHei;
font-size: 14px;
line-height: 30px;
}
.nrtab {
margin: 5px 5%;
}
.btsty {
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #c80000;
line-height: 30px;
}
.kuang {
width: 18px;
height: 18px;
border-radius: 4px;
border: 1px solid #acacac;
display: inline-block;
vertical-align: middle;
}
.xq {
margin-left: auto;
position: absolute;
bottom: 8px;
right: 10px;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 14px;
color: #006ad7;
line-height: 30px;
text-decoration-line: underline;
cursor: pointer;
}
.xqname {
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 14px;
color: #222222;
line-height: 20px;
margin-left: 10px;
text-align: left;
}
.xqcard {
width: 270px;
height: 60px;
background: #f5f5f5;
display: flex;
flex-direction: row;
background: #f5f5f5;
margin: 5px 0;
padding: 20px 15px;
position: relative;
}
.btdlgsty {
height: 18px;
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 18px;
color: #000000;
line-height: 24px;
text-align: center !important;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.bttext {
font-family: PingFang SC;
font-weight: bold;
font-size: 16px;
color: #222222;
line-height: 26px;
margin-left: 10px;
text-decoration: none;
}
.bttext:hover {
color: #165bff;
text-decoration: underline;
}
.custom-title {
font-family: PingFang SC;
font-weight: 800;
font-size: 18px;
color: #165bff;
line-height: 26px;
}
</style>
src/views/system/cb/index.vue 0 → 100644
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="上级名称" prop="mc">
<div style='width: 220px'>
<treeselect v-model="queryParams.fid" :options="zbOptions2" :normalizer="normalizer" placeholder="请选择上级名称" />
</div>
</el-form-item>
<el-form-item label="名称" prop="mc">
<el-input v-model="queryParams.mc" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<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-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="cbList">
<el-table-column label="上级名称" align="center" prop="fmc" />
<el-table-column label="名称" align="center" prop="mc" />
<el-table-column label="排序" align="center" prop="px" />
<el-table-column label="发布状态" align="center" prop="fbzt" :formatter="statusFormatter" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<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-edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
<el-button v-if="scope.row.fbzt === '0'" size="mini" type="text" @click="fb(scope.row.id, '1')">发布</el-button>
<el-button v-if="scope.row.fbzt === '1'" size="mini" type="text" @click="fb(scope.row.id, '0')">撤回</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" />
<!-- 添加或修改油气数智化-产品对话框 -->
<el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="8">
<el-form-item label="类型" prop="fid">
<treeselect v-model="fid" :options="zbOptions2" :normalizer="normalizer" placeholder="请选择上级名称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="名称" prop="mc">
<el-input v-model="form.mc" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="排序" prop="px">
<el-input v-model="form.px" placeholder="请输入排序" />
</el-form-item>
</el-col>
</el-row>
<div v-if="cplx === '产品'">
<div style="width: 97%;height: 450px">
<div>
<el-tabs type="border-card">
<el-tab-pane label="产品简介">
<div style="border: 1px solid #ccc;">
<Toolbar style="border-bottom: 1px solid #ccc;" :editor="editor" :defaultConfig="toolbarConfig"
:mode="mode" />
<Editor style="height: 330px; overflow-y: hidden;" v-model="form.cpjj" :defaultConfig="editorConfig"
:mode="mode" @onCreated="onCreated" />
</div>
</el-tab-pane>
<el-tab-pane label="功能特点">
<div style="border: 1px solid #ccc;">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor2" :defaultConfig="toolbarConfig2"
:mode="mode2" />
<Editor style="height: 330px; overflow-y: hidden;" v-model="form.gntd"
:defaultConfig="editorConfig2" :mode="mode2" @onCreated="onCreated2" />
</div>
</el-tab-pane>
<el-tab-pane label="应用成效">
<div style="border: 1px solid #ccc;">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor3" :defaultConfig="toolbarConfig3"
:mode="mode3" />
<Editor style="height: 330px; overflow-y: hidden;" v-model="form.yycx"
:defaultConfig="editorConfig3" :mode="mode3" @onCreated="onCreated3" />
</div>
</el-tab-pane>
<el-tab-pane label="用法介绍">
<div style="border: 1px solid #ccc;">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor4" :defaultConfig="toolbarConfig4"
:mode="mode4" />
<Editor style="height: 330px; overflow-y: hidden;" v-model="form.yfjs"
:defaultConfig="editorConfig4" :mode="mode4" @onCreated="onCreated4" />
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<!-- <el-form-item label="产品简介" prop="cpjj">-->
<!-- <el-input v-model="form.cpjj" type="textarea" placeholder="请输入内容" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="功能特点" prop="gntd">-->
<!-- <el-input v-model="form.gntd" type="textarea" placeholder="请输入内容" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="应用成效" prop="yycx">-->
<!-- <el-input v-model="form.yycx" type="textarea" placeholder="请输入内容" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="用法介绍" prop="yfjs">-->
<!-- <el-input v-model="form.yfjs" type="textarea" placeholder="请输入内容" />-->
<!-- </el-form-item>-->
</div>
<div v-if="cplx === '服务类'">
<div style="width: 97%;height: 450px">
<div>
<el-tabs type="border-card">
<el-tab-pane label="团队介绍">
<div style="border: 1px solid #ccc;">
<Toolbar style="border-bottom: 1px solid #ccc;" :editor="editor5" :defaultConfig="toolbarConfig5"
:mode="mode5" />
<Editor style="height: 330px; overflow-y: hidden;" v-model="form.tdjs"
:defaultConfig="editorConfig5" :mode="mode5" @onCreated="onCreated5" />
</div>
</el-tab-pane>
<el-tab-pane label="服务特色">
<div style="border: 1px solid #ccc;">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor6" :defaultConfig="toolbarConfig6"
:mode="mode6" />
<Editor style="height: 330px; overflow-y: hidden;" v-model="form.fwts"
:defaultConfig="editorConfig6" :mode="mode6" @onCreated="onCreated6" />
</div>
</el-tab-pane>
<el-tab-pane label="服务案例">
<div style="border: 1px solid #ccc;">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor7" :defaultConfig="toolbarConfig7"
:mode="mode7" />
<Editor style="height: 330px; overflow-y: hidden;" v-model="form.fwal"
:defaultConfig="editorConfig7" :mode="mode7" @onCreated="onCreated7" />
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</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>
</div>
</template>
<script>
import { listCb, getCb, delCb, addCb, updateCb } from "@/api/system/cb";
import { listZb, getZb } from "@/api/system/zb";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getToken } from "@/utils/auth";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from "axios";
import { Base64 } from 'js-base64'
export default {
name: "Cb",
components: {
Treeselect,
Editor,
Toolbar
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 油气数智化-产品表格数据
cbList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
fid: null,
mc: null,
px: null,
fbzt: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
// 油气数智化-分类树选项
zbOptions2: [],
zbOptions: [],
fid: null,
cplx: '',
headers: {
Authorization: "Bearer " + getToken(),
},
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload",
editor: null,
html: ' ',
toolbarConfig: {},
editorConfig: {
placeholder: '请输入内容...',
MENU_CONF: {
// 所有的菜单配置，都要在 MENU_CONF 属性下
// 配置上传图片
uploadImage: {
async customUpload(file, insertFn) {
console.log('file', file)
const form = new FormData()
form.append('file', file)
// 发送post请求
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000,
headers: {
Authorization: "Bearer " + getToken(),
'Content-Type': 'multipart/form-data'
}
})
for (var value of form.values()) {
console.log(value);
}
instance.post("/common/upload", form
).then(res => {
let data = res.data
//insertFn用于图片显示在编辑器上
insertFn(
process.env.VUE_APP_BASE_API + data.fileName, '', '')
})
.catch(err => console.log(err, 888))
}
},
uploadVideo: {
async customUpload(file, insertFn) {
const form = new FormData()
form.append('file', file)
// 发送post请求
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000,
headers: {
Authorization: "Bearer " + getToken(),
'Content-Type': 'multipart/form-data'
}
})
instance.post("/common/upload", form
).then(res => {
let data = res.data
insertFn(process.env.VUE_APP_BASE_API + data.fileName, '')
})
.catch(err => console.log(err, 888))
}
}
}
},
mode: 'default',
editor2: null,
html2: ' ',
toolbarConfig2: {},
editorConfig2: {
placeholder: '请输入内容...',
MENU_CONF: {
// 所有的菜单配置，都要在 MENU_CONF 属性下
// 配置上传图片
uploadImage: {
async customUpload(file, insertFn) {
const form = new FormData()
form.append('file', file)
// 发送post请求
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000,
headers: {
Authorization: "Bearer " + getToken(),
'Content-Type': 'multipart/form-data'
}
})
instance.post("/common/upload", form
).then(res => {
let data = res.data
//insertFn用于图片显示在编辑器上
insertFn(
process.env.VUE_APP_BASE_API + data.fileName, '', '')
})
.catch(err => console.log(err, 888))
}
},
uploadVideo: {
async customUpload(file, insertFn) {
const form = new FormData()
form.append('file', file)
// 发送post请求
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000,
headers: {
Authorization: "Bearer " + getToken(),
'Content-Type': 'multipart/form-data'
}
})
instance.post("/common/upload", form
).then(res => {
let data = res.data
insertFn(process.env.VUE_APP_BASE_API + data.fileName, '')
})
.catch(err => console.log(err, 888))
}
}
}
},
mode2: 'default',
editor3: null,
html3: ' ',
toolbarConfig3: {},
editorConfig3: {
placeholder: '请输入内容...',
MENU_CONF: {
// 所有的菜单配置，都要在 MENU_CONF 属性下
// 配置上传图片
uploadImage: {
async customUpload(file, insertFn) {
const form = new FormData()
form.append('file', file)
// 发送post请求
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000,
headers: {
Authorization: "Bearer " + getToken(),
'Content-Type': 'multipart/form-data'
}
})
instance.post("/common/upload", form
).then(res => {
let data = res.data
//insertFn用于图片显示在编辑器上
insertFn(
process.env.VUE_APP_BASE_API + data.fileName, '', '')
})
.catch(err => console.log(err, 888))
}
},
uploadVideo: {
async customUpload(file, insertFn) {
const form = new FormData()
form.append('file', file)
// 发送post请求
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000,
headers: {
Authorization: "Bearer " + getToken(),
'Content-Type': 'multipart/form-data'
}
})
instance.post("/common/upload", form
).then(res => {
let data = res.data
insertFn(process.env.VUE_APP_BASE_API + data.fileName, '')
})
.catch(err => console.log(err, 888))
}
}
}
},
mode3: 'default',
editor4: null,
html4: ' ',
toolbarConfig4: {},
editorConfig4: {
placeholder: '请输入内容...',
MENU_CONF: {
// 所有的菜单配置，都要在 MENU_CONF 属性下
// 配置上传图片
uploadImage: {
async customUpload(file, insertFn) {
const form = new FormData()
form.append('file', file)
// 发送post请求
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000,
headers: {
Authorization: "Bearer " + getToken(),
'Content-Type': 'multipart/form-data'
}
})
instance.post("/common/upload", form
).then(res => {
let data = res.data
//insertFn用于图片显示在编辑器上
insertFn(
process.env.VUE_APP_BASE_API + data.fileName, '', '')
})
.catch(err => console.log(err, 888))
}
},
uploadVideo: {
async customUpload(file, insertFn) {
const form = new FormData()
form.append('file', file)
// 发送post请求
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000,
headers: {
Authorization: "Bearer " + getToken(),
'Content-Type': 'multipart/form-data'
}
})
instance.post("/common/upload", form
).then(res => {
let data = res.data
insertFn(process.env.VUE_APP_BASE_API + data.fileName, '')
})
.catch(err => console.log(err, 888))
}
}
}
},
mode4: 'default',
editor5: null,
html5: ' ',
toolbarConfig5: {},
editorConfig5: {
placeholder: '请输入内容...',
MENU_CONF: {
// 所有的菜单配置，都要在 MENU_CONF 属性下
// 配置上传图片
uploadImage: {
async customUpload(file, insertFn) {
const form = new FormData()
form.append('file', file)
// 发送post请求
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000,
headers: {
Authorization: "Bearer " + getToken(),
'Content-Type': 'multipart/form-data'
}
})
instance.post("/common/upload", form
).then(res => {
let data = res.data
//insertFn用于图片显示在编辑器上
insertFn(
process.env.VUE_APP_BASE_API + data.fileName, '', '')
})
.catch(err => console.log(err, 888))
}
},
uploadVideo: {
async customUpload(file, insertFn) {
const form = new FormData()
form.append('file', file)
// 发送post请求
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000,
headers: {
Authorization: "Bearer " + getToken(),
'Content-Type': 'multipart/form-data'
}
})
instance.post("/common/upload", form
).then(res => {
let data = res.data
insertFn(process.env.VUE_APP_BASE_API + data.fileName, '')
})
.catch(err => console.log(err, 888))
}
}
}
},
mode5: 'default',
editor6: null,
html6: ' ',
toolbarConfig6: {},
editorConfig6: {
placeholder: '请输入内容...',
MENU_CONF: {
// 所有的菜单配置，都要在 MENU_CONF 属性下
// 配置上传图片
uploadImage: {
async customUpload(file, insertFn) {
const form = new FormData()
form.append('file', file)
// 发送post请求
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000,
headers: {
Authorization: "Bearer " + getToken(),
'Content-Type': 'multipart/form-data'
}
})
instance.post("/common/upload", form
).then(res => {
let data = res.data
//insertFn用于图片显示在编辑器上
insertFn(
process.env.VUE_APP_BASE_API + data.fileName, '', '')
})
.catch(err => console.log(err, 888))
}
},
uploadVideo: {
async customUpload(file, insertFn) {
const form = new FormData()
form.append('file', file)
// 发送post请求
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000,
headers: {
Authorization: "Bearer " + getToken(),
'Content-Type': 'multipart/form-data'
}
})
instance.post("/common/upload", form
).then(res => {
let data = res.data
insertFn(process.env.VUE_APP_BASE_API + data.fileName, '')
})
.catch(err => console.log(err, 888))
}
}
}
},
mode6: 'default',
editor7: null,
html7: ' ',
toolbarConfig7: {},
editorConfig7: {
placeholder: '请输入内容...',
MENU_CONF: {
// 所有的菜单配置，都要在 MENU_CONF 属性下
// 配置上传图片
uploadImage: {
async customUpload(file, insertFn) {
const form = new FormData()
form.append('file', file)
// 发送post请求
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000,
headers: {
Authorization: "Bearer " + getToken(),
'Content-Type': 'multipart/form-data'
}
})
instance.post("/common/upload", form
).then(res => {
let data = res.data
//insertFn用于图片显示在编辑器上
insertFn(
process.env.VUE_APP_BASE_API + data.fileName, '', '')
})
.catch(err => console.log(err, 888))
}
},
uploadVideo: {
async customUpload(file, insertFn) {
const form = new FormData()
form.append('file', file)
// 发送post请求
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000,
headers: {
Authorization: "Bearer " + getToken(),
'Content-Type': 'multipart/form-data'
}
})
instance.post("/common/upload", form
).then(res => {
let data = res.data
insertFn(process.env.VUE_APP_BASE_API + data.fileName, '')
})
.catch(err => console.log(err, 888))
}
}
}
},
mode7: 'default',
previewForm: {},
activeName: 'first',
};
},
created() {
this.getList();
this.getTreeselect2()
},
watch: {
'fid'(newVal, oldVal) {
this.form.fid = newVal;
if (newVal !== null && newVal !== undefined) {
console.log('进入++++++==')
getZb(newVal).then(response => {
this.cplx = response.data.cplx
});
} else {
this.cplx = null
}
}
},
methods: {
statusFormatter(row, column, cellValue) {
return cellValue === '1' ? '已发布' : '未发布';
},
fb(id, zt) {
let list = {
id: id,
fbzt: zt
}
updateCb(list).then(response => {
if (zt === '1') {
this.$modal.msgSuccess("已发布");
} else {
this.$modal.msgSuccess("取消发布");
}
this.getList()
});
},
getTreeselect2() {
listZb().then(response => {
this.zbOptions2 = [];
const data = { id: 0, mc: '产品/服务类', children: [] };
data.children = this.handleTree(response.data, "id", "fid");
this.zbOptions2.push(data);
});
},
/** 转换油气数智化-分类数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.mc,
children: node.children
};
},
/** 查询油气数智化-产品列表 */
getList() {
this.fid = null
this.loading = true;
listCb(this.queryParams).then(response => {
this.cbList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.fid = null
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
fid: null,
mc: null,
px: null,
fbzt: null,
tdjs: null,
cpjj: null,
gntd: null,
yycx: null,
yfjs: null,
fwts: null,
fwal: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.fid = null
this.reset();
this.open = true;
this.title = "添加油气数智化-产品";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getCb(id).then(response => {
this.form = response.data;
this.fid = this.form.fid;
this.open = true;
this.title = "修改油气数智化-产品";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateCb(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
let list = this.form
list.tdjs = Base64.encode(this.form.tdjs)
list.cpjj = Base64.encode(this.form.cpjj)
list.gntd = Base64.encode(this.form.gntd)
list.yycx = Base64.encode(this.form.yycx)
list.yfjs = Base64.encode(this.form.yfjs)
list.fwts = Base64.encode(this.form.fwts)
list.fwal = Base64.encode(this.form.fwal)
addCb(list).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).catch(error => {
console.error("添加失败:", error);
this.$modal.msgError("新增失败，请重试！");
});;
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除油气数智化-产品编号为"' + ids + '"的数据项？').then(function () {
return delCb(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => { });
},
/** 导出按钮操作 */
handleExport() {
this.download('system/cb/export', {
...this.queryParams
}, `cb_${new Date().getTime()}.xlsx`)
},
onCreated(editor) {
this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
},
onCreated2(editor) {
this.editor2 = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
},
onCreated3(editor) {
this.editor3 = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
},
onCreated4(editor) {
this.editor4 = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
},
onCreated5(editor) {
this.editor5 = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
},
onCreated6(editor) {
this.editor6 = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
},
onCreated7(editor) {
this.editor7 = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时，及时销毁编辑器
}
}
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped lang="scss">
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.container {
background: linear-gradient(to bottom, #3167A9, #ffffff);
padding-top: 50px;
position: relative;
height: 50%;
.content {
background: #ffffff;
padding: 20px 20px;
margin: 0 10%;
border: 1px solid #101010;
border-radius: 26px;
//height: calc(100vh - 430px);
.title {
text-align: center;
line-height: 45px;
}
.info {
margin: 20px 0;
display: flex;
justify-content: flex-end;
font-size: 16px;
color: #6C6C6C;
padding-bottom: 10px;
border-bottom: 1px solid #6C6C6C;
.source {
margin-right: 20px;
}
}
.detail {
//max-height: 100%;
font-size: 16px;
min-height: calc(100vh - 600px);
p {
text-indent: 2em;
}
}
}
}
::v-deep img {
max-width: 90% !important;
height: auto !important;
}
::v-deep video {
max-width: 90% !important;
height: auto !important;
}
</style>
src/views/system/zb/index.vue 0 → 100644
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="名称" prop="mc">
<el-input
v-model="queryParams.mc"
placeholder="请输入名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<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-form>
<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:zb:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-sort"
size="mini"
@click="toggleExpandAll"
>展开/折叠</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table
v-if="refreshTable"
v-loading="loading"
:data="zbList"
row-key="id"
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column label="名称" align="center" prop="mc" />
<el-table-column label="排序" align="center" prop="px" />
<el-table-column label="类型" align="center" prop="cplx" />
<el-table-column label="备注" align="center" prop="remark" />
<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-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:zb:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="handleAdd(scope.row)"
v-hasPermi="['system:zb:add']"
>新增</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:zb:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加或修改油气数智化-分类对话框 -->
<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="fid">
<treeselect v-model="form.fid" :options="zbOptions" :normalizer="normalizer" placeholder="请选择父id" />
</el-form-item>
<el-form-item label="名称" prop="mc">
<el-input v-model="form.mc" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="排序" prop="px">
<el-input v-model="form.px" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="类型" prop="cplx">
<el-select v-model="form.cplx" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</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>
</div>
</template>
<script>
import { listZb, getZb, delZb, addZb, updateZb } from "@/api/system/zb";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "Zb",
components: {
Treeselect
},
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 油气数智化-分类表格数据
zbList: [],
// 油气数智化-分类树选项
zbOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 是否展开，默认全部展开
isExpandAll: true,
// 重新渲染表格状态
refreshTable: true,
// 查询参数
queryParams: {
fid: null,
mc: null,
px: null,
cplx: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
options: [{
value: '产品',
label: '产品'
}, {
value: '服务类',
label: '服务类'
}]
};
},
created() {
this.getList();
},
methods: {
/** 查询油气数智化-分类列表 */
getList() {
this.loading = true;
listZb(this.queryParams).then(response => {
this.zbList = this.handleTree(response.data, "id", "fid");
this.loading = false;
});
},
/** 转换油气数智化-分类数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.mc,
children: node.children
};
},
/** 查询油气数智化-分类下拉树结构 */
getTreeselect() {
listZb().then(response => {
this.zbOptions = [];
const data = { id: 0, mc: '产品/服务类', children: [] };
data.children = this.handleTree(response.data, "id", "fid");
this.zbOptions.push(data);
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
fid: null,
mc: null,
px: null,
cplx: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null,
delFlag: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd(row) {
this.reset();
this.getTreeselect();
if (row != null && row.id) {
this.form.fid = row.id;
} else {
this.form.fid = 0;
}
this.open = true;
this.title = "添加油气数智化-分类";
},
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.getTreeselect();
if (row != null) {
this.form.fid = row.fid;
}
getZb(row.id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改油气数智化-分类";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateZb(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addZb(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除油气数智化-分类编号为"' + row.id + '"的数据项？').then(function() {
return delZb(row.id);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
}
};
</script>
src/views/zyyq/index copy.vue 0 → 100644
<template>
<div class="container">
<el-row style="margin: 150px auto 100px ;">
<img src="../../assets/images/background.png" alt="" style="
height: 111px;
width: 877px;
/* background-size: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover; */
" />
</el-row>
<el-row class="content" style="border: red 1px solid;background-color: #f5f8fe;">
<el-col :span="5"
style="padding: 20px; border-radius: 10px; min-height: 700px; background-color: #f5f8fe;border: black 1px solid;">
<el-menu :default-active="activeNameInner" class="product-menu" :background-color="'transparent'"
:text-color="'#333'" :active-text-color="'#409EFF'">
<!-- 外层菜单 -->
<el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.name" :index="outerItem.name"
:default-active="activeNameOuter">
<template #title>
<img src="../../assets/images/tag.png" alt="">
<span
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;">
{{ outerItem.title }}
</span>
</template>
<!-- 第二级菜单 -->
<el-submenu v-for="innerItem in outerItem.collapseData" :key="innerItem.name" :index="innerItem.name"
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }"
@click.native="setActiveInner(innerItem.name)">
<template #title>
<span
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 17px; color: #222222; line-height: 26px;">
{{ innerItem.title }}
</span>
</template>
<!-- 第三级菜单 -->
<el-menu-item v-for="content in innerItem.contents" :key="content" :index="innerItem.name + '-' + content"
@click.native="setActiveInner(innerItem.name, content)"
:class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content }">
<!-- 蓝色圆点 -->
<span :style="{
width: '6px',
height: '6px',
background: '#165BFF',
borderRadius: '50%',
display: 'inline-block',
marginRight: '10px'
}"></span>
<!-- 第三级菜单文本 -->
<span :style="{
fontFamily: 'PingFang SC',
fontWeight: '500',
fontSize: '15px',
color: activeNameInner === innerItem.name + '-' + content ? '#165BFF' : '#222222',
lineHeight: '18px', // 调整行高，进一步减少上下距离
margin: '2px 0', // 减少上下间距
textDecoration: activeNameInner === innerItem.name + '-' + content ? 'underline' : 'none',
textDecorationColor: activeNameInner === innerItem.name + '-' + content ? '#165BFF' : 'transparent'
}">
{{ content }}
</span>
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-col>
<el-col :span="19"
style=" border-radius: 10px; min-height: 700px; background-color: #f5f8fe;border: pink 1px solid;">
<el-tabs v-model="activeName" @tab-click="handleClick" type="card">
<el-tab-pane label="产品简介" name="first" :class="{ 'custom-active1': activeName === 'first' }">
<el-card style="width: 100%;min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${cpjj}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="功能特点" name="second">
<el-card style="width: 100%;min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${gntd}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="应用成效" name="third">
<el-card style="width:100%;min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${yycx}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="用法介绍" name="fourth" :class="{ 'custom-active2': activeName === 'fourth' }">
<el-card style="width: 100%;height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${yfjs}`"></div>
</el-card>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "gasDigitization",
// components: { footerNav },
data() {
return {
cpjj: '',
gntd: '',
yycx: '',
yfjs: '',
activeNameOuter: "", // 默认选中的第一级选项
activeNameInner: "", // 默认选中的第二级选项
collapseDataOuter: [
{
name: "outer1",
title: "外层折叠项 1",
collapseData: [
{
name: "1",
title: "智能化办公",
contents: ["大模型", "会议系统", "数字员工"],
},
{
name: "2",
title: "生产化信息",
contents: ["大模型", "哈哈哈哈", "嘻嘻嘻嘻"],
},
],
},
{
name: "outer2",
title: "外层折叠项 2",
collapseData: [
{
name: "3",
title: "基础设施",
contents: ["999", "777", "666"],
},
{
name: "4",
title: "其他",
contents: ["内容1", "内容2", "内容3"],
},
],
},
],
// -------------
activeName: "first",
name: null,
ipdz: null,
yl1: null,
showDialog: false, // 控制对话框显示的变量
form: {
},
};
},
computed: {},
mounted() {
// 设置默认选中的第一级和第二级
if (this.collapseDataOuter.length > 0) {
this.activeNameOuter = this.collapseDataOuter[0].name; // 默认选中第一个外层选项
const firstInner = this.collapseDataOuter[0].collapseData[0];
if (firstInner) {
this.activeNameInner = firstInner.name + '-' + firstInner.contents[0]; // 默认选中第一个内层选项
}
}
},
methods: {
setActiveInner(innerName, content = '') {
if (content) {
this.activeNameInner = innerName + '-' + content;
console.log('activeNameInner updated to:', this.activeNameInner); // 调试打印
}
},
isInnerActive(innerName) {
return this.activeNameInner.startsWith(innerName); // 判断是否为活动状态
},
handleChange(val) {
console.log(val);
},
handleClick(tab, event) {
console.log(tab, event);
},
getList() {
// listOrganization().then(res => {
// console.log('组织领导', res)
// this.cpjj = res.data.bmjjwh
// this.gntd = res.data.zzld
// this.yycx = res.data.sjglry
// this.yfjs = res.data.sjglry
// })
},
},
};
</script>
<style scoped lang="scss">
::v-deep.custom-active1 {
border-radius: 10px 0 0 0;
/* 第一个选项卡的圆角 */
background-color: #165bff;
/* 选中时的背景色 */
color: white;
/* 选中时的字体颜色 */
}
::v-deep.custom-active2 {
border-radius: 0 10px 0 0;
/* 第四个选项卡的圆角 */
background-color: #165bff;
/* 选中时的背景色 */
color: white;
/* 选中时的字体颜色 */
}
::v-deep .el-tabs__nav .el-tabs__item.is-active {
background-color: #165bff;
/* 选中时的背景色 */
color: white;
/* 选中时的字体颜色 */
}
::v-deep .el-tabs__nav .el-tabs__item {
background-color: #d8e1eb;
/* 未选中时的背景色 */
color: black;
/* 未选中时的字体颜色 */
}
::v-deep .el-tabs__nav .el-tabs__item:hover {
background-color: #165bff;
/* 悬停时的背景色 */
color: white;
/* 悬停时的字体颜色 */
}
::v-deep.el-tabs .el-tabs__header {
padding: 0;
position: relative;
margin: 0 0 0px !important;
}
::v-deep.product-menu {
// 内层菜单展开时的背景色
.inner-submenu-active {
background-color: #ffffff; // 内层菜单背景色为白色
// 设置箭头图标颜色为蓝色
.el-submenu__icon-arrow {
color: #165BFF; // 改变箭头颜色
}
}
// 默认状态的箭头颜色
.el-submenu {
.el-submenu__icon-arrow {
color: #000; // 默认箭头颜色
}
}
}
::v-deep.product-menu .menu-item-active {
color: #165BFF !important;
/* 选中菜单项的字体颜色 */
}
::v-deep.product-menu .el-menu-item {
background-color: #ffffff;
/* 第三级菜单的背景色 */
}
.text-align {
display: flex;
justify-content: flex-end;
margin: 0px 10px;
}
.text {
margin-left: auto;
margin: 10px 15px;
}
.row {
display: flex;
flex-direction: row;
align-items: inherit;
justify-content: center;
margin: 20px 0 20px -30px;
}
.box {
position: relative;
top: -20px;
left: 0;
margin-bottom: -20px;
width: 100%;
min-height: 102vh;
background-image: url(../../assets/images/background1.png) !important;
background-size: cover;
background-repeat: no-repeat;
background-position: left top;
background-color: #f55202;
}
.container {
overflow-y: auto;
height: 100vh;
background-image: url(../../assets/images/background1.png) !important;
// background-size: cover;
background-size: 100% 100%;
background-repeat: no-repeat;
}
h1 {
text-align: center;
color: #333;
}
.content {
margin: 20px auto;
max-width: 70%;
min-height: calc(100vh - 420px);
padding: 20px;
background: #F5F8FE;
border-radius: 10px 10px 0px 0px;
/* 设置背景色 */
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.bt {
text-indent: 3.6em;
margin: 20px auto;
/* max-width: 70%; */
width: 1200px;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow-y: auto;
}
h2 {
font-size: 24px;
color: #333;
margin-bottom: 15px;
font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif;
}
p {
font-size: 16px;
color: #555;
line-height: 1.6;
font-family: "FangSong_GB2312";
}
.title {
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 14px;
color: #c80000;
line-height: 30px;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.bttext {
font-family: PingFang SC;
font-weight: bold;
font-size: 14px;
color: #222222;
line-height: 26px;
margin-left: 10px;
text-decoration: none;
}
.bttext:hover {
color: #165bff;
text-decoration: underline;
}
.custom-title {
font-family: PingFang SC;
font-weight: 800;
font-size: 16px;
color: #165bff;
line-height: 26px;
}
</style>
src/views/zyyq/index.vue 0 → 100644
<template>
<div class="container">
<el-row style="margin: 150px auto 100px ;">
<img src="../../assets/images/background.png" alt="" style="
height: 111px;
width: 877px;
/* background-size: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover; */
" />
</el-row>
<el-row class="content" style="background-color: #f5f8fe;">
<el-col :span="6" style="padding: 20px; border-radius: 10px; min-height: 700px; background-color: #f5f8fe;">
<el-menu :default-active="activeNameInner" class="product-menu" :background-color="'transparent'"
:text-color="'#333'" :active-text-color="'#409EFF'">
<!-- 外层菜单 -->
<el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.name" :index="outerItem.name"
@click.native="setActiveOuter(outerItem.name)">
<template #title>
<img src="../../assets/images/tag.png" alt="">
<span
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;">
{{ outerItem.title }}
</span>
</template>
<!-- 第二级菜单 -->
<el-submenu v-for="innerItem in outerItem.collapseData" :key="innerItem.name" :index="innerItem.name"
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }"
@click.native="setActiveInner(innerItem.name)">
<template #title>
<span
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 17px; color: #222222; line-height: 26px;">
{{ innerItem.title }}
</span>
</template>
<!-- 第三级菜单 -->
<el-menu-item v-for="content in innerItem.contents" :key="content" :index="innerItem.name + '-' + content"
@click.native="setActiveInner(innerItem.name, content)"
:class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content }">
<!-- 蓝色圆点 -->
<span :style="{
width: '6px',
height: '6px',
background: '#165BFF',
borderRadius: '50%',
display: 'inline-block',
marginRight: '10px'
}"></span>
<!-- 第三级菜单文本 -->
<span :style="{
fontFamily: 'PingFang SC',
fontWeight: '500',
fontSize: '15px',
color: activeNameInner === innerItem.name + '-' + content ? '#165BFF' : '#222222',
textDecoration: activeNameInner === innerItem.name + '-' + content ? 'underline' : 'none',
textDecorationColor: activeNameInner === innerItem.name + '-' + content ? '#165BFF' : 'transparent',
textUnderlineOffset: activeNameInner === innerItem.name + '-' + content ? '8px' : '0'
}">
{{ content }}
</span>
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-col>
<!-- 显示选项卡的内容 -->
<el-col v-if="activeNameOuter === 'outer1'" :span="18"
style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;">
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
<el-tab-pane label="产品简介" name="first" :class="{ 'custom-active1': activeName === 'first' }">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${cpjj}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="功能特点" name="second" :class="{ 'custom-active2': activeName === 'second' }">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${gntd}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="应用成效" name="third" :class="{ 'custom-active3': activeName === 'third' }">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${yycx}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="用法介绍" name="fourth" :class="{ 'custom-active4': activeName === 'fourth' }">
<el-card style="width: 100%; height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${yfjs}`"></div>
</el-card>
</el-tab-pane>
</el-tabs>
</el-col>
<!-- 外层折叠项 2 选中的内容 -->
<el-col v-else-if="activeNameOuter === 'outer2'" :span="18"
style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;">
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
<el-tab-pane label="团队介绍" name="first">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${tdjs}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="服务特色" name="second">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${fwts}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="服务案例" name="third">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${fwal}`"></div>
</el-card>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "gasDigitization",
// components: { footerNav },
data() {
return {
cpjj: '',
gntd: '',
yycx: '',
yfjs: '',
tdjs: '',
fwts: '',
fwal: '',
activeNameOuter: "", // 默认选中的第一级选项
activeNameInner: "", // 默认选中的第二级选项
collapseDataOuter: [
{
name: "outer1",
title: "外层折叠项 1",
collapseData: [
{
name: "1",
title: "智能化办公",
contents: ["大模型", "会议系统", "数字员工"],
},
{
name: "2",
title: "生产化信息",
contents: ["大模型", "哈哈哈哈", "嘻嘻嘻嘻"],
},
],
},
{
name: "outer2",
title: "外层折叠项 2",
collapseData: [
{
name: "3",
title: "基础设施",
contents: ["999", "777", "666"],
},
{
name: "4",
title: "其他",
contents: ["内容1", "内容2", "内容3"],
},
],
},
],
// -------------
activeName: "first",
name: null,
ipdz: null,
yl1: null,
showDialog: false, // 控制对话框显示的变量
form: {
},
};
},
computed: {},
mounted() {
// 设置默认选中的第一级和第二级
if (this.collapseDataOuter.length > 0) {
this.activeNameOuter = this.collapseDataOuter[0].name; // 默认选中第一个外层选项
const firstInner = this.collapseDataOuter[0].collapseData[0];
if (firstInner) {
this.activeNameInner = firstInner.name + '-' + firstInner.contents[0]; // 默认选中第一个内层选项
}
}
},
methods: {
setActiveOuter(name) {
this.activeNameOuter = name;
},
setActiveInner(innerName, content = '') {
if (content) {
this.activeNameInner = innerName + '-' + content;
console.log('activeNameInner updated to:', this.activeNameInner); // 调试打印
}
},
isInnerActive(innerName) {
return this.activeNameInner.startsWith(innerName); // 判断是否为活动状态
},
handleChange(val) {
console.log(val);
},
handleClick(tab, event) {
this.activeName = tab.name; // 确保更新activeName
console.log(this.activeName, ' this.activeName');
},
getList() {
// listOrganization().then(res => {
// console.log('组织领导', res)
// this.cpjj = res.data.bmjjwh
// this.gntd = res.data.zzld
// this.yycx = res.data.sjglry
// this.yfjs = res.data.sjglry
// })
},
},
};
</script>
<style scoped lang="scss">
::v-deep .rounded-corner-start {
border-radius: 10px 0 0 0 !important;
}
::v-deep.rounded-corner-end {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
/* 其他可能需要的样式 */
}
::v-deep.el-submenu .el-menu-item {
height: 39px;
line-height: 50px;
padding: 0 45px;
min-width: 200px;
}
::v-deep.el-submenu .el-submenu__title {
border-bottom-color: #1890ff;
height: 46px;
}
::v-deep.custom-tabs .el-tabs__nav .el-tabs__item {
padding: 0 20px;
height: 43px;
box-sizing: border-box;
line-height: 40px;
display: inline-block;
list-style: none;
font-size: 15px;
font-weight: 500;
color: #303133;
position: relative;
width: 120px;
text-align: center;
}
::v-deep.el-tabs .el-tabs__header.el-tabs__nav .el-tabs__item {
color: #ff0000;
/* 设置字体颜色 */
}
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav {
border: 1px none;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1):hover {
background-color: #165bff;
color: white;
border-radius: 10px 0 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2):hover {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3):hover {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4):hover {
background-color: #165bff;
color: white;
border-radius: 0 10px 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1).is-active {
background-color: #165bff;
color: white;
border-radius: 10px 0 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2).is-active {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3).is-active {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4).is-active {
background-color: #165bff;
color: white;
border-radius: 0 10px 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1) {
background-color: #d8e1eb;
color: black;
border-radius: 10px 0 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2) {
background-color: #d8e1eb;
color: black;
;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3) {
background-color: #d8e1eb;
color: black;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4) {
background-color: #d8e1eb;
color: black;
border-radius: 0 10px 0 0;
}
::v-deep.el-tabs .el-tabs__header {
padding: 0;
position: relative;
margin: 0 0 0px !important;
}
::v-deep.product-menu {
// 内层菜单展开时的背景色
.inner-submenu-active {
background-color: #ffffff; // 内层菜单背景色为白色
// 设置箭头图标颜色为蓝色
.el-submenu__icon-arrow {
color: #165BFF; // 改变箭头颜色
}
}
// 默认状态的箭头颜色
.el-submenu {
.el-submenu__icon-arrow {
color: #000; // 默认箭头颜色
}
}
}
::v-deep.product-menu .menu-item-active {
color: #165BFF !important;
/* 选中菜单项的字体颜色 */
}
::v-deep.product-menu .el-menu-item {
background-color: #ffffff;
/* 第三级菜单的背景色 */
}
// .text-align {
// display: flex;
// justify-content: flex-end;
// margin: 0px 10px;
// }
// .text {
// margin-left: auto;
// margin: 3px 15px;
// }
// .row {
// display: flex;
// flex-direction: row;
// align-items: inherit;
// justify-content: center;
// margin: 20px 0 20px -30px;
// }
// .box {
// position: relative;
// top: -20px;
// left: 0;
// margin-bottom: -20px;
// width: 100%;
// min-height: 102vh;
// background-image: url(../../assets/images/background1.png) !important;
// background-size: cover;
// background-repeat: no-repeat;
// background-position: left top;
// background-color: #f55202;
// }
.container {
overflow-y: auto;
height: 1080px;
background-image: url(../../assets/images/background1.png) !important;
// background-size: cover;
background-size: 100% 60%;
background-repeat: no-repeat;
}
h1 {
text-align: center;
color: #333;
}
.content {
margin: 20px auto;
max-width: 70%;
min-height: calc(100vh - 420px);
padding: 20px;
background: #F5F8FE;
border-radius: 10px 10px 0px 0px;
/* 设置背景色 */
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.bt {
text-indent: 3.6em;
margin: 20px auto;
/* max-width: 70%; */
width: 1200px;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow-y: auto;
}
h2 {
font-size: 24px;
color: #333;
margin-bottom: 15px;
font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif;
}
p {
font-size: 16px;
color: #555;
line-height: 1.6;
font-family: "FangSong_GB2312";
}
.title {
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 14px;
color: #c80000;
line-height: 30px;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.bttext {
font-family: PingFang SC;
font-weight: bold;
font-size: 14px;
color: #222222;
line-height: 26px;
margin-left: 10px;
text-decoration: none;
}
.bttext:hover {
color: #165bff;
text-decoration: underline;
}
.custom-title {
font-family: PingFang SC;
font-weight: 800;
font-size: 16px;
color: #165bff;
line-height: 26px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment