From d29d77e91951e30abba6596359b138bc4c6ac108 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期三, 25 三月 2026 14:37:27 +0800
Subject: [PATCH] 修改折线图
---
src/views/dataAnalysis/components/DepartLabel.vue | 500 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 500 insertions(+), 0 deletions(-)
diff --git a/src/views/dataAnalysis/components/DepartLabel.vue b/src/views/dataAnalysis/components/DepartLabel.vue
new file mode 100644
index 0000000..eef25ac
--- /dev/null
+++ b/src/views/dataAnalysis/components/DepartLabel.vue
@@ -0,0 +1,500 @@
+<template>
+ <div class="depart-label-container">
+ <div class="table-page-search-wrapper">
+ <a-form layout="inline">
+ <a-row :gutter="24">
+ <a-col :md="6" :sm="12">
+ <a-form-item label="鏍囩鍚嶇О">
+ <a-select v-model="queryParam.labelName" placeholder="璇烽�夋嫨鏍囩" allowClear @change="searchQuery">
+ <a-select-option value="">鍏ㄩ儴</a-select-option>
+ <a-select-option v-for="label in labelList" :key="label" :value="label">
+ {{ label }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ <a-col :md="6" :sm="12">
+ <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+ <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">閲嶇疆</a-button>
+ </a-col>
+ </a-row>
+ </a-form>
+ </div>
+
+ <div class="table-operator">
+ <div class="data-overview-ct">
+ <div class="block-title" style="display: flex; align-items: center">
+ <div style="margin-right: 12px">鏁版嵁瀵规瘮</div>
+ <a-switch v-model="isContrast" />
+ <a-range-picker
+ style="width: 300px; margin: 0 12px"
+ v-if="isContrast"
+ v-model="contrastTimeRange"
+ @change="contrastTimeChange"
+ :placeholder="['寮�濮嬫椂闂�', '缁撴潫鏃堕棿']"
+ />
+ </div>
+ </div>
+ </div>
+
+ <div class="chart-container" v-if="isContrast && lineChartData.xData && lineChartData.xData.length > 0">
+ <div class="chart-block">
+ <div class="block-title">鏁版嵁瀵规瘮鏌辩姸鍥�</div>
+ <DataReLineChart
+ ref="lineChart"
+ :chartData="lineChartData"
+ :showpercent="true"
+ :domId="'departLabelLineChart'"
+ ></DataReLineChart>
+ </div>
+ </div>
+
+ <a-table
+ :columns="columns"
+ :data-source="dataSource"
+ :pagination="pagination"
+ :loading="loading"
+ @change="handleTableChange"
+ :scroll="{ y: 350 }"
+ >
+ <span slot="action" slot-scope="text, record">
+ <a @click="handleAdd(record)" style="margin-right: 8px">娣诲姞鏍囩</a>
+ <a-dropdown>
+ <a-menu slot="overlay">
+ <a-menu-item v-for="label in getLabels(record)" :key="label" @click="() => handleMenuClick(record, label)">
+ 鍒犻櫎{{ label }}
+ </a-menu-item>
+ </a-menu>
+ <a slot="default">鍒犻櫎鏍囩</a>
+ </a-dropdown>
+ </span>
+ </a-table>
+
+ <DepartLabelModal
+ ref="modalForm"
+ @ok="modalFormOk"
+ :parentCode="queryParam.parentCode"
+ :parentId="queryParam.parentId"
+ ></DepartLabelModal>
+ </div>
+</template>
+
+<script>
+import { getAction, deleteAction, putAction, postAction } from '@tievd/cube-block/lib/api/manage'
+import DepartLabelModal from './DepartLabelModal'
+import DataReLineChart from './DataReLineChart'
+
+export default {
+ name: 'DepartLabel',
+ components: {
+ DepartLabelModal,
+ DataReLineChart
+ },
+ data() {
+ return {
+ queryParam: {
+ labelName: '',
+ parentCode: JSON.parse(localStorage.getItem("userDepartInfo")).orgCode,
+ parentId: JSON.parse(localStorage.getItem("userDepartInfo")).id
+ },
+ labelList: [],
+ dataSource: [],
+ loading: false,
+ isContrast: false,
+ statisTotalObj: {},
+ contrastObj: {},
+ contrastStartTime: '',
+ contrastEndTime: '',
+ contrastTimeRange: [],
+ lineChartData: {},
+ currentOrgData: [],
+ contrastOrgData: [],
+ pagination: {
+ current: 1,
+ pageSize: 10,
+ total: 0,
+ showSizeChanger: true,
+ showTotal: (total) => `鍏� ${total} 鏉
+ },
+ columns: [
+ {
+ title: '搴忓彿',
+ dataIndex: '',
+ key: 'rowIndex',
+ width: 60,
+ align: 'center',
+ customRender: function (text, record, index) {
+ return index + 1
+ }
+ },
+ {
+ title: '绔欑偣鍚嶇О',
+ align: 'center',
+ dataIndex: 'depart_name'
+ },
+ {
+ title: '绔欑偣缂栫爜',
+ align: 'center',
+ dataIndex: 'org_code'
+ },
+ {
+ title: '鏍囩鍚嶇О',
+ align: 'center',
+ dataIndex: 'label_name'
+ },
+ {
+ title: '鍒涘缓鏃堕棿',
+ align: 'center',
+ dataIndex: 'create_time',
+ customRender: function (text) {
+ if (!text) return ''
+ return text.replace('T', ' ')
+ }
+ },
+ {
+ title: '鎿嶄綔',
+ dataIndex: 'action',
+ align: 'center',
+ scopedSlots: { customRender: 'action' }
+ }
+ ],
+ url: {
+ list: '/jyz/departLabel/list',
+ listLabels: '/jyz/departLabel/listLabels',
+ listDeparts: '/jyz/custom/sys/depart/tables',
+ delete: '/jyz/departLabel/delete',
+ update: '/jyz/departLabel/update',
+ queryOrgOilCount: '/jyz/departLabel/queryOrgOilCount'
+ }
+ }
+ },
+ watch: {
+ isContrast(newVal) {
+ if (newVal) {
+ this.setDefaultMonthTime()
+ }
+ }
+ },
+ created() {
+ this.loadLabelList()
+ this.loadData()
+ },
+ methods: {
+ loadLabelList() {
+ const params = {
+ parentCode: this.queryParam.parentCode,
+ parentId: this.queryParam.parentId
+ }
+ getAction(this.url.listLabels, params).then((res) => {
+ if (res.success) {
+ this.labelList = res.result
+ console.log('鏍囩鍒楄〃:', this.labelList)
+ } else {
+ console.error('鍔犺浇鏍囩鍒楄〃澶辫触:', res.message)
+ }
+ })
+ },
+ loadData() {
+ this.loading = true
+ const params = {
+ pageNo: this.pagination.current,
+ pageSize: this.pagination.pageSize,
+ labelName: this.queryParam.labelName,
+ parentCode: this.queryParam.parentCode,
+ parentId: this.queryParam.parentId
+ }
+
+ getAction(this.url.list, params).then((res) => {
+ if (res.success) {
+ this.dataSource = res.result.records || []
+ this.pagination.total = Number(res.result.total) || 0
+ this.getOrgData()
+ } else {
+ this.$message.error(res.message || '鏌ヨ澶辫触')
+ }
+ }).catch(() => {
+ this.$message.error('鏌ヨ澶辫触')
+ }).finally(() => {
+ this.loading = false
+ })
+ },
+ updateChartData() {
+ if (this.dataSource.length === 0) {
+ this.lineChartData = {}
+ return
+ }
+
+ console.log('updateChartData - dataSource:', this.dataSource)
+ console.log('updateChartData - currentOrgData:', this.currentOrgData)
+ console.log('updateChartData - contrastOrgData:', this.contrastOrgData)
+
+ const xData = this.dataSource.map(item => item.depart_name)
+
+ const currentCarData = this.dataSource.map(item => {
+ const orgData = this.currentOrgData.find(d => d.org_code === item.org_code)
+ console.log(`Matching ${item.org_code}:`, orgData)
+ return orgData ? (orgData.carCount || 0) : 0
+ })
+
+ const currentOilData = this.dataSource.map(item => {
+ const orgData = this.currentOrgData.find(d => d.org_code === item.org_code)
+ return orgData ? (orgData.oilCount || 0) : 0
+ })
+
+ const currentStationData = this.dataSource.map(item => {
+ const orgData = this.currentOrgData.find(d => d.org_code === item.org_code)
+ return orgData ? (orgData.stationCount || 0) : 0
+ })
+
+ const currentVolumeData = this.dataSource.map(item => {
+ const orgData = this.currentOrgData.find(d => d.org_code === item.org_code)
+ return orgData ? (orgData.oilVolume || 0) : 0
+ })
+
+ console.log('Final data - xData:', xData)
+ console.log('Final data - currentCarData:', currentCarData)
+ console.log('Final data - currentOilData:', currentOilData)
+ console.log('Final data - currentStationData:', currentStationData)
+ console.log('Final data - currentVolumeData:', currentVolumeData)
+
+ this.lineChartData = {
+ xData: xData,
+ barData: currentCarData,
+ lineData: currentOilData,
+ barName: '杞︽祦閲�',
+ lineName: '鍔犳补鏁�',
+ barData2: currentStationData,
+ lineData2: currentVolumeData,
+ barName2: '杩涚珯鏁�',
+ lineName2: '娌瑰搧閿�閲�'
+ }
+
+ this.$nextTick(() => {
+ if (this.$refs.lineChart && this.$refs.lineChart.setChart) {
+ this.$refs.lineChart.setChart()
+ }
+ })
+ },
+ contrastTimeChange(e, t) {
+ this.contrastStartTime = t[0]
+ this.contrastEndTime = t[1]
+ this.getContrastData()
+ },
+ setDefaultMonthTime() {
+ const now = new Date()
+ const year = now.getFullYear()
+ const month = now.getMonth() + 1
+ const day = now.getDate()
+
+ const startTime = `${year}-${String(month).padStart(2, '0')}-01 00:00:00`
+ const endTime = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')} 23:59:59`
+
+ this.contrastStartTime = startTime
+ this.contrastEndTime = endTime
+
+ this.getContrastData()
+ },
+ getOrgData() {
+ postAction(this.url.queryOrgOilCount, {
+ orgCode: this.queryParam.parentCode
+ }).then((res) => {
+ if (res.success) {
+ console.log('getOrgData result:', res.result)
+ this.currentOrgData = res.result || []
+ this.updateChartData()
+ }
+ })
+ },
+ getContrastData() {
+ postAction(this.url.queryOrgOilCount, {
+ orgCode: this.queryParam.parentCode,
+ startTime: this.contrastStartTime,
+ endTime: this.contrastEndTime
+ }).then((res) => {
+ if (res.success) {
+ console.log('getContrastData result:', res.result)
+ this.contrastOrgData = res.result || []
+ this.updateChartData()
+ }
+ })
+ },
+ searchQuery() {
+ this.pagination.current = 1
+ this.loadData()
+ },
+ searchReset() {
+ this.queryParam.labelName = ''
+ this.pagination.current = 1
+ this.loadData()
+ },
+ handleTableChange(pagination) {
+ this.pagination = pagination
+ this.loadData()
+ },
+ handleAdd(record) {
+ this.$refs.modalForm.add(record)
+ },
+ handleDelete(record) {
+ this.$confirm({
+ title: '纭鍒犻櫎',
+ content: '纭畾瑕佸垹闄よ鏍囩鍚楋紵',
+ onOk: () => {
+ deleteAction(this.url.delete, {
+ departId: record.depart_id,
+ labelName: record.label_name
+ }).then((res) => {
+ if (res.success) {
+ this.$message.success('鍒犻櫎鎴愬姛')
+ this.loadData()
+ this.loadLabelList()
+ } else {
+ this.$message.error(res.message || '鍒犻櫎澶辫触')
+ }
+ })
+ }
+ })
+ },
+ modalFormOk() {
+ this.loadData()
+ this.loadLabelList()
+ },
+ getLabels(record) {
+ if (!record.label_name) return []
+ return record.label_name.split(',').map(label => label.trim()).filter(label => label)
+ },
+ handleMenuClick(record, label) {
+ this.$confirm({
+ title: '纭鍒犻櫎',
+ content: `纭畾瑕佸垹闄�"${label}"鏍囩鍚楋紵`,
+ onOk: () => {
+ deleteAction(this.url.delete, {
+ departId: record.depart_id,
+ labelName: label
+ }).then((res) => {
+ if (res.success) {
+ this.$message.success('鍒犻櫎鎴愬姛')
+ this.loadData()
+ this.loadLabelList()
+ } else {
+ this.$message.error(res.message || '鍒犻櫎澶辫触')
+ }
+ })
+ }
+ })
+ }
+ }
+}
+</script>
+
+<style scoped lang="less">
+.depart-label-container {
+ padding: 24px;
+ background: linear-gradient(135deg, #1a1f2e 0%, #0f1219 100%);
+ min-height: 100vh;
+}
+
+.table-page-search-wrapper {
+ margin-bottom: 24px;
+ padding: 20px;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+}
+
+.table-operator {
+ margin-bottom: 24px;
+ padding: 20px;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+}
+
+.data-overview-ct {
+ .block-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: #fff;
+ display: flex;
+ align-items: center;
+ }
+}
+
+.chart-container {
+ margin: 24px 0;
+ padding: 24px;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+
+ .chart-block {
+ width: 100%;
+
+ .block-title {
+ font-size: 18px;
+ font-weight: 600;
+ margin-bottom: 20px;
+ color: #fff;
+ padding-bottom: 12px;
+ border-bottom: 2px solid rgba(91, 129, 249, 0.5);
+ }
+ }
+}
+
+:deep(.ant-table) {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+
+ .ant-table-thead > tr > th {
+ background: rgba(91, 129, 249, 0.2);
+ color: #fff;
+ font-weight: 600;
+ border-bottom: 2px solid rgba(91, 129, 249, 0.5);
+ }
+
+ .ant-table-tbody > tr > td {
+ background: transparent;
+ color: rgba(255, 255, 255, 0.85);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .ant-table-tbody > tr:hover > td {
+ background: rgba(91, 129, 249, 0.1);
+ }
+}
+
+:deep(.ant-btn-primary) {
+ background: linear-gradient(135deg, #5b81f9 0%, #3d5cc9 100%);
+ border: none;
+ box-shadow: 0 4px 12px rgba(91, 129, 249, 0.3);
+
+ &:hover {
+ background: linear-gradient(135deg, #6d92ff 0%, #4d6ee0 100%);
+ box-shadow: 0 6px 16px rgba(91, 129, 249, 0.4);
+ }
+}
+
+:deep(.ant-select) {
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 8px;
+
+ .ant-select-selection {
+ background: transparent;
+ border: none;
+ color: rgba(255, 255, 255, 0.85);
+ }
+}
+
+:deep(.ant-form-item-label > label) {
+ color: rgba(255, 255, 255, 0.85);
+ font-weight: 500;
+}
+
+:deep(.a-switch) {
+ background: rgba(91, 129, 249, 0.3);
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0