1.新增报警管理部分图表
2.修改箭头为本地图片 3.优化部分样式 4.完成性能比水滴图
This commit is contained in:
re-JZzzz
332
src/views/integratedManage/stateManage/components/manageForm.vue
Normal file
332
src/views/integratedManage/stateManage/components/manageForm.vue
Normal file
@ -0,0 +1,332 @@
|
||||
<template>
|
||||
<div class="manage-form-container">
|
||||
<!-- 搜索和筛选区域 -->
|
||||
|
||||
<!-- 设备信息表格 -->
|
||||
<el-table v-loading="loading" :data="deviceList" style="width: 100%" height="calc(100vh - 300px)">
|
||||
<el-table-column prop="deviceId" label="设备ID" min-width="120" align="center" />
|
||||
<el-table-column prop="deviceName" label="设备名称" min-width="120" align="center" />
|
||||
<el-table-column prop="deviceType" label="类型" min-width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getDeviceTypeTagType(scope.row.deviceType)" :effect="'light'">
|
||||
{{ scope.row.deviceType }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="station" label="所属电站" min-width="120" align="center" />
|
||||
<el-table-column prop="protocol" label="通讯协议" min-width="100" align="center" />
|
||||
<el-table-column prop="ipAddress" label="IP地址" min-width="120" align="center" />
|
||||
<el-table-column prop="lastOnlineTime" label="最后在线时间" min-width="150" align="center" />
|
||||
<el-table-column prop="status" label="状态" min-width="80">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusTagType(scope.row.status)" :effect="getStatusTagEffect(scope.row.status)">
|
||||
{{ getStatusText(scope.row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="150" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="handleDetails(scope.row)" size="small">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button type="primary" link @click="handleConfig(scope.row)" size="small">
|
||||
配置
|
||||
</el-button>
|
||||
<el-button type="primary" link @click="handleDelete(scope.row)" size="small">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
|
||||
// 搜索表单数据
|
||||
const searchForm = reactive({
|
||||
deviceType: '',
|
||||
station: '',
|
||||
protocol: '',
|
||||
status: '',
|
||||
keyword: ''
|
||||
});
|
||||
|
||||
// 表格加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 分页数据
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 545
|
||||
});
|
||||
|
||||
// 设备列表数据
|
||||
const deviceList = ref([
|
||||
{
|
||||
deviceId: 'WO-2023-0620-056',
|
||||
deviceName: '逆变器-01',
|
||||
deviceType: '逆变器',
|
||||
station: '兴电基站1',
|
||||
protocol: 'Modbus TCP',
|
||||
ipAddress: '192.168.1.101',
|
||||
lastOnlineTime: '2023-06-30 17:00',
|
||||
status: 'normal'
|
||||
},
|
||||
{
|
||||
deviceId: 'WO-2023-0620-057',
|
||||
deviceName: '温度传感器-45',
|
||||
deviceType: '传感器',
|
||||
station: '兴电基站2',
|
||||
protocol: 'Modbus TCP',
|
||||
ipAddress: '192.168.1.101',
|
||||
lastOnlineTime: '2023-06-30 17:00',
|
||||
status: 'interrupt'
|
||||
},
|
||||
{
|
||||
deviceId: 'WO-2023-0620-058',
|
||||
deviceName: '智能电表-03',
|
||||
deviceType: '电表',
|
||||
station: '兴电基站3',
|
||||
protocol: 'Modbus TCP',
|
||||
ipAddress: '192.168.1.101',
|
||||
lastOnlineTime: '2023-06-30 17:00',
|
||||
status: 'abnormal'
|
||||
},
|
||||
{
|
||||
deviceId: 'WO-2023-0620-059',
|
||||
deviceName: '监控摄像头-02',
|
||||
deviceType: '摄像头',
|
||||
station: '兴电基站4',
|
||||
protocol: 'Modbus TCP',
|
||||
ipAddress: '192.168.1.101',
|
||||
lastOnlineTime: '2023-06-30 17:00',
|
||||
status: 'normal'
|
||||
},
|
||||
{
|
||||
deviceId: 'WO-2023-0620-060',
|
||||
deviceName: '控制器-07',
|
||||
deviceType: '控制器',
|
||||
station: '兴电基站5',
|
||||
protocol: 'Modbus TCP',
|
||||
ipAddress: '192.168.1.101',
|
||||
lastOnlineTime: '2023-06-30 17:00',
|
||||
status: 'normal'
|
||||
},
|
||||
{
|
||||
deviceId: 'WO-2023-0620-061',
|
||||
deviceName: '逆变器-02',
|
||||
deviceType: '逆变器',
|
||||
station: '兴电基站1',
|
||||
protocol: 'Modbus TCP',
|
||||
ipAddress: '192.168.1.101',
|
||||
lastOnlineTime: '2023-06-30 17:00',
|
||||
status: 'normal'
|
||||
},
|
||||
{
|
||||
deviceId: 'WO-2023-0620-062',
|
||||
deviceName: '电流传感器-08',
|
||||
deviceType: '传感器',
|
||||
station: '兴电基站1',
|
||||
protocol: 'Modbus TCP',
|
||||
ipAddress: '192.168.1.101',
|
||||
lastOnlineTime: '2023-06-30 17:00',
|
||||
status: 'normal'
|
||||
},
|
||||
{
|
||||
deviceId: 'WO-2023-0620-063',
|
||||
deviceName: '多功能电表-12',
|
||||
deviceType: '电表',
|
||||
station: '兴电基站1',
|
||||
protocol: 'Modbus TCP',
|
||||
ipAddress: '192.168.1.101',
|
||||
lastOnlineTime: '2023-06-30 17:00',
|
||||
status: 'normal'
|
||||
},
|
||||
{
|
||||
deviceId: 'WO-2023-0620-064',
|
||||
deviceName: '门禁摄像头-05',
|
||||
deviceType: '摄像头',
|
||||
station: '兴电基站1',
|
||||
protocol: 'Modbus TCP',
|
||||
ipAddress: '192.168.1.101',
|
||||
lastOnlineTime: '2023-06-30 17:00',
|
||||
status: 'normal'
|
||||
},
|
||||
{
|
||||
deviceId: 'WO-2023-0620-065',
|
||||
deviceName: '开关控制器-15',
|
||||
deviceType: '控制器',
|
||||
station: '兴电基站1',
|
||||
protocol: 'Modbus TCP',
|
||||
ipAddress: '192.168.1.101',
|
||||
lastOnlineTime: '2023-06-30 17:00',
|
||||
status: 'normal'
|
||||
}
|
||||
]);
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
normal: '正常',
|
||||
interrupt: '中断',
|
||||
abnormal: '异常'
|
||||
};
|
||||
return statusMap[status] || status;
|
||||
};
|
||||
|
||||
// 获取状态标签类型
|
||||
const getStatusTagType = (status) => {
|
||||
const typeMap = {
|
||||
normal: 'success',
|
||||
interrupt: 'warning',
|
||||
abnormal: 'danger'
|
||||
};
|
||||
return typeMap[status] || 'default';
|
||||
};
|
||||
|
||||
// 获取状态标签效果
|
||||
const getStatusTagEffect = (status) => {
|
||||
// 正常状态使用浅色效果，其他状态使用深色效果
|
||||
return status === 'normal' ? 'light' : 'dark';
|
||||
};
|
||||
|
||||
// 获取设备类型标签类型
|
||||
const getDeviceTypeTagType = (deviceType) => {
|
||||
const typeMap = {
|
||||
'逆变器': 'primary',
|
||||
'传感器': 'success',
|
||||
'电表': 'warning',
|
||||
'摄像头': 'info',
|
||||
'控制器': 'danger'
|
||||
};
|
||||
return typeMap[deviceType] || 'default';
|
||||
};
|
||||
|
||||
// 处理搜索
|
||||
const handleSearch = () => {
|
||||
loading.value = true;
|
||||
// 模拟搜索请求
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
ElMessage.success('搜索成功');
|
||||
// 实际项目中这里应该调用API获取数据
|
||||
}, 500);
|
||||
};
|
||||
|
||||
// 处理添加设备
|
||||
const handleAddDevice = () => {
|
||||
// 实际项目中这里应该打开添加设备的弹窗或跳转到添加页面
|
||||
ElMessage.success('打开添加设备窗口');
|
||||
};
|
||||
|
||||
// 处理批量配置
|
||||
const handleBatchConfig = () => {
|
||||
// 实际项目中这里应该打开批量配置的弹窗
|
||||
ElMessage.success('打开批量配置窗口');
|
||||
};
|
||||
|
||||
// 处理查看详情
|
||||
const handleDetails = (row) => {
|
||||
// 实际项目中这里应该打开设备详情的弹窗或跳转到详情页面
|
||||
ElMessage.success(`查看设备${row.deviceCode}详情`);
|
||||
};
|
||||
|
||||
// 处理配置
|
||||
const handleConfig = (row) => {
|
||||
// 实际项目中这里应该打开设备配置的弹窗
|
||||
ElMessage.success(`配置设备${row.deviceCode}`);
|
||||
};
|
||||
|
||||
// 处理删除
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定要删除设备${row.deviceCode}吗？`,
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
// 实际项目中这里应该调用API删除设备
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.info('已取消删除');
|
||||
});
|
||||
};
|
||||
|
||||
// 处理分页大小变化
|
||||
const handleSizeChange = (size) => {
|
||||
pagination.pageSize = size;
|
||||
// 实际项目中这里应该重新请求数据
|
||||
};
|
||||
|
||||
// 处理分页页码变化
|
||||
const handleCurrentChange = (current) => {
|
||||
pagination.currentPage = current;
|
||||
// 实际项目中这里应该重新请求数据
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.manage-form-container {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 表格样式优化 */
|
||||
:deep(.el-table) {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.el-table__header-wrapper) {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
:deep(.el-table__row:hover) {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
/* 分页样式优化 */
|
||||
:deep(.el-pagination) {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
214
src/views/integratedManage/stateManage/components/stateTrend.vue
Normal file
214
src/views/integratedManage/stateManage/components/stateTrend.vue
Normal file
@ -0,0 +1,214 @@
|
||||
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<!--组件温度（℃） 图表内容区域 -->
|
||||
<div ref="chartRef" class="chart-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
|
||||
// 图表DOM引用
|
||||
const chartRef = ref(null);
|
||||
// 图表实例
|
||||
let chartInstance = null;
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (chartRef.value && !chartInstance) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
}
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
left: '8%',
|
||||
icon: 'square',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
color: '#4E5969'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#4E5969'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#EAEBF0'
|
||||
}
|
||||
},
|
||||
data: ['9-12', '9-13', '9-14', '9-15', '9-16', '9-17', '9-18']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 150,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#4E5969'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#EAEBF0',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '正常',
|
||||
data: [20, 10, 50, 80, 70, 10, 30],
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
color: '#7339F5',
|
||||
itemStyle: {
|
||||
// borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
|
||||
barBorderRadius: 8
|
||||
},
|
||||
barWidth: '20',
|
||||
},
|
||||
{
|
||||
name: '中断',
|
||||
data: [80, 30, 50, 80, 70, 10, 30],
|
||||
type: 'bar',
|
||||
stack: 'one', //堆叠
|
||||
color: '#FF8A00',
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
|
||||
barBorderRadius: 8
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '异常',
|
||||
data: [50, 30, 50, 80, 70, 10, 30],
|
||||
type: 'bar',
|
||||
stack: 'one', //堆叠
|
||||
color: '#DE4848',
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
|
||||
barBorderRadius: 8
|
||||
},
|
||||
barWidth: '12',
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
|
||||
// 响应窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.chart-header h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chart-container {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chart-container {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.chart-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chart-actions button {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.chart-actions button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
201
src/views/integratedManage/stateManage/components/statusPie.vue
Normal file
201
src/views/integratedManage/stateManage/components/statusPie.vue
Normal file
@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<!--组件温度（℃） 图表内容区域 -->
|
||||
<div ref="chartRef" class="chart-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
|
||||
// 图表DOM引用
|
||||
const chartRef = ref(null);
|
||||
// 图表实例
|
||||
let chartInstance = null;
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (chartRef.value && !chartInstance) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
}
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function(params) {
|
||||
// 定义名称映射关系
|
||||
const nameMap = {
|
||||
'提示信息': '设备正常',
|
||||
'一般告警': '设备中断',
|
||||
'重要告警': '设备异常'
|
||||
};
|
||||
// 使用ECharts提供的百分比值
|
||||
const percentage = params.percent.toFixed(1);
|
||||
// 返回格式化后的文本
|
||||
return `${nameMap[params.name]}: ${params.value}台 (${percentage}%)`;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '20%',
|
||||
bottom: '0%',
|
||||
top: '0%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
top: 'middle',
|
||||
orient: 'vertical',
|
||||
right: '5%', // 调整图例位置，使其更靠近左侧
|
||||
itemWidth: 15,
|
||||
itemHeight: 15,
|
||||
formatter: function(name) {
|
||||
// 定义名称映射关系
|
||||
const nameMap = {
|
||||
'提示信息': '设备正常',
|
||||
'一般告警': '设备中断',
|
||||
'重要告警': '设备异常'
|
||||
};
|
||||
// 定义数值映射关系
|
||||
const valueMap = {
|
||||
'提示信息': 28,
|
||||
'一般告警': 45,
|
||||
'重要告警': 55
|
||||
};
|
||||
// 返回格式化后的文本
|
||||
return `${nameMap[name] || name}(${valueMap[name]})`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
color: [
|
||||
'#43CF7C', // 设备正常
|
||||
'#00B3FF', // 设备中断
|
||||
'#FB3E7A', // 设备异常
|
||||
],
|
||||
data: [
|
||||
{ value: 28, name: '提示信息' },
|
||||
{ value: 45, name: '一般告警' },
|
||||
{ value: 55, name: '重要告警' },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
|
||||
// 响应窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.chart-header h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chart-container {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chart-container {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.chart-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chart-actions button {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.chart-actions button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.model {
|
||||
padding: 20px;
|
||||
background-color: rgba(242, 248, 252, 1);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user