Commit a8a4c625 by cat

zd 首页样式修改 缩略图弹窗显示 成果管理

parent 66a45d27
import request from '@/utils/request' import request from '@/utils/request'
// 查询成果管理列表 // 查询成果列表列表
export function listWjscqk(query) { export function listWjscqk(query) {
return request({ return request({
url: '/yscgWjscqk/wjscqk/list', url: '/yscgWjscqk/wjscqk/list',
method: 'get', method: 'get',
params: query params: query,
}) })
} }
// 查询成果管理详细 // 查询成果列表详细
export function getWjscqk(id) { export function getWjscqk(id) {
return request({ return request({
url: '/yscgWjscqk/wjscqk/' + id, url: '/yscgWjscqk/wjscqk/' + id,
method: 'get' method: 'get',
}) })
} }
// 新增成果管理 // 新增成果列表
export function addWjscqk(data) { export function addWjscqk(data) {
return request({ return request({
url: '/yscgWjscqk/wjscqk', url: '/yscgWjscqk/wjscqk',
method: 'post', method: 'post',
data: data data: data,
}) })
} }
// 修改成果管理 // 修改成果列表
export function updateWjscqk(data) { export function updateWjscqk(data) {
return request({ return request({
url: '/yscgWjscqk/wjscqk', url: '/yscgWjscqk/wjscqk',
method: 'put', method: 'put',
data: data data: data,
}) })
} }
// 删除成果管理 // 删除成果列表
export function delWjscqk(id) { export function delWjscqk(id) {
return request({ return request({
url: '/yscgWjscqk/wjscqk/' + id, url: '/yscgWjscqk/wjscqk/' + id,
method: 'delete' method: 'delete',
})
}
// 查询成果管理列表
export function listYscgList(query) {
return request({
url: '/ysqqXmxx/ysqqXmxx/yscgList',
method: 'get',
params: query,
}) })
} }
...@@ -5,7 +5,7 @@ export function listZllx(query) { ...@@ -5,7 +5,7 @@ export function listZllx(query) {
return request({ return request({
url: '/yscgZllx/zllx/list', url: '/yscgZllx/zllx/list',
method: 'get', method: 'get',
params: query params: query,
}) })
} }
...@@ -13,7 +13,7 @@ export function listZllx(query) { ...@@ -13,7 +13,7 @@ export function listZllx(query) {
export function getZllx(id) { export function getZllx(id) {
return request({ return request({
url: '/yscgZllx/zllx/' + id, url: '/yscgZllx/zllx/' + id,
method: 'get' method: 'get',
}) })
} }
...@@ -22,7 +22,7 @@ export function addZllx(data) { ...@@ -22,7 +22,7 @@ export function addZllx(data) {
return request({ return request({
url: '/yscgZllx/zllx', url: '/yscgZllx/zllx',
method: 'post', method: 'post',
data: data data: data,
}) })
} }
...@@ -31,7 +31,7 @@ export function updateZllx(data) { ...@@ -31,7 +31,7 @@ export function updateZllx(data) {
return request({ return request({
url: '/yscgZllx/zllx', url: '/yscgZllx/zllx',
method: 'put', method: 'put',
data: data data: data,
}) })
} }
...@@ -39,6 +39,14 @@ export function updateZllx(data) { ...@@ -39,6 +39,14 @@ export function updateZllx(data) {
export function delZllx(id) { export function delZllx(id) {
return request({ return request({
url: '/yscgZllx/zllx/' + id, url: '/yscgZllx/zllx/' + id,
method: 'delete' method: 'delete',
})
}
// 查询资料类型下拉选项
export function selectZllx() {
return request({
url: '/yscgZllx/zllx/selectZllx',
method: 'get',
}) })
} }

79.2 KB | W: | H:

1.65 KB | W: | H:

src/assets/images/profile.jpg
src/assets/images/profile.jpg
src/assets/images/profile.jpg
src/assets/images/profile.jpg
  • 2-up
  • Swipe
  • Onion skin
...@@ -225,17 +225,30 @@ export const dynamicRoutes = [ ...@@ -225,17 +225,30 @@ export const dynamicRoutes = [
}, },
], ],
}, },
{
path: '/yscgWjscqk/wjscqk',
component: Layout,
hidden: true,
children: [
{
path: 'index',
component: () => import('@/views/yscgWjscqk/wjscqk/index'),
name: 'WjscqkIndex',
meta: { title: '成果管理', activeMenu: '/yscgWjscqk/yscg' },
},
],
},
]; ];
// 防止连续点击多次路由报错 // 防止连续点击多次路由报错
let routerPush = Router.prototype.push; let routerPush = Router.prototype.push;
let routerReplace = Router.prototype.replace; let routerReplace = Router.prototype.replace;
// push // push
Router.prototype.push = function push(location) { Router.prototype.push = function push (location) {
return routerPush.call(this, location).catch((err) => err); return routerPush.call(this, location).catch((err) => err);
}; };
// replace // replace
Router.prototype.replace = function push(location) { Router.prototype.replace = function push (location) {
return routerReplace.call(this, location).catch((err) => err); return routerReplace.call(this, location).catch((err) => err);
}; };
......
...@@ -19,11 +19,11 @@ ...@@ -19,11 +19,11 @@
<el-tab-pane label="待验收" name="pending"> <el-tab-pane label="待验收" name="pending">
<div class="card-container"> <div class="card-container">
<el-row :gutter="16" v-loading="pendingLoading"> <el-row :gutter="16" v-loading="pendingLoading">
<el-col :span="6" v-for="item in pendingList" :key="item.id" class="card-item"> <el-col :span="4" v-for="item in pendingList" :key="item.id" class="card-item">
<el-card class="project-card" shadow="hover"> <el-card class="project-card" shadow="hover">
<div class="card-header" @click="goNav2(item)" style="cursor: pointer;"> <div class="card-header" @click="goNav2(item)" style="cursor: pointer;">
<h3 class="project-title">{{ item.xmmc }}</h3> <h3 class="project-title">{{ item.xmmc }}</h3>
<el-tag type="warning" size="small">待验收</el-tag> <el-tag size="small" class="status-tag status-pending">待验收</el-tag>
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="content-wrapper"> <div class="content-wrapper">
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
</div> </div>
</div> </div>
<div class="button-section"> <div class="button-section">
<el-button size="small" @click="handleComplete(item)">完成</el-button> <el-button size="mini" @click="handleComplete(item)">完成</el-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
<el-tab-pane label="已验收" name="completed"> <el-tab-pane label="已验收" name="completed">
<div class="card-container"> <div class="card-container">
<el-row :gutter="16" v-loading="completedLoading"> <el-row :gutter="16" v-loading="completedLoading">
<el-col :span="6" v-for="item in completedList" :key="item.id" class="card-item"> <el-col :span="4" v-for="item in completedList" :key="item.id" class="card-item">
<el-card class="project-card" shadow="hover"> <el-card class="project-card" shadow="hover">
<div class="card-header"> <div class="card-header">
<h3 class="project-title">{{ item.xmmc }}</h3> <h3 class="project-title">{{ item.xmmc }}</h3>
...@@ -314,6 +314,7 @@ export default { ...@@ -314,6 +314,7 @@ export default {
padding: 3px 0; padding: 3px 0;
border-radius: 4px; border-radius: 4px;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
align-items: center;
} }
.info-item:hover { .info-item:hover {
...@@ -325,6 +326,7 @@ export default { ...@@ -325,6 +326,7 @@ export default {
min-width: 70px; min-width: 70px;
flex-shrink: 0; flex-shrink: 0;
font-weight: 500; font-weight: 500;
white-space: nowrap;
} }
.value { .value {
...@@ -334,6 +336,7 @@ export default { ...@@ -334,6 +336,7 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-weight: 400; font-weight: 400;
min-width: 0;
} }
.button-section { .button-section {
...@@ -346,11 +349,47 @@ export default { ...@@ -346,11 +349,47 @@ export default {
} }
.button-section .el-button { .button-section .el-button {
width: 70px; width: 50px;
height: 28px; height: 25px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
border-radius: 14px; border-radius: 20px;
background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
border: none;
color: #ffffff !important;
box-shadow: 0 1px 4px rgba(64, 158, 255, 0.2);
transition: all 0.2s ease-out;
position: relative;
overflow: hidden;
letter-spacing: 0.5px;
}
.button-section .el-button:hover {
background: linear-gradient(135deg, #337ecc 0%, #5a9eff 100%);
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.25);
transform: translateY(-0.5px);
color: #ffffff !important;
}
.button-section .el-button:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(64, 158, 255, 0.2);
color: #ffffff !important;
}
.button-section .el-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
transition: left 0.3s ease-out;
}
.button-section .el-button:hover::before {
left: 100%;
} }
/* Safety: if any global rule hid buttons inside cards on non-hover, override */ /* Safety: if any global rule hid buttons inside cards on non-hover, override */
...@@ -367,6 +406,17 @@ export default { ...@@ -367,6 +406,17 @@ export default {
visibility: visible; visibility: visible;
} }
/* 状态标签:待验收(蓝色系,贴合系统主色) */
.status-tag {
border: none !important;
font-weight: 600;
}
.status-pending {
color: #1f3b64;
background: rgba(64, 158, 255, 0.12);
}
/* 分页固定在右下角 */ /* 分页固定在右下角 */
.pagination-wrapper { .pagination-wrapper {
position: fixed; position: fixed;
...@@ -377,13 +427,13 @@ export default { ...@@ -377,13 +427,13 @@ export default {
/* 默认大屏下每行5列 */ /* 默认大屏下每行5列 */
.el-col { .el-col {
width: 25% !important; width: 20% !important;
} }
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 1400px) { @media (max-width: 1400px) {
.el-col { .el-col {
width: 25% !important; width: 20% !important;
} }
} }
......
<!-- 成果管理 -->
<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="xmmc">
<el-input v-model="queryParams.xmmc" placeholder="请输入项目名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="区块" prop="qk">
<el-input v-model="queryParams.qk" 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-table border v-loading="loading" :data="yscgList" :span-method="spanMethod">
<el-table-column label="项目名称" align="center" prop="xmmc" min-width="150" show-overflow-tooltip />
<el-table-column label="区块" align="center" prop="qk" min-width="120" show-overflow-tooltip />
<el-table-column label="资料类型" align="center" prop="zllxmc" min-width="120" show-overflow-tooltip />
<el-table-column label="上传情况" align="center" min-width="120">
<template slot-scope="scope">
<i :class="scope.row.zlsl > 0 ? 'el-icon-check' : 'el-icon-close'"
:style="{ color: scope.row.zlsl > 0 ? '#67C23A' : '#F56C6C', fontSize: '18px' }">
</i>
</template>
</el-table-column>
<el-table-column label="成果" align="center" prop="id" min-width="100" show-overflow-tooltip>
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(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>
</template>
<script>
import { listYscgList } from "@/api/yscgWjscqk/wjscqk"
export default {
name: "Yscg",
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 成果管理表格数据
yscgList: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
xmmc: null,
qk: null
}
}
},
created() {
this.getList()
},
methods: {
/** 查询成果管理列表 */
getList() {
this.loading = true
listYscgList(this.queryParams).then(response => {
this.yscgList = response.rows
this.total = response.total
this.loading = false
})
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm")
this.handleQuery()
},
/** 成果按钮操作 */
handleView(row) {
// 跳转到成果详情页面,传id
this.$router.push({
path: '/yscgWjscqk/wjscqk/index',
query: {
xmid: row.id
}
})
},
/** 表格行合并方法 */
spanMethod({ row, column, rowIndex, columnIndex }) {
// 项目名称列(第0列)、区块列(第1列)和成果列(第3列)需要合并
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 4) {
let fieldName, currentValue
if (columnIndex === 0) {
fieldName = 'xmmc'
currentValue = row[fieldName]
} else if (columnIndex === 1) {
fieldName = 'qk'
currentValue = row[fieldName]
} else if (columnIndex === 4) {
fieldName = 'id'
currentValue = row[fieldName]
}
// 如果当前值为空,不合并
if (!currentValue) {
return [1, 1]
}
// 如果当前值与上一行相同,则隐藏当前行
if (rowIndex > 0 && this.yscgList[rowIndex - 1][fieldName] === currentValue) {
return [0, 0]
}
// 计算需要合并的行数
let rowspan = 1
for (let i = rowIndex + 1; i < this.yscgList.length; i++) {
if (this.yscgList[i][fieldName] === currentValue) {
rowspan++
} else {
break
}
}
return [rowspan, 1]
}
// 其他列不合并
return [1, 1]
}
}
}
</script>
...@@ -26,7 +26,7 @@ export default { ...@@ -26,7 +26,7 @@ export default {
height: { type: Number, default: 0 }, height: { type: Number, default: 0 },
idOverride: { type: [String, Number], default: null } idOverride: { type: [String, Number], default: null }
}, },
data() { data () {
return { return {
chart: null, chart: null,
resizeObserver: null, resizeObserver: null,
...@@ -46,7 +46,7 @@ export default { ...@@ -46,7 +46,7 @@ export default {
points: [] points: []
} }
}, },
mounted() { mounted () {
// 仅使用延迟初始化,确保容器有尺寸后再 init // 仅使用延迟初始化,确保容器有尺寸后再 init
this.deferInit() this.deferInit()
window.addEventListener('resize', this.resizeChart) window.addEventListener('resize', this.resizeChart)
...@@ -69,16 +69,16 @@ export default { ...@@ -69,16 +69,16 @@ export default {
}) })
} }
}, },
created() { created () {
// 尽早触发接口调用,进入页面即发起请求 // 尽早触发接口调用,进入页面即发起请求
this.loadDht() this.loadDht()
}, },
activated() { activated () {
// 当页面被 keep-alive 缓存后再次进入时,确保尺寸和图表刷新 // 当页面被 keep-alive 缓存后再次进入时,确保尺寸和图表刷新
this.deferInit() this.deferInit()
this.resizeChart() this.resizeChart()
}, },
beforeDestroy() { beforeDestroy () {
window.removeEventListener('resize', this.resizeChart) window.removeEventListener('resize', this.resizeChart)
if (this.chart) { if (this.chart) {
this.chart.dispose() this.chart.dispose()
...@@ -91,7 +91,7 @@ export default { ...@@ -91,7 +91,7 @@ export default {
}, },
methods: { methods: {
// 等待容器有有效尺寸再初始化,避免 echarts 容器宽高为 0 报错 // 等待容器有有效尺寸再初始化,避免 echarts 容器宽高为 0 报错
deferInit() { deferInit () {
const tryInit = () => { const tryInit = () => {
const el = this.$refs.chartRef const el = this.$refs.chartRef
if (!el) return if (!el) return
...@@ -135,10 +135,10 @@ export default { ...@@ -135,10 +135,10 @@ export default {
} }
this.$nextTick(tryInit) this.$nextTick(tryInit)
}, },
resizeChart() { resizeChart () {
if (this.chart) this.chart.resize() if (this.chart) this.chart.resize()
}, },
initChart() { initChart () {
const el = this.$refs.chartRef const el = this.$refs.chartRef
if (!el) return if (!el) return
if (this.chart) { if (this.chart) {
...@@ -153,6 +153,7 @@ export default { ...@@ -153,6 +153,7 @@ export default {
// 初始渲染 // 初始渲染
this.renderChart() this.renderChart()
this.resizeChart() this.resizeChart()
this.bindChartEvents()
// 对于缩略图模式,确保渲染成功 // 对于缩略图模式,确保渲染成功
if (this.compact) { if (this.compact) {
...@@ -160,7 +161,7 @@ export default { ...@@ -160,7 +161,7 @@ export default {
} }
}, },
// 数据变化后自动刷新(确保缩略图及时绘制) // 数据变化后自动刷新(确保缩略图及时绘制)
_requestRender() { _requestRender () {
if (!this.chart) return if (!this.chart) return
this.$nextTick(() => { this.$nextTick(() => {
this.renderChart() this.renderChart()
...@@ -173,7 +174,7 @@ export default { ...@@ -173,7 +174,7 @@ export default {
}) })
}, },
// 调用地层/断层图接口(示例),优先从路由参数获取 id // 调用地层/断层图接口(示例),优先从路由参数获取 id
loadDht() { loadDht () {
if (this.loadingDht || this.dhtResult) return if (this.loadingDht || this.dhtResult) return
try { try {
const route = this.$route || {} const route = this.$route || {}
...@@ -201,7 +202,7 @@ export default { ...@@ -201,7 +202,7 @@ export default {
} }
}, },
// 将接口返回的数据应用到图表状态 // 将接口返回的数据应用到图表状态
applyDhtResult() { applyDhtResult () {
const data = this.dhtResult || {} const data = this.dhtResult || {}
// 边界 // 边界
this.xMin = data.xmin != null ? Number(data.xmin) : this.xMin this.xMin = data.xmin != null ? Number(data.xmin) : this.xMin
...@@ -247,7 +248,7 @@ export default { ...@@ -247,7 +248,7 @@ export default {
} catch (e) { } } catch (e) { }
}, },
// 生成图表配置 // 生成图表配置
buildOption() { buildOption () {
// 若未提供边界,则根据数据自动估算 // 若未提供边界,则根据数据自动估算
const allXs = [] const allXs = []
const allYs = [] const allYs = []
...@@ -321,10 +322,41 @@ export default { ...@@ -321,10 +322,41 @@ export default {
} }
}, },
// 渲染或更新图表 // 渲染或更新图表
renderChart() { renderChart () {
if (!this.chart) return if (!this.chart) return
const option = this.buildOption() const option = this.buildOption()
this.chart.setOption(option, true) this.chart.setOption(option, true)
// 确保事件绑定有效
this.bindChartEvents()
},
// 绑定点击/双击事件,把被点击的绿色线条映射为 segy 下标并上报
bindChartEvents () {
if (!this.chart) return
// 解除旧绑定避免重复
this.chart.off('click')
this.chart.off('dblclick')
const getLineIndexBySeries = (seriesIndex) => {
// 如果有井点散点,最前面占 1 个 series
const hasPoints = Array.isArray(this.points) && this.points.length > 0
const base = hasPoints ? 1 : 0
// 每条线我们 push 了两个 series:line 和一个灰色散点
if (seriesIndex < base) return -1
const offset = seriesIndex - base
// 偶数 -> 折线;奇数 -> 叠加的灰色散点
return Math.floor(offset / 2)
}
const emitPick = (params) => {
if (!params || (params.seriesType !== 'line' && params.seriesType !== 'scatter')) return
const idx = getLineIndexBySeries(params.seriesIndex)
if (idx >= 0 && idx < this.segyLines.length) {
this.$emit('segyLinePick', { index: idx })
}
}
this.chart.on('click', emitPick)
this.chart.on('dblclick', emitPick)
} }
} }
} }
......
This source diff could not be displayed because it is too large. You can view the blob instead.
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