init
This commit is contained in:
lnljyang
170
src/views/dishboard.vue
Normal file
170
src/views/dishboard.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<!-- 顶部标题 -->
|
||||
<header class="header">
|
||||
<h1>碳林</h1>
|
||||
<span>{{ currentTime }}</span>
|
||||
</header>
|
||||
|
||||
<!-- 主体区域 -->
|
||||
<div class="main">
|
||||
<!-- 左侧信息 -->
|
||||
<div class="panel left-panel">
|
||||
<div class="card" v-for="(item, index) in leftData" :key="index">
|
||||
<p>{{ item.title }}</p>
|
||||
<h2>{{ item.value }}</h2>
|
||||
</div>
|
||||
<div class="chart-box">
|
||||
<v-chart class="chart" :option="carbonFootprintOption" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中心地图 -->
|
||||
<div class="map-container">
|
||||
<v-chart class="map-chart" :option="mapOption" />
|
||||
<h2>今日碳减排总量: 8318 kg</h2>
|
||||
</div>
|
||||
|
||||
<!-- 右侧图表 -->
|
||||
<div class="panel right-panel">
|
||||
<v-chart class="chart" :option="monthlySpecialLabelOption" />
|
||||
<v-chart class="chart" :option="monthlyBoxCountOption" />
|
||||
<v-chart class="chart" :option="boxWeightDistributionOption" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部数据表 -->
|
||||
<div class="footer">
|
||||
<el-table :data="tradeData" border>
|
||||
<el-table-column prop="exchange" label="交易所" />
|
||||
<el-table-column prop="project" label="项目" />
|
||||
<el-table-column prop="price" label="价格 (RMB)" />
|
||||
<el-table-column prop="region" label="地区" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import "echarts/map/js/china";
|
||||
import VChart from "vue-echarts";
|
||||
|
||||
export default {
|
||||
components: { VChart },
|
||||
data() {
|
||||
return {
|
||||
currentTime: new Date().toLocaleString(),
|
||||
leftData: [
|
||||
{ title: "在线车数", value: "340 / 569" },
|
||||
{ title: "当日减碳", value: "334kg" },
|
||||
{ title: "当日用氢量", value: "334kg" },
|
||||
{ title: "当日里程", value: "3300km" },
|
||||
],
|
||||
tradeData: [
|
||||
{ exchange: "北京碳交易所", project: "CCER", price: 100, region: "中国·北京" },
|
||||
{ exchange: "上海环境能源交易所", project: "CCER", price: 98, region: "中国·上海" },
|
||||
{ exchange: "深圳排放权交易所", project: "CCER", price: 97, region: "中国·深圳" },
|
||||
{ exchange: "广东碳排放交易所", project: "CCER", price: 96, region: "中国·广东" },
|
||||
{ exchange: "湖北碳排放交易所", project: "CCER", price: 95, region: "中国·湖北" },
|
||||
],
|
||||
// 碳足迹折线图
|
||||
carbonFootprintOption: {
|
||||
tooltip: { trigger: "axis" },
|
||||
legend: { data: ["碳减排量", "行驶里程"] },
|
||||
xAxis: { type: "category", data: ["1月", "2月", "3月", "4月", "5月", "6月"] },
|
||||
yAxis: [{ type: "value" }, { type: "value" }],
|
||||
series: [
|
||||
{ name: "碳减排量", type: "bar", data: [10000, 20000, 15000, 30000, 25000, 35000] },
|
||||
{ name: "行驶里程", type: "line", yAxisIndex: 1, data: [10, 20, 18, 25, 22, 28] },
|
||||
],
|
||||
},
|
||||
// 中国地图
|
||||
mapOption: {
|
||||
tooltip: { trigger: "item" },
|
||||
visualMap: { min: 0, max: 100, text: ["高", "低"], calculable: true },
|
||||
series: [
|
||||
{
|
||||
type: "map",
|
||||
map: "china",
|
||||
data: [
|
||||
{ name: "北京", value: 80 },
|
||||
{ name: "上海", value: 50 },
|
||||
{ name: "广东", value: 90 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
// 特殊标箱情况
|
||||
monthlySpecialLabelOption: {
|
||||
tooltip: { trigger: "axis" },
|
||||
legend: { data: ["空箱", "危险品"] },
|
||||
xAxis: { type: "category", data: ["1月", "2月", "3月", "4月", "5月"] },
|
||||
yAxis: { type: "value" },
|
||||
series: [
|
||||
{ name: "空箱", type: "line", data: [10, 20, 30, 40, 50] },
|
||||
{ name: "危险品", type: "line", data: [200, 250, 300, 350, 400] },
|
||||
],
|
||||
},
|
||||
// 月度标箱数
|
||||
monthlyBoxCountOption: {
|
||||
tooltip: { trigger: "axis" },
|
||||
xAxis: { type: "category", data: ["1月", "2月", "3月", "4月", "5月"] },
|
||||
yAxis: { type: "value" },
|
||||
series: [{ type: "bar", data: [30000, 40000, 35000, 45000, 38000] }],
|
||||
},
|
||||
// 标箱重量分布
|
||||
boxWeightDistributionOption: {
|
||||
tooltip: { trigger: "item" },
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
data: [
|
||||
{ value: 1234, name: "1~5T" },
|
||||
{ value: 1234, name: "5~10T" },
|
||||
{ value: 1234, name: "10~15T" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.updateTime();
|
||||
},
|
||||
methods: {
|
||||
updateTime() {
|
||||
setInterval(() => {
|
||||
this.currentTime = new Date().toLocaleString();
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
background: #0a1931;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 24px;
|
||||
}
|
||||
.main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.map-container {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
.chart {
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
278
src/views/home.scss
Normal file
278
src/views/home.scss
Normal file
@@ -0,0 +1,278 @@
|
||||
.scale-wrap {
|
||||
color: #333333;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
|
||||
// &.pageisScale {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// transform-origin: left top;
|
||||
// }
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px 16px 10px 16px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f5f7fa;
|
||||
background-image: none;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.host-body {
|
||||
height: 100%;
|
||||
|
||||
.title_wrap {
|
||||
height: 60px;
|
||||
background-image: url("../assets/img/top.png");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.guang {
|
||||
position: absolute;
|
||||
bottom: -26px;
|
||||
background-image: url("../assets/img/guang.png");
|
||||
background-position: 80px center;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
|
||||
.imgs {
|
||||
width: 320px;
|
||||
height: 35px;
|
||||
margin-top: -0.6%;
|
||||
}
|
||||
|
||||
.imgs2 {
|
||||
width: 236px;
|
||||
/* height: 60px; */
|
||||
margin-left: 150px;
|
||||
margin-top: -9px;
|
||||
}
|
||||
}
|
||||
|
||||
.zuojuxing,
|
||||
.youjuxing {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
width: 140px;
|
||||
height: 6px;
|
||||
background-image: url("../assets/img/headers/juxing1.png");
|
||||
}
|
||||
|
||||
.zuojuxing {
|
||||
|
||||
left: 11%;
|
||||
}
|
||||
|
||||
.youjuxing {
|
||||
right: 11%;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.timers {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 30px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.blq-icon-shezhi02 {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
// width: 500px;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
color: transparent;
|
||||
height: 60px;
|
||||
line-height: 46px;
|
||||
|
||||
.title-text {
|
||||
font-size: 38px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 6px;
|
||||
width: 100%;
|
||||
background: linear-gradient(92deg, #2c5aa0 0%, #1e88e5 48.8525390625%, #1976d2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.scale-wrap {
|
||||
.pagetab {
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
width: 130px;
|
||||
height: 36px;
|
||||
border-radius: 18px 0px 0px 18px;
|
||||
color: #1976d2;
|
||||
text-indent: 26px;
|
||||
line-height: 36px;
|
||||
font-size: 16px;
|
||||
margin-right: 20px;
|
||||
background: linear-gradient(to right, rgba(25, 118, 210, 0.15), rgba(25, 118, 210, 0));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
.left_shu {
|
||||
color: #000;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
text-indent: 10px;
|
||||
padding: 16px 0 10px 0;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: " ";
|
||||
height: 16px;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
background: #0072FF;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.setting_dislog {
|
||||
background-color: rgba($color: #000000, $alpha: .3);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.setting_inner {
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
width: 340px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
color: #333333;
|
||||
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .1), 0 16px 24px 2px rgba(0, 0, 0, .08), 0 6px 30px 5px rgba(0, 0, 0, .06);
|
||||
|
||||
.setting_header {
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.setting_body {
|
||||
padding: 0px 16px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.setting_item {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
|
||||
// display: flex;
|
||||
.setting_label {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.setting_label_tip {
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting_inner {
|
||||
animation: rtl-drawer-out .3s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.settingShow {
|
||||
.setting_inner {
|
||||
animation: rtl-drawer-in .3s 1ms;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.yh-setting-fade-enter-active {
|
||||
animation: yh-setting-fade-in .3s;
|
||||
}
|
||||
|
||||
.yh-setting-fade-leave-active {
|
||||
|
||||
animation: yh-setting-fade-out .3s;
|
||||
|
||||
}
|
||||
|
||||
@keyframes yh-setting-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes yh-setting-fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes rtl-drawer-in {
|
||||
0% {
|
||||
transform: translate(100%, 0)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rtl-drawer-out {
|
||||
0% {
|
||||
transform: translate(0, 0)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(100%, 0)
|
||||
}
|
||||
}
|
||||
125
src/views/home.vue
Normal file
125
src/views/home.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<!--
|
||||
* @Author: szy
|
||||
* @Date: 2022-01-12 14:23:32
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-09-09 14:47:24
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\home.vue
|
||||
-->
|
||||
<template>
|
||||
<!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
|
||||
<ScaleScreen
|
||||
:width="1920"
|
||||
:height="1080"
|
||||
class="scale-wrap"
|
||||
:selfAdaption="$store.state.setting.isScale"
|
||||
>
|
||||
<div class="bg">
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<div v-else class="host-body">
|
||||
<!-- 头部 s -->
|
||||
<div class="d-flex jc-center title_wrap">
|
||||
<div class="zuojuxing"></div>
|
||||
<div class="youjuxing"></div>
|
||||
<div class="guang">
|
||||
<!-- <p class="title-name">广州开发区交投氢能</p> -->
|
||||
<!-- <img src="@/assets/img/logo.png" alt="" class="imgs"/> -->
|
||||
<img src="@/assets/img/ln_logo.png" alt="" class="imgs2" />
|
||||
</div>
|
||||
<div class="d-flex jc-center">
|
||||
<div class="title">
|
||||
<!--箱箱碳林可视化平台-->
|
||||
<!--嘉兴海港碳服务平台-->
|
||||
<!--2025.4.1 szy -->
|
||||
<span class="title-text">Lingniu ESG Link</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timers">
|
||||
{{ dateYear }} {{ dateWeek }} {{ dateDay }}
|
||||
<!-- <button class="selectTime">选择日期</button> -->
|
||||
<i
|
||||
class="blq-icon-shezhi02"
|
||||
style="margin-left: 10px"
|
||||
@click="showSetting"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 头部 e-->
|
||||
<!-- 内容 s-->
|
||||
<router-view></router-view>
|
||||
<!-- 内容 e -->
|
||||
</div>
|
||||
</div>
|
||||
<Setting ref="setting" />
|
||||
</ScaleScreen>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { formatTime } from "../utils/index.js";
|
||||
import Setting from "./setting.vue";
|
||||
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
|
||||
export default {
|
||||
components: { Setting, ScaleScreen },
|
||||
data() {
|
||||
return {
|
||||
timing: null,
|
||||
loading: true,
|
||||
dateDay: null,
|
||||
dateYear: null,
|
||||
dateWeek: null,
|
||||
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
numsFilter(msg) {
|
||||
return msg || 0;
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.timeFn();
|
||||
this.cancelLoading();
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timing);
|
||||
},
|
||||
methods: {
|
||||
showSetting() {
|
||||
this.$refs.setting.init();
|
||||
},
|
||||
timeFn() {
|
||||
this.timing = setInterval(() => {
|
||||
this.dateDay = formatTime(new Date(), "HH: mm: ss");
|
||||
this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
|
||||
this.dateWeek = this.weekday[new Date().getDay()];
|
||||
}, 1000);
|
||||
},
|
||||
cancelLoading() {
|
||||
let timer = setTimeout(() => {
|
||||
this.loading = false;
|
||||
clearTimeout(timer);
|
||||
}, 500);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./home.scss";
|
||||
// 31abe3
|
||||
.selectTime {
|
||||
color: #31abe3;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.title-name {
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
margin-left: 20px;
|
||||
font-family: "Microsoft YaHei", "微软雅黑", "SimHei", "PingFang SC",
|
||||
"Hiragino Sans GB", sans-serif;
|
||||
}
|
||||
</style>
|
||||
155
src/views/indexs/FlyLineChart.vue
Normal file
155
src/views/indexs/FlyLineChart.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<!-- MapFlyLine.vue -->
|
||||
<template>
|
||||
<div class="flyline-container" ref="container">
|
||||
<canvas ref="canvas" class="flyline-canvas"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MapFlyLine',
|
||||
props: {
|
||||
// 地图实例（需要从父组件传递）
|
||||
mapData: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
// 飞线数据
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 配置项
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ctx: null,
|
||||
animationFrame: null,
|
||||
defaultConfig: {
|
||||
color: '#4f99d3',
|
||||
lineWidth: 1,
|
||||
animationSpeed: 0.02,
|
||||
maxLength: 0.3,
|
||||
curvature: 0.3
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
mergedConfig() {
|
||||
return { ...this.defaultConfig, ...this.config }
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initCanvas()
|
||||
this.startAnimation()
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
cancelAnimationFrame(this.animationFrame)
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.drawLines()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initCanvas() {
|
||||
const canvas = this.$refs.canvas
|
||||
const container = this.$refs.container
|
||||
canvas.width = container.offsetWidth
|
||||
canvas.height = container.offsetHeight
|
||||
this.ctx = canvas.getContext('2d')
|
||||
this.ctx.globalCompositeOperation = 'lighter'
|
||||
},
|
||||
|
||||
handleResize() {
|
||||
this.initCanvas()
|
||||
this.drawLines()
|
||||
},
|
||||
|
||||
startAnimation() {
|
||||
const animate = () => {
|
||||
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
|
||||
this.drawLines()
|
||||
this.animationFrame = requestAnimationFrame(animate)
|
||||
}
|
||||
animate()
|
||||
},
|
||||
|
||||
drawLines() {
|
||||
if (!this.data.length) return
|
||||
|
||||
this.data.forEach(line => {
|
||||
const from = this.mapInstance.convertToPixel(...line.from)
|
||||
const to = this.mapInstance.convertToPixel(...line.to)
|
||||
|
||||
this.drawCurve(
|
||||
from,
|
||||
from,
|
||||
to,
|
||||
to,
|
||||
line.color || this.mergedConfig.color
|
||||
)
|
||||
})
|
||||
},
|
||||
|
||||
drawCurve(x1, y1, x2, y2, color) {
|
||||
const ctx = this.ctx
|
||||
const cp = this.calculateControlPoint(x1, y1, x2, y2)
|
||||
|
||||
// 飞线渐变效果
|
||||
const gradient = ctx.createLinearGradient(x1, y1, x2, y2)
|
||||
gradient.addColorStop(0, color)
|
||||
gradient.addColorStop(1, color + '00')
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x1, y1)
|
||||
ctx.quadraticCurveTo(cp.x, cp.y, x2, y2)
|
||||
|
||||
// 创建虚线动画效果
|
||||
ctx.setLineDash([5, 3])
|
||||
ctx.lineDashOffset = -performance.now() * this.mergedConfig.animationSpeed
|
||||
|
||||
ctx.strokeStyle = gradient
|
||||
ctx.lineWidth = this.mergedConfig.lineWidth
|
||||
ctx.stroke()
|
||||
},
|
||||
|
||||
calculateControlPoint(x1, y1, x2, y2) {
|
||||
// 计算曲线控制点（贝塞尔曲线）
|
||||
const curvature = this.mergedConfig.curvature
|
||||
const dx = x2 - x1
|
||||
const dy = y2 - y1
|
||||
return {
|
||||
x: (x1 + x2) / 2 + dy * curvature,
|
||||
y: (y1 + y2) / 2 - dx * curvature
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flyline-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.flyline-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
142
src/views/indexs/center-bottom.vue
Normal file
142
src/views/indexs/center-bottom.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
import { currentGET } from "api/modules";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPercentage: true, // 默认显示数量
|
||||
chartData: [
|
||||
[
|
||||
{ modelName: "冷藏", total: 190 },
|
||||
{ modelName: "普货", total: 40 },
|
||||
// { name: '海格：20%', value: 160 },
|
||||
// { name: '宇通：20%', value: 260 },
|
||||
// { name: '其它：10%', value: 260 }
|
||||
],
|
||||
],
|
||||
colors: ["#1976d2", "#ff9800"],
|
||||
//colors: ["#00E5FF", "#FF5733", "#FFBF00", "#5CDB95"]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
currentGET("big5").then((res) => {
|
||||
if (res.code == 0) {
|
||||
// 确保接口返回的code正确
|
||||
// 转换数据结构为饼图需要的格式
|
||||
this.chartData = [
|
||||
res.data.map((item) => ({
|
||||
name: item.modelName,
|
||||
value: item.total,
|
||||
})),
|
||||
];
|
||||
console.log("车型分布");
|
||||
console.log(this.chartData);
|
||||
//未显示成功，没有用到，后台增加模拟数据
|
||||
//增加模拟数据
|
||||
// this.chartData.push([{name: '氢能集卡', value: 20}]);
|
||||
// this.chartData.push({name: '氢能叉车', value: 8});
|
||||
// this.chartData.push({name: '无人机', value: 5});
|
||||
// this.chartData.push({name: '装载机', value: 10});
|
||||
this.initChart();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
initChart() {
|
||||
const myChart = echarts.init(this.$refs.chart); // 修复变量名不一致问题
|
||||
let option = {
|
||||
title: {
|
||||
text: "",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: "#666666", // 将原来的 #999 改为更亮的灰色
|
||||
fontWeight: "normal",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
series: this.chartData.map(function (data, idx) {
|
||||
var top = idx * 33.3;
|
||||
return {
|
||||
type: "pie",
|
||||
radius: [40, 70],
|
||||
top: top + "%",
|
||||
height: "33.33%",
|
||||
left: "center",
|
||||
width: "600px",
|
||||
itemStyle: {
|
||||
borderColor: "orange",
|
||||
borderWidth: 1,
|
||||
},
|
||||
label: {
|
||||
alignTo: "edge",
|
||||
formatter: ({ name, value, percent }) =>
|
||||
`{name|${name}}\n {value|${value}辆} {percent|${percent}%}`,
|
||||
minMargin: 5,
|
||||
edgeDistance: 10,
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
name: {
|
||||
// 新增 name 样式
|
||||
fontSize: 12,
|
||||
color: "#333333", // 使用深色
|
||||
padding: [0, 0, 5, 0],
|
||||
},
|
||||
value: {
|
||||
fontSize: 12,
|
||||
color: "#1976d2",
|
||||
padding: [0, 5, 0, 0],
|
||||
},
|
||||
percent: {
|
||||
fontSize: 12,
|
||||
color: "#ff9800", // 保留橙色
|
||||
},
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
length: 40,
|
||||
length2: 15,
|
||||
maxSurfaceAngle: 80,
|
||||
},
|
||||
labelLayout: function (params) {
|
||||
const isLeft = params.labelRect.x < myChart.getWidth() / 2;
|
||||
const points = params.labelLinePoints;
|
||||
// Update the end point.
|
||||
points[2][0] = isLeft
|
||||
? params.labelRect.x
|
||||
: params.labelRect.x + params.labelRect.width;
|
||||
return {
|
||||
labelLinePoints: points,
|
||||
};
|
||||
},
|
||||
data: data,
|
||||
};
|
||||
}),
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
this.chart = myChart;
|
||||
},
|
||||
toggleMode() {
|
||||
this.showPercentage = !this.showPercentage;
|
||||
this.initChart(); // 重新渲染图表
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
}
|
||||
</style>
|
||||
837
src/views/indexs/center-map.vue
Normal file
837
src/views/indexs/center-map.vue
Normal file
@@ -0,0 +1,837 @@
|
||||
<!--
|
||||
* @Author: szy
|
||||
* @Date: 2022-03-01 11:17:39
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-09-29 15:50:18
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="centermap">
|
||||
<div class="maptitle">
|
||||
<div class="zuo"></div>
|
||||
<span class="titletextBefore">今年累计碳减排<span class="titletext">{{ maptitle }}</span>{{ maptitle2 }}</span>
|
||||
<div class="you"></div>
|
||||
</div>
|
||||
<div class="mapwrap">
|
||||
<dv-border-box-13>
|
||||
<div class="quanguo" @click="getData('china')" v-if="code !== 'china'">
|
||||
中国
|
||||
</div>
|
||||
<div class="quanguo1" @click="goToPage()" v-if="showType === 1">
|
||||
车辆实况
|
||||
</div>
|
||||
|
||||
<div class="quanguo2" @click="changeShow1()" :style="{ backgroundColor: currentBgColor2 }">
|
||||
<div >车辆信息</div>
|
||||
</div>
|
||||
<div class="quanguo3" @click="changeShow2()" :style="{ backgroundColor: currentBgColor3 }">
|
||||
<div >加氢站</div>
|
||||
</div>
|
||||
|
||||
<Echart id="CenterMap" :options="options" ref="CenterMap" />
|
||||
<!-- <dv-flyline-chart :config="config" style="width:100%;height:100%;" /> -->
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import xzqCode from "../../utils/map/xzqCode";
|
||||
import { currentGET } from "api/modules";
|
||||
import * as echarts from "echarts";
|
||||
import { GETNOBASE } from "api";
|
||||
import { currentPOST } from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
maptitle: "2536238",
|
||||
maptitle2:'',
|
||||
options: {},
|
||||
code: "china", //china 代表中国 其他地市是行政编码
|
||||
//code:"440000",
|
||||
echartBindClick: false,
|
||||
isSouthChinaSea: false, //是否要展示南海群岛 修改此值请刷新页面
|
||||
currentMap : 'china', // 当前显示的地图层级
|
||||
showType: 1, //显示内容类型： 1车辆信息，2加氢站信息
|
||||
currentBgColor2:'',
|
||||
currentBgColor3:'',
|
||||
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
|
||||
mounted() {
|
||||
console.log(xzqCode);
|
||||
this.getYearData();
|
||||
|
||||
this.showType = 1;
|
||||
this.currentBgColor2 = '#1976d2';
|
||||
this.getData("china");
|
||||
//this.getData("440000");
|
||||
},
|
||||
methods: {
|
||||
changeShow1(){
|
||||
this.showType = 1;
|
||||
this.currentBgColor2 = '#1976d2';
|
||||
this.currentBgColor3 = '';
|
||||
this.getData(this.code);
|
||||
},
|
||||
changeShow2(){
|
||||
this.currentBgColor2 = '';
|
||||
this.currentBgColor3 = '#1976d2';
|
||||
this.showType = 2;
|
||||
this.getData(this.code);
|
||||
},
|
||||
goToPage() {
|
||||
//window.open("http://localhost:9528/vehicle-management/vehicle-state?"+this.code, "_blank");
|
||||
|
||||
window.open("http://47.100.49.118:8090/vehicle-lnSituation?"+this.code, "_blank");
|
||||
//window.open("http://127.0.0.1:9528/vehicle-lnSituation?"+this.code, "_blank");
|
||||
//window.open("http://192.168.0.219:9528/vehicle-lnSituation?"+this.code, "_blank");
|
||||
},
|
||||
parseAdcodeLevel(adcode) {
|
||||
const codeStr = String(adcode);
|
||||
if (codeStr.endsWith('0000')) return 'province'; // 省级（如 440000）
|
||||
if (codeStr.endsWith('00')) return 'city'; // 市级（如 440300）
|
||||
return 'district'; // 区县级（如 440305）
|
||||
},
|
||||
getYearData() {
|
||||
currentGET("big3").then((res) => {
|
||||
console.log('年度碳减排量');
|
||||
console.log(res);
|
||||
//this.maptitle = res.data.yearCarbon ; //单位kg
|
||||
this.maptitle = res.data.yearCarbonTon ; //单位吨
|
||||
this.maptitle2 = '吨';
|
||||
|
||||
});
|
||||
},
|
||||
getData(code) {
|
||||
console.log("code", code);
|
||||
this.currentMap = this.parseAdcodeLevel(code);
|
||||
//2025.9.10 szy 增加showType 分类处理，1时处理车辆信息，2时处理加氢站信息
|
||||
if(this.showType === 1){
|
||||
currentGET("big9", { regionCode: code, adcodeLevel: this.currentMap }).then((res) => {
|
||||
console.log("map车辆分布", res);
|
||||
//if (res.success)
|
||||
if (res.status) {
|
||||
this.getGeojson(res.data.regionCode, res.data.dataList);
|
||||
this.mapclick();
|
||||
} else {
|
||||
this.$Message.warning(res.msg);
|
||||
}
|
||||
});
|
||||
}else if(this.showType === 2){
|
||||
currentGET("big10", { regionCode: code, adcodeLevel: this.currentMap }).then((res) => {
|
||||
console.log("加氢站_map分布", res);
|
||||
//if (res.success)
|
||||
if (res.status) {
|
||||
this.getGeojson2(res.data.regionCode, res.data.dataList);
|
||||
this.mapclick();
|
||||
} else {
|
||||
this.$Message.warning(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description: 获取geojson
|
||||
* @param {*} name china 表示中国 其他省份行政区编码
|
||||
* @param {*} mydata 接口返回列表数据
|
||||
* @return {*}
|
||||
*/
|
||||
async getGeojson(name, mydata) {
|
||||
this.code = name;
|
||||
this.currentMap = name;
|
||||
console.log('当前地图层级');
|
||||
console.log(this.currentMap);
|
||||
//如果要展示南海群岛并且展示的是中国的话
|
||||
let geoname=name
|
||||
if (this.isSouthChinaSea && name == "china") {
|
||||
geoname = "chinaNanhai";
|
||||
}
|
||||
//如果有注册地图的话就不用再注册 了
|
||||
let mapjson = echarts.getMap(name);
|
||||
console.log('已经是否已存在的地图数据');
|
||||
if (mapjson) {
|
||||
mapjson = mapjson.geoJson;
|
||||
}
|
||||
else
|
||||
{
|
||||
//console.log('当前未注册地图');
|
||||
mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => {
|
||||
return res;
|
||||
});
|
||||
echarts.registerMap(name, mapjson);
|
||||
|
||||
}
|
||||
console.log(mapjson);
|
||||
let cityCenter = {};
|
||||
let arr = mapjson.features;
|
||||
|
||||
//根据geojson获取省份中心点
|
||||
arr.map((item) => {
|
||||
cityCenter[item.properties.name] =
|
||||
item.properties.centroid || item.properties.center;
|
||||
});
|
||||
let newData = [];
|
||||
mydata.map((item) => {
|
||||
if (cityCenter[item.name]) {
|
||||
if(item.vehicleTotal===undefined || item.vehicleTotal===null ){
|
||||
item.vehicleTotal = 0;
|
||||
|
||||
}
|
||||
if(item.onLineCount===undefined || item.onLineCount===null){
|
||||
item.onLineCount = 0;
|
||||
}
|
||||
if(item.dayMileage===undefined || item.dayMileage===null){
|
||||
item.dayMileage = 0;
|
||||
}
|
||||
if(item.dayHydrogen===undefined || item.dayHydrogen===null){
|
||||
item.dayHydrogen = 0;
|
||||
}
|
||||
if(item.dayCarbon===undefined || item.dayCarbon===null){
|
||||
item.dayCarbon = 0;
|
||||
}
|
||||
newData.push({
|
||||
name: item.name,
|
||||
value: cityCenter[item.name].concat(item.vehicleTotal).concat(item.onLineCount).concat(item.dayMileage).concat(item.dayHydrogen).concat(item.dayCarbon),
|
||||
});
|
||||
}
|
||||
});
|
||||
console.log('开始初始化地图');
|
||||
console.log(newData);
|
||||
this.init(name, mydata, newData);
|
||||
},
|
||||
/**
|
||||
* @description: 获取geojson
|
||||
* @param {*} name china 表示中国 其他省份行政区编码
|
||||
* @param {*} mydata 接口返回列表数据
|
||||
* @return {*}
|
||||
*/
|
||||
async getGeojson2(name, mydata) {
|
||||
this.code = name;
|
||||
this.currentMap = name;
|
||||
console.log('加氢站_当前地图层级');
|
||||
console.log(this.currentMap);
|
||||
//如果要展示南海群岛并且展示的是中国的话
|
||||
let geoname=name
|
||||
if (this.isSouthChinaSea && name == "china") {
|
||||
geoname = "chinaNanhai";
|
||||
}
|
||||
//如果有注册地图的话就不用再注册 了
|
||||
let mapjson = echarts.getMap(name);
|
||||
console.log('加氢站_已经是否已存在的地图数据');
|
||||
if (mapjson) {
|
||||
mapjson = mapjson.geoJson;
|
||||
}
|
||||
else
|
||||
{
|
||||
//console.log('当前未注册地图');
|
||||
mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => {
|
||||
return res;
|
||||
});
|
||||
echarts.registerMap(name, mapjson);
|
||||
|
||||
}
|
||||
console.log(mapjson);
|
||||
let cityCenter = {};
|
||||
let arr = mapjson.features;
|
||||
|
||||
//根据geojson获取省份中心点
|
||||
arr.map((item) => {
|
||||
cityCenter[item.properties.name] =
|
||||
item.properties.centroid || item.properties.center;
|
||||
});
|
||||
let newData = [];
|
||||
mydata.map((item) => {
|
||||
if (cityCenter[item.name]) {
|
||||
if(item.siteTotalCount===undefined || item.siteTotalCount===null ){
|
||||
item.siteTotalCount = 0;
|
||||
|
||||
}
|
||||
if(item.siteCount===undefined || item.siteCount===null){
|
||||
item.siteCount = 0;
|
||||
}
|
||||
newData.push({
|
||||
name: item.name,
|
||||
value: cityCenter[item.name].concat(item.siteTotalCount).concat(item.siteCount),
|
||||
});
|
||||
}
|
||||
});
|
||||
console.log('加氢站_开始初始化地图');
|
||||
console.log(newData);
|
||||
this.init2(name, mydata, newData);
|
||||
},
|
||||
init(name, data, data2) {
|
||||
// console.log('init_data');
|
||||
// console.log(data);
|
||||
// console.log('init_data2');
|
||||
// console.log(data2);
|
||||
let top = 45;
|
||||
let zoom = 1.05;
|
||||
let option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
visualMap: {
|
||||
left: 20,
|
||||
bottom: 20,
|
||||
pieces: [
|
||||
// { gte: 1000, label: "1000辆以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
|
||||
// { gte: 600, lte: 999, label: "600-999辆" },
|
||||
// { gte: 200, lte: 599, label: "200-599辆" },
|
||||
// { gte: 50, lte: 199, label: "49-199辆" },
|
||||
// { gte: 10, lte: 49, label: "10-49辆" },
|
||||
// { lte: 9, label: "1-9辆" }, // 不指定 min，表示 min 为无限大（-Infinity）。
|
||||
|
||||
{ gte: 500, label: "500 辆以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
|
||||
{ gte: 100, lte: 500, label: "100-500 辆" },
|
||||
{ gte: 50, lte: 100, label: "50-100 辆" },
|
||||
{ lte: 50, label: "1-50 辆" },// 不指定 min，表示 min 为无限大（-Infinity）。
|
||||
],
|
||||
inRange: {
|
||||
// 渐变颜色，从小到大
|
||||
color: [
|
||||
// "#c3d7df",
|
||||
// "#5cb3cc",
|
||||
// "#8abcd1",
|
||||
// "#66a9c9",
|
||||
// "#2f90b9",
|
||||
// "#1781b5",
|
||||
"#6EC3F7",
|
||||
"#2196F3",
|
||||
"#1565C0",
|
||||
"#0D47A1",
|
||||
],
|
||||
},
|
||||
textStyle: {
|
||||
color: "#333333",
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
map: name,
|
||||
roam: false,
|
||||
selectedMode: false, //是否允许选中多个区域
|
||||
zoom: zoom,
|
||||
top: top,
|
||||
// aspectScale: 0.78,
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "MAP",
|
||||
type: "map",
|
||||
map: name,
|
||||
// zlevel: 2,
|
||||
// aspectScale: 0.78,
|
||||
data: data,
|
||||
//data: [1,100],
|
||||
selectedMode: false, //是否允许选中多个区域
|
||||
zoom: zoom,
|
||||
geoIndex: 1,
|
||||
top: top,
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
//console.log("series 1 formatter");
|
||||
//console.log(params);
|
||||
if (params.data) {
|
||||
//return params.name + "：" + params.data["value"][2];
|
||||
//return params.name + "：" + params.data.vehicleTotal + "辆";
|
||||
return `${params.name}<br>车辆总数: ${params.data.vehicleTotal}<br>GPS在线数: ${params.data.onLineCount}<br>当日里程: ${params.data.dayMileage}km<br>当日用氢量: ${params.data.dayHydrogen}kg<br>当日减碳: ${params.data.dayCarbon}kg`;
|
||||
} else {
|
||||
return params.name;
|
||||
}
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#333333",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
color: "#000",
|
||||
// position: [-10, 0],
|
||||
formatter: function (val) {
|
||||
// console.log(val)
|
||||
if (val.data !== undefined) {
|
||||
return val.name.slice(0, 2);
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
rich: {},
|
||||
},
|
||||
emphasis: { //高亮时显示
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: "#e3f2fd",
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺为 false
|
||||
},
|
||||
shadowColor: "rgba(128, 217, 248, .3)",
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
{
|
||||
data: data2,
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
symbolSize: function (val) {
|
||||
return 4;
|
||||
// return val[2] / 50;
|
||||
},
|
||||
legendHoverLink: true,
|
||||
showEffectOn: "render",
|
||||
rippleEffect: {
|
||||
// period: 4,
|
||||
scale: 6,
|
||||
color: "rgba(255,255,255, 1)",
|
||||
brushType: "fill",
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
//trigger: "item",
|
||||
formatter: function (params) {
|
||||
//console.log("series 2 formatter");
|
||||
//console.log(params);
|
||||
if (params.data) {
|
||||
console.log("params.data");
|
||||
console.log(params.data);
|
||||
console.log(params.data.name + "\n 车辆总数："+params.data["value"][2] + "\n GPS在线总数：" + params.data["value"][3]);
|
||||
return params.data.name + "<br> 车辆总数："+params.data["value"][2] + "<br> GPS在线总数：" + params.data["value"][3] + "<br>当日里程: " + params.data["value"][4] + "km<br>当日用量: " + params.data["value"][5] + "kg<br>当日减碳: " + params.data["value"][6] + "kg";
|
||||
//return '${params.name} <br />车辆总数：${params.data[value][2]} <br /> GPS在线总数：${ params.data.[value][3]}';
|
||||
}
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#333333",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
formatter: (param) => {
|
||||
//return param.name.slice(0, 2) + "\n 车辆总数："+param.data["value"][2] + "\n GPS在线数："+param.data["value"][3]; //2025.03.28
|
||||
//return param.name.slice(0, 2) + "\n "+param.data["value"][2]; //2025.03.31
|
||||
return param.name.slice(0, 2) ;
|
||||
},
|
||||
fontSize: 11,
|
||||
offset: [0, 2],
|
||||
position: "bottom",
|
||||
textBorderColor: "#333333",
|
||||
textShadowColor: "#000",
|
||||
textShadowBlur: 10,
|
||||
textBorderWidth: 0,
|
||||
color: "#333333",
|
||||
show: true,
|
||||
},
|
||||
// colorBy: "data",
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,1)",
|
||||
borderColor: "rgba(2255,255,255,2)",
|
||||
borderWidth: 4,
|
||||
shadowColor: "#000",
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
],
|
||||
//动画效果
|
||||
// animationDuration: 1000,
|
||||
// animationEasing: 'linear',
|
||||
// animationDurationUpdate: 1000
|
||||
};
|
||||
this.options = option;
|
||||
},
|
||||
//加氢站信息
|
||||
init2(name, data, data2) {
|
||||
// console.log('加氢站init_data');
|
||||
// console.log(data);
|
||||
// console.log('加氢站init_data2');
|
||||
// console.log(data2);
|
||||
let top = 45;
|
||||
let zoom = 1.05;
|
||||
let option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
visualMap: {
|
||||
left: 20,
|
||||
bottom: 20,
|
||||
pieces: [
|
||||
{ gte: 100, label: "100 座以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
|
||||
{ gte: 30, lte: 100, label: "30-100 座" },
|
||||
{ gte: 10, lte: 30, label: "10-30 座" },
|
||||
{ lte: 10, label: "1-10 座" },// 不指定 min，表示 min 为无限大（-Infinity）。
|
||||
],
|
||||
inRange: {
|
||||
// 渐变颜色，从小到大
|
||||
color: [
|
||||
// "#c3d7df",
|
||||
// "#5cb3cc",
|
||||
// "#8abcd1",
|
||||
// "#66a9c9",
|
||||
// "#2f90b9",
|
||||
// "#1781b5",
|
||||
"#6EC3F7",
|
||||
"#2196F3",
|
||||
"#1565C0",
|
||||
"#0D47A1",
|
||||
],
|
||||
},
|
||||
textStyle: {
|
||||
color: "#333333",
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
map: name,
|
||||
roam: false,
|
||||
selectedMode: false, //是否允许选中多个区域
|
||||
zoom: zoom,
|
||||
top: top,
|
||||
// aspectScale: 0.78,
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "MAP",
|
||||
type: "map",
|
||||
map: name,
|
||||
// zlevel: 2,
|
||||
// aspectScale: 0.78,
|
||||
data: data,
|
||||
//data: [1,100],
|
||||
selectedMode: false, //是否允许选中多个区域
|
||||
zoom: zoom,
|
||||
geoIndex: 1,
|
||||
top: top,
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
//console.log("series 1 formatter");
|
||||
//console.log(params);
|
||||
if (params.data) {
|
||||
//return params.name + "：" + params.data["value"][2];
|
||||
//return params.name + "：" + params.data.vehicleTotal + "辆";
|
||||
return `${params.name}<br>加氢站总数: ${params.data.siteTotalCount}<br>当前运营总数: ${params.data.siteCount}`;
|
||||
} else {
|
||||
return params.name;
|
||||
}
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#333333",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
color: "#000",
|
||||
// position: [-10, 0],
|
||||
formatter: function (val) {
|
||||
// console.log(val)
|
||||
if (val.data !== undefined) {
|
||||
return val.name.slice(0, 2);
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
rich: {},
|
||||
},
|
||||
emphasis: { //高亮时显示
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: "#e3f2fd",
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺为 false
|
||||
},
|
||||
shadowColor: "rgba(128, 217, 248, .3)",
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
{
|
||||
data: data2,
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
symbolSize: function (val) {
|
||||
return 4;
|
||||
// return val[2] / 50;
|
||||
},
|
||||
legendHoverLink: true,
|
||||
showEffectOn: "render",
|
||||
rippleEffect: {
|
||||
// period: 4,
|
||||
scale: 6,
|
||||
color: "rgba(255,255,255, 1)",
|
||||
brushType: "fill",
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
//trigger: "item",
|
||||
formatter: function (params) {
|
||||
//console.log("series 2 formatter");
|
||||
//console.log(params);
|
||||
if (params.data) {
|
||||
console.log("params.data");
|
||||
console.log(params.data);
|
||||
console.log(params.data.name + "\n 加氢站总数:"+params.data["value"][2] + "\n 当前运营总数:" + params.data["value"][3]);
|
||||
return params.data.name + "<br> 加氢站总数："+params.data["value"][2] + "<br> 当前运营总数: " + params.data["value"][3];
|
||||
}
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#333333",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
formatter: (param) => {
|
||||
//return param.name.slice(0, 2) + "\n 车辆总数："+param.data["value"][2] + "\n GPS在线数："+param.data["value"][3]; //2025.03.28
|
||||
//return param.name.slice(0, 2) + "\n "+param.data["value"][2]; //2025.03.31
|
||||
return param.name.slice(0, 2) ;
|
||||
},
|
||||
fontSize: 11,
|
||||
offset: [0, 2],
|
||||
position: "bottom",
|
||||
textBorderColor: "#333333",
|
||||
textShadowColor: "#000",
|
||||
textShadowBlur: 10,
|
||||
textBorderWidth: 0,
|
||||
color: "#333333",
|
||||
show: true,
|
||||
},
|
||||
// colorBy: "data",
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,1)",
|
||||
borderColor: "rgba(2255,255,255,2)",
|
||||
borderWidth: 4,
|
||||
shadowColor: "#000",
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
],
|
||||
//动画效果
|
||||
// animationDuration: 1000,
|
||||
// animationEasing: 'linear',
|
||||
// animationDurationUpdate: 1000
|
||||
};
|
||||
this.options = option;
|
||||
},
|
||||
message(text) {
|
||||
this.$Message({
|
||||
text: text,
|
||||
type: "warning",
|
||||
});
|
||||
},
|
||||
mapclick() {
|
||||
if (this.echartBindClick) return;
|
||||
//单击切换到级地图，当mapCode有值,说明可以切换到下级地图
|
||||
this.$refs.CenterMap.chart.on("click", (params) => {
|
||||
console.log(params);
|
||||
let xzqData = xzqCode[params.name];
|
||||
if (xzqData) {
|
||||
this.getData(xzqData.adcode);
|
||||
} else {
|
||||
this.message("暂无下级地市!");
|
||||
}
|
||||
});
|
||||
this.echartBindClick = true;
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
// 销毁事件监听
|
||||
this.$refs.CenterMap.chart.off("click");
|
||||
if (this.charts) {
|
||||
this.echarts.dispose();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.centermap {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.maptitle {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.titletext {
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 6px;
|
||||
background: linear-gradient(
|
||||
92deg,
|
||||
#0072ff 0%,
|
||||
#00eaff 48.8525390625%,
|
||||
#01aaff 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.titletextBefore {
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 6px;
|
||||
color: #333333;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.zuo,
|
||||
.you {
|
||||
background-size: 100% 100%;
|
||||
width: 29px;
|
||||
height: 20px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.zuo {
|
||||
background: url("../../assets/img/xiezuo.png") no-repeat;
|
||||
}
|
||||
|
||||
.you {
|
||||
background: url("../../assets/img/xieyou.png") no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.mapwrap {
|
||||
height: 548px;
|
||||
width: 100%;
|
||||
// padding: 0 0 10px 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.quanguo {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: -46px;
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
border: 1px solid #1976d2;
|
||||
border-radius: 10px;
|
||||
color: #1976d2;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
letter-spacing: 6px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
|
||||
0 0 6px rgba(0, 237, 237, 0.4);
|
||||
}
|
||||
|
||||
.quanguo1 {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 24px;
|
||||
width: 100px;
|
||||
height: 28px;
|
||||
border: 1px solid #1976d2;
|
||||
border-radius: 10px;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
letter-spacing: 6px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3),
|
||||
0 0 6px rgba(25, 118, 210, 0.2);
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.quanguo2 {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 24px;
|
||||
width: 100px;
|
||||
height: 28px;
|
||||
border: 1px solid #1976d2;
|
||||
border-radius: 10px;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
letter-spacing: 6px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3),
|
||||
0 0 6px rgba(25, 118, 210, 0.2);
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.quanguo3 {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 60px;
|
||||
width: 100px;
|
||||
height: 28px;
|
||||
border: 1px solid #1976d2;
|
||||
border-radius: 10px;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
letter-spacing: 6px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3),
|
||||
0 0 6px rgba(25, 118, 210, 0.2);
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
256
src/views/indexs/chart/baseChart.vue
Normal file
256
src/views/indexs/chart/baseChart.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div class="chart-block">
|
||||
<!-- 左侧 柱状+折线图 -->
|
||||
<div class="chart-container">
|
||||
<v-chart class="bar-line-chart" :options="barLineOption" style="width: 390px;height: 250px;"/>
|
||||
</div>
|
||||
|
||||
<!-- 右侧 两个环形图 -->
|
||||
<div class="chart-container-right">
|
||||
<v-chart class="pie-chart" :options="pieOptionOne" style="width: 140px;height:100px;margin-left: -11%;margin-top: 5%;"/>
|
||||
<v-chart class="pie-chart" :options="pieOptionTwo" style="width: 140px;height:100px;margin-left: -11%;margin-top: 5%;"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VChart from 'vue-echarts'
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts/lib/chart/bar'
|
||||
import 'echarts/lib/chart/line'
|
||||
import 'echarts/lib/chart/pie'
|
||||
import 'echarts/lib/component/legend'
|
||||
import 'echarts/lib/component/tooltip'
|
||||
import { currentGET } from 'api/modules'
|
||||
|
||||
export default {
|
||||
name: 'ChartBlock',
|
||||
components: { VChart },
|
||||
data() {
|
||||
return {
|
||||
/* 柱状图 + 折线图 */
|
||||
barLineOption: {
|
||||
backgroundColor: 'transparent', // 让背景透明，方便在大屏布局中适配
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
borderColor: '#333333',
|
||||
textStyle: { color: '#ffffff' },
|
||||
formatter: (params) => {
|
||||
console.log(params)
|
||||
return `碳减排量：${params[0].value}吨<br/>行驶里程：${params[1].value}万km`;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['碳减排量(吨)', '行驶里程(万km)'],
|
||||
textStyle: { color: '#333333' }
|
||||
},
|
||||
grid: {
|
||||
left: '15%',
|
||||
right: '15%',
|
||||
top: '10%',
|
||||
bottom: '10%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||||
axisLine: { lineStyle: { color: '#666666' } },
|
||||
axisLabel: { color: '#333333' }
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
// name: '碳减排量',
|
||||
axisLine: { lineStyle: { color: '#666666' } },
|
||||
axisLabel: { color: '#333333' },
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
formatter: '{value}吨'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
// name: '行驶里程',
|
||||
axisLine: { lineStyle: { color: '#666666' } },
|
||||
axisLabel: { color: '#333333' },
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
formatter: '{value}万km'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '碳减排量(吨)',
|
||||
type: 'bar',
|
||||
data: [3500, 400, 4200, 3800, 4500, 4800, 4200, 4600, 4900],
|
||||
itemStyle: { color: '#1976d2' },
|
||||
barWidth: 14
|
||||
},
|
||||
{
|
||||
name: '行驶里程(万km)',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [10, 15, 18, 12, 20, 25, 18, 22, 30],
|
||||
itemStyle: { color: '#ff9800' },
|
||||
smooth: true,
|
||||
lineStyle: { width: 2 },
|
||||
symbol: 'circle',
|
||||
symbolSize: 8
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/* 环形图1 - 年度碳减排量 */
|
||||
pieOptionOne: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: { show: false },
|
||||
title: {
|
||||
text: '0吨',
|
||||
//subtext: '年度碳减排量',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
textStyle: { color: '#333333', fontSize: 18 },
|
||||
subtextStyle: { color: '#666666', fontSize: 14}
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: '0px', // 根据需要调整文字与图表的间距
|
||||
top: 'center', // 垂直居中
|
||||
style: {
|
||||
text: '年\n度\n碳\n减\n排\n量', // 每个字符换行显示
|
||||
fill: '#333333',
|
||||
font: '16px sans-serif',
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '年度碳减排量',
|
||||
type: 'pie',
|
||||
radius: ['70%', '90%'],
|
||||
hoverAnimation: false,
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: 5, name: '碳排放量', itemStyle: { color: '#1976d2' } },
|
||||
{ value: 95, name: 'other', itemStyle: { color: '#e3f2fd' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/* 环形图2 - 年度行驶里程 */
|
||||
pieOptionTwo: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: { show: false },
|
||||
title: {
|
||||
text: '0万',
|
||||
//subtext: '年度行驶里程',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
textStyle: { color: '#333333', fontSize: 18 },
|
||||
subtextStyle: { color: '#666666', fontSize: 14}
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: '0px', // 根据需要调整文字与图表的间距
|
||||
top: 'center', // 垂直居中
|
||||
style: {
|
||||
text: '年\n度\n行\n驶\n里\n程', // 每个字符换行显示
|
||||
fill: '#333333',
|
||||
font: '16px sans-serif',
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '年度行驶里程',
|
||||
type: 'pie',
|
||||
radius: ['70%', '90%'],
|
||||
hoverAnimation: false,
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: 85, name: '行驶里程', itemStyle: { color: '#ff9800' } },
|
||||
{ value: 15, name: 'other', itemStyle: { color: '#e3f2fd' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
monthItems:[],
|
||||
monthCarbon:[],
|
||||
monthMileage:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getMonthData();
|
||||
this.getYearData();
|
||||
},
|
||||
methods: {
|
||||
getMonthData() {
|
||||
currentGET("big2").then((res) => {
|
||||
console.log('月度碳足迹');
|
||||
this.monthItems = res.data;
|
||||
console.log(this.monthItems);
|
||||
this.monthItems.forEach((item) => {
|
||||
console.log(item.monthCarbon);
|
||||
console.log(item.monthMileage);
|
||||
this.monthCarbon.push(item.monthCarbon);
|
||||
this.monthMileage.push((item.monthMileage/10000).toFixed(2));
|
||||
});
|
||||
console.log('碳减排：'+ this.monthCarbon);
|
||||
console.log('里程数：'+ this.monthMileage);
|
||||
this.barLineOption.series[0].data = this.monthCarbon;
|
||||
this.barLineOption.series[1].data = this.monthMileage;
|
||||
});
|
||||
},
|
||||
getYearData() {
|
||||
currentGET("big3").then((res) => {
|
||||
console.log('年度碳减排量');
|
||||
console.log(res);
|
||||
this.pieOptionOne.title.text = res.data.yearCarbonTon + '吨';
|
||||
this.pieOptionTwo.title.text = res.data.yearMileage + '万km';
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-block {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
/* 自行控制宽高，若嵌入大屏可由外层决定大小 */
|
||||
width: 800px;
|
||||
height: 300px;
|
||||
/* 背景可保持透明，方便嵌入大屏的背景 */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin-left: -30px;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bar-line-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 右侧两个环形图的布局 */
|
||||
.chart-container-right {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
margin-right: -20px;
|
||||
}
|
||||
|
||||
.pie-chart {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
</style>
|
||||
175
src/views/indexs/index.vue
Normal file
175
src/views/indexs/index.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<!--
|
||||
* @Author: szy
|
||||
* @Date: 2022-03-04 09:23:59
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-05-07 11:05:02
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="contents">
|
||||
<div class="contetn_left">
|
||||
<div class="pagetab">
|
||||
<!-- <div class="item">实时监测</div> -->
|
||||
|
||||
</div>
|
||||
<ItemWrap class="contetn_left-top contetn_lr-item" title="当日实况">
|
||||
<LeftTop/>
|
||||
|
||||
</ItemWrap>
|
||||
<ItemWrap class="contetn_left-center contetn_lr-item" title="月度碳足迹">
|
||||
<!-- <LeftCenter /> -->
|
||||
<base-chart/>
|
||||
</ItemWrap>
|
||||
<ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="月度碳减排"
|
||||
style="padding: 0 10px 16px 10px"
|
||||
>
|
||||
<LeftBottom />
|
||||
</ItemWrap>
|
||||
</div>
|
||||
<div class="contetn_center">
|
||||
<CenterMap class="contetn_center_top" />
|
||||
<ItemWrap class="contetn_center-bottom" title="">
|
||||
<!-- <CenterBottom /> -->
|
||||
<RightBottom />
|
||||
</ItemWrap>
|
||||
</div>
|
||||
<div class="contetn_right">
|
||||
<!-- <ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="月度特殊标箱情况"
|
||||
>
|
||||
<RightTop />
|
||||
</ItemWrap>
|
||||
<ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="月度标箱数"
|
||||
style="padding: 0 10px 16px 10px"
|
||||
>
|
||||
<RightCenter />
|
||||
</ItemWrap> -->
|
||||
<!-- 2025.8.13 szy 使用当天数据 -->
|
||||
<ItemWrap class="contetn_right_day_top" title="">
|
||||
<RightTopDay />
|
||||
</ItemWrap>
|
||||
<ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="车型分类 "
|
||||
>
|
||||
<CenterBottom />
|
||||
</ItemWrap>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeftTop from './left-top.vue'
|
||||
import LeftCenter from "./left-center.vue";
|
||||
import LeftBottom from "./left-bottom.vue";
|
||||
import CenterMap from "./center-map.vue";
|
||||
import CenterBottom from "./center-bottom.vue";
|
||||
import RightTop from "./right-top.vue";
|
||||
import RightCenter from "./right-center.vue";
|
||||
import RightBottom from "./right-bottom.vue";
|
||||
import BaseChart from "./chart/baseChart.vue"
|
||||
import RightTopDay from './right-top-day.vue'; //2025.10.15 szy add
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LeftTop,
|
||||
LeftCenter,
|
||||
LeftBottom,
|
||||
CenterMap,
|
||||
RightTop,
|
||||
RightCenter,
|
||||
RightBottom,
|
||||
CenterBottom,
|
||||
BaseChart,
|
||||
RightTopDay,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
numsFilter(msg) {
|
||||
return msg || 0;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// 内容
|
||||
.contents {
|
||||
.contetn_left,
|
||||
.contetn_right {
|
||||
width: 540px;
|
||||
box-sizing: border-box;
|
||||
// padding: 16px 0;
|
||||
}
|
||||
|
||||
.contetn_center {
|
||||
width: 720px;
|
||||
}
|
||||
|
||||
//左右两侧 三个块
|
||||
.contetn_lr-item {
|
||||
height: 310px;
|
||||
}
|
||||
|
||||
.contetn_center_top {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 中间
|
||||
.contetn_center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.contetn_center-bottom {
|
||||
height: 315px;
|
||||
}
|
||||
|
||||
//左边 右边 结构一样
|
||||
.contetn_left,
|
||||
.contetn_right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
//右上角，车辆信息
|
||||
.contetn_right_day_top {
|
||||
margin-top: 0px;
|
||||
height: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes rotating {
|
||||
0% {
|
||||
-webkit-transform: rotate(0) scale(1);
|
||||
transform: rotate(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(180deg) scale(1.1);
|
||||
transform: rotate(180deg) scale(1.1);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg) scale(1);
|
||||
transform: rotate(360deg) scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
153
src/views/indexs/left-bottom.vue
Normal file
153
src/views/indexs/left-bottom.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
import { currentGET } from "api/modules";
|
||||
|
||||
export default {
|
||||
name: "LeftBottomChart",
|
||||
data() {
|
||||
return {
|
||||
monthItems: [],
|
||||
monthHydrogen: [],
|
||||
monthMileage: [],
|
||||
monthCarbon: [],
|
||||
seriesData: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMonthData();
|
||||
},
|
||||
methods: {
|
||||
getMonthData() {
|
||||
currentGET("big2").then((res) => {
|
||||
console.log("月度碳减排");
|
||||
this.monthItems = res.data;
|
||||
console.log(this.monthItems);
|
||||
this.monthItems.forEach((item) => {
|
||||
//console.log(item.monthHydrogen);
|
||||
//console.log(item.monthMileage);
|
||||
// this.monthHydrogen.push(item.monthHydrogen);
|
||||
// this.monthMileage.push(item.monthMileage);
|
||||
let month = parseInt(item.months.substring(5, 7));
|
||||
this.monthMileage[month - 1] = item.monthMileage;
|
||||
this.monthCarbon[month - 1] = item.monthCarbon;
|
||||
this.monthHydrogen[month - 1] = item.monthHydrogen;
|
||||
});
|
||||
//console.log('用氢量：'+ this.monthHydrogen);
|
||||
//console.log('里程数：'+ this.monthMileage);
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
initChart() {
|
||||
let chart = echarts.init(this.$refs.chart);
|
||||
let option = {
|
||||
grid:{
|
||||
left:'13%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
borderColor: "#333333",
|
||||
textStyle: { color: "#ffffff" },
|
||||
// formatter: (params) => {
|
||||
// console.log(params)
|
||||
// return `用氢量：${params[0].value}kg<br/>用电量：${params[1].value}kWh<br/>行驶里程：${params[2].value}km`;
|
||||
// }
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
return `用氢量：${params[0].value}kg<br/>行驶里程：${params[1].value}km`;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
//data: ['用氢量', '用电量', '行驶里程'],
|
||||
data: ["用氢量", "行驶里程"],
|
||||
//data: ['用电量', '行驶里程'],
|
||||
textStyle: { color: "#333333" },
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
axisLine: { lineStyle: { color: "#666666" } },
|
||||
axisLabel: { color: "#333333" },
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: "#666666" } },
|
||||
splitLine: { lineStyle: { color: "#e0e0e0" } },
|
||||
axisLabel: {
|
||||
color: "#333333",
|
||||
//align: 'left',
|
||||
// margin:70,
|
||||
//width: 100, //将内容的宽度固定
|
||||
// overflow: 'truncate', //超出的部分截断
|
||||
formatter: "{value}kg",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "用氢量",
|
||||
type: "line",
|
||||
//data: [5000, 7000, 10000, 8000, 6000, 11000, 9000, 7000, 5000, 7050, 10020, 8900],
|
||||
data: this.monthHydrogen,
|
||||
// data: [11865.86,11687.64,18874.66,11311.62, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
itemStyle: { color: "#3399FF" },
|
||||
},
|
||||
// {
|
||||
// name: '用电量',
|
||||
// type: 'line',
|
||||
// //data: [6000, 8000, 12000, 10000, 5000, 10000, 9500, 7200, 5000, 3000, 10000, 8500],
|
||||
// data: [60, 80, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
// itemStyle: { color: '#3f89ff' }
|
||||
// },
|
||||
{
|
||||
name: "行驶里程",
|
||||
type: "line",
|
||||
//data: [4000, 9000, 9500, 7000, 9000, 12000, 10000, 8000, 5000, 7000, 10000, 8000],
|
||||
data: this.monthMileage,
|
||||
//data: [20219.1,332767.1,1671592.3,330955, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
itemStyle: { color: "#a060ff" },
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
width: 110%;
|
||||
height: 270px;
|
||||
}
|
||||
</style>
|
||||
231
src/views/indexs/left-center.vue
Normal file
231
src/views/indexs/left-center.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<!--
|
||||
* @Author: szy
|
||||
* @Date: 2022-02-28 16:16:42
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-10-25 09:18:22
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
|
||||
-->
|
||||
<template>
|
||||
<Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
|
||||
<Reacquire v-else @onclick="getData" style="line-height:200px">
|
||||
重新获取
|
||||
</Reacquire>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from 'api/modules'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
countUserNumData: {
|
||||
lockNum: 0,
|
||||
onlineNum: 0,
|
||||
offlineNum: 0,
|
||||
totalNum: 0
|
||||
},
|
||||
pageflag: true,
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearData()
|
||||
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true
|
||||
// this.pageflag =false
|
||||
|
||||
currentGET('big1').then(res => {
|
||||
//只打印一次
|
||||
if (!this.timer) {
|
||||
console.log("设备总览", res);
|
||||
}
|
||||
if (res.success) {
|
||||
this.countUserNumData = res.data
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
|
||||
} else {
|
||||
this.pageflag = false
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
//轮询
|
||||
switper() {
|
||||
if (this.timer) {
|
||||
return
|
||||
}
|
||||
let looper = (a) => {
|
||||
this.getData()
|
||||
};
|
||||
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
||||
let myChart = this.$refs.charts.chart
|
||||
myChart.on('mouseover', params => {
|
||||
this.clearData()
|
||||
});
|
||||
myChart.on('mouseout', params => {
|
||||
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
||||
});
|
||||
},
|
||||
init() {
|
||||
let total = this.countUserNumData.totalNum;
|
||||
let colors = ["#ECA444", "#33A1DB", "#56B557"];
|
||||
let piedata = {
|
||||
name: "用户总览",
|
||||
type: "pie",
|
||||
radius: ["42%", "65%"],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
borderColor: "rgba(0,0,0,0)",
|
||||
borderWidth: 2,
|
||||
},
|
||||
|
||||
color: colors,
|
||||
data: [
|
||||
// {
|
||||
// value: 0,
|
||||
// name: "告警",
|
||||
// label: {
|
||||
// shadowColor: colors[0],
|
||||
// },
|
||||
// },
|
||||
{
|
||||
value: this.countUserNumData.lockNum,
|
||||
name: "锁定",
|
||||
label: {
|
||||
shadowColor: colors[0],
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.countUserNumData.onlineNum,
|
||||
name: "在线",
|
||||
label: {
|
||||
shadowColor: colors[2],
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.countUserNumData.offlineNum,
|
||||
name: "离线",
|
||||
label: {
|
||||
shadowColor: colors[1],
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
};
|
||||
this.options = {
|
||||
title: {
|
||||
// zlevel: 0,
|
||||
text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
|
||||
top: "center",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
rich: {
|
||||
value: {
|
||||
color: "#ffffff",
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
lineHeight: 20,
|
||||
},
|
||||
name: {
|
||||
color: "#ffffff",
|
||||
lineHeight: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
top: "5%",
|
||||
left: "center",
|
||||
},
|
||||
series: [
|
||||
//展示圆点
|
||||
{
|
||||
...piedata,
|
||||
tooltip: { show: true },
|
||||
label: {
|
||||
formatter: " {b|{b}} \n {c|{c}个} {per|{d}%} ",
|
||||
// position: "outside",
|
||||
rich: {
|
||||
b: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
lineHeight: 26,
|
||||
},
|
||||
c: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
per: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
length: 20, // 第一段线 长度
|
||||
length2: 36, // 第二段线 长度
|
||||
show: true,
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
...piedata,
|
||||
tooltip: { show: true },
|
||||
itemStyle: {},
|
||||
label: {
|
||||
backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
|
||||
height: 0,
|
||||
width: 0,
|
||||
lineHeight: 0,
|
||||
borderRadius: 2.5,
|
||||
shadowBlur: 8,
|
||||
shadowColor: "auto",
|
||||
padding: [2.5, -2.5, 2.5, -2.5],
|
||||
},
|
||||
labelLine: {
|
||||
length: 20, // 第一段线 长度
|
||||
length2: 36, // 第二段线 长度
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
</style>
|
||||
332
src/views/indexs/left-top.vue
Normal file
332
src/views/indexs/left-top.vue
Normal file
@@ -0,0 +1,332 @@
|
||||
<template>
|
||||
<div class="cards-container">
|
||||
<!-- 四个卡片 -->
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
<span class="number">{{ cards[0].value }}</span>
|
||||
<span class="unit">{{ cards[0].unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[0].label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-0"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/1.svg" class="images"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
<span class="number">{{ cards[1].value }}</span>
|
||||
<span class="unit">{{ cards[1].unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[1].label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-1"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/2.svg" class="images"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
<span class="number">{{ cards[2].value }}</span>
|
||||
<span class="unit">{{ cards[2].unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[2].label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-2"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/3.svg" class="images"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
<span class="number">{{ cards[3].value }}</span>
|
||||
<span class="unit">{{ cards[3].unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[3].label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-3"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/4.svg" class="images"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from 'api/modules'
|
||||
|
||||
export default {
|
||||
name: "BlinkingIcons",
|
||||
data() {
|
||||
return {
|
||||
cards: [
|
||||
{
|
||||
id: 1,
|
||||
value: "452/807",
|
||||
unit: "辆",
|
||||
label: "在线车数",
|
||||
srcValue: "@/assets/img/left_top_lv.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: "561",
|
||||
unit: "kg",
|
||||
label: "当日减碳",
|
||||
srcValue: "@/assets/img/left/1.svg",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: "534",
|
||||
unit: "kg",
|
||||
label: "当日用氢量",
|
||||
srcValue: "@/assets/img/left/1.svg",
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
value: "3300",
|
||||
unit: "km",
|
||||
label: "当日里程",
|
||||
srcValue: "@/assets/img/left/1.svg",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
currentGET("big1").then((res) => {
|
||||
console.log('当日实况');
|
||||
console.log(res);
|
||||
let onLineCount = 0;
|
||||
let vehicleCount = 0;
|
||||
let dayCarbon = 0;
|
||||
let dayHydrogen = 0;
|
||||
let dayMileage = 0;
|
||||
|
||||
if(res !==null && res.data !==null )
|
||||
{
|
||||
if(res.data.onLineCount !== null)
|
||||
onLineCount = res.data.onLineCount;
|
||||
if(res.data.vehicleCount !== null)
|
||||
vehicleCount = res.data.vehicleCount;
|
||||
if(res.data.dayCarbon !== null)
|
||||
dayCarbon = res.data.dayCarbon;
|
||||
if(res.data.dayHydrogen !== null)
|
||||
dayHydrogen = res.data.dayHydrogen;
|
||||
if(res.data.dayMileage !== null)
|
||||
dayMileage = res.data.dayMileage;
|
||||
}
|
||||
|
||||
let change = this.cards[0];
|
||||
change.value = res.data.onLineCount + "/" + res.data.vehicleCount;
|
||||
this.$set(this.cards, 0, change);
|
||||
|
||||
change = this.cards[1];
|
||||
change.value = dayCarbon;
|
||||
this.$set(this.cards, 1, change);
|
||||
change = this.cards[2];
|
||||
change.value = dayHydrogen;
|
||||
this.$set(this.cards, 2, change);
|
||||
change = this.cards[3];
|
||||
change.value = dayMileage;
|
||||
this.$set(this.cards, 3, change);
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 整体背景 */
|
||||
.cards-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
padding-left: 0px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0% 100%;
|
||||
}
|
||||
.images{
|
||||
width: 65px;
|
||||
height: 70px;
|
||||
margin-left: 10px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
/* 单个卡片 */
|
||||
.card {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* 卡片信息区域 */
|
||||
.card-info {
|
||||
margin-bottom: 120px; /* 给下方图标区域留出空间 */
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.value-line {
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
width:120px;
|
||||
}
|
||||
|
||||
.number {
|
||||
color: #1976d2; /* 高亮数字颜色 */
|
||||
margin-right: 6px;
|
||||
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* 图标容器 */
|
||||
.icon-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 54%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* 背后闪动的竖直矩形 */
|
||||
.icon-bg {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90px;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
background-image: none;
|
||||
background-color: rgba(25, 118, 210, 0.1);
|
||||
background-repeat: no-repeat;
|
||||
animation: blink 1s infinite alternate;
|
||||
top: -15%;
|
||||
}
|
||||
.icon-bg-0 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.icon-bg-1 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.icon-bg-2 {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.icon-bg-3 {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
|
||||
/* 圆形平台 */
|
||||
.platform-circle {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background: radial-gradient(rgba(25, 118, 210, 0.3), transparent 70%);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 8px rgba(25, 118, 210, 0.4), 0 0 12px rgba(25, 118, 210, 0.3);
|
||||
}
|
||||
|
||||
/* 图标 */
|
||||
.icon {
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 28px;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
/* 关键帧动画：闪动 */
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标模拟，可用 Font Awesome 等替换 */
|
||||
.icon-phone::before {
|
||||
content: "☎";
|
||||
}
|
||||
.icon-shield::before {
|
||||
content: "⛨";
|
||||
}
|
||||
.icon-star::before {
|
||||
content: "★";
|
||||
}
|
||||
.icon-protect::before {
|
||||
content: "🛡";
|
||||
}
|
||||
</style>
|
||||
|
||||
232
src/views/indexs/left-topback.vue
Normal file
232
src/views/indexs/left-topback.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<!--
|
||||
* @Author: szy
|
||||
* @Date: 2022-02-28 16:16:42
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-07-20 17:57:11
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
|
||||
-->
|
||||
<template>
|
||||
<ul class="user_Overview flex" v-if="pageflag">
|
||||
<li class="user_Overview-item" style="color: #00fdfa">
|
||||
<div class="user_Overview_nums allnum ">
|
||||
<dv-digital-flop :config="config" style="width:100%;height:100%;" />
|
||||
</div>
|
||||
<p>总设备数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #07f7a8">
|
||||
<div class="user_Overview_nums online">
|
||||
<dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
|
||||
</div>
|
||||
<p>在线数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #e3b337">
|
||||
<div class="user_Overview_nums offline">
|
||||
<dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
|
||||
|
||||
</div>
|
||||
<p>掉线数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #f5023d">
|
||||
<div class="user_Overview_nums laramnum">
|
||||
<dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
|
||||
</div>
|
||||
<p>告警次数</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Reacquire v-else @onclick="getData" line-height="200px">
|
||||
重新获取
|
||||
</Reacquire>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from 'api/modules'
|
||||
let style = {
|
||||
fontSize: 24
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
userOverview: {
|
||||
alarmNum: 0,
|
||||
offlineNum: 0,
|
||||
onlineNum: 0,
|
||||
totalNum: 0,
|
||||
},
|
||||
pageflag: true,
|
||||
timer: null,
|
||||
config: {
|
||||
number: [100],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#00fdfa",
|
||||
fill: "#00fdfa",
|
||||
},
|
||||
},
|
||||
onlineconfig: {
|
||||
number: [0],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#07f7a8",
|
||||
fill: "#07f7a8",
|
||||
},
|
||||
},
|
||||
offlineconfig: {
|
||||
number: [0],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#e3b337",
|
||||
fill: "#e3b337",
|
||||
},
|
||||
},
|
||||
laramnumconfig: {
|
||||
number: [0],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#f5023d",
|
||||
fill: "#f5023d",
|
||||
},
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
numsFilter(msg) {
|
||||
return msg || 0;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearData()
|
||||
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true;
|
||||
currentGET("big2").then((res) => {
|
||||
if (!this.timer) {
|
||||
console.log("设备总览", res);
|
||||
}
|
||||
if (res.success) {
|
||||
this.userOverview = res.data;
|
||||
this.onlineconfig = {
|
||||
...this.onlineconfig,
|
||||
number: [res.data.onlineNum]
|
||||
}
|
||||
this.config = {
|
||||
...this.config,
|
||||
number: [res.data.totalNum]
|
||||
}
|
||||
this.offlineconfig = {
|
||||
...this.offlineconfig,
|
||||
number: [res.data.offlineNum]
|
||||
}
|
||||
this.laramnumconfig = {
|
||||
...this.laramnumconfig,
|
||||
number: [res.data.alarmNum]
|
||||
}
|
||||
this.switper()
|
||||
} else {
|
||||
this.pageflag = false;
|
||||
this.$Message.warning(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
//轮询
|
||||
switper() {
|
||||
if (this.timer) {
|
||||
return
|
||||
}
|
||||
let looper = (a) => {
|
||||
this.getData()
|
||||
};
|
||||
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.user_Overview {
|
||||
li {
|
||||
flex: 1;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user_Overview_nums {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
font-size: 22px;
|
||||
margin: 50px auto 30px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.bgdonghua::before {
|
||||
animation: rotating 14s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.allnum {
|
||||
|
||||
// background-image: url("../../assets/img/left_top_lan.png");
|
||||
&::before {
|
||||
background-image: url("../../assets/img/left/1.svg");
|
||||
background-size: 100% 100%;
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.online {
|
||||
&::before {
|
||||
background-image: url("../../assets/img/left_top_lv.png");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.offline {
|
||||
&::before {
|
||||
background-image: url("../../assets/img/left_top_huang.png");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.laramnum {
|
||||
&::before {
|
||||
background-image: url("../../assets/img/left_top_hong.png");
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
142
src/views/indexs/right-bottom.vue
Normal file
142
src/views/indexs/right-bottom.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>交易所</th>
|
||||
<th>项目</th>
|
||||
<th>价格 (RMB)</th>
|
||||
<th>地区</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<div class="scroll-wrapper">
|
||||
<vue-seamless-scroll :data="tableData" :class-option="scrollOptions" class="scroll-container">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td :style="{ color: item.exchangeColor }">{{ item.name }}</td>
|
||||
<td>{{ item.project }}</td>
|
||||
<td :style="{ color: item.priceColor }">{{ item.price }}</td>
|
||||
<td :style="{ color: item.regionColor }">{{ item.area }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
import { currentGET } from 'api/modules'
|
||||
export default {
|
||||
components: { vueSeamlessScroll },
|
||||
data() {
|
||||
return {
|
||||
scrollOptions: {
|
||||
step: 0.3, // 滚动速度
|
||||
limitMoveNum: 2, // 限制单步滚动的条数
|
||||
hoverStop: true, // 鼠标悬停是否暂停
|
||||
direction: 1, // 方向（1：向上滚动）
|
||||
},
|
||||
tableData: [
|
||||
// { exchange: "湖北碳排放权交易中心", project: "CER", price: "90", region: "中国-湖北", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
|
||||
// { exchange: "欧洲碳排放权交易体系", project: "EUA", price: "90", region: "欧盟", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#ffffff" },
|
||||
// { exchange: "洲际交易所", project: "CERs", price: "89", region: "美国", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#00ffcc" },
|
||||
// { exchange: "加州碳市场", project: "CER", price: "88", region: "美国-加州", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffcc00" },
|
||||
// { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" },
|
||||
// { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
|
||||
// { exchange: "湖北碳排放权交易中心", project: "CER", price: "90", region: "中国-湖北", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
|
||||
// { exchange: "欧洲碳排放权交易体系", project: "EUA", price: "90", region: "欧盟", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#ffffff" },
|
||||
// { exchange: "洲际交易所", project: "CERs", price: "89", region: "美国", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#00ffcc" },
|
||||
// { exchange: "加州碳市场", project: "CER", price: "88", region: "美国-加州", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffcc00" },
|
||||
// { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" },
|
||||
// { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
|
||||
],
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getExchangeData();
|
||||
},
|
||||
methods: {
|
||||
getExchangeData() {
|
||||
currentGET("big4").then(res => {
|
||||
|
||||
console.log("交易所数据：");
|
||||
//console.log(this.tableData1);
|
||||
console.log(res.data);
|
||||
this.tableData = res.data;
|
||||
this.tableData.forEach((item, index) => {
|
||||
|
||||
if(index % 2 !== 0)
|
||||
{
|
||||
|
||||
item.exchangeColor = "#1976d2";
|
||||
item.priceColor = "#333333";
|
||||
item.regionColor = "#333333";
|
||||
this.$set(this.tableData, index, item);
|
||||
}
|
||||
else
|
||||
{
|
||||
//console.log("偶数index: " + index);
|
||||
item.exchangeColor = "#ff9800";
|
||||
item.priceColor = "#ff9800";
|
||||
item.regionColor = "#ff9800";
|
||||
this.$set(this.tableData, index, item);
|
||||
//this.$set(this.tableData, index, modifiedItem);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
// console.log("转换后交易所数据：");
|
||||
// console.log(this.tableData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-container {
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
padding-top: 10px; /* 添加顶部内边距 */
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 12px;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #f5f7fa;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
.scroll-wrapper {
|
||||
height: 250px; /* 适配大屏，数据较多可增加高度 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroll-container table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background: rgba(25, 118, 210, 0.05);
|
||||
}
|
||||
</style>
|
||||
71
src/views/indexs/right-center.vue
Normal file
71
src/views/indexs/right-center.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div ref="chart" style="width: 600px; height: 350px;margin-left: -10%;margin-top: -10%;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'BarChart',
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
const myChart = echarts.init(this.$refs.chart);
|
||||
// 指定图表的配置项和数据
|
||||
|
||||
const option = {
|
||||
grid:{
|
||||
left:'14%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLabel: {
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: 'white',
|
||||
formatter: '{value}kg'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#3399FF'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis' ,
|
||||
formatter: (params) => {
|
||||
console.log(params)
|
||||
return `减碳量：${params[0].value}kg`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70, 110, 30, 0, 0, 0, 0, 0],
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
// 使用线性渐变填充颜色
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#6a99f8' // 起始颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#0b2149' // 结束颜色
|
||||
}])
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
336
src/views/indexs/right-top-day.vue
Normal file
336
src/views/indexs/right-top-day.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<!-- <transition name="yh-setting-fade"> -->
|
||||
<div class="table-container">
|
||||
<table @click="tableClick">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 24%">车牌号</th>
|
||||
<th style="width: 19%">当前总里程</th>
|
||||
<th style="width: 19%">当日里程</th>
|
||||
<th style="width: 19%">当日用氢量</th>
|
||||
<th style="width: 19%">当日碳减排</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<div class="scroll-wrapper">
|
||||
<vue-seamless-scroll
|
||||
:data="tableData"
|
||||
:class-option="scrollOptions"
|
||||
class="scroll-container"
|
||||
>
|
||||
<table @click="tableClick">
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td style="width: 24%">{{ item.plateNumber }}</td>
|
||||
<td style="width: 19%">{{ item.totalMileage }}km</td>
|
||||
<td style="width: 19%">{{ item.dayMileage }}km</td>
|
||||
<td style="width: 19%">{{ item.dayHydrogen }}kg</td>
|
||||
<td style="width: 19%">{{ item.dayCarbon }}kg</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="dialog-container">
|
||||
<!-- :body-style="{ maxHeight: 'calc(100vh - 510px)', overflow: 'auto' }" -->
|
||||
<el-dialog
|
||||
title="车辆当日信息"
|
||||
:visible.sync="setVehicleDialog"
|
||||
class="dialog_el"
|
||||
height="400px"
|
||||
width="803px"
|
||||
center
|
||||
:lock-scroll="false"
|
||||
:append-to-body="true"
|
||||
:modal-append-to-body="true"
|
||||
>
|
||||
<!-- width="100%" class="dialog-table" -->
|
||||
<div class="dialog-body-wrapper">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
class="vehicleTable"
|
||||
height="600px"
|
||||
width="800px"
|
||||
:default-sort="{ prop: 'totalMileage', order: 'descending' }"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
prop="tableIndex"
|
||||
label="序号"
|
||||
width="80px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="plateNumber"
|
||||
label="车牌号"
|
||||
width="120px"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="totalMileage"
|
||||
label="当前总里程"
|
||||
width="140px"
|
||||
:formatter="formatMileageKm"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="dayMileage"
|
||||
label="当日里程"
|
||||
width="130px"
|
||||
:formatter="formatMileageKm"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="dayHydrogen"
|
||||
label="当日用氢量"
|
||||
width="140px"
|
||||
:formatter="formatHydrogenKg"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="dayCarbon"
|
||||
label="当日碳减排"
|
||||
width="140px"
|
||||
:formatter="formatHydrogenKg"
|
||||
sortable
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button
|
||||
class="closeButton"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="closeDialog"
|
||||
>关闭</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- </transition> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
import { currentGET } from "api/modules";
|
||||
import { Dialog, Table, TableColumn } from "element-ui";
|
||||
import "element-ui/lib/theme-chalk/table.css";
|
||||
import "element-ui/lib/theme-chalk/table-column.css";
|
||||
Vue.component("el-dialog", Dialog);
|
||||
Vue.use(Table);
|
||||
Vue.use(TableColumn);
|
||||
export default {
|
||||
components: { vueSeamlessScroll },
|
||||
data() {
|
||||
return {
|
||||
scrollOptions: {
|
||||
step: 0.3, // 滚动速度
|
||||
limitMoveNum: 3, // 限制单步滚动的条数
|
||||
hoverStop: true, // 鼠标悬停是否暂停
|
||||
direction: 1, // 方向（1：向上滚动）
|
||||
singleHeight: 50, // 单行高度，用于精确控制滚动
|
||||
waitTime: 2000, // 等待时间，滚动间隔
|
||||
},
|
||||
tableData: [],
|
||||
setVehicleDialog: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getExchangeData();
|
||||
},
|
||||
methods: {
|
||||
tableClick() {
|
||||
console.log("tableClick");
|
||||
this.setVehicleDialog = true;
|
||||
},
|
||||
closeDialog() {
|
||||
this.setVehicleDialog = false;
|
||||
},
|
||||
getExchangeData() {
|
||||
currentGET("big13").then((res) => {
|
||||
console.log("当日汇总数据：");
|
||||
console.log(res.data);
|
||||
this.tableData = res.data;
|
||||
// 限制最多显示20条数据
|
||||
//this.tableData = res.data.slice(0, 20);
|
||||
});
|
||||
},
|
||||
formatMileageKm(row, column, cellValue, index) {
|
||||
if (row.nodeName === null) return "0km";
|
||||
else return cellValue + "km";
|
||||
},
|
||||
formatHydrogenKg(row, column, cellValue, index) {
|
||||
if (row.nodeName === null) return "0kg";
|
||||
else return cellValue + "kg";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-container {
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
padding-top: 10px; /* 添加顶部内边距 */
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: center; /* 修改为居中对齐 */
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px;
|
||||
color: #2d3748;
|
||||
font-size: 14px;
|
||||
width: 24%;
|
||||
border-right: 1px solid rgba(79, 209, 197, 0.2);
|
||||
}
|
||||
|
||||
th {
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
td {
|
||||
padding: 10px 12px;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
width: 20%;
|
||||
text-align: center; /* 确保单元格内容居中 */
|
||||
}
|
||||
|
||||
thead {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dialog_el >>> .el-dialog__body {
|
||||
/* //border-top: 1px solid #dcdfe6;
|
||||
//border-bottom: 1px solid #dcdfe6; */
|
||||
max-height: 60vh !important;
|
||||
min-height: 100px;
|
||||
overflow-y: hidden;
|
||||
|
||||
/* background: #013f6a; */
|
||||
}
|
||||
.vehicleTable {
|
||||
/* width: 100%; */
|
||||
text-align: center; /* 确保单元格内容居中 */
|
||||
}
|
||||
.vehicleTable >>> th {
|
||||
padding: 12px;
|
||||
font-size: 14px;
|
||||
/* width: 20%; */
|
||||
text-align: center; /* 确保单元格内容居中 */
|
||||
}
|
||||
.vehicleTable >>> td {
|
||||
text-align: center; /* 确保单元格内容居中 */
|
||||
}
|
||||
.closeButton {
|
||||
color: #4fd1c5;
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.closeButton:hover {
|
||||
background: linear-gradient(135deg, #3bb2ff 0%, #00d4ff 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(79, 209, 197, 0.3);
|
||||
}
|
||||
/* 内容容器滚动设置 */
|
||||
.dialog-body-wrapper {
|
||||
padding: 1px 1px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
/* width: 100%; */
|
||||
}
|
||||
|
||||
.dialog-container {
|
||||
width: 300px;
|
||||
height: 0px; /* 适配大屏，数据较多可增加高度 */
|
||||
overflow: hidden;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.95) 0%,
|
||||
rgba(240, 249, 255, 0.95) 100%
|
||||
);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(20px);
|
||||
box-shadow: 0 8px 32px rgba(79, 209, 197, 0.15);
|
||||
}
|
||||
|
||||
.dialog_el .el-table {
|
||||
background-color: transparent !important;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog_el .el-table th {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
|
||||
color: #ffffff !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.dialog_el .el-table td {
|
||||
background-color: rgba(255, 255, 255, 0.7) !important;
|
||||
color: #2d3748 !important;
|
||||
border-bottom: 1px solid rgba(79, 209, 197, 0.1) !important;
|
||||
}
|
||||
|
||||
.dialog_el .el-table--enable-row-hover .el-table__body tr:hover > td {
|
||||
background-color: rgba(79, 209, 197, 0.1) !important;
|
||||
}
|
||||
/* .dialog-table{
|
||||
background-color: #ffffff;
|
||||
} */
|
||||
|
||||
/* .dialog-table {
|
||||
// background: linear-gradient(135deg, #031a47 0%, #e4e8ed 100%);
|
||||
background-color: #f5f7fa;
|
||||
// text-align: center;
|
||||
} */
|
||||
/* .dialog-table th {
|
||||
background-color: #e3f2fd !important;
|
||||
color: white;
|
||||
}
|
||||
.dialog-table td {
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
} */
|
||||
.scroll-wrapper {
|
||||
height: 550px; /*适配大屏，数据较多可增加高度 */
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.scroll-container table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid rgba(79, 209, 197, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background: rgba(79, 209, 197, 0.05);
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background: rgba(79, 209, 197, 0.1);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
</style>
|
||||
119
src/views/indexs/right-top.vue
Normal file
119
src/views/indexs/right-top.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div ref="chart" style="width: 520px; height: 280px;margin-top: 0%;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'DoubleAxisChart',
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.chart;
|
||||
const myChart = echarts.init(chartDom);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
formatter: (params) => {
|
||||
console.log(params)
|
||||
return `空箱：${params[0].value}标箱<br/>危险品：${params[1].value}标箱`;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['空箱', '危险品'],
|
||||
left: 'right',
|
||||
icon: 'line',
|
||||
itemWidth: 30,
|
||||
itemHeight: .0,
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
fontFamily: 'Arial, sans-serif'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['点1', '点2', '点3', '点4', '点5', '点6', '点7']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
splitLine: { lineStyle: { color: '#081b42' } },
|
||||
axisLabel: {
|
||||
formatter: '{value}标箱'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
splitLine: { lineStyle: { color: '#081b42' } },
|
||||
axisLabel: {
|
||||
formatter: '{value}标箱'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '空箱',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: {color: 'orange'},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
lineStyle: {
|
||||
color: 'orange', // 线条颜色
|
||||
width: 2, // 线条宽度
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '危险品',
|
||||
type: 'line',
|
||||
yAxisIndex: 1, // 使用第二个Y轴
|
||||
stack: '总量',
|
||||
areaStyle: {color: 'blue'},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
lineStyle: {
|
||||
color: 'blue', // 线条颜色
|
||||
width: 2, // 线条宽度
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
128
src/views/setting.vue
Normal file
128
src/views/setting.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<transition name="yh-setting-fade">
|
||||
<div class="setting" :class="{ settingShow: settingShow }" v-show="settingShow">
|
||||
<div class="setting_dislog" @click="settingShow = false">
|
||||
|
||||
</div>
|
||||
<div class="setting_inner">
|
||||
<div class="setting_header">
|
||||
设置
|
||||
</div>
|
||||
<div class="setting_body">
|
||||
<!-- <div class="left_shu"> 实时监测</div> -->
|
||||
<div class="left_shu"> 全局设置</div>
|
||||
<div class="setting_item">
|
||||
<span class="setting_label">
|
||||
是否进行自动适配<span class="setting_label_tip">(默认分辨率1920*1080)</span>:
|
||||
</span>
|
||||
<div class="setting_content">
|
||||
<el-radio-group v-model="isScaleradio" @change="(val) => radiochange(val, 'isScale')">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_shu"> 全屏设置</div>
|
||||
<div class="setting_item">
|
||||
<!-- <span class="setting_label">全屏显示:</span> -->
|
||||
<div class="setting_content">
|
||||
<!-- <el-button type="primary" round size="mini" @click="toggleFullScreen">全屏</el-button> -->
|
||||
<el-radio-group v-model="sbtxradio" @change="(val) => radiochange(val, 'isFullScreen')">
|
||||
<el-radio :label="true">否</el-radio>
|
||||
<el-radio :label="false">是</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="left_shu"> 实时监测</div>
|
||||
<div class="setting_item">
|
||||
<span class="setting_label">
|
||||
设备提醒自动轮询: <span class="setting_label_tip"></span>
|
||||
</span>
|
||||
<div class="setting_content">
|
||||
<el-radio-group v-model="sbtxradio" @change="(val) => radiochange(val, 'sbtxSwiper')">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting_item">
|
||||
<span class="setting_label">
|
||||
实时预警轮播:
|
||||
</span>
|
||||
<div class="setting_content">
|
||||
<el-radio-group v-model="ssyjradio" @change="(val) => radiochange(val, 'ssyjSwiper')">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="flex justify-center">
|
||||
<!-- <el-button type="primary" round size="mini">确定</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
settingShow: false,
|
||||
sbtxradio:true,
|
||||
ssyjradio: true,
|
||||
isScaleradio:true,
|
||||
isFullScreen: false,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
init() {
|
||||
this.settingShow = true
|
||||
},
|
||||
radiochange(val, type) {
|
||||
this.$store.commit('setting/updateSwiper', { val, type })
|
||||
if(type==='isFullScreen'){
|
||||
this.toggleFullScreen()
|
||||
}
|
||||
},
|
||||
toggleFullScreen() {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen().catch(err => {
|
||||
console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
|
||||
});
|
||||
this.isFullScreen = true;
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
this.isFullScreen = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$store.commit('setting/initSwipers')
|
||||
this.sbtxradio = this.$store.state.setting.sbtxSwiper,
|
||||
this.ssyjradio = this.$store.state.setting.ssyjSwiper,
|
||||
this.isScaleradio = this.$store.state.setting.isScale;
|
||||
},
|
||||
mounted() {
|
||||
document.body.appendChild(this.$el);
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
destroyed() {
|
||||
if (this.$el && this.$el.parentNode) {
|
||||
this.$el.parentNode.removeChild(this.$el);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
</style>
|
||||
171
src/views/test/testMap.vue
Normal file
171
src/views/test/testMap.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="map" id="map"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import jilin from "./json/jilin.json";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
weatherMap: {
|
||||
// "qing": require('@/assets/tq__1.jpg'),
|
||||
// "qingZhuanDuoyun": require('@/assets/tq__2.jpg'),
|
||||
// "zhongyu": require('@/assets/tq__3.jpg'),
|
||||
// "qingZhuanZhongyu": require('@/assets/tq__4.jpg'),
|
||||
// "zhongxue": require('@/assets/tq__5.jpg'),
|
||||
// "leidian": require('@/assets/tq__6.jpg'),
|
||||
// "yin": require('@/assets/tq__7.jpg'),
|
||||
// "daxue": require('@/assets/tq__8.jpg'),
|
||||
// "qingZhuanYin": require('@/assets/tq__9.jpg'),
|
||||
},
|
||||
testData: [
|
||||
{
|
||||
name: '长春市',
|
||||
value: 'qing',
|
||||
min: '10',
|
||||
max: '20',
|
||||
weather: '晴'
|
||||
},
|
||||
{
|
||||
name: '吉林市',
|
||||
value: 'qingZhuanDuoyun',
|
||||
min: '11',
|
||||
max: '15',
|
||||
weather: '晴转多云'
|
||||
},
|
||||
{
|
||||
name: '通化市',
|
||||
value: 'zhongyu',
|
||||
min: '8',
|
||||
max: '12',
|
||||
weather: '中雨'
|
||||
},
|
||||
{
|
||||
name: '四平市',
|
||||
value: 'qingZhuanZhongyu',
|
||||
min: '9',
|
||||
max: '19',
|
||||
weather: '晴转中雨'
|
||||
},
|
||||
{
|
||||
name: '白山市',
|
||||
value: 'zhongxue',
|
||||
min: '-15',
|
||||
max: '-5',
|
||||
weather: '中雪'
|
||||
},
|
||||
{
|
||||
name: '辽源市',
|
||||
value: 'leidian',
|
||||
min: '13',
|
||||
max: '17',
|
||||
weather: '雷电'
|
||||
},
|
||||
{
|
||||
name: '白城市',
|
||||
value: 'yin',
|
||||
min: '4',
|
||||
max: '7',
|
||||
weather: '阴'
|
||||
},
|
||||
{
|
||||
name: '延边朝鲜族自治州',
|
||||
value: 'daxue',
|
||||
min: '-22',
|
||||
max: '-12',
|
||||
weather: '大雪'
|
||||
},
|
||||
{
|
||||
name: '松原市',
|
||||
value: 'qingZhuanYin',
|
||||
min: '10',
|
||||
max: '20',
|
||||
weather: '晴转多云'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.drawMap()
|
||||
},
|
||||
methods: {
|
||||
drawMap() {
|
||||
// 判断地图是否渲染
|
||||
let myChart = echarts.getInstanceByDom(document.getElementById("map"))
|
||||
// 如果渲染则清空地图
|
||||
if (myChart != null) {
|
||||
myChart.dispose()
|
||||
}
|
||||
// 初始化地图
|
||||
myChart = echarts.init(document.getElementById("map"));
|
||||
|
||||
echarts.registerMap("jilin", jilin)
|
||||
|
||||
let rich = {
|
||||
max: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#E6A23C',
|
||||
width: 44,
|
||||
height: 26,
|
||||
},
|
||||
min: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#67C23A',
|
||||
width: 44,
|
||||
height: 26,
|
||||
},
|
||||
name: {
|
||||
color: '#F56C6C',
|
||||
height: 32
|
||||
},
|
||||
}
|
||||
|
||||
const weatherMap = this.weatherMap
|
||||
let tempData = this.testData
|
||||
tempData.forEach(item => {
|
||||
item.weatherImg = weatherMap[item.value]
|
||||
rich[item.value] = {
|
||||
height: 26,
|
||||
width: 26,
|
||||
backgroundColor: {
|
||||
image: weatherMap[item.value]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
var option = {
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
zoom: 1.2,
|
||||
map: 'jilin',
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
return `{${params.data.value}|} {min|${params.data.min}℃} {max|${params.data.max}℃}\n{name|${params.name}}`
|
||||
},
|
||||
rich: rich
|
||||
},
|
||||
data: tempData
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
37
src/views/tjfx/tjfx.vue
Normal file
37
src/views/tjfx/tjfx.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<!--
|
||||
* @Author: szy
|
||||
* @Date: 2022-03-04 09:52:25
|
||||
* @LastEditors: szy
|
||||
* @LastEditTime: 2022-03-04 11:03:40
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\tjfx\tjfx.vue
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user