大屏提交
This commit is contained in:
43
src/api/outputApi/index.ts
Normal file
43
src/api/outputApi/index.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import request from '@/utils/request';
|
||||
import { AxiosPromise } from 'axios';
|
||||
|
||||
/**
|
||||
* 查询项目数据
|
||||
* @param query
|
||||
* @returns {*}
|
||||
*/
|
||||
|
||||
export const projectProgress = (query?: any): any => {
|
||||
return request({
|
||||
url: '/enterprise/big/screen/projectProgress',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 产值
|
||||
* @param query
|
||||
* @returns {*}
|
||||
*/
|
||||
|
||||
export const outpuProgress = (query?: any): any => {
|
||||
return request({
|
||||
url: '/enterprise/big/screen/projectOutputValueComparison',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 预警
|
||||
* @param query
|
||||
* @returns {*}
|
||||
*/
|
||||
|
||||
export const earlyWarning = (query?: any): any => {
|
||||
return request({
|
||||
url: '/enterprise/big/screen/riskEarlyWarning',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
BIN
src/assets/large/actual.png
Normal file
BIN
src/assets/large/actual.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
src/assets/large/capacity.png
Normal file
BIN
src/assets/large/capacity.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/assets/large/delay.png
Normal file
BIN
src/assets/large/delay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
src/assets/large/plan.png
Normal file
BIN
src/assets/large/plan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@ -1,275 +1,328 @@
|
||||
<template>
|
||||
<div class="centerPage">
|
||||
<div class="topPage">
|
||||
<div id="earth" style="width: 100%;height: 100%;"></div>
|
||||
<div class="centerPage_map">
|
||||
<div ref="mapRef" class="map-container" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
<div class="endPage" :class="{ 'slide-out-down': isHide }">
|
||||
<Title title="AI安全巡检">
|
||||
<img src="@/assets/projectLarge/robot.svg" alt="" height="20px" width="20px">
|
||||
<div class="centerPage_bottom">
|
||||
<Title title="风险预警">
|
||||
<img src="@/assets/projectLarge/robot.svg" alt="" height="20px" width="20px" />
|
||||
</Title>
|
||||
<div class="swiper" v-if="inspectionList.length">
|
||||
<div class="arrow" :class="{ 'canUse': canLeft }" @click="swiperClick('left')">
|
||||
<el-icon size="16" :color="canLeft ? 'rgba(29, 214, 255, 1)' : 'rgba(29, 214, 255, 0.3)'">
|
||||
<ArrowLeft />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="swiper_content" ref="swiperContent">
|
||||
<div class="swiper_item" v-for="(item, i) in inspectionList" :key="i">
|
||||
<img :src="item.picture" alt="安全巡检" class="swiper_img">
|
||||
<div class="swiper_date">{{ item.createTime.slice(5) }}</div>
|
||||
<div class="swiper_tip">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arrow" :class="{ 'canUse': canRight }" @click="swiperClick('right')">
|
||||
<el-icon size="16" :color="canRight ? 'rgba(29, 214, 255, 1)' : 'rgba(29, 214, 255, 0.3)'">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="centerPage_bottom_table">
|
||||
<el-table v-loading="loading" :data="tableData" show-overflow-tooltip>
|
||||
<el-table-column label="时间" align="center" prop="date" />
|
||||
<el-table-column label="类型" align="center" prop="riskType">
|
||||
<template #default="scope">
|
||||
{{ safety_inspection_type[scope.row.riskType] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="报警内容" align="center" prop="alarmContent" />
|
||||
<el-table-column label="危险等级" align="center" prop="dangerLevel" />
|
||||
<el-table-column label="来源" align="center" prop="source" />
|
||||
<el-table-column label="警告等级" align="center" prop="alarmLevel">
|
||||
<template #default="scope">
|
||||
{{ risk_level_type[scope.row.alarmLevel] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, toRefs, getCurrentInstance } from "vue"
|
||||
import Title from './title.vue'
|
||||
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
|
||||
import { getScreenSafetyInspection } from '@/api/projectScreen'
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { violation_level_type } = toRefs(proxy?.useDict('violation_level_type'));
|
||||
|
||||
const props = defineProps({
|
||||
isHide: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
projectId: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
})
|
||||
|
||||
const inspectionList = ref([{
|
||||
id: "",
|
||||
label: "",
|
||||
picture: "",
|
||||
createTime: ""
|
||||
}])
|
||||
const swiperContent = ref()
|
||||
const swiperItemWidth = ref(100)
|
||||
const canLeft = ref(false)
|
||||
const canRight = ref(true)
|
||||
|
||||
const swiperClick = (direction) => {
|
||||
if (!swiperContent.value) return
|
||||
|
||||
if (direction === 'right') {
|
||||
if (swiperContent.value.scrollLeft >= swiperContent.value.scrollWidth - swiperContent.value.clientWidth) {
|
||||
canRight.value = false
|
||||
canLeft.value = true
|
||||
return
|
||||
}
|
||||
swiperContent.value.scrollLeft += swiperItemWidth.value
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts';
|
||||
import china from '@/assets/china.json';
|
||||
import RevenueContractCard from './RevenueContractCard.vue';
|
||||
import bottomboxconpoent from './bottomboxconpoent.vue';
|
||||
import { totalAmount, projectGis } from '@/api/largeScreen/index'; // 导入projectGis接口
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import Title from './title.vue';
|
||||
import { earlyWarning } from '@/api/outputApi';
|
||||
import { useDict } from '@/utils/dict';
|
||||
import { getDicts } from '@/api/system/dict/data';
|
||||
// 地图相关变量
|
||||
const mapRef = ref<HTMLDivElement | null>(null);
|
||||
let myChart: any = null;
|
||||
const projectData = ref<any[]>([]); // 存储项目地理信息数据
|
||||
const loading = ref(false);
|
||||
const tableData = ref([]);
|
||||
const risk_level_type = ref();
|
||||
const safety_inspection_type = ref();
|
||||
// 新增：获取项目地理信息数据
|
||||
const getProjectGisData = async () => {
|
||||
try {
|
||||
const response = await projectGis();
|
||||
if (response.code === 200) {
|
||||
// 过滤掉没有经纬度的项目
|
||||
projectData.value = response.data.filter((item: any) => item.lng !== null && item.lat !== null && item.lng !== '' && item.lat !== '');
|
||||
console.log('项目地理数据：', projectData.value);
|
||||
} else {
|
||||
if (swiperContent.value.scrollLeft <= 0) {
|
||||
canLeft.value = false
|
||||
canRight.value = true
|
||||
return
|
||||
console.error('项目地理数据请求失败：', response.msg);
|
||||
}
|
||||
swiperContent.value.scrollLeft -= swiperItemWidth.value
|
||||
} catch (error) {
|
||||
console.error('项目地理数据调用异常：', error);
|
||||
}
|
||||
};
|
||||
//获取字典
|
||||
const getDictsType = async () => {
|
||||
const res = await getDicts('risk_level_type');
|
||||
if (res.code === 200) {
|
||||
risk_level_type.value = res.data.reduce((acc, item) => {
|
||||
acc[item.dictValue] = item.dictLabel;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
};
|
||||
const getDictsType2 = async () => {
|
||||
const res = await getDicts('safety_inspection_type');
|
||||
if (res.code === 200) {
|
||||
safety_inspection_type.value = res.data.reduce((acc, item) => {
|
||||
acc[item.dictValue] = item.dictLabel;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
};
|
||||
//获取表格数据
|
||||
const getTableList = async () => {
|
||||
const res = await earlyWarning();
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data;
|
||||
}
|
||||
};
|
||||
|
||||
// 地图resize处理
|
||||
const handleResize = () => {
|
||||
if (myChart) myChart.resize();
|
||||
};
|
||||
|
||||
// 初始化地图（修改为使用接口数据）
|
||||
const initEcharts = () => {
|
||||
if (!mapRef.value || projectData.value.length === 0) {
|
||||
console.error('未找到地图容器或项目数据');
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新箭头状态
|
||||
canLeft.value = swiperContent.value.scrollLeft > 0
|
||||
canRight.value = swiperContent.value.scrollLeft < swiperContent.value.scrollWidth - swiperContent.value.clientWidth
|
||||
}
|
||||
echarts.registerMap('china', china as any);
|
||||
|
||||
const getInspectionList = async () => {
|
||||
const res = await getScreenSafetyInspection(props.projectId)
|
||||
const { code, data } = res
|
||||
if (code === 200) {
|
||||
data.map(item => {
|
||||
item.label = violation_level_type.value.find((i) => i.value === item.violationType)?.label
|
||||
})
|
||||
inspectionList.value = data
|
||||
// 从接口数据生成散点数据
|
||||
const scatterData = projectData.value.map((item) => ({
|
||||
name: item.projectName,
|
||||
value: [parseFloat(item.lng), parseFloat(item.lat)], // 转换为数值类型
|
||||
shortName: item.shortName,
|
||||
projectSite: item.projectSite,
|
||||
symbol: 'diamond',
|
||||
itemStyle: { color: '#0166d6' },
|
||||
symbolSize: [20, 20],
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}', // 显示项目名称
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
backgroundColor: 'rgba(3, 26, 52, 0.7)',
|
||||
padding: [3, 6],
|
||||
borderRadius: 3
|
||||
}
|
||||
}));
|
||||
|
||||
myChart = echarts.init(mapRef.value, null, {
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false
|
||||
});
|
||||
|
||||
const option: any = {
|
||||
roam: true, // 允许缩放和平移
|
||||
geo: {
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zoom: 2, // 调整初始缩放级别
|
||||
center: [108.95, 34.27], // 中国中心位置经纬度
|
||||
label: { show: false, color: '#fff' },
|
||||
itemStyle: {
|
||||
areaColor: '#031a34',
|
||||
borderColor: '#1e3a6e',
|
||||
borderWidth: 1
|
||||
}
|
||||
}
|
||||
// 创建地球
|
||||
const createEarth = () => {
|
||||
window.YJ.on({
|
||||
ws: true,
|
||||
// host: getIP(), //资源所在服务器地址
|
||||
// username: this.loginForm.username, //用户名 可以不登录（不填写用户名），不登录时无法加载服务端的数据
|
||||
// password: md5pass, //密码 生成方式：md5(用户名_密码)
|
||||
}).then((res) => {
|
||||
let earth = new YJ.YJEarth("earth");
|
||||
window.Earth1 = earth;
|
||||
YJ.Global.openRightClick(window.Earth1);
|
||||
YJ.Global.openLeftClick(window.Earth1);
|
||||
let view = {
|
||||
"position": {
|
||||
"lng": 102.03643298211526,
|
||||
"lat": 34.393586474501,
|
||||
"alt": 11298179.51993155
|
||||
},
|
||||
"orientation": {
|
||||
"heading": 360,
|
||||
"pitch": -89.94481747201486,
|
||||
"roll": 0
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(3, 26, 52, 0.8)',
|
||||
borderColor: '#1e3a6e',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
if (params.data) {
|
||||
// 处理散点数据
|
||||
const data = params.data;
|
||||
return `
|
||||
<div style="font-weight: bold;">${data.name}</div>
|
||||
<div>地点：${data.projectSite}</div>
|
||||
<div>经纬度：${data.value[0].toFixed(6)}, ${data.value[1].toFixed(6)}</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
loadBaseMap(earth.viewer)
|
||||
YJ.Global.CesiumContainer(window.Earth1, {
|
||||
compass: false, //罗盘
|
||||
});
|
||||
// YJ.Global.flyTo(earth, view);
|
||||
// YJ.Global.setDefaultView(earth.viewer, view)
|
||||
})
|
||||
}
|
||||
// 加载底图
|
||||
const loadBaseMap = (viewer) => {
|
||||
// 创建瓦片提供器
|
||||
const imageryProvider = new Cesium.UrlTemplateImageryProvider({
|
||||
url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
|
||||
// 可选：设置瓦片的格式
|
||||
fileExtension: 'png',
|
||||
// 可选：设置瓦片的范围和级别
|
||||
minimumLevel: 0,
|
||||
maximumLevel: 18,
|
||||
// 可选：设置瓦片的投影（默认为Web Mercator）
|
||||
projection: Cesium.WebMercatorProjection,
|
||||
// 可选：如果瓦片服务需要跨域请求，设置请求头部
|
||||
credit: new Cesium.Credit('卫星图数据来源')
|
||||
});
|
||||
if (params.seriesType === 'map') {
|
||||
// console.log(params, 111111);
|
||||
return `
|
||||
<div style="font-weight: bold;">${params.name}</div>
|
||||
|
||||
// 添加图层到视图
|
||||
const layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
geoIndex: 0,
|
||||
emphasis: {
|
||||
areaColor: '#fff',
|
||||
label: { show: true, color: '#fff' },
|
||||
itemStyle: { areaColor: '#02417e' }
|
||||
},
|
||||
select: { itemStyle: { areaColor: '#02417e' } },
|
||||
data: [] // 可以留空，或根据需要添加区域数据
|
||||
},
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: scatterData,
|
||||
emphasis: {
|
||||
scale: true, // 鼠标悬停时放大
|
||||
symbolSize: [25, 25]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
};
|
||||
const risk_level_type1 = ref([]);
|
||||
const safety_inspection_type1 = ref([]);
|
||||
// 组件生命周期
|
||||
onMounted(() => {
|
||||
getInspectionList()
|
||||
createEarth()
|
||||
if (swiperContent.value && swiperContent.value.children.length > 0) {
|
||||
swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
|
||||
}
|
||||
})
|
||||
nextTick(async () => {
|
||||
// 先获取合同数据和项目地理数据，再初始化地图
|
||||
getDictsType();
|
||||
getDictsType2();
|
||||
await Promise.all([getProjectGisData()]);
|
||||
initEcharts();
|
||||
getTableList();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.centerPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.topPage,
|
||||
.endPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
border: 1px solid rgba(230, 247, 255, 0.1);
|
||||
// justify-content: space-between;
|
||||
padding: 0 10px 10px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.topPage {
|
||||
flex: 1;
|
||||
margin-bottom: 23px;
|
||||
transition: flex 0.5s ease;
|
||||
}
|
||||
|
||||
.endPage {
|
||||
max-height: 300px;
|
||||
opacity: 1;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
/* 向下滑出动画 */
|
||||
.slide-out-down {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
.centerPage_map {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 20px 20px 10px 20px;
|
||||
|
||||
.swiper_content {
|
||||
height: 65vh;
|
||||
}
|
||||
.centerPage_bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
overflow-x: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper_item {
|
||||
position: relative;
|
||||
height: 25vh;
|
||||
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 133px;
|
||||
height: 84px;
|
||||
|
||||
.swiper_img {
|
||||
width: 133px;
|
||||
height: 84px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.swiper_date {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(230, 247, 255, 1);
|
||||
}
|
||||
|
||||
.swiper_tip {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
.centerPage_bottom_table {
|
||||
width: 100%;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(230, 247, 255, 1);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(29, 214, 255, 0.3);
|
||||
color: skyblue;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.canUse {
|
||||
border: 1px solid rgba(29, 214, 255, 1);
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
:deep(.el-table, .el-table__expanded-cell) {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover:not(.canUse) {
|
||||
opacity: 0.7;
|
||||
:deep(.el-table tr) {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
// border: 1px solid rgba(0, 255, 255, 0.5) !important;
|
||||
}
|
||||
:deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
:deep(.el-table th.el-table__cell) {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
color: #fff;
|
||||
border-bottom: 1px solid transparent !important;
|
||||
border-right: 1px solid transparent !important;
|
||||
}
|
||||
:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
|
||||
border-right: 1px solid transparent !important;
|
||||
border-bottom: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__body tr:hover > td) {
|
||||
background-color: rgba(40, 75, 91, 0.9) !important;
|
||||
}
|
||||
/* 表格边框颜色 */
|
||||
:deep(.el-table, .el-table__header-wrapper, .el-table__body-wrapper, .el-table__footer-wrapper, .el-table th, .el-table td) {
|
||||
border: 1px solid transparent !important;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
:deep(.el-table__inner-wrapper:before) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* 固定列的边框 */
|
||||
:deep(.el-table__fixed, .el-table__fixed-right) {
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
|
||||
width: 4px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
opacity: 0.2;
|
||||
background: #00c0ff;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0;
|
||||
background: rgba(220, 228, 245, 0.8);
|
||||
}
|
||||
|
||||
:deep(.el-icon-arrow-right:before) {
|
||||
color: #0ff;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动条优化
|
||||
.centerPage_bottom_table::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.centerPage_bottom_table::-webkit-scrollbar-thumb {
|
||||
background-color: #0ff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.centerPage_bottom_table::-webkit-scrollbar-track {
|
||||
background-color: rgba(0, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,51 +1,54 @@
|
||||
export let pieOption = {
|
||||
// 定义中心文字
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
style: {
|
||||
// 需要从接口替换
|
||||
text: '70%',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
fill: '#fff'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '50%',
|
||||
style: {
|
||||
text: '总进度',
|
||||
fontSize: 14,
|
||||
fill: '#fff'
|
||||
}
|
||||
},
|
||||
// {
|
||||
// type: 'text',
|
||||
// left: 'center',
|
||||
// top: '40%',
|
||||
// style: {
|
||||
// // 需要从接口替换
|
||||
// text: '70%',
|
||||
// fontSize: 24,
|
||||
// fontWeight: 'bold',
|
||||
// fill: '#fff'
|
||||
// }
|
||||
// }
|
||||
// {
|
||||
// type: 'text',
|
||||
// left: 'center',
|
||||
// top: '50%',
|
||||
// style: {
|
||||
// text: '111',
|
||||
// fontSize: 14,
|
||||
// fill: '#fff'
|
||||
// }
|
||||
// }
|
||||
],
|
||||
legend: {
|
||||
show: true,
|
||||
type: 'plain',
|
||||
bottom: 20,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// show: true,
|
||||
// type: 'plain',
|
||||
// bottom: 20,
|
||||
// itemWidth: 12,
|
||||
// itemHeight: 12,
|
||||
// textStyle: {
|
||||
// color: '#fff'
|
||||
// }
|
||||
// },
|
||||
series: {
|
||||
type: 'pie',
|
||||
data: [],
|
||||
radius: [50, 80],
|
||||
center: ['50%', '45%'],
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
// itemStyle: {
|
||||
// borderColor: '#fff',
|
||||
// borderWidth: 1
|
||||
// },
|
||||
label: {
|
||||
alignTo: 'edge',
|
||||
formatter: '{name|{b}}\n{percent|{c} %}',
|
||||
formatter: function (params) {
|
||||
// 只显示前三个数据项
|
||||
return `{name|${params.data.name}}\n{percent|${params.data.completionRate}MW}`;
|
||||
},
|
||||
minMargin: 10,
|
||||
edgeDistance: 20,
|
||||
lineHeight: 15,
|
||||
@ -62,7 +65,7 @@ export let pieOption = {
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom'
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -72,16 +75,39 @@ export let barOption = {
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
// 调整文字与图标间距
|
||||
data: ['计划流转面积', '已流转面积'],
|
||||
data: ['计划产值', '实际产值'],
|
||||
top: 0,
|
||||
right: 20,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
show: true,
|
||||
backgroundColor: '',
|
||||
trigger: 'axis',
|
||||
// formatter: '{b0}：{c0}万元',
|
||||
formatter: (params: any) => {
|
||||
// params 是数组，对应每条柱子
|
||||
return params
|
||||
.map((p: any) => `${p.seriesName}：${Number(p.value).toFixed(2)} 亿元`)
|
||||
|
||||
.join('<br/>');
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow',
|
||||
}
|
||||
// borderColor: 'rgba(252, 217, 18, 1)'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['地块1', '地块2', '地块3', '地块4', '地块5', '地块6'],
|
||||
data: [],
|
||||
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
@ -93,34 +119,71 @@ export let barOption = {
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位：m²',
|
||||
name: '单位：亿元',
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示分割线
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
bottom: 0, // 距离容器底部的距离
|
||||
containLabel: true // 确保坐标轴标签不被裁剪
|
||||
left: '12%',
|
||||
top: '15%', // 顶部留一点空间给 legend
|
||||
bottom: '8%',
|
||||
right: '2%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '计划流转面积',
|
||||
name: '计划产值',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: '20%',
|
||||
barWidth: '10',
|
||||
itemStyle: {
|
||||
color: 'rgb(29, 253, 253)'
|
||||
},
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1, // 修改y为1表示从底部开始
|
||||
x2: 0,
|
||||
y2: 0, // 修改y2为0表示渐变到顶部
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 209, 92, 0.1)' // 底部透明度0.1
|
||||
},
|
||||
{
|
||||
name: '已流转面积',
|
||||
offset: 1,
|
||||
color: 'rgba(255, 209, 92, 1)' // 顶部透明度1
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '实际产值',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: '20%',
|
||||
barWidth: '10',
|
||||
itemStyle: {
|
||||
color: 'rgb(25, 181, 251)'
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1, // 从底部开始
|
||||
x2: 0,
|
||||
y2: 0, // 到顶部结束
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(7, 209, 250, 0.1)' // 底部透明度0.1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(7, 209, 250, 1)' // 顶部透明度1
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -129,7 +192,7 @@ export let mapOption = {
|
||||
geo: {
|
||||
map: 'ch',
|
||||
roam: true,
|
||||
aspectScale: Math.cos((47 * Math.PI) / 180),
|
||||
aspectScale: Math.cos((47 * Math.PI) / 180)
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -147,7 +210,7 @@ export let mapOption = {
|
||||
{ name: 'i', value: [9.085994375000002, 47.55395822835779] },
|
||||
{ name: 'j', value: [8.653968125000002, 47.47709530818285] },
|
||||
{ name: 'k', value: [8.203158125000002, 47.44506909144329] }
|
||||
],
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -1,13 +1,60 @@
|
||||
<template>
|
||||
<div class="leftPage">
|
||||
<div class="topPage">
|
||||
<Title title="项目概况" />
|
||||
<div class="content" v-html="generalize"></div>
|
||||
<Title title="项目进度分析" />
|
||||
<div class="progress">
|
||||
<div class="progress_item">
|
||||
<div class="progress_imgBox">
|
||||
<div class="progress_img">
|
||||
<img src="@/assets/large/capacity.png" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
<div class="endPage">
|
||||
<Title title="形象进度" />
|
||||
</div>
|
||||
<div class="progress_text">
|
||||
<div class="progress_text_title">
|
||||
<div>{{ capacityData.gridConnectedCapacity ?? '0' }}</div>
|
||||
<div>MW</div>
|
||||
</div>
|
||||
<div class="content_text">井网总容量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress_item">
|
||||
<div class="progress_imgBox">
|
||||
<div class="progress_img">
|
||||
<img src="@/assets/large/plan.png" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress_text">
|
||||
<div class="progress_text_title">
|
||||
<div>{{ capacityData.plannedCapacity ?? '0' }}</div>
|
||||
<div>MW</div>
|
||||
</div>
|
||||
<div class="content_text">计划总容量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress_item">
|
||||
<div class="progress_imgBox">
|
||||
<div class="progress_img">
|
||||
<img src="@/assets/large/delay.png" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress_text">
|
||||
<div class="progress_text_title">
|
||||
<div>{{ capacityData.delayedProjectCount ?? '0' }}</div>
|
||||
<div>个</div>
|
||||
</div>
|
||||
<div class="content_text">延期项目</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="projectItem">
|
||||
<div class="chart_container">
|
||||
<div ref="pieChartRef" class="echart" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="output">
|
||||
<Title title="实际产值与预期产值对比" />
|
||||
<div class="chart_container">
|
||||
<div ref="lineChartRef" class="echart" />
|
||||
</div>
|
||||
</div>
|
||||
@ -15,69 +62,40 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, nextTick } from "vue"
|
||||
import Title from './title.vue'
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import Title from './title.vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { pieOption, barOption } from './optionList';
|
||||
import { getScreenLand, getScreenImgProcess, getScreenGeneralize } from '@/api/projectScreen';
|
||||
|
||||
import { projectProgress, outpuProgress } from '@/api/outputApi';
|
||||
const capacityData: any = ref({});
|
||||
const props = defineProps({
|
||||
projectId: {
|
||||
type: String,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const generalize = ref()
|
||||
const generalize = ref();
|
||||
// 饼图相关
|
||||
const pieChartRef = ref<HTMLDivElement | null>(null);
|
||||
let pieChart: any = null;
|
||||
const totalPercent = ref(0)
|
||||
const totalPercent = ref(0);
|
||||
// 折线图相关
|
||||
const lineChartRef = ref<HTMLDivElement | null>(null);
|
||||
let lineChart: any = null;
|
||||
// 土地数据 折线图
|
||||
const designAreaData = ref([])
|
||||
const transferAreaData = ref([])
|
||||
// 饼图数据
|
||||
const pieData = [
|
||||
{ label: 'areaPercentage', name: '厂区', value: 0 },
|
||||
{ label: 'roadPercentage', name: '道路', value: 0 },
|
||||
{ label: 'collectorLinePercentage', name: '集电线路', value: 0 },
|
||||
{ label: 'exportLinePercentage', name: '送出线路', value: 0 },
|
||||
{ label: 'substationPercentage', name: '升压站', value: 0 },
|
||||
{ label: 'boxTransformerPercentage', name: '箱变', value: 0 },
|
||||
]
|
||||
|
||||
// 初始化饼图
|
||||
const initPieChart = () => {
|
||||
if (!pieChartRef.value) {
|
||||
console.error('未找到饼图容器元素');
|
||||
return;
|
||||
}
|
||||
pieOption.series.data = pieData
|
||||
pieOption.graphic[0].style.text = totalPercent.value + '%'
|
||||
pieChart = echarts.init(pieChartRef.value, null, {
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false
|
||||
});
|
||||
pieChart.setOption(pieOption);
|
||||
}
|
||||
|
||||
// 初始化折线图
|
||||
const initLineChart = () => {
|
||||
if (!lineChartRef.value) {
|
||||
console.error('未找到折线图容器元素');
|
||||
return;
|
||||
}
|
||||
barOption.series[0].data = designAreaData.value
|
||||
barOption.series[1].data = transferAreaData.value
|
||||
lineChart = echarts.init(lineChartRef.value, null, {
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false
|
||||
});
|
||||
lineChart.setOption(barOption);
|
||||
}
|
||||
const designAreaData = ref([]);
|
||||
const transferAreaData = ref([]);
|
||||
const barNames = ref([]);
|
||||
// // 饼图数据
|
||||
// const pieData = [
|
||||
// { label: 'areaPercentage', name: '厂区', value: 0 },
|
||||
// { label: 'roadPercentage', name: '道路', value: 0 },
|
||||
// { label: 'collectorLinePercentage', name: '集电线路', value: 0 },
|
||||
// { label: 'exportLinePercentage', name: '送出线路', value: 0 },
|
||||
// { label: 'substationPercentage', name: '升压站', value: 0 },
|
||||
// { label: 'boxTransformerPercentage', name: '箱变', value: 0 }
|
||||
// ];
|
||||
|
||||
// 响应窗口大小变化
|
||||
const handleResize = () => {
|
||||
@ -85,50 +103,126 @@ const handleResize = () => {
|
||||
if (lineChart) lineChart.resize();
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取项目土地统计数据
|
||||
*/
|
||||
const getScreenLandData = async () => {
|
||||
const res = await getScreenLand(props.projectId);
|
||||
const { data, code } = res
|
||||
if (code === 200) {
|
||||
designAreaData.value = data.map((item: any) => Number(item.designArea))
|
||||
transferAreaData.value = data.map((item: any) => Number(item.transferArea))
|
||||
const processedDataList = ref([]);
|
||||
//获取数据
|
||||
const getData = async () => {
|
||||
const res = await projectProgress();
|
||||
if (res.code == 200) {
|
||||
capacityData.value = res.data;
|
||||
// processedDataList.value = res.data.projectProgressDetailList;
|
||||
let totalCapacity = 0;
|
||||
const processedData = res.data.projectProgressDetailList.map((item) => {
|
||||
const capacity = parseInt(item.projectCapacity) || 0;
|
||||
totalCapacity += capacity;
|
||||
return {
|
||||
name: item.projectName,
|
||||
value: capacity,
|
||||
completionRate: item.completionRate
|
||||
};
|
||||
});
|
||||
|
||||
// 计算每个项目的百分比
|
||||
processedData.forEach((item) => {
|
||||
item.percentage = totalCapacity > 0 ? ((item.value / totalCapacity) * 100).toFixed(2) : '0%';
|
||||
});
|
||||
processedDataList.value = processedData;
|
||||
initPieChart();
|
||||
}
|
||||
};
|
||||
// 初始化饼图
|
||||
const initPieChart = () => {
|
||||
if (!pieChartRef.value) {
|
||||
console.error('未找到饼图容器元素');
|
||||
return;
|
||||
}
|
||||
const data = processedDataList.value.map((item: any) => {
|
||||
return {
|
||||
name: item.name,
|
||||
value: item.percentage,
|
||||
completionRate: item.value
|
||||
};
|
||||
});
|
||||
pieOption.series.data = data;
|
||||
|
||||
// pieOption.graphic[0].style.text = totalPercent.value + '%';
|
||||
pieChart = echarts.init(pieChartRef.value, null, {
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false
|
||||
});
|
||||
pieChart.setOption(pieOption);
|
||||
};
|
||||
//获取产值数据
|
||||
const getOutputData = async () => {
|
||||
const res = await outpuProgress();
|
||||
if (res.code == 200) {
|
||||
designAreaData.value = res.data.map((item: any) => Number(item.planValue));
|
||||
transferAreaData.value = res.data.map((item: any) => Number(item.actualValue));
|
||||
barNames.value = res.data.map((item: any) => item.projectName);
|
||||
initLineChart();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取项目形象进度数据
|
||||
*/
|
||||
const getScreenImgProcessData = async () => {
|
||||
const res = await getScreenImgProcess(props.projectId);
|
||||
const { data, code } = res
|
||||
if (code === 200) {
|
||||
totalPercent.value = data.totalPercentage
|
||||
pieData.forEach((item: any) => {
|
||||
item.value = data[item.label]
|
||||
})
|
||||
initPieChart()
|
||||
};
|
||||
// 初始化柱状图图
|
||||
const initLineChart = () => {
|
||||
if (!lineChartRef.value) {
|
||||
console.error('未找到柱状图容器元素');
|
||||
return;
|
||||
}
|
||||
}
|
||||
console.log(barOption);
|
||||
barOption.xAxis.data = barNames.value;
|
||||
barOption.series[0].data = designAreaData.value;
|
||||
barOption.series[1].data = transferAreaData.value;
|
||||
lineChart = echarts.init(lineChartRef.value, null, {
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false
|
||||
});
|
||||
lineChart.setOption(barOption);
|
||||
};
|
||||
// /**
|
||||
// * 获取项目土地统计数据
|
||||
// */
|
||||
// const getScreenLandData = async () => {
|
||||
// const res = await getScreenLand(props.projectId);
|
||||
// const { data, code } = res;
|
||||
// if (code === 200) {
|
||||
// designAreaData.value = data.map((item: any) => Number(item.designArea));
|
||||
// transferAreaData.value = data.map((item: any) => Number(item.transferArea));
|
||||
// // initLineChart();
|
||||
// }
|
||||
// };
|
||||
|
||||
/**
|
||||
* 获取项目概况数据
|
||||
*/
|
||||
const getScreenGeneralizeData = async () => {
|
||||
const res = await getScreenGeneralize(props.projectId);
|
||||
const { data, code } = res
|
||||
if (code === 200) {
|
||||
generalize.value = data
|
||||
}
|
||||
}
|
||||
// /**
|
||||
// * 获取项目形象进度数据
|
||||
// */
|
||||
// const getScreenImgProcessData = async () => {
|
||||
// const res = await getScreenImgProcess(props.projectId);
|
||||
// const { data, code } = res;
|
||||
// if (code === 200) {
|
||||
// totalPercent.value = data.totalPercentage;
|
||||
// pieData.forEach((item: any) => {
|
||||
// item.value = data[item.label];
|
||||
// });
|
||||
// initPieChart();
|
||||
// }
|
||||
// };
|
||||
|
||||
// /**
|
||||
// * 获取项目概况数据
|
||||
// */
|
||||
// const getScreenGeneralizeData = async () => {
|
||||
// const res = await getScreenGeneralize(props.projectId);
|
||||
// const { data, code } = res;
|
||||
// if (code === 200) {
|
||||
// generalize.value = data;
|
||||
// }
|
||||
// };
|
||||
|
||||
// 组件挂载时初始化图表
|
||||
onMounted(() => {
|
||||
getScreenLandData()
|
||||
getScreenImgProcessData()
|
||||
getScreenGeneralizeData()
|
||||
// getScreenLandData();
|
||||
// getScreenImgProcessData();
|
||||
// getScreenGeneralizeData();
|
||||
getData();
|
||||
getOutputData();
|
||||
nextTick(() => {
|
||||
initPieChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
@ -155,67 +249,144 @@ onUnmounted(() => {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.topPage,
|
||||
.endPage {
|
||||
.topPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
padding: 15px 0 0 0;
|
||||
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||
box-sizing: border-box;
|
||||
height: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.endPage {
|
||||
flex: 1;
|
||||
margin-top: 23px;
|
||||
// .content {
|
||||
// height: 100px;
|
||||
// margin: 0 15px;
|
||||
// padding: 0 10px;
|
||||
// margin-top: 15px;
|
||||
// box-sizing: border-box;
|
||||
// overflow-y: auto;
|
||||
|
||||
.chart_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
// &::-webkit-scrollbar-track {
|
||||
// background: rgba(204, 204, 204, 0.1);
|
||||
// border-radius: 10px;
|
||||
// }
|
||||
|
||||
// &::-webkit-scrollbar-thumb {
|
||||
// background: rgba(29, 214, 255, 0.78);
|
||||
// border-radius: 10px;
|
||||
// }
|
||||
|
||||
// .content_item {
|
||||
// font-size: 14px;
|
||||
// font-weight: 400;
|
||||
// color: rgba(230, 247, 255, 1);
|
||||
// margin-bottom: 10px;
|
||||
|
||||
// &:last-child {
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.progress {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
.progress_item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background: rgba(29, 214, 255, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
.progress_imgBox {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
position: relative;
|
||||
.progress_img {
|
||||
width: 84px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 80%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.progress_text {
|
||||
width: 100%;
|
||||
height: 65%;
|
||||
background: rgba(29, 214, 255, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
padding: 15px 5px 5px 5px;
|
||||
.progress_text_title {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > div:first-child {
|
||||
// 第一个子元素的样式
|
||||
width: 50%;
|
||||
font-size: 24px;
|
||||
// font-weight: bold;
|
||||
font-family: 'AlimamaShuHeiTi', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& > div:last-child {
|
||||
// 最后一个子元素的样式
|
||||
width: 50%;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.content_text {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #c6d1db;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.projectItem {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
// background: rgba(29, 214, 255, 1);
|
||||
padding: 10px 10px 10px 0;
|
||||
// border: 1px solid rgba(29, 214, 255, 0.1);
|
||||
.chart_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.echart {
|
||||
height: 48%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.output {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
// background: rgba(29, 214, 255, 0.5);
|
||||
padding: 10px 10px 10px 0;
|
||||
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||
|
||||
.content {
|
||||
height: 100px;
|
||||
margin: 0 15px;
|
||||
padding: 0 10px;
|
||||
margin-top: 15px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: rgba(204, 204, 204, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(29, 214, 255, 0.78);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.content_item {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(230, 247, 255, 1);
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.chart_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.echart {
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subfont {
|
||||
color: rgba(138, 149, 165, 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user