liubiao/dyf-vue-ui
1
0
Fork 0
forked from dyf/dyf-vue-ui
Code Pull Requests Activity

Compare commits

merge into: liubiao:main
Branches Tags
liubiao:main dyf:main
...
pull from: dyf:main
Branches Tags
dyf:main liubiao:main

2 Commits
main ... main

Author SHA1 Message Date
fengerli
95b020d389 1 2025-09-08 18:48:18 +08:00
fengerli
b03d287dac 首页页面布局编写 2025-09-08 18:47:39 +08:00
13 changed files with 577 additions and 309 deletions
Expand all files Collapse all files

BIN
src/assets/index/add.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
src/assets/index/conton.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
src/assets/index/device_add.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
src/assets/index/device_group.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
src/assets/index/device_type.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
src/assets/index/device_yc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/index/devices_online.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/index/online.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

31
src/views/equipmentManagement/devices/index.vue
View File

@ -44,29 +44,29 @@
<template #header>
<el-row :gutter="10">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
<el-button v-hasPermi="['equipment:devices:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
<el-button v-hasPermi="['equipment:devices:edit']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" :disabled="multiple" plain icon="Download" @click="handleExport">导出</el-button>
<el-button v-hasPermi="['equipment:devices:export']" type="warning" :disabled="multiple" plain icon="Download" @click="handleExport">导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain :disabled="multiple" @click="handleDelete()">
<el-button v-hasPermi="['equipment:devices:remove']" type="danger" plain :disabled="multiple" @click="handleDelete()">
批量删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain @click="handleBatchImport">
<el-button v-hasPermi="['equipment:devices:import']" type="warning" plain @click="handleBatchImport">
批量导入
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain :disabled="multiple" @click="handleBatchAssign">
<el-button v-hasPermi="['equipment:devices:allocate']" type="warning" plain :disabled="multiple" @click="handleBatchAssign">
批量分配客户
</el-button>
</el-col>
@ -113,21 +113,22 @@
<el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" @click="handleDatails(scope.row)">详情</el-button>
<el-tooltip v-if="scope.row.id !== 1 && scope.row.deviceStatus == 1" content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
<el-button v-hasPermi="['equipment:devices:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
</el-tooltip>
<el-tooltip v-if="!scope.row.customerName" content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
<el-button v-hasPermi="['equipment:devices:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
</el-tooltip>
<el-tooltip v-if="scope.row.deviceStatus == 1 && !scope.row.customerName" content="分配" placement="top">
<el-button link type="primary" icon="User" @click="handleAssign(scope.row)"></el-button>
<el-button v-hasPermi="['equipment:devices:allocate']" link type="primary" icon="User" @click="handleAssign(scope.row)"></el-button>
</el-tooltip>
<el-tooltip v-if="scope.row.customerName && scope.row.deviceStatus == 1" content="撤回" placement="top">
<el-button link type="primary" icon="UploadFilled" @click="handleWithdraw(scope.row)"></el-button>
<el-button v-hasPermi="['equipment:devices:revoke']" link type="primary" icon="UploadFilled" @click="handleWithdraw(scope.row)"></el-button>
</el-tooltip>
<el-tooltip v-if="scope.row.bindingStatus == 1" :disabled="scope.row.deviceStatus === 0" content="解绑"
placement="top">
<el-button link type="primary" icon="Refresh" @click="handleUnbind(scope.row)"></el-button>
<el-button v-hasPermi="['equipment:devices:unbind']" link type="primary" icon="Refresh" @click="handleUnbind(scope.row)"></el-button>
</el-tooltip>
<el-tooltip v-if="scope.row.deviceImei" content="查看二维码" placement="top">
<el-button link type="primary" icon="Postcard" @click="showQrCode(scope.row)"></el-button>
@ -299,6 +300,7 @@ const deviceDist = ref<deviceVO[]>();
import { to } from 'await-to-js';
import request from "@/utils/request";
import { getBearerToken } from '@/utils/auth'
import router from '@/router';
const loading = ref(true);
const showSearch = ref(true);
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
@ -502,7 +504,12 @@ const handleAdd = async () => {
// 每次打开弹框时获取最新的设备类型数据
getDeviceType();
};
// 详情
const handleDatails = (row: any) => {
console.log(row,'row');
const deviceId = row.deviceId;
router.push('/equipmentManagement/deviceDetails/' + deviceId);
}
/** 修改按钮操作 */
const handleUpdate = async (row?: deviceForm) => {
reset();

693
src/views/index.vue
View File

@ -1,158 +1,271 @@
<template>
<div class="app-container home">
<!-- 面包屑导航 -->
<el-breadcrumb separator="/" class="breadcrumb">
<el-breadcrumb-item>
<span class="breadcrumb-dot active"></span>
首页
</el-breadcrumb-item>
<el-breadcrumb-item>
<span class="breadcrumb-dot"></span>
设备管理
</el-breadcrumb-item>
</el-breadcrumb>
<!-- 数据总览卡片 -->
<el-card class="data-overview-card" shadow="hover">
<template #header>
<div class="card-header">
<span class="card-title">数据总览</span>
<div>
<h1>数据总览</h1>
<div class="data-item">
<div class="data_bck">
<div class="number"><span>100</span> 个</div>
<div class="title_number">设备数量</div>
</div>
</template>
<el-row :gutter="20">
<el-col :span="4" v-for="(item, index) in dataOverview" :key="index">
<div class="data-item">
<div class="data-icon" :style="{ backgroundColor: item.color }">
<el-icon><component :is="item.icon" /></el-icon>
</div>
<div class="data-content">
<div class="data-value">{{ item.value }}</div>
<div class="data-label">{{ item.label }}</div>
</div>
</div>
</el-col>
</el-row>
</el-card>
<!-- 设备统计卡片 -->
<el-row :gutter="20" class="device-stats">
<el-col :span="12">
<el-card class="device-card" shadow="hover">
<template #header>
<div class="card-header">
<span class="card-title">蓝牙设备</span>
</div>
</template>
<el-row :gutter="20">
<el-col :span="8" v-for="(item, index) in bluetoothStats" :key="index">
<div class="device-item">
<div class="device-value">{{ item.value }}</div>
<div class="device-label">{{ item.label }}</div>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="device-card" shadow="hover">
<template #header>
<div class="card-header">
<span class="card-title">4G设备</span>
</div>
</template>
<el-row :gutter="20">
<el-col :span="8" v-for="(item, index) in g4Stats" :key="index">
<div class="device-item">
<div class="device-value">{{ item.value }}</div>
<div class="device-label">{{ item.label }}</div>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<!-- 地区分布图表 -->
<el-card class="region-chart-card" shadow="hover">
<template #header>
<div class="card-header">
<span class="card-title">设备使用频次地区分布</span>
<div class="chart-controls">
<el-select v-model="selectedMonth" placeholder="选择月份" size="small">
<el-option label="7月" value="7"></el-option>
<el-option label="8月" value="8"></el-option>
<el-option label="9月" value="9"></el-option>
</el-select>
<el-select v-model="selectedYear" placeholder="选择年份" size="small">
<el-option label="2025年" value="2025"></el-option>
<el-option label="2024年" value="2024"></el-option>
</el-select>
</div>
<div class="data_green">
<div class="number"><span>100</span> 个</div>
<div class="title_number">在线设备</div>
</div>
</template>
<div class="chart-container">
<div class="chart-bars">
<div
v-for="(region, index) in regionData"
:key="index"
class="chart-bar-item"
>
<div class="bar-label">{{ region.name }}</div>
<div class="bar-container">
<div
class="bar"
:style="{
height: (region.value / maxValue) * 200 + 'px',
backgroundColor: region.color
}"
></div>
</div>
<div class="bar-value">{{ region.value }}</div>
</div>
<div class="data_orgine">
<div class="number"><span>100</span> 个</div>
<div class="title_number">新增绑定</div>
</div>
<div class="chart-nav">
<el-button type="text" size="small">
<el-icon><ArrowRight /></el-icon>
</el-button>
<div class="data_red">
<div class="number"><span>100</span> 个</div>
<div class="title_number">异常设备</div>
</div>
</div>
</el-card>
<div>
<el-row :gutter="20">
<el-col :span="12">
<div class="content-row">
<h2>设备分类</h2>
<div class="card-header">
<!-- 循环渲染每个设备的进度条 -->
<div v-for="(item, index) in deviceList" :key="index" class="progress-item">
<el-progress :stroke-width="7" type="circle" :percentage="(item.current / item.total) * 100">
<!-- 自定义进度条内部内容：显示“分子/分母” -->
<template #default>
<div class="progress-text">
<span class="current">{{ item.current }}</span>
<span class="divider">/</span>
<span class="total">{{ item.total }}</span>
</div>
</template>
</el-progress>
<!-- 设备名称 -->
<div class="progress-name">{{ item.name }}</div>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="content-row">
<h2>快捷操作</h2>
<div class="card-header">
<div class="quick-item" @click="handledeviceTypeAdd">
<img src="../assets/index/device_type.png" class="quick-img" />
<div class="card_title">设备类型</div>
</div>
<div class="quick-item" @click="handledeviceAdd">
<img src="../assets/index/device_add.png" class="quick-img" />
<div class="card_title">设备添加</div>
</div>
<div class="quick-item" @click="handleGroup">
<img src="../assets/index/device_group.png" class="quick-img" />
<div class="card_title">分组管理</div>
</div>
<div class="quick-item" @click="handleControlPanel">
<img src="../assets/index/conton.png" class="quick-img" />
<div class="card_title">控制面板</div>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<!-- 左侧：设备使用频次 -->
<el-col :span="12">
<div class="region-chart-card">
<div class="card-header">
<h2>设备使用频次</h2>
<div class="chart-controls">
<el-select v-model="timeRange" placeholder="选择时间范围">
<el-option label="近半年" value="halfYear"></el-option>
<el-option label="近一年" value="oneYear"></el-option>
</el-select>
</div>
</div>
<div class="card-body">
<!-- 引入封装好的图表组件 -->
<!-- <DeviceFrequencyChart /> -->
</div>
</div>
</el-col>
<!-- 右侧：报警信息 -->
<el-col :span="12">
<div class="region-chart-card">
<div class="card-header">
<h2>报警信息</h2>
</div>
<div class="card-body">
<el-row :gutter="16">
<!-- 报警总览 -->
<el-col :span="8">
<div class="alarm-overview">
<!-- <AlarmOverviewChart /> -->
<div class="alarm-stats">
<div class="stat-item">
<span class="stat red">365</span>
<span class="label">报警总数</span>
</div>
<div class="stat-item">
<span class="stat green">300</span>
<span class="label">总处理报警</span>
</div>
</div>
</div>
</el-col>
<!-- 报警事项 -->
<el-col :span="16">
<div class="alarm-items">
<h3>报警事项</h3>
<!-- <AlarmItemsChart /> -->
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- <el-card class="data-overview-card" shadow="hover">
<template #header>
<div class="card-header">
<span class="card-title">数据总览</span>
</div>
</template>
<el-row :gutter="20">
<el-col :span="4" v-for="(item, index) in dataOverview" :key="index">
<div class="data-item">
<div class="data-icon" :style="{ backgroundColor: item.color }">
<el-icon>
<component :is="item.icon" />
</el-icon>
</div>
<div class="data-content">
<div class="data-value">{{ item.value }}</div>
<div class="data-label">{{ item.label }}</div>
</div>
</div>
</el-col>
</el-row>
</el-card> -->
<!-- 设备统计卡片 -->
<!-- <el-row :gutter="20" class="device-stats">
<el-col :span="12">
<el-card class="device-card" shadow="hover">
<template #header>
<div class="card-header">
<span class="card-title">蓝牙设备</span>
</div>
</template>
<el-row :gutter="20">
<el-col :span="8" v-for="(item, index) in bluetoothStats" :key="index">
<div class="device-item">
<div class="device-value">{{ item.value }}</div>
<div class="device-label">{{ item.label }}</div>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="device-card" shadow="hover">
<template #header>
<div class="card-header">
<span class="card-title">4G设备</span>
</div>
</template>
<el-row :gutter="20">
<el-col :span="8" v-for="(item, index) in g4Stats" :key="index">
<div class="device-item">
<div class="device-value">{{ item.value }}</div>
<div class="device-label">{{ item.label }}</div>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row> -->
<!-- 地区分布图表 -->
<!-- <el-card class="region-chart-card" shadow="hover">
<template #header>
<div class="card-header">
<span class="card-title">设备使用频次地区分布</span>
<div class="chart-controls">
<el-select v-model="selectedMonth" placeholder="选择月份" size="small">
<el-option label="7月" value="7"></el-option>
<el-option label="8月" value="8"></el-option>
<el-option label="9月" value="9"></el-option>
</el-select>
<el-select v-model="selectedYear" placeholder="选择年份" size="small">
<el-option label="2025年" value="2025"></el-option>
<el-option label="2024年" value="2024"></el-option>
</el-select>
</div>
</div>
</template>
<div class="chart-container">
<div class="chart-bars">
<div v-for="(region, index) in regionData" :key="index" class="chart-bar-item">
<div class="bar-label">{{ region.name }}</div>
<div class="bar-container">
<div class="bar" :style="{
height: (region.value / maxValue) * 200 + 'px',
backgroundColor: region.color
}"></div>
</div>
<div class="bar-value">{{ region.value }}</div>
</div>
</div>
<div class="chart-nav">
<el-button type="text" size="small">
<el-icon>
<ArrowRight />
</el-icon>
</el-button>
</div>
</div>
</el-card> -->
</div>
</template>
<script setup name="Index" lang="ts">
import { ref, computed } from 'vue'
import {
Monitor,
Connection,
Warning,
Plus,
Bell,
ArrowRight
} from '@element-plus/icons-vue'
import router from '@/router';
import DeviceFrequencyChart from './workflow/components/DeviceFrequencyChart.vue';
import AlarmOverviewChart from './workflow/components/AlarmOverviewChart.vue';
import AlarmItemsChart from './workflow/components/AlarmItemsChart.vue';
// 数据总览
const dataOverview = ref([
{ label: '设备总量', value: '1,234', icon: 'Monitor', color: '#409eff' },
{ label: '在线设备', value: '987', icon: 'Connection', color: '#67c23a' },
{ label: '异常设备', value: '45', icon: 'Warning', color: '#e6a23c' },
{ label: '新增绑定', value: '23', icon: 'Plus', color: '#f56c6c' },
{ label: '设备报警', value: '12', icon: 'Bell', color: '#909399' }
])
const deviceList = ref([
{ name: "4G设备", current: 25, total: 100 },
{ name: "蓝牙设备", current: 50, total: 200 },
{ name: "4G&蓝牙设备", current: 10, total: 40 },
]);
const timeRange = ref('halfYear');
// 设备类型
const handledeviceTypeAdd = () => {
router.push('/equipmentManagement/deviceType');
}
// 设备列表
const handledeviceAdd = () => {
router.push('/equipmentManagement/devices');
}
// 分组
const handleGroup = () => {
router.push('/equipmentManagement/group');
}
// 控制面板
const handleControlPanel = () => {
router.push('controlCenter/controlPanel');
}
// 蓝牙设备统计
const bluetoothStats = ref([
{ label: '总量', value: '856' },
{ label: '在线', value: '723' },
{ label: '新增绑定', value: '15' }
])
// 4G设备统计
const g4Stats = ref([
{ label: '总量', value: '378' },
{ label: '在线', value: '264' },
{ label: '新增绑定', value: '8' }
])
// 地区分布数据
const regionData = ref([
@ -161,6 +274,7 @@ const regionData = ref([
{ name: '杭州', value: 98, color: '#e6a23c' }
])
// 计算最大值用于图表比例
const maxValue = computed(() => {
return Math.max(...regionData.value.map(item => item.value))
@ -177,195 +291,180 @@ const selectedYear = ref('2025')
background-color: #f5f7fa;
min-height: calc(100vh - 84px);
.breadcrumb {
margin-bottom: 20px;
padding: 10px 0;
.breadcrumb-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
background-color: #c0c4cc;
&.active {
background-color: #409eff;
}
}
}
.data-item {
display: flex;
align-items: center;
transition: all 0.3s ease;
justify-content: space-between;
width: 100%;
color: rgba(255, 255, 255, 1);
.data-overview-card {
margin-bottom: 20px;
.card-header {
display: flex;
justify-content: space-between;
.data_bck {
width: 280px;
height: 110px;
border-radius: 10px;
background: url('../assets/index/devices_online.png') no-repeat;
position: relative;
text-align: center;
background-size: 100%;
align-items: center;
.card-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
}
.data-item {
display: flex;
align-items: center;
padding: 16px;
background: #fafafa;
border-radius: 8px;
transition: all 0.3s ease;
.data_green {
width: 280px;
height: 110px;
border-radius: 10px;
background: url('../assets/index/online.png') no-repeat;
position: relative;
background-size: 100%;
text-align: center;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
}
.data-icon {
width: 48px;
height: 48px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
color: white;
font-size: 20px;
}
.data_orgine {
width: 280px;
height: 110px;
border-radius: 10px;
background: url('../assets/index/add.png') no-repeat;
position: relative;
background-size: 100%;
text-align: center;
}
.data-content {
flex: 1;
.data_red {
width: 280px;
height: 110px;
border-radius: 10px;
background: url('../assets/index/device_yc.png') no-repeat;
position: relative;
background-size: 100%;
text-align: center;
}
.data-value {
font-size: 24px;
font-weight: 700;
color: #303133;
line-height: 1.2;
}
.number {
padding-top: 20px;
.data-label {
font-size: 14px;
color: #909399;
margin-top: 4px;
}
span {
font-size: 36px;
font-weight: 700;
}
}
}
.device-stats {
margin-bottom: 20px;
.content-row {
background-color: #fff;
height: 240px;
border-radius: 10px;
padding: 5px 25px 15px 25px;
margin-top: 20px;
}
.device-card {
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
.card-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
.device-item {
text-align: center;
padding: 20px 0;
.card-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
.device-value {
font-size: 28px;
font-weight: 700;
color: #409eff;
line-height: 1.2;
}
.progress-name {
text-align: center;
padding-top: 10px;
}
.device-label {
font-size: 14px;
color: #909399;
margin-top: 8px;
}
}
.card_title {
padding-top: 20px;
text-align: center;
}
.quick-item {
margin-top: 15px;
cursor: pointer;
}
.quick-img {
height: 90px;
width: 90px;
}
}
.region-chart-card {
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
.card-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
padding: 16px;
height: 100%;
}
.chart-controls {
display: flex;
gap: 12px;
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.chart-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 20px 0;
min-height: 250px;
.card-header h2 {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0;
}
.chart-bars {
display: flex;
align-items: flex-end;
gap: 40px;
flex: 1;
.chart-controls {
display: flex;
gap: 8px;
}
.chart-bar-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
.card-body {
height: calc(100% - 50px);
}
.bar-label {
font-size: 14px;
color: #606266;
font-weight: 500;
}
.alarm-overview {
display: flex;
flex-direction: column;
align-items: center;
}
.bar-container {
width: 60px;
height: 200px;
display: flex;
align-items: flex-end;
position: relative;
.alarm-stats {
display: flex;
justify-content: space-around;
width: 100%;
margin-top: 8px;
}
.bar {
width: 100%;
border-radius: 4px 4px 0 0;
transition: all 0.3s ease;
position: relative;
.stat-item {
text-align: center;
}
&:hover {
transform: scaleY(1.05);
}
}
}
.stat {
font-size: 16px;
font-weight: bold;
display: block;
margin-bottom: 4px;
}
.bar-value {
font-size: 16px;
font-weight: 600;
color: #303133;
}
}
}
.stat.red {
color: #ff4d4f;
}
.chart-nav {
display: flex;
align-items: center;
padding-left: 20px;
}
}
.stat.green {
color: #36cbcb;
}
.label {
font-size: 12px;
color: #666;
}
.alarm-items h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
color: #333;
}
}

55
src/views/workflow/compontents/AlarmItemsChart.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 180px;"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
const chartRef = ref(null);
let myChart = null;
const initChart = () => {
if (chartRef.value) {
myChart = echarts.init(chartRef.value);
const option = {
xAxis: { type: 'category', data: ['强制报警', '撞击闯入', '手动报警', '电子围栏'] },
yAxis: { type: 'value' },
series: [{
data: [50, 30, 65, 45],
type: 'bar',
itemStyle: {
// 柱状图渐变色
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{ offset: 0, color: '#ff6b6b' }, { offset: 1, color: '#ffcccc' }]
),
},
}],
};
myChart.setOption(option);
}
};
const handleResize = () => {
myChart && myChart.resize();
};
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
myChart && myChart.dispose();
myChart = null;
});
</script>
<style scoped>
.chart {
width: 100%;
height: 100%;
}
</style>

53
src/views/workflow/compontents/AlarmOverviewChart.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 180px;"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
const chartRef = ref(null);
let myChart = null;
const initChart = () => {
if (chartRef.value) {
myChart = echarts.init(chartRef.value);
const option = {
series: [{
type: 'pie',
radius: ['50%', '70%'], // 环形内外半径
data: [{ value: 6, name: '今日报警' }, { value: 6, name: '今日处理' }],
color: ['#ff4d4f', '#36cbcb'], // 红、绿配色
label: {
position: 'center',
formatter: '6/6\n今日报警/处理', // 中心文字
textStyle: { align: 'center' },
},
}],
};
myChart.setOption(option);
}
};
const handleResize = () => {
myChart && myChart.resize();
};
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
myChart && myChart.dispose();
myChart = null;
});
</script>
<style scoped>
.chart {
width: 100%;
height: 100%;
}
</style>

54
src/views/workflow/compontents/DeviceFrequencyChart.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<!-- 用ref绑定DOM，代替原id选择器 -->
<div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 200px;"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'; // 引入ECharts
const chartRef = ref(null); // 绑定图表容器DOM
let myChart = null; // 存储ECharts实例
// 初始化图表
const initChart = () => {
if (chartRef.value) {
myChart = echarts.init(chartRef.value);
const option = {
xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
yAxis: { type: 'value' },
series: [{
data: [30, 20, 40, 32, 45, 48],
type: 'line',
areaStyle: {}, // 开启面积填充
itemStyle: { color: '#409eff' },
}],
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
};
myChart.setOption(option);
}
};
// 窗口resize时，图表自适应
const handleResize = () => {
myChart && myChart.resize();
};
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
// 组件销毁时，移除事件 + 销毁图表（防止内存泄漏）
window.removeEventListener('resize', handleResize);
myChart && myChart.dispose();
myChart = null;
});
</script>
<style scoped>
.chart {
width: 100%;
height: 100%;
}
</style>