1269 lines
34 KiB
Vue
1269 lines
34 KiB
Vue
<template>
|
||
<div class="store-detail">
|
||
<!-- 基本信息卡片 -->
|
||
<el-card class="info-card" shadow="hover">
|
||
<div slot="header" class="card-header">
|
||
<div class="header-left">
|
||
<span class="title">店铺详情</span>
|
||
<el-tag size="small" :type="getStatusType(storeData.status)">
|
||
{{ getStatusText(storeData.status) }}
|
||
</el-tag>
|
||
</div>
|
||
<div class="action-buttons">
|
||
<el-button
|
||
type="success"
|
||
size="small"
|
||
icon="el-icon-unlock"
|
||
v-if="storeData.gateSn"
|
||
@click="handleOpenGate"
|
||
>开大门</el-button>
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
icon="el-icon-setting"
|
||
v-if="storeData.gateSn"
|
||
@click="handleGateConfig"
|
||
>大门配置</el-button>
|
||
<el-button type="success" size="small" @click="handleUpdate">修改</el-button>
|
||
<el-button type="danger" size="small" @click="handleDelete">删除</el-button>
|
||
</div>
|
||
</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="6">
|
||
<div class="store-image">
|
||
<el-carousel height="200px" indicator-position="outside" :autoplay="true" trigger="click" arrow="always">
|
||
<el-carousel-item v-for="(url, index) in storeData.pictures" :key="index">
|
||
<el-image
|
||
:src="url"
|
||
fit="fill"
|
||
style="width: 100%; height: 100%"
|
||
>
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<div class="store-title">
|
||
<h2>{{ storeData.name }}</h2>
|
||
<!-- <el-tag :type="getStatusType(storeData.status)" class="status-tag" effect="dark">
|
||
<dict-tag :options="dict.type.ss_store_status" :value="storeData.status" />
|
||
</el-tag> -->
|
||
</div>
|
||
<div class="info-content">
|
||
<el-descriptions :column="3" border size="medium">
|
||
<el-descriptions-item label="联系人">
|
||
<span class="info-text">{{ storeData.contactName || '--' }}</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="联系电话">
|
||
<span class="info-text">{{ storeData.contactMobile || '--' }}</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="二维码">
|
||
<el-popover placement="top" trigger="hover">
|
||
<div class="qr-code-box">
|
||
<qr-code :text="getCodeText(storeData)" :width="150" :height="150" />
|
||
<p>扫描二维码进入店铺</p>
|
||
</div>
|
||
<el-button slot="reference" type="text" icon="el-icon-picture">查看</el-button>
|
||
</el-popover>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="商户" class="device-detail2">
|
||
<router-link
|
||
v-if="storeData.merchantId"
|
||
:to="'/user/detail/' + storeData.merchantId"
|
||
class="link-type">
|
||
<span >{{ storeData.merchantName || '--' }}</span>
|
||
</router-link>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="客服电话">
|
||
<span class="info-text">{{ storeData.serverPhone || '--' }}</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="营业时间">
|
||
<span class="info-text">{{ formatBusinessTime(storeData.businessTimeStart, storeData.businessTimeEnd) }}</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="身份证号">
|
||
<span class="info-text">{{ storeData.idcard || '--' }}</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="大门" >
|
||
<router-link
|
||
v-if="storeData.gateSn"
|
||
:to="`/system/deviceDetail/index/${storeData.gateId}`"
|
||
class="link-type"
|
||
>
|
||
{{ storeData.gateSn }}
|
||
</router-link>
|
||
<el-tag
|
||
v-if="storeData.gateSn"
|
||
type="text"
|
||
size="mini"
|
||
effect="dark"
|
||
@click="handleUnbindGate"
|
||
style="cursor: pointer; margin-left: 10px;">解绑
|
||
</el-tag>
|
||
<el-button v-else type="primary" @click="showBindGateDialog = true">去绑定</el-button>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="地址" :span="3">
|
||
<span class="info-text">{{ storeData.address || '--' }}</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="标签" :span="2">
|
||
<dict-tag :options="dict.type.ss_store_tags" :value="storeData.tags" />
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="类型">
|
||
<dict-tag :options="dict.type.ss_room_type" :value="storeData.typeTags" />
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
<!-- 顶部统计卡片 -->
|
||
<el-row :gutter="20" class="stat-cards">
|
||
<!-- 今日营收 -->
|
||
<el-col :span="4">
|
||
<el-card shadow="hover" class="stat-card">
|
||
<div class="stat-icon income">
|
||
<i class="el-icon-money"></i>
|
||
</div>
|
||
<div class="stat-content">
|
||
<div class="stat-label">今日营收</div>
|
||
<div class="stat-value">¥ {{ storeData.todayIncome || '0.00' }}</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<!-- 本月营收 -->
|
||
<el-col :span="4">
|
||
<el-card shadow="hover" class="stat-card">
|
||
<div class="stat-icon income-month">
|
||
<i class="el-icon-wallet"></i>
|
||
</div>
|
||
<div class="stat-content">
|
||
<div class="stat-label">本月营收</div>
|
||
<div class="stat-value">¥ {{ storeData.monthIncome || '0.00' }}</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<!-- 总营收 -->
|
||
<el-col :span="4">
|
||
<el-card shadow="hover" class="stat-card">
|
||
<div class="stat-icon total-income">
|
||
<i class="el-icon-bank-card"></i>
|
||
</div>
|
||
<div class="stat-content">
|
||
<div class="stat-label">总营收</div>
|
||
<div class="stat-value">¥ {{ storeData.totalIncome || '0.00' }}</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<!-- 房间统计 -->
|
||
<el-col :span="4">
|
||
<el-card shadow="hover" class="stat-card">
|
||
<div class="stat-icon room">
|
||
<i class="el-icon-office-building"></i>
|
||
</div>
|
||
<div class="stat-content">
|
||
<div class="stat-label">房间使用</div>
|
||
<div class="stat-numbers">
|
||
<span class="current">{{ storeData.usingRoomNum || 0 }}</span>
|
||
<span class="divider">/</span>
|
||
<span class="total">{{ storeData.totalRoomNum || 0 }}</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<!-- 设施统计 -->
|
||
<el-col :span="4">
|
||
<el-card shadow="hover" class="stat-card">
|
||
<div class="stat-icon facility">
|
||
<i class="el-icon-s-platform"></i>
|
||
</div>
|
||
<div class="stat-content">
|
||
<div class="stat-label">设施使用</div>
|
||
<div class="stat-numbers">
|
||
<span class="current">{{ storeData.usingFacilityNum || 0 }}</span>
|
||
<span class="divider">/</span>
|
||
<span class="total">{{ storeData.totalFacilities || 0 }}</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<!-- 设备数量 -->
|
||
<el-col :span="4">
|
||
<el-card shadow="hover" class="stat-card">
|
||
<div class="stat-icon device">
|
||
<i class="el-icon-cpu"></i>
|
||
</div>
|
||
<div class="stat-content">
|
||
<div class="stat-label">设备数量</div>
|
||
<div class="stat-numbers">
|
||
<span class="total">{{ storeData.totalDeviceNum || 0 }}</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 图表和地图区域 -->
|
||
<el-row :gutter="20" class="chart-section">
|
||
<el-col :span="16">
|
||
<el-card class="box-card" shadow="hover">
|
||
<div slot="header" class="card-header">
|
||
<span>营收趋势</span>
|
||
<div class="date-range">
|
||
<el-radio-group v-model="dateRange" size="small" @change="handleDateRangeChange">
|
||
<el-radio-button label="7">近7天</el-radio-button>
|
||
<el-radio-button label="30">近30天</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
<div id="incomeChart" style="width: 100%; height: 400px;"></div>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<el-col :span="8">
|
||
<el-card class="map-card" shadow="hover">
|
||
<div slot="header" class="card-header">
|
||
<span class="title">店铺位置</span>
|
||
</div>
|
||
<div class="map-container" id="mapContainer"></div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-tabs v-model="activeTab" class="detail-tabs">
|
||
<el-tab-pane label="订单列表" name="orders" :lazy="true">
|
||
<order v-if="storeId != null"
|
||
:query="{
|
||
storeId: Number(storeId)
|
||
}"/>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="房间列表" name="rooms" :lazy="true">
|
||
<room :query="{
|
||
storeId: Number(storeId),
|
||
merchantId: storeData.merchantId
|
||
}"/>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="大厅设施" name="equipments" :lazy="true">
|
||
<equipment :query="{
|
||
storeId: Number(storeId),
|
||
merchantId: storeData.merchantId
|
||
}"/>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="设备列表" name="devices" :lazy="true">
|
||
<device :query="{
|
||
storeId: Number(storeId)
|
||
}"/>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="员工列表" name="users" :lazy="true">
|
||
<user :query="{
|
||
storeId: Number(storeId)
|
||
}"/>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="卫生间列表" name="toilets" :lazy="true">
|
||
<toilet :query="{
|
||
storeId: Number(storeId)
|
||
}"/>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
|
||
<BindGateDialog
|
||
:visible.sync="showBindGateDialog"
|
||
:query="{
|
||
merchantId: storeData.merchantId,
|
||
storeName: storeData.storeName,
|
||
storeId: storeData.storeId
|
||
}"
|
||
@bind-success="getStoreData"
|
||
/>
|
||
|
||
<!-- 添加或修改店铺对话框 -->
|
||
<store-form
|
||
:visible.sync="showStoreForm"
|
||
:query="{
|
||
merchantId: storeData.merchantId,
|
||
isAdmin: isAdmin,
|
||
storeId: currentStoreId
|
||
}"
|
||
@success="handleFormSuccess"
|
||
@cancel="handleFormCancel"
|
||
/>
|
||
|
||
<!-- 大门配置弹窗 -->
|
||
<el-dialog
|
||
title="大门配置"
|
||
:visible.sync="gateConfigVisible"
|
||
width="800px"
|
||
append-to-body
|
||
>
|
||
<el-form ref="gateForm" :model="gateForm" :rules="gateRules" label-width="80px">
|
||
<el-form-item label="开锁方式" prop="unlockMode">
|
||
<el-radio-group v-model="gateForm.unlockMode">
|
||
<el-radio
|
||
v-for="dict in dict.type.ss_unlock_mode"
|
||
:key="dict.value"
|
||
:label="dict.value"
|
||
>{{dict.label}}</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="开锁条件" prop="unlockCondition">
|
||
<el-radio-group v-model="gateForm.unlockCondition">
|
||
<el-radio
|
||
v-for="dict in dict.type.ss_unlock_condition"
|
||
:key="dict.value"
|
||
:label="dict.value"
|
||
>{{dict.label}}</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="开锁时长" prop="unlockTime">
|
||
<el-input-number
|
||
v-model="gateForm.unlockTime"
|
||
:min="0"
|
||
:precision="0"
|
||
:step="1"
|
||
controls-position="right"
|
||
style="width: 200px">
|
||
<template slot="append">秒</template>
|
||
</el-input-number>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="gateConfigVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="submitGateConfig">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getStore,
|
||
delStore,
|
||
bindGateApi,
|
||
unbindDevice,
|
||
gateAuth,
|
||
openGate,
|
||
updateStore
|
||
} from "@/api/system/store";
|
||
import {getDevice} from "@/api/system/device";
|
||
import * as echarts from 'echarts';
|
||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||
import globalConfig from '@/utils/config/globalConfig';
|
||
import order from '@/views/system/order/index.vue';
|
||
import room from '@/views/system/room/index.vue';
|
||
import equipment from '@/views/system/hallEqu/index.vue';
|
||
import device from '@/views/system/device/index.vue';
|
||
import user from '@/views/user/user/index.vue';
|
||
import toilet from '@/views/system/toilet/index.vue';
|
||
import BindGateDialog from './components/BindGateDialog.vue';
|
||
import QrCode from '@/components/QrCode';
|
||
import { getDomain } from "@/api/common/common";
|
||
import { deviceSwitch } from "@/api/system/device";
|
||
import StoreForm from "@/views/system/store/components/StoreForm.vue";
|
||
|
||
export default {
|
||
name: 'StoreDetail',
|
||
dicts: ['ss_store_status', 'ss_store_tags', 'ss_room_type', 'ss_unlock_mode', 'ss_unlock_condition'],
|
||
components: {
|
||
StoreForm,
|
||
order,
|
||
room,
|
||
equipment,
|
||
device,
|
||
user,
|
||
toilet,
|
||
BindGateDialog,
|
||
QrCode
|
||
},
|
||
computed: {
|
||
isAdmin() {
|
||
return this.$store.state.user.name === 'admin';
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
storeId: Number(this.$route.params.id),
|
||
storeData: {},
|
||
map: null,
|
||
marker: null,
|
||
stats: {
|
||
todayIncome: 0,
|
||
monthIncome: 0,
|
||
totalIncome: 0,
|
||
totalWithdraw: 0,
|
||
totalRoomNum: 0,
|
||
usingRoomNum: 0,
|
||
totalFacilities: 0,
|
||
usingFacilityNum: 0
|
||
},
|
||
chartTimeRange: 'week',
|
||
incomeChart: null,
|
||
activeTab: 'orders',
|
||
showBindGateDialog: false,
|
||
equipmentList: [],
|
||
domain: '',
|
||
gateConfigVisible: false,
|
||
gateForm: {
|
||
unlockMode: "1",
|
||
unlockCondition: "3",
|
||
unlockTime: 0
|
||
},
|
||
gateRules: {
|
||
unlockMode: [
|
||
{ required: true, message: "请选择开锁方式", trigger: "change" }
|
||
],
|
||
unlockCondition: [
|
||
{ required: true, message: "请选择开锁条件", trigger: "change" }
|
||
],
|
||
unlockTime: [
|
||
{ required: true, message: "请输入开锁时长", trigger: "blur" }
|
||
]
|
||
},
|
||
dateRange: '7', // 默认7天
|
||
showStoreForm: false,
|
||
currentStoreId: null
|
||
}
|
||
},
|
||
created() {
|
||
this.storeId = this.$route.params.storeId;
|
||
this.getStoreData();
|
||
this.loadEquipmentList();
|
||
this.getDicts();
|
||
this.getDomain();
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.initMap();
|
||
this.initChart();
|
||
if (this.$refs.incomeChart) {
|
||
this.$refs.incomeChart.addEventListener('scroll', this.handleScroll);
|
||
}
|
||
});
|
||
// 监听窗口大小变化，重绘图表
|
||
window.addEventListener('resize', () => {
|
||
if (this.incomeChart) {
|
||
this.incomeChart.resize();
|
||
}
|
||
});
|
||
},
|
||
beforeDestroy() {
|
||
if (this.incomeChart) {
|
||
this.incomeChart.dispose();
|
||
}
|
||
if (this.map) {
|
||
this.map.clearMap();
|
||
this.map.destroy();
|
||
this.map = null;
|
||
}
|
||
window.removeEventListener('resize', this.handleResize);
|
||
if (this.$refs.incomeChart) {
|
||
this.$refs.incomeChart.removeEventListener('scroll', this.handleScroll);
|
||
}
|
||
},
|
||
methods: {
|
||
handleScroll() {
|
||
if (!this.$refs.incomeChart || !this.incomeChart) return;
|
||
|
||
const scrollTop = this.$refs.incomeChart.scrollTop;
|
||
const scrollHeight = this.$refs.incomeChart.scrollHeight;
|
||
const clientHeight = this.$refs.incomeChart.clientHeight;
|
||
|
||
if (scrollTop + clientHeight >= scrollHeight) {
|
||
console.log('Reached bottom');
|
||
}
|
||
},
|
||
getStatusType(status) {
|
||
const statusMap = {
|
||
0: 'info',
|
||
1: 'success',
|
||
2: 'danger'
|
||
};
|
||
return statusMap[status] || 'info';
|
||
},
|
||
getStatusText(status) {
|
||
const statusMap = {
|
||
0: '停用',
|
||
1: '正常',
|
||
2: '禁用'
|
||
};
|
||
return statusMap[status] || '未知';
|
||
},
|
||
initChart() {
|
||
if (!this.$refs.incomeChart) return;
|
||
|
||
this.incomeChart = echarts.init(this.$refs.incomeChart);
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: '{b}<br />{a}: ¥{c}'
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#DCDFE6'
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '¥{value}'
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#EBEEF5'
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '营收',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||
itemStyle: {
|
||
color: '#409EFF'
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(64,158,255,0.3)'
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(64,158,255,0.1)'
|
||
}])
|
||
}
|
||
}]
|
||
};
|
||
this.incomeChart.setOption(option);
|
||
|
||
window.addEventListener('resize', this.resizeChart);
|
||
},
|
||
resizeChart() {
|
||
if (this.incomeChart) {
|
||
this.incomeChart.resize();
|
||
}
|
||
},
|
||
getStoreData() {
|
||
// 格式化日期
|
||
const formatDate = (date) => {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
};
|
||
|
||
// 获取时间范围
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setDate(start.getDate() - Number(this.dateRange));
|
||
|
||
// 构建请求参数
|
||
const params = {
|
||
startTime: formatDate(start),
|
||
endTime: formatDate(end)
|
||
};
|
||
|
||
getStore(this.storeId, params).then(response => {
|
||
this.storeData = response.data;
|
||
// 初始化收入趋势图表
|
||
this.$nextTick(() => {
|
||
this.initIncomeChart();
|
||
});
|
||
});
|
||
},
|
||
getStoreStats() {
|
||
// Mock数据，实际项目中替换为API调用
|
||
// this.stats = {
|
||
// todayIncome: 1234.56,
|
||
// monthIncome: 45678.90,
|
||
// totalDeviceNum: 100,
|
||
// onlineDevices: 85
|
||
// };
|
||
},
|
||
handleChartRangeChange(range) {
|
||
// Mock数据，实际项目中替换为API调用
|
||
const mockData = {
|
||
week: {
|
||
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||
series: [820, 932, 901, 934, 1290, 1330, 1320]
|
||
},
|
||
month: {
|
||
xAxis: Array.from({ length: 30 }, (_, i) => `${i + 1}日`),
|
||
series: Array.from({ length: 30 }, () => Math.floor(Math.random() * 2000 + 500))
|
||
}
|
||
};
|
||
|
||
const data = mockData[range];
|
||
this.incomeChart.setOption({
|
||
xAxis: { data: data.xAxis },
|
||
series: [{ data: data.series }]
|
||
});
|
||
},
|
||
formatBusinessTime(start, end) {
|
||
if (!start && !end) return '--';
|
||
return `${start || '--'} - ${end || '--'}`;
|
||
},
|
||
async initMap() {
|
||
try {
|
||
if (!window._AMapSecurityConfig) {
|
||
window._AMapSecurityConfig = {
|
||
securityJsCode: process.env.VUE_APP_AMAP_SECURITY_CODE,
|
||
}
|
||
}
|
||
|
||
const AMap = await AMapLoader.load({
|
||
key: globalConfig.aMap.key,
|
||
version: "2.0",
|
||
plugins: []
|
||
});
|
||
|
||
if (!document.getElementById('mapContainer')) {
|
||
console.error('地图容器不存在');
|
||
return;
|
||
}
|
||
|
||
this.map = new AMap.Map("mapContainer", {
|
||
zoom: 15,
|
||
center: [
|
||
parseFloat(this.storeData.lng) || 116.397428,
|
||
parseFloat(this.storeData.lat) || 39.90923
|
||
],
|
||
resizeEnable: true,
|
||
viewMode: '2D'
|
||
});
|
||
|
||
// 如果有经纬度，添加标记点
|
||
if (parseFloat(this.storeData.lng) && parseFloat(this.storeData.lat)) {
|
||
// 创建标记点
|
||
this.marker = new AMap.Marker({
|
||
position: [parseFloat(this.storeData.lng), parseFloat(this.storeData.lat)],
|
||
title: this.storeData.name
|
||
});
|
||
|
||
// 将标记点添加到地图
|
||
this.map.add(this.marker);
|
||
|
||
// 创建信息窗体
|
||
const infoWindow = new AMap.InfoWindow({
|
||
content: `
|
||
<div class="info-window">
|
||
<h4>${this.storeData.name || '未命名店铺'}</h4>
|
||
<p>${this.storeData.address || '暂无地址'}</p>
|
||
<p>经度：${this.storeData.lng}</p>
|
||
<p>纬度：${this.storeData.lat}</p>
|
||
</div>
|
||
`,
|
||
offset: new AMap.Pixel(0, -30)
|
||
});
|
||
|
||
// 点击标记点时打开信息窗体
|
||
this.marker.on('click', () => {
|
||
infoWindow.open(this.map, this.marker.getPosition());
|
||
});
|
||
|
||
// 自动适应标记点位置
|
||
this.map.setFitView();
|
||
}
|
||
} catch (e) {
|
||
console.error("地图加载失败", e);
|
||
}
|
||
},
|
||
handleEdit() {
|
||
this.$router.push(`/system/store/edit/${this.storeId}`);
|
||
},
|
||
handleDelete() {
|
||
this.$modal.confirm('是否确认删除该店铺？').then(() => {
|
||
return delStore(this.storeId);
|
||
}).then(() => {
|
||
this.$modal.msgSuccess("删除成功");
|
||
this.$router.push('/system/store/list');
|
||
}).catch(() => { });
|
||
},
|
||
bindGate() {
|
||
// 调用绑定大门的接口
|
||
bindGateApi().then(response => {
|
||
this.$modal.msgSuccess("绑定成功");
|
||
this.fetchStoreDetail(); // 重新获取店铺详情
|
||
}).catch(error => {
|
||
this.$modal.msgError("绑定失败");
|
||
});
|
||
},
|
||
loadEquipmentList() {
|
||
// 实现加载设施列表的逻辑
|
||
// 例如：this.equipmentList = response.data;
|
||
},
|
||
handleUnbindGate() {
|
||
this.$modal.confirm('确定要解除该店铺的大门绑定吗？').then(() => {
|
||
// 调用解绑接口
|
||
unbindDevice(this.storeData.gateId).then(() => {
|
||
this.$modal.msgSuccess("解绑成功");
|
||
this.getStoreData(); // 重新获取店铺数据
|
||
}).catch(() => {
|
||
this.$modal.msgError("解绑失败");
|
||
});
|
||
}).catch(() => {});
|
||
},
|
||
getDomain() {
|
||
getDomain().then(response => {
|
||
if (response.data) {
|
||
this.domain = response.data;
|
||
}
|
||
}).catch(() => {
|
||
this.$message.error("获取全局域名失败")
|
||
})
|
||
},
|
||
getCodeText(store) {
|
||
let url = this.domain + `?d=` + store.qrText;
|
||
return this.domain ? url : '';
|
||
},
|
||
handleGateConfig() {
|
||
this.gateConfigVisible = true;
|
||
},
|
||
submitGateConfig() {
|
||
this.$refs["gateForm"].validate(valid => {
|
||
if (valid) {
|
||
// 先发送开关命令
|
||
if (this.storeData.gateId) {
|
||
// 通电开锁(1)时发送断电命令(false)，断电开锁(2)时发送通电命令(true)
|
||
const open = this.gateForm.unlockMode === "2";
|
||
deviceSwitch({
|
||
deviceId: this.storeData.gateId,
|
||
open: open
|
||
}).then(() => {
|
||
// 开关命令成功后，保存配置
|
||
this.saveGateConfig();
|
||
}).catch(() => {
|
||
this.$modal.msgError("设备开关操作失败");
|
||
});
|
||
} else {
|
||
this.$modal.msgError("未找到大门设备");
|
||
}
|
||
}
|
||
});
|
||
},
|
||
/** 保存大门配置 */
|
||
saveGateConfig() {
|
||
gateAuth({
|
||
storeId: this.storeData.storeId,
|
||
unlockMode: this.gateForm.unlockMode,
|
||
unlockCondition: this.gateForm.unlockCondition,
|
||
unlockTime: this.gateForm.unlockTime
|
||
}).then(() => {
|
||
this.$modal.msgSuccess("配置成功");
|
||
this.gateConfigVisible = false;
|
||
this.getStoreData(); // 刷新店铺数据
|
||
});
|
||
},
|
||
handleOpenGate() {
|
||
this.$modal.confirm('是否确认为"' + this.storeData.name + '"开门？').then(() => {
|
||
return openGate(this.storeData.storeId);
|
||
}).then(() => {
|
||
this.$modal.msgSuccess("开门成功");
|
||
}).catch(() => {});
|
||
},
|
||
/** 初始化收入趋势图表 */
|
||
initIncomeChart() {
|
||
if (this.incomeChart) {
|
||
this.incomeChart.dispose();
|
||
}
|
||
|
||
this.incomeChart = echarts.init(document.getElementById('incomeChart'));
|
||
|
||
// 处理数据
|
||
const days = this.storeData.inComeList.map(item => {
|
||
// 将日期格式从 "2025-01-19" 转换为 "01-19"
|
||
return item.day.substring(5); // 从第5个字符开始截取，去掉年份
|
||
});
|
||
const incomes = this.storeData.inComeList.map(item => item.orderIncome);
|
||
const orderNums = this.storeData.inComeList.map(item => item.orderNum || 0);
|
||
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['营收金额', '订单数量']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: days,
|
||
axisLabel: {
|
||
rotate: 45
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '营收金额(元)',
|
||
position: 'left'
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '订单数量',
|
||
position: 'right'
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '营收金额',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: incomes,
|
||
itemStyle: {
|
||
color: '#409EFF'
|
||
}
|
||
},
|
||
{
|
||
name: '订单数量',
|
||
type: 'bar',
|
||
yAxisIndex: 1,
|
||
data: orderNums,
|
||
itemStyle: {
|
||
color: '#67C23A'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
this.incomeChart.setOption(option);
|
||
},
|
||
/** 切换日期范围 */
|
||
handleDateRangeChange(days) {
|
||
this.dateRange = days;
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setDate(start.getDate() - days);
|
||
|
||
// 格式化日期
|
||
const formatDate = (date) => {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
};
|
||
|
||
// 使用 getStoreData 方法获取数据
|
||
this.getStoreData({
|
||
startTime: formatDate(start),
|
||
endTime: formatDate(end)
|
||
});
|
||
},
|
||
handleFormSuccess() {
|
||
this.getList();
|
||
},
|
||
handleFormCancel() {
|
||
this.showStoreForm = false;
|
||
},
|
||
/** 修改按钮操作 */
|
||
handleUpdate() {
|
||
this.currentStoreId = this.storeId;
|
||
console.log("this.currentStoreId----------"+this.currentStoreId)
|
||
this.showStoreForm = true;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.store-detail {
|
||
padding: 20px;
|
||
background-color: #f5f7fa;
|
||
min-height: calc(100vh - 84px);
|
||
|
||
.el-row {
|
||
height: 100%;
|
||
|
||
.el-col {
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.store-image {
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.3s ease;
|
||
height: 200px;
|
||
|
||
&:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
:deep(.el-carousel) {
|
||
.el-carousel__indicators {
|
||
bottom: -20px;
|
||
}
|
||
|
||
.el-carousel__arrow {
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
|
||
&:hover {
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
|
||
.el-carousel__item {
|
||
overflow: hidden;
|
||
|
||
.el-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
|
||
.image-slot {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #f5f7fa;
|
||
color: #909399;
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: calc(100% - 80px); // 减去标题的高度
|
||
|
||
:deep(.el-descriptions) {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.el-descriptions__body {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.el-descriptions-item {
|
||
flex: 1;
|
||
display: flex;
|
||
|
||
.el-descriptions-item__container {
|
||
flex: 1;
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.store-title {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 16px;
|
||
height: 40px;
|
||
|
||
h2 {
|
||
margin: 0;
|
||
margin-right: 15px;
|
||
font-size: 28px;
|
||
color: #303133;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.status-tag {
|
||
margin-left: auto;
|
||
padding: 0 16px;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.info-card {
|
||
margin-bottom: 20px;
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.status-tag {
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
|
||
.action-buttons {
|
||
.el-button {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-item {
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.label {
|
||
color: #909399;
|
||
margin-right: 12px;
|
||
min-width: 80px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.value {
|
||
color: #303133;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail-tabs {
|
||
margin-top: 20px;
|
||
|
||
.search-form {
|
||
margin-bottom: 20px;
|
||
|
||
.el-form-item {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.stat-cards {
|
||
margin-bottom: 20px;
|
||
|
||
.stat-card {
|
||
height: 120px;
|
||
display: flex;
|
||
padding: 0 10px;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.stat-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 16px;
|
||
|
||
i {
|
||
font-size: 24px;
|
||
color: #fff;
|
||
}
|
||
|
||
&.income {
|
||
background: linear-gradient(135deg, #36d1dc, #5b86e5);
|
||
}
|
||
|
||
&.income-month {
|
||
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
|
||
}
|
||
|
||
&.total-income {
|
||
background: linear-gradient(135deg, #a8edea, #fed6e3);
|
||
}
|
||
|
||
&.withdraw {
|
||
background: linear-gradient(135deg, #84fab0, #8fd3f4);
|
||
}
|
||
|
||
&.room {
|
||
background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
|
||
}
|
||
|
||
&.facility {
|
||
background: linear-gradient(135deg, #f6d365, #fda085);
|
||
}
|
||
|
||
&.device {
|
||
background: linear-gradient(135deg, #84fab0, #8fd3f4);
|
||
}
|
||
}
|
||
|
||
.stat-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.stat-value {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
margin-bottom: 8px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.stat-numbers {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
margin-bottom: 8px;
|
||
line-height: 1.2;
|
||
|
||
.current {
|
||
color: #409EFF;
|
||
}
|
||
|
||
.divider {
|
||
margin: 0 4px;
|
||
color: #909399;
|
||
}
|
||
|
||
.total {
|
||
color: #606266;
|
||
}
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.chart-section {
|
||
margin-bottom: 20px;
|
||
|
||
.card-header {
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.chart-card {
|
||
.chart-container {
|
||
height: 350px;
|
||
padding: 10px;
|
||
}
|
||
}
|
||
|
||
.map-card {
|
||
.map-container {
|
||
height: 350px;
|
||
width: 100%;
|
||
position: relative;
|
||
border: 1px solid #EBEEF5;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.info-window) {
|
||
padding: 12px;
|
||
min-width: 200px;
|
||
|
||
h4 {
|
||
margin: 0 0 8px;
|
||
color: #303133;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
p {
|
||
margin: 4px 0;
|
||
color: #606266;
|
||
font-size: 14px;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
|
||
:deep(.el-tag) {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.link-type {
|
||
color: #409EFF;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.link-type:hover {
|
||
color: #66b1ff;
|
||
}
|
||
|
||
.device-detail2 {
|
||
padding: 20px;
|
||
|
||
.link-type {
|
||
color: #11A983;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.link-type:hover {
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
.qr-code-box {
|
||
text-align: center;
|
||
padding: 10px;
|
||
|
||
p {
|
||
margin: 10px 0 0;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.date-range {
|
||
.el-radio-group {
|
||
margin-left: 16px;
|
||
}
|
||
}
|
||
|
||
</style>
|