Skip to content

V
VueJS

逆风优雅 / VueJS
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 0
Fork 0
V
VueJS
提交 274cd330 编写于 作者: 6 62babeffbe76c5061d48074e
浏览文件
操作

Tue May 9 07:48:00 UTC 2023 inscode

上级 a1a27944
展开全部 隐藏空白更改
内联 并排
Showing with 21488 addition and 105 deletion
.eslintrc.cjs 0 → 100644
浏览文件 @ 274cd330
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript'
],
parserOptions: {
ecmaVersion: 'latest'
}
}
.gitignore
浏览文件 @ 274cd330
...@@ -6,7 +6,6 @@ yarn-debug.log* ...@@ -6,7 +6,6 @@ yarn-debug.log*
yarn-error.log* yarn-error.log*
pnpm-debug.log* pnpm-debug.log*
lerna-debug.log* lerna-debug.log*
package-lock.json
node_modules node_modules
.DS_Store .DS_Store
......
core.27350 0 → 100644
浏览文件 @ 274cd330
文件已添加
env.d.ts 0 → 100644
浏览文件 @ 274cd330
/// <reference types="vite/client" />
index.html
浏览文件 @ 274cd330
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" /> <head>
<link rel="icon" href="/favicon.ico" /> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" href="/favicon.ico">
<title>Vite App</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> <title>扬州市能源大数据中心</title>
<body> <script>
window.onload = function () {
var ratioY = window.innerHeight / 1080;
var ratioX = window.innerWidth / 1920;
var ratio = ratioY > ratioX ? ratioX : ratioY;
document.body.style.transform = "scale(" + ratio + ")";
window.onresize = () => {
var ratioY = window.innerHeight / 1080;
var ratioX = window.innerWidth / 1920;
var ratio = ratioY > ratioX ? ratioX : ratioY;
document.body.style.transform = "scale(" + ratio + ")"
};
}
</script>
</head>
<body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body> <script type="module" src="/src/main.ts"></script>
</html> </body>
</html>
\ No newline at end of file
package-lock.json 0 → 100644
浏览文件 @ 274cd330
此差异已折叠。
package.json
浏览文件 @ 274cd330
{ {
"name": "vuejs-with-vite", "name": "yangzhou",
"version": "0.0.0", "version": "0.0.0",
"scripts": { "private": true,
"dev": "vite", "scripts": {
"build": "vite build", "dev": "vite",
"preview": "vite preview --port 4173" "build": "run-p type-check build-only",
}, "preview": "vite preview",
"dependencies": { "build-only": "vite build",
"guess": "^1.0.2", "type-check": "vue-tsc --noEmit",
"vue": "^3.2.37" "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
}, },
"devDependencies": { "dependencies": {
"@vitejs/plugin-vue": "^3.0.1", "@liveqing/liveplayer-v3": "^3.7.10",
"vite": "^3.0.1" "ant-design-vue": "^3.2.15",
} "echarts": "^5.4.2",
"echarts-gl": "^2.0.9",
"element-plus": "^2.3.4",
"less": "^4.1.3",
"moment": "^2.29.4",
"pinia": "^2.0.32",
"video.js": "^8.3.0",
"videojs": "^1.0.0",
"vue": "^3.2.47",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.2.0",
"@types/node": "^18.14.2",
"@vitejs/plugin-vue": "^4.0.0",
"@vue/eslint-config-typescript": "^11.0.2",
"@vue/tsconfig": "^0.1.3",
"eslint": "^8.34.0",
"eslint-plugin-vue": "^9.9.0",
"npm-run-all": "^4.1.5",
"typescript": "~4.8.4",
"vite": "^4.1.4",
"vue-tsc": "^1.2.0"
}
} }
src/App.vue
浏览文件 @ 274cd330
<script setup> <script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue' import { RouterLink, RouterView } from 'vue-router'
import TheWelcome from './components/TheWelcome.vue'
</script> </script>
<template> <template>
<header> <RouterView />
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template> </template>
<style scoped> <style scoped></style>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
src/components/HelloWorld.vue
浏览文件 @ 274cd330
<script setup> <script setup lang="ts">
defineProps({ defineProps<{
msg: { msg: string
type: String, }>()
required: true
}
})
</script> </script>
<template> <template>
...@@ -12,8 +9,8 @@ defineProps({ ...@@ -12,8 +9,8 @@ defineProps({
<h1 class="green">{{ msg }}</h1> <h1 class="green">{{ msg }}</h1>
<h3> <h3>
You’ve successfully created a project with You’ve successfully created a project with
<a target="_blank" href="https://vitejs.dev/">Vite</a> + <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
<a target="_blank" href="https://vuejs.org/">Vue 3</a>. <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
</h3> </h3>
</div> </div>
</template> </template>
......
src/components/TheWelcome.vue
浏览文件 @ 274cd330
<script setup> <script setup lang="ts">
import WelcomeItem from './WelcomeItem.vue' import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue' import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue' import ToolingIcon from './icons/IconTooling.vue'
...@@ -15,7 +15,7 @@ import SupportIcon from './icons/IconSupport.vue' ...@@ -15,7 +15,7 @@ import SupportIcon from './icons/IconSupport.vue'
<template #heading>Documentation</template> <template #heading>Documentation</template>
Vue’s Vue’s
<a target="_blank" href="https://vuejs.org/">official documentation</a> <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
provides you with all information you need to get started. provides you with all information you need to get started.
</WelcomeItem> </WelcomeItem>
...@@ -26,14 +26,13 @@ import SupportIcon from './icons/IconSupport.vue' ...@@ -26,14 +26,13 @@ import SupportIcon from './icons/IconSupport.vue'
<template #heading>Tooling</template> <template #heading>Tooling</template>
This project is served and bundled with This project is served and bundled with
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> + recommended IDE setup is
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
your components and web pages, check out <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
<a href="https://www.cypress.io/" target="_blank">Cypress</a> and you need to test your components and web pages, check out
<a href="https://on.cypress.io/component" target="_blank" <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
>Cypress Component Testing</a <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
>.
<br /> <br />
...@@ -47,12 +46,12 @@ import SupportIcon from './icons/IconSupport.vue' ...@@ -47,12 +46,12 @@ import SupportIcon from './icons/IconSupport.vue'
<template #heading>Ecosystem</template> <template #heading>Ecosystem</template>
Get official tools and libraries for your project: Get official tools and libraries for your project:
<a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>, <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
<a target="_blank" href="https://router.vuejs.org/">Vue Router</a>, <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
<a target="_blank" href="https://test-utils.vuejs.org/">Vue Test Utils</a>, and <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
<a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
resources, we suggest paying you need more resources, we suggest paying
<a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a> <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
a visit. a visit.
</WelcomeItem> </WelcomeItem>
...@@ -63,11 +62,14 @@ import SupportIcon from './icons/IconSupport.vue' ...@@ -63,11 +62,14 @@ import SupportIcon from './icons/IconSupport.vue'
<template #heading>Community</template> <template #heading>Community</template>
Got stuck? Ask your question on Got stuck? Ask your question on
<a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
<a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>. Discord server, or
You should also subscribe to <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
<a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official >StackOverflow</a
<a target="_blank" href="https://twitter.com/vuejs">@vuejs</a> >. You should also subscribe to
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
the official
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
twitter account for latest news in the Vue world. twitter account for latest news in the Vue world.
</WelcomeItem> </WelcomeItem>
...@@ -79,6 +81,6 @@ import SupportIcon from './icons/IconSupport.vue' ...@@ -79,6 +81,6 @@ import SupportIcon from './icons/IconSupport.vue'
As an independent project, Vue relies on community backing for its sustainability. You can help As an independent project, Vue relies on community backing for its sustainability. You can help
us by us by
<a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>. <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
</WelcomeItem> </WelcomeItem>
</template> </template>
src/components/echarts/3dMap.js 0 → 100644
浏览文件 @ 274cd330
import Util from "./common"; // 引入echarts公共的类\
import yangZhou from "./yangzhouMap.json"; // 扬州地图数据
import "echarts-gl"; // 引入echarts-gl
export default class Bar extends Util {
constructor(el, option) {
super(el, option); // 继承父类，echarts公共类的值
this.init(); // 初始化
}
init() {
setTimeout(() => {
this.$e.registerMap("yangzhou", yangZhou); // 注册扬州数据
this.myChart = this.$e.init(this.$el);
this.setCharts();
this.myChart.setOption(this.chartOption, true); // 将配置项加到echarts中
window.addEventListener("resize", () => { // 监听屏幕缩放，使echarts同样缩放
this.myChart.resize();
});
}, 1000);
}
setCharts() { // 配置echarts
this.chartOption = {
tooltip: {
show: false,
},
// visualMap: {
// show: false
// },
//热力图配置项
// visualMap: [
// {
// type: "continuous",
// text: ["xxx"],
// calculable: true,
// max: 250,
// inPange: {
// color: ["#87aa66", "#eba438", "#d94d4c"],
// },
// },
// ],
geo3D: {
map: "yangzhou",
// roam: false, // 开启平移和缩放
viewControl: {
// rotateSensitivity: 0,
// projection: 'orthographic',
// orthographicSize: 100, //控制地图大小
// maxOrthographicSize: 10,
// minOrthographicSize: 100,
// autoRotate: false,
// animation: true,
// alpha: 30,
// beta: 40,
// animationDurationUpdate: 10
// autoRotateSpeed:5
// autoRotate: false,
// autoRotateAfterStill: 3,
// distance: 120,
// minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
// maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
// minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
// maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
// animation: false, // 是否开启动画。[ default: true ]
// animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
// animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
},
itemStyle: {
color: 'red', // 每块的颜色
areaColor: 'transparent', // 地图区域的颜色
opacity: 1,
borderWidth: 0.8,
borderColor: 'rgb(62,215,213)',
borderDashOffset: 12, // 虚线偏移量
shadowColor: '#4aacf0',
shadowBlur: 10,
shadowOffsetY: 5,
shadowOffsetX: 5,
},
label: {
show: true,
position: "top",
color: "#fff", //地图初始化区域字体颜色
fontSize: 16, // 地图文字大小
lineHeight: 16,
},
shading: "lambert",
// emphasis: {
// areaColor: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [{
// offset: 0, color: '#3f15d6' // 0% 处的颜色
// }, {
// offset: 1, color: '#d243cd' // 100% 处的颜色
// }],
// globalCoord: false // 缺省为 false
// }
// },
emphasis: { //当鼠标放上去 地区区域是否显示名称
disabled: true, //是否可以被选中
label: {
//移入时的高亮文本
show: true,
color: "#fff", //显示字体颜色变淡
fontSize: 16, //显示字体变大
},
itemStyle: {
color: "#e96e4c", //显示移入的区块变粉色
// colorStops: [{
// offset: 0, color: '#3f15d6' // 0% 处的颜色
// }, {
// offset: 1, color: '#d243cd' // 100% 处的颜色
// }],
},
},
light: {
//光照阴影
main: {
// color: "#fff", //光照颜色
intensity: 1, //光照强度
//shadowQuality: 'high', //阴影亮度
shadow: true, //是否显示阴影
shadowQuality: "medium", //阴影质量 ultra //阴影亮度
alpha: 55,
beta: 10,
},
ambient: {
intensity: 0.7,
},
},
},
series: [
{
type: "map3D",
map: "yangzhou",
itemStyle: {
areaColor: "rgba(11, 146, 149, 0.3)", // 地图配色
opacity: 0.3,
shadowColor: '#4aacf0',
shadowBlur: 10,
shadowOffsetY: 5,
shadowOffsetX: 5
},
data: [],
},
],
};
}
}
\ No newline at end of file
src/components/echarts/3dPie.js 0 → 100644
浏览文件 @ 274cd330
import Common from "@/util/echatrs/common";
export default class Pie extends Common {
constructor(el, option) {
super(el, option);
this.init();
}
init() {
this.myChart = this.$e.init(this.$el);
this.setCharts();
this.myChart.setOption(this.chartOption, true);
window.addEventListener("resize", () => {
this.myChart.resize();
});
this.myChart.on("click", (a) => {
if (this.option.click) {
this.option.click(a);
}
});
}
setCharts() {
const field = this.setField();
this.chartOption = {
tooltip: {
trigger: "item"
},
color: field.colors,
title: {
text: field.total + "个",
top: "center",
left: "center",
textStyle: {
color: "#FFF",
fontSize: 13
},
},
legend: {
show: false
},
series: [
{
type: "pie",
data: field.valueData,
label: {
show: false,
position: "outside",
align: "center",
verticalAlign: "middle",
formatter(params) {
return params.data.name;
}
},
labelLine: {
show: true
},
emphasis: {
scale: true,
scaleSize: 20,
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(255, 255, 255, 1)" // 鼠标移动到图上时，的阴影的颜色
}
},
blur: {
itemStyle: {
opacity: 0.1
}
},
radius: ["20%", "45%"],
},
{
type: "pie",
startAngle: -360 * (field.itemReduced / 2 / field.valueTotal) + 90,
radius: ["45%", "65%"],
itemStyle: {
opacity: 0.6, // 控制饼图最外层部分的透明度,颜色值是在new这个类的时候传入的值
},
label: {
show: true,
formatter(params) {
return "{a|" + params.data.name + "}";
},
rich: {
a: {
lineHeight: 20,
color: this.option.labelColor || "#000000",
fontWeight: 900
}
}
},
labelLine: {
show: false,
length: 10,
},
data: field.outValueData
}
]
};
}
setField() {
const colors = this.option.colors;
const sourceData = this.option.data;
const total = sourceData.reduce((num, item) => {
num += item.value;
return num;
}, 0);
// 内环间隔距离
const inSplitWidth = 3;
// 为了实现内环间隔距离，需要额外插入的数值。200 只是个系数，值越大，单位间隔的距离越小。
const inSplitValue = Math.floor(total / (150 / inSplitWidth));
// 外环间隔比内环间隔大的值
const itemSplitWidth = 2;
// 外环间隔距离
const outSplitWidth = inSplitWidth + itemSplitWidth;
// 为了实现外环间隔距离，需要额外插入的数值。
const outSplitValue = Math.floor(total / (150 / outSplitWidth));
// 内环数据的总数
const valueTotal = total + inSplitValue * sourceData.length;
function getTextAngle(currentAngle, angle) {
currentAngle = currentAngle + angle;
if (currentAngle <= 90) {
return -currentAngle;
} else if (currentAngle <= 180 && currentAngle > 90) {
return 180 - currentAngle;
} else if (currentAngle < 270 && currentAngle > 180) {
return 180 - currentAngle;
} else if (currentAngle < 360 && currentAngle >= 270) {
return 360 - currentAngle;
}
}
// 内环数据。在原数据的后面添加间隔数据（间隔块设置颜色透明）
const valueData = sourceData.reduce((arr, item) => {
const currentTotal = arr.reduce((total, item) => {
total += item.value;
return total;
}, 0);
const currentAngle = 360 * (currentTotal / valueTotal);
const angle = 360 * (item.value / valueTotal) / 2;
arr.push({
name: item.name,
value: item.value,
label: {
lineHeight: 80,
rotate: getTextAngle(currentAngle, angle)
}
}, {
name: "",
value: inSplitValue,
itemStyle: {
color: "transparent",
opacity: 0
},
label: {
show: false
},
labelLine: {
show: false
}
});
return arr;
}, []);
// 原数据需要减去的值（外环每块的数据都要比原数据少一点才能达到外环嵌在内环的效果）
const itemReduced = outSplitValue - inSplitValue;
// 外环数据
const outValueData = sourceData.reduce((arr, item) => {
const currentTotal = arr.reduce((total, item) => {
total += item.value;
return total;
}, 0);
const currentAngle = 360 * (currentTotal / valueTotal);
const angle = 360 * (item.value / valueTotal) / 2;
arr.push({
name: item.name,
value: item.value,
label: {
color: "#fff",
position: "inside",
align: "center",
lineHeight: 10,
// verticalAlign: 'top',
rotate: getTextAngle(currentAngle, angle)
}
}, {
name: "",
value: outSplitValue,
itemStyle: {
color: "transparent",
opacity: 0
},
label: {
show: false,
textStyle: {
fontSize: 12,
color: "#fff"
}
},
labelLine: {
show: false
}
});
return arr;
}, []);
return {
colors,
total,
valueData,
itemReduced,
valueTotal,
outValueData
};
}
}
src/components/echarts/common.js 0 → 100644
浏览文件 @ 274cd330
import * as echarts from "echarts";
import 'echarts-gl'
// import "echarts-liquidfill/src/liquidFill.js";// ecahrts的水球
export default class Common {
$el = {};
$e = {};
chartOption = {};
myChart = {};
option = {};
legendIcon = "path://M-65,40a8.009,8.009,0,0,1-8-8V6a8.008,8.008,0,0,1,8-8h26a8.009,8.009,0,0,1,8,8V32a8.01,8.01,0,0,1-8,8ZM-67,6V32a2,2,0,0,0,2,2h26a2,2,0,0,0,2-2V6a2,2,0,0,0-2-2H-65A2,2,0,0,0-67,6Zm5,25a2,2,0,0,1-2-2V9a2,2,0,0,1,2-2h20a2,2,0,0,1,2,2V29a2,2,0,0,1-2,2Z";
colors = [
"#FF942C",
"#0C6CE0",
"#00C9FF",
"#A059CC",
"#f7b500",
"#999999",
"#dbdbdb",
"#65bdff",
];
constructor(el, option) {
// 设定容器定位，不然里面tips 瞎几把飘
el.style.position = "relative";
this.$el = el;
this.$e = echarts;//将echrts的相关属性赋值给$e
this.option = option;
// console.log('999',this.$e);// 打印的是echarts的相关内容
}
/***
* 16进制转rgba
* @param colors
* @param opacity
* @returns {string}
*/
colorRgb(colors, opacity) {
// 16进制颜色值的正则
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 把颜色值变成小写
const color = colors.toLowerCase();
if (reg.test(color)) { // 正则匹配
const colorChange = [];
for (let i = 1; i < 7; i += 2) {
colorChange.push(parseInt("0x" + color.slice(i, i + 2))); // parseInt解析字符串，返回一个整数
}
return `rgba(${colorChange.join(",")},${opacity})`;
} else {
return color;
}
}
/***
* 图表的tips
* @param params
* @returns {string}
*/
setFormatter(params) {
return `<div style="width:300px;padding: 10px 20px;">
<div style="opacity: 0.8;font-size: 12px;padding-bottom: 8px;color: #000000;">${params[0]?.name || ""}</div>
${params.map((item) => {
return `
<div style="display:flex;justify-content:space-between;margin-top: 8px;font-size: 12px;">
<div style="font-size: 16px;color: ${typeof item.color === "string" ? item.color : item.color.colorStops[0].color};font-weight: bold;">${item.data.value}</div>
<div style="opacity: 0.4;font-size: 12px;color: #000000;">${item.seriesName}</div>
</div>
`;
}).join("")}
</div>`;
}
/***
* 重载charts
* @param option
*/
reloadOption(option) {
this.option = { ...this.option, ...option }; // 通过展开运算符，将两个对象合并为一个
this.setCharts();
this.myChart.setOption(this.chartOption, true);
setTimeout(() => {
this.myChart.resize();
});
}
/***
* 随机获取颜色
*/
static getRandomColor() {
return "#" + ("00000" + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
}
destroy() {
this.$el.innerHTML = "";
this.$el.setAttribute("_echarts_instance_", "");
}
}
src/components/echarts/gdpLine.js 0 → 100644
浏览文件 @ 274cd330
import Common from "./common";
export default class Line extends Common {
constructor(el, option) {
super(el, option);
this.init();
}
init() {
this.myChart = this.$e.init(this.$el);
this.setCharts();
this.myChart.setOption(this.chartOption, true);
window.addEventListener("resize", () => {
this.myChart.resize();
});
}
setCharts() {
this.chartOption = {
tooltip: {
trigger: "axis",
},
grid: {
left: "5%",
right: "5%",
bottom: "8%",
top: '20%',
containLabel: true
},
xAxis: {
type: "category",
// data: yearList,
data: [
"2018年", "2019年", "2020年", "2021年", "2028年",
],
splitLine: {//分割线配置
show: false
},
axisLabel: { // x轴线文字的样式
textStyle: {
color: "#A1D1EF",
fontSize: 14
},
},
axisTick: {
show: false
},
axisLine: {//x轴线的颜色以及宽度
show: true,
lineStyle: {
color: " #6AC1FF",
type: "solid",
width: 1
}
}
},
yAxis: [
{
type: "value",
name: "亿元",
splitNumber: 5,
symbolSize: 9, //标记的大小
nameTextStyle: { // name的样式
color: "#6699C1"
},
axisTick: { // 取消刻度线上的小刻度
show: false
},
axisLine: { // 取消整个刻度线
show: false
},
splitLine: {
lineStyle: {
color: " #6AC1FF",
opacity: 0.3,
type: "dashed",
},
},
axisLabel: {
textStyle: {
color: "#A1D1EF",
},
},
},
],
series: [
{
type: "line",
symbol: "circle", // 不展示折线的圆点
smooth: false, // 平滑的折线
itemStyle: {
normal: {
color: "#FF744C", //改变折线点的颜色
lineStyle: {
color: "#FF744C", //改变折线颜色
type: "solid"
}
}
},
toolbox: {
show: false,
},
data: [480, 390, 500, 260, 320,],
},
],
};
}
}
src/components/echarts/yangzhouMap.json 0 → 100644
浏览文件 @ 274cd330
此差异已折叠。
src/components/layout/Index.vue 0 → 100644
浏览文件 @ 274cd330
<template>
<div class="layout-content">
<div class="header xl-flex xl-between ">
<div class="project-name">扬州市能源大数据中心</div>
<div class="navigate xl-flex xl-between">
<router-link :to="{ name: 'EnergyDataPanorama' }">
<div class="tab-item xl-flex xl-column ">
<span class="tab-title">能源数据全景</span>
<div class="tab-bottom"></div>
</div>
</router-link>
<router-link to="/energyGoodPlace">
<div class="tab-item xl-flex xl-column ">
<span class="tab-title">能源好地方</span>
<div class="tab-bottom"></div>
</div>
</router-link>
<router-link to="/enterpriseEnergyCenter">
<div class="tab-item xl-flex xl-column ">
<span class="tab-title">企业能效中心</span>
<div class="tab-bottom"></div>
</div>
</router-link>
<router-link to="/publicServiceCenter">
<div class="tab-item xl-flex xl-column ">
<span class="tab-title">公共服务中心</span>
<div class="tab-bottom"></div>
</div>
</router-link>
<router-link to="/dataSharingCenter">
<div class="tab-item xl-flex xl-column ">
<span class="tab-title">数据共享中心</span>
<div class="tab-bottom"></div>
</div>
</router-link>
</div>
<div class="time">{{ dateTime }}</div>
</div>
<div class="bottom">
<img class="bottom-img" src="@/assets/images/layout/background-bottom.png" alt="">
</div>
</div>
<div class="content-body">
<!-- <transition name="animation">
<router-view></router-view>
</transition> -->
<router-view v-slot="{ Component }">
<transition name="fade-right" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRouter, RouterLink } from 'vue-router'
import moment from "moment";
// import headerBackground from '@/assets/images/layout/header-background.svg'
export default defineComponent({
name: 'ComLayout',
setup() {
const router = useRouter()
const state = reactive({
dateTime: moment().format("HH:mm:ss"),
})
onMounted(() => {
setInterval(() => {
state.dateTime = moment().format("HH:mm:ss")
}, 1000)
})
return {
...toRefs(state),
}
}
})
</script>
<style scoped lang="less">
.layout-content {
width: 1920px;
position: relative;
// overflow: hidden;
.header {
background: url(@/assets/images/layout/background.png) no-repeat center;
background-size: cover;
height: 98px;
width: 100%;
padding: 25px 80px 33px 135px;
.project-name {
font-family: Alimama;
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 32px;
background: linear-gradient(180deg, #FFFFFF 0%, #27A6FF 123.44%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
text-shadow: 0px 4px 4px rgba(91, 176, 236, 0.3);
width: 320px;
}
.navigate {
// flex: 1;
// background: red;
padding: 20px 100px 0 0px;
height: 90px;
a {
text-decoration: none;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 20px;
text-align: center;
color: #A1D1EF;
opacity: 0.8;
}
.tab-bottom {
width: 195px;
height: 21px;
background: transparent;
}
.router-link-active {
.tab-item {
.tab-title {
color: #fff;
}
.tab-bottom {
background: url(@/assets/images/layout/tab-chosed.png) no-repeat center;
background-size: cover;
}
}
}
}
.time {
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 34px;
color: #C1E7FF;
}
}
.bottom {
width: 100%;
height: 6px;
position: absolute;
bottom: 11px;
z-index: 9;
/* background: red; */
}
}
@keyframes auto {
0% {
transform: translateX(0px);
/* background-position-x: 0; */
// left: 0;
}
10% {
left: 20%;
}
20% {
left: 40%;
}
30% {
left: 60%;
}
40% {
left: 80%;
}
50% {
transform: translateX(-121px);
/* background-position-x: 500px; */
left: 100%;
}
60% {
// transform: translateX(0px);
/* background-position-x: 0; */
left: 80%;
}
70% {
left: 60%;
}
80% {
left: 40%;
}
90% {
left: 20%;
}
100% {
left: 0;
}
}
.bottom-img {
/* background: url(@/assets/images/layout/background-bottom.png) no-repeat center;
background-size: 100%; */
height: 6px;
width: 121px;
left: 0px;
position: relative;
animation: auto 5s linear infinite;
}
.content-body {
width: 100%;
height: calc(1080px - 100px);
}
</style>
src/http/api/index.ts 0 → 100644
浏览文件 @ 274cd330
export * from './pay'
\ No newline at end of file
src/http/api/pay.ts 0 → 100644
浏览文件 @ 274cd330
// import service from "../request"
// /**
// * @description: 获取所有商品
// * @params {} params
// * @return {Promise}
// */
// export const findOrderInfo = (data) => {
// return service({
// url: "/trade/info/transNo/find",
// method: "POST",
// data
// });
// };
export { }
src/http/interface/index.ts 0 → 100644
浏览文件 @ 274cd330
export * from './IPay'
\ No newline at end of file
src/http/request/index.ts 0 → 100644
浏览文件 @ 274cd330
import axios, { AxiosResponse } from 'axios';
import { showMessage } from './status'
import { ElMessage, ElLoading } from 'element-plus'
let loading: any = null
const loadingConfig = {
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)'
}
console.log(localStorage.getItem("token"));
const service = axios.create({
baseURL: import.meta.env.VITE_BASE_URL + '/pbc', // url = base url + request url
timeout: 600000,
withCredentials: true, // send cookies when cross-domain requests
headers: {
"Cache-Control": "no-cache",
Pragma: "no-cache",
},
})
const loadingWhiteList = ['/trade/pay/send/result/search']
// axios实例拦截请求
service.interceptors.request.use(
config => {
console.log("🚀 ~ file: index.ts:28 ~ config:", config)
if (!loadingWhiteList.includes(config?.url ?? '')) {
loading = ElLoading.service(loadingConfig)
}
// 在此处添加请求头等，如添加 token
const token = localStorage.getItem("token");
config.headers["Authorization"] = token ? "Bearer " + localStorage.getItem("token") : '';
return config;
},
(error: any) => {
loading.close()
Promise.reject(error);
}
)
// axios实例拦截响应
service.interceptors.response.use(
(response: AxiosResponse) => {
loading.close()
if (response.status === 200) {
if (response.data.code === '200') {
return Promise.resolve(response.data);
} else {
ElMessage({
message: response.data.message,
type: 'error',
})
return Promise.reject(response.data);
}
} else {
ElMessage({
message: showMessage(response.status),
type: 'error',
})
return Promise.reject(response);
}
},
// 请求失败
(error: any) => {
loading.close()
const { response } = error;
if (response) {
// 请求已发出，但是不在2xx的范围
ElMessage({
message: showMessage(response.status),
type: 'error',
})
return Promise.reject(response.data);
} else {
ElMessage({
message: '网络连接异常,请稍后再试!',
type: 'error',
})
}
}
);
export default service
\ No newline at end of file
src/http/request/status.ts 0 → 100644
浏览文件 @ 274cd330
export const showMessage = (status: number | string): string => {
let message: string = "";
switch (status) {
case 400:
message = "请求错误(400)";
break;
case 401:
message = "登录信息已过期，请重新登录(401)";
break;
case 403:
message = "拒绝访问(403)";
break;
case 404:
message = "请求出错(404)";
break;
case 408:
message = "请求超时(408)";
break;
case 500:
message = "服务器错误(500)";
break;
case 501:
message = "服务未实现(501)";
break;
case 502:
message = "网络错误(502)";
break;
case 503:
message = "服务不可用(503)";
break;
case 504:
message = "网络超时(504)";
break;
case 505:
message = "HTTP版本不受支持(505)";
break;
default:
message = `连接出错(${status})!`;
}
return `${message}，请检查网络或联系管理员！`;
};
src/main.js 已删除 100644 → 0
浏览文件 @ a1a27944
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
createApp(App).mount('#app')
src/main.ts 0 → 100644
浏览文件 @ 274cd330
import { createApp } from 'vue'
import { createPinia } from 'pinia'
// import Antd from "ant-design-vue";
// import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import './assets/style/base.less'
const app = createApp(App)
// app.use(Antd)
app.use(ElementPlus)
app.use(createPinia())
app.use(router)
app.mount('#app')
src/router/index.ts 0 → 100644
浏览文件 @ 274cd330
import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/components/layout/Index.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'PageLayout',
component: Layout,
redirect: { name: 'EnergyDataPanorama' },
children: [
{
path: "/energyDataPanorama", // 能源数据全景
name: "EnergyDataPanorama",
meta: {
keepAlive: false
},
component: () => import(/* webpackChunkName: "EnergyDataPanorama" */ "@/views/EnergyDataPanorama/index.vue"),
redirect: { path: '/energyDataPanorama/GDP' },
children: [
{
path: "/energyDataPanorama/GDP", // 单位GDP能耗
component: () => import(/* webpackChunkName: "EnergyDataPanorama" */ "@/views/EnergyDataPanorama/energyDataPanorama_child_page/gdpEnergy.vue"),
},
{
path: "/energyDataPanorama/installedCapacity", // 总装机容量
component: () => import(/* webpackChunkName: "EnergyDataPanorama" */ "@/views/EnergyDataPanorama/energyDataPanorama_child_page/installedCapacity.vue"),
},
{
path: "/energyDataPanorama/yearSocialElectricity", // 年度社会用电量
component: () => import(/* webpackChunkName: "EnergyDataPanorama" */ "@/views/EnergyDataPanorama/energyDataPanorama_child_page/yearSocialElectricity.vue"),
},
{
path: "/energyDataPanorama/totalEnergyConsume", // 能源消费总量
component: () => import(/* webpackChunkName: "EnergyDataPanorama" */ "@/views/EnergyDataPanorama/energyDataPanorama_child_page/totalEnergyConsume.vue"),
},
{
path: "/energyDataPanorama/chargeStations", // 充电桩数量
component: () => import(/* webpackChunkName: "EnergyDataPanorama" */ "@/views/EnergyDataPanorama/energyDataPanorama_child_page/chargeStations.vue"),
},
{
path: "/energyDataPanorama/pageIntroduce", // 页面介绍
component: () => import(/* webpackChunkName: "EnergyDataPanorama" */ "@/views/EnergyDataPanorama/energyDataPanorama_child_page/pageIntroduce.vue"),
},
]
},
{
path: "/energyGoodPlace", // 能源好地方
name: "EnergyGoodPlace",
meta: {
keepAlive: false
},
component: () => import(/* webpackChunkName: "EnergyGoodPlace" */ "@/views/EnergyGoodPlace/index.vue")
},
{
path: "/enterpriseEnergyCenter", // 企业能效中心
name: "EnterpriseEnergyCenter",
meta: {
keepAlive: false
},
component: () => import(/* webpackChunkName: "EnterpriseEnergyCenter" */ "@/views/EnterpriseEnergyCenter/index.vue")
},
{
path: "/publicServiceCenter", // 公共服务中心
name: "PublicServiceCenter",
meta: {
keepAlive: false
},
component: () => import(/* webpackChunkName: "PublicServiceCenter" */ "@/views/PublicServiceCenter/index.vue")
},
{
path: "/dataSharingCenter", // 数据共享中心
name: "DataSharingCenter",
meta: {
keepAlive: false
},
component: () => import(/* webpackChunkName: "DataSharingCenter" */ "@/views/DataSharingCenter/index.vue")
},
]
},
]
})
export default router
src/stores/counter.ts 0 → 100644
浏览文件 @ 274cd330
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
src/views/AboutView.vue 0 → 100644
浏览文件 @ 274cd330
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>
src/views/EnergyDataPanorama/energyDataPanorama_child_page/gdpEnergy.vue 0 → 100644
浏览文件 @ 274cd330
<template>
<div class='content'>
<Map class="container" @areaChosed='areaChosed'></Map>
<div class='title xl-flex xl-column xl-between xl-stretch'>
<span>扬州市总单位GDP能耗</span>
<span>2325.71 <span>亿元</span></span>
</div>
<div class="chart">
<div class="chart-title">{{ state.chartTitle }}单位GDP能耗动态曲线走势</div>
<div class="chart-content" ref="myChart"></div>
</div>
</div>
</template>
<script setup>
// import Map from '@/components/echarts/3dMap' //echarts地图
import Map from '@/assets/images/energyDataPanorama/gdpEnergy/map.vue'
import Line from '@/components/echarts/gdpLine'
import { onMounted, reactive, ref } from "vue"
const myChart = ref(null)
const state = reactive({
map: '',
chartTitle: '宝应县'
})
const areaChosed = (i) => {
console.log(i);
state.chartTitle = i
}
onMounted(() => {
state.map = new Line(myChart.value, '')
})
</script>
<style lang="less" scoped>
.content {
width: 100%;
height: 100%;
position: relative
}
.container {
width: 802px;
height: 669px;
position: absolute;
z-index: 3;
}
.title {
width: 260px;
height: 115px;
position: absolute;
right: 16px;
top: 58px;
background: url(@/assets/images/energyDataPanorama/gdpEnergy/title-bgc.png) no-repeat center;
background-size: 100%;
padding: 10px 12px 15px;
&>span:nth-of-type(1) {
font-weight: 500;
font-size: 20px;
line-height: 28px;
color: #A1D1EF;
}
&>span:nth-of-type(2) {
font-weight: 500;
font-size: 24px;
line-height: 34px;
color: #FFFFFF;
span {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #A1D1EF;
}
}
}
.chart {
width: 390px;
height: 264px;
position: absolute;
right: 16px;
bottom: 20px;
background: rgba(3, 31, 58, 0.3);
backdrop-filter: blur(7.5px);
/* Note: backdrop-filter has minimal browser support */
/* 注意：背景过滤器对浏览器的支持最少 */
z-index: 99;
border-radius: 4px;
.chart-title {
height: 32px;
width: 100%;
background: url(@/assets/images/energyDataPanorama/gdpEnergy/chart-title-bgc.png) no-repeat center;
background-size: 100%;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #FFFFFF;
text-align: center;
line-height: 32px;
}
.chart-content {
width: 100%;
height: 232px;
}
}
</style>
src/views/EnergyDataPanorama/energyDataPanorama_child_page/installedCapacity.vue 0 → 100644
浏览文件 @ 274cd330
<template>
<div style="position: relative;width: 100%;height:100%;">
<MapSvg class="container">
</MapSvg>
<div class="position-info">
<div class="item"></div>
</div>
<div class='summay'>
<div class="title">
<div class="title-content">分布式光伏</div>
<div class="title-bottom"></div>
</div>
<div class="content xl-flex xl-column xl-between">
<div class="item xl-flex ">
<img src="@/assets/images/energyDataPanorama/installedCapacity/swl-icon.png" alt="" width="50">
<div class="item-value xl-flex xl-column xl-stretch">
<span>上网量</span>
<span>123123 <span>万Kwh</span></span>
</div>
</div>
<div class="item xl-flex ">
<img src="@/assets/images/energyDataPanorama/installedCapacity/yhzs-icon.png" alt="" width="50">
<div class="item-value xl-flex xl-column xl-stretch">
<span>用户总数</span>
<span>123123 <span>万Kwh</span></span>
</div>
</div>
<div class="item xl-flex ">
<img src="@/assets/images/energyDataPanorama/installedCapacity/fdl-icon.png" alt="" width="50">
<div class="item-value xl-flex xl-column xl-stretch">
<span>发电量</span>
<span>123123 <span>万Kwh</span></span>
</div>
</div>
<div class="item xl-flex ">
<img src="@/assets/images/energyDataPanorama/installedCapacity/zzjrl-icon.png" alt="" width="50">
<div class="item-value xl-flex xl-column xl-stretch">
<span>总装机容量</span>
<span>123123 <span>万Kwh</span></span>
</div>
</div>
</div>
</div>
<Lenged class="lenged"></Lenged>
<!-- <img src="@/assets/images/energyDataPanorama/installedCapacity/legend-img.svg" alt=""> -->
</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
import Lenged from '@/assets/images/energyDataPanorama/installedCapacity/legend-img.vue'
import MapSvg from '@/assets/images/energyDataPanorama/installedCapacity/map-bgc.vue'
const a = ref(0)
</script>
<style lang="less" scoped>
.position-info {
width: 770px;
height: 580px;
position: absolute;
left: 280px;
top: 75px;
}
.container {
width: 100%;
height: 100%;
position: absolute;
}
.summay {
height: 410px;
min-width: 203px;
position: absolute;
top: 76px;
left: 32px;
z-index: 2;
.title {
width: 100%;
height: 50px;
// background: pink;
.title-content {
background: linear-gradient(180deg, #FFFFFF 0%, #27A6FF 123.44%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
transform: translate(13px, 13px);
font-size: 28px;
}
.title-bottom {
width: 100%;
height: 20px;
background: url(@/assets/images/energyDataPanorama/installedCapacity/title-bgc.png) no-repeat center;
background-size: 100%;
}
}
.content {
margin-top: 40px;
height: calc(410px - 50px - 40px);
.item {
height: 56px;
width: 100%;
img {
margin-right: 12px;
}
.item-value {
&>span:nth-of-type(1) {
font-weight: 500;
font-size: 16px;
line-height: 22px;
/* 辅助色1 */
color: #6AC1FF;
}
&>span:nth-of-type(2) {
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 34px;
/* identical to box height */
/* 二级字色 */
color: #A1D1EF;
span {
font-size: 16px;
}
}
}
}
}
}
.lenged {
width: 121px;
height: 180px;
position: absolute !important;
right: 32px !important;
bottom: 30px !important;
z-index: 2;
img {
width: 100%;
height: 100%;
}
}
</style>
src/views/EnergyDataPanorama/energyDataPanorama_child_page/totalEnergyConsume.vue 0 → 100644
浏览文件 @ 274cd330
<template>
<div class="container">
<div class="summary">
<div class="summary-title">
<span>三个产业碳排放量详情</span>
<div class="summary-title-bottom"></div>
</div>
<div class="summary-item">
<div class="summary-item-top xl-flex xl-justify-start">
<img src="@/assets/images/energyDataPanorama/totalEnergyConsume/summary-icon.png" width="50" alt="">
<div class="xl-flex xl-column xl-between xl-stretch">
<span class="type">第一产业</span>
<span class="value">90.24 <span>千克</span></span>
</div>
</div>
<div class="summary-item-bottom xl-flex xl-between xl-wrap">
<span class="label">煤 <span class="value">20</span> <span class="unit">千克</span></span>
<span class="label">电 <span class="value">20</span> <span class="unit">千克</span></span>
<span class="label">油 <span class="value">20</span> <span class="unit">千克</span></span>
<span class="label">气 <span class="value">20</span> <span class="unit">千克</span></span>
</div>
</div>
<div class="summary-item">
<div class="summary-item-top xl-flex xl-justify-start">
<img src="@/assets/images/energyDataPanorama/totalEnergyConsume/summary-icon.png" width="50" alt="">
<div class="xl-flex xl-column xl-between xl-stretch">
<span class="type">第二产业</span>
<span class="value">90.24 <span>千克</span></span>
</div>
</div>
<div class="summary-item-bottom xl-flex xl-between xl-wrap">
<span class="label">煤 <span class="value">20</span> <span class="unit">千克</span></span>
<span class="label">电 <span class="value">20</span> <span class="unit">千克</span></span>
<span class="label">油 <span class="value">20</span> <span class="unit">千克</span></span>
<span class="label">气 <span class="value">20</span> <span class="unit">千克</span></span>
</div>
</div>
<div class="summary-item">
<div class="summary-item-top xl-flex xl-justify-start">
<img src="@/assets/images/energyDataPanorama/totalEnergyConsume/summary-icon.png" width="50" alt="">
<div class="xl-flex xl-column xl-between xl-stretch">
<span class="type">第三产业</span>
<span class="value">90.24 <span>千克</span></span>
</div>
</div>
<div class="summary-item-bottom xl-flex xl-between xl-wrap">
<span class="label">煤 <span class="value">20</span> <span class="unit">千克</span></span>
<span class="label">电 <span class="value">20</span> <span class="unit">千克</span></span>
<span class="label">油 <span class="value">20</span> <span class="unit">千克</span></span>
<span class="label">气 <span class="value">20</span> <span class="unit">千克</span></span>
</div>
</div>
</div>
<div class="circle">
<div class="out-circle"></div>
<div class="middle-circle"></div>
<div class="in-circle"></div>
<div class="ear-circle1 ear-circle xl-flex xl-column xl-center">
<span>第一产业</span>
<span>899 <span>千克</span></span>
</div>
<div class="ear-circle2 ear-circle xl-flex xl-column xl-center">
<span>第二产业</span>
<span>899 <span>千克</span></span>
</div>
<div class="ear-circle3 ear-circle xl-flex xl-column xl-center">
<span>第三产业</span>
<span>899 <span>千克</span></span>
</div>
<div class="content xl-flex xl-column xl-between">
<span>能源消费总量折算碳排放量</span>
<span>899</span>
<span>千克</span>
</div>
</div>
</div>
</template>
<script setup >
import { ref } from "vue"
</script>
<style lang="less" scoped>
.container {
width: 100%;
height: 100%;
position: relative;
.summary {
width: 240px;
position: absolute;
top: 78px;
left: 40px;
.summary-title {
height: 50px;
width: 100%;
// background: red;
span {
display: inline-block;
font-weight: 600;
font-size: 24px;
line-height: 24px;
background: linear-gradient(180deg, #FFFFFF 0%, #27A6FF 123.44%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
transform: translateY(10px);
}
.summary-title-bottom {
width: 224px;
height: 21px;
background: url(@/assets/images/energyDataPanorama/totalEnergyConsume/summary-title-bgc.png) no-repeat center;
background-size: 100%;
}
}
.summary-item {
margin-top: 32px;
.summary-item-top {
img {
margin-right: 12px;
}
.type {
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 22px;
color: #A1D1EF;
}
.value {
font-style: normal;
font-weight: 500;
font-size: 26px;
line-height: 36px;
color: #FFFFFF;
span {
color: #A1D1EF;
font-size: 14px;
}
}
}
.summary-item-bottom {
height: 68px;
width: 200px;
.label {
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 22px;
color: #A1D1EF;
}
.value {
font-weight: 500;
font-size: 20px;
line-height: 28px;
color: #6AC1FF;
}
.unit {
font-size: 14px;
}
}
}
}
@keyframes roateClockWise {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes roateAntiClockWise {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0);
}
}
@keyframes roateClockWise1 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0);
}
}
.circle {
position: absolute;
left: 313px;
top: 46px;
.content {
width: 360px;
height: 160px;
position: absolute;
top: 267px;
left: 165px;
align-content: space-between;
span:first-child {
font-weight: 500;
font-size: 30px;
line-height: 42px;
color: #FFFFFF;
}
span:nth-of-type(2) {
font-style: normal;
font-weight: 600;
font-size: 48px;
line-height: 67px;
color: #FF744C;
}
span:last-child {
font-style: normal;
font-weight: 500;
font-size: 28px;
line-height: 39px;
color: #A1D1EF;
}
}
.out-circle {
position: absolute;
width: 513px;
height: 513px;
background: url(@/assets/images/energyDataPanorama/totalEnergyConsume/out-circle.png) no-repeat center;
background-size: 100%;
top: 90px;
left: 86px;
animation: roateClockWise 8s linear infinite;
}
.middle-circle {
width: 301px;
height: 301px;
position: absolute;
background: url(@/assets/images/energyDataPanorama/totalEnergyConsume/middle-circle.png) no-repeat center;
background-size: 100%;
top: 191.5px;
left: 191px;
}
.in-circle {
width: 287px;
height: 288px;
position: absolute;
background: url(@/assets/images/energyDataPanorama/totalEnergyConsume/in-circle.png) no-repeat center;
background-size: 100%;
top: 191.5px;
left: 191px;
animation: roateAntiClockWise 8s linear infinite;
}
.ear-circle {
&>span:first-child {
font-style: normal;
font-weight: 600;
font-size: 30px;
line-height: 42px;
color: #A1D1EF;
}
&>span:last-child {
font-style: normal;
font-weight: 600;
font-size: 32px;
line-height: 45px;
color: #FFFFFF;
span {
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 28px;
color: #A1D1EF;
}
}
}
.ear-circle1::before {
content: "";
width: 168px;
height: 168px;
position: absolute;
background: url(@/assets/images/energyDataPanorama/totalEnergyConsume/ear-circle.png) no-repeat center;
background-size: 100%;
top: 0px;
left: 0px;
z-index: -1;
animation: roateClockWise 12s ease-in-out infinite;
}
.ear-circle1 {
width: 168px;
height: 168px;
position: absolute;
// background: url(@/assets/images/energyDataPanorama/totalEnergyConsume/ear-circle.png) no-repeat center;
// background-size: 100%;
top: 0px;
left: 262px;
z-index: 20;
// animation: roateClockWise 12s ease-in-out infinite;
}
.ear-circle2::before {
content: "";
width: 168px;
height: 168px;
position: absolute;
background: url(@/assets/images/energyDataPanorama/totalEnergyConsume/ear-circle.png) no-repeat center;
background-size: 100%;
top: 0px;
left: 0px;
z-index: -1;
animation: roateClockWise 12s ease-in-out infinite;
}
.ear-circle2 {
width: 168px;
height: 168px;
position: absolute;
// background: url(@/assets/images/energyDataPanorama/totalEnergyConsume/ear-circle.png) no-repeat center;
// background-size: 100%;
top: 366px;
left: 0px;
z-index: 20;
// animation: roateClockWise 12s ease-in-out infinite;
}
.ear-circle3::before {
content: "";
width: 168px;
height: 168px;
position: absolute;
background: url(@/assets/images/energyDataPanorama/totalEnergyConsume/ear-circle.png) no-repeat center;
background-size: 100%;
top: 0px;
left: 0px;
z-index: -1;
animation: roateClockWise 12s ease-in-out infinite;
}
.ear-circle3 {
width: 168px;
height: 168px;
position: absolute;
// background: url(@/assets/images/energyDataPanorama/totalEnergyConsume/ear-circle.png) no-repeat center;
// background-size: 100%;
top: 370px;
left: 519px;
// animation: roateClockWise 12s ease-in-out infinite;
}
}
}
</style>
src/views/EnergyDataPanorama/energyDataPanorama_child_page/yearSocialElectricity.vue 0 → 100644
浏览文件 @ 274cd330
<template>
<div class="container">
<div class="summary">
<div class="summary-title">区域用电排名</div>
<div class="summary-content xl-flex xl-column xl-between xl-stretch">
<div class="summary-content-item xl-flex xl-justify-start">
<span class="orange">1</span>
<span>市区</span>
<span>100 <span>个</span></span>
</div>
<div class="summary-content-item xl-flex xl-justify-start">
<span class="orange">2</span>
<span>市区</span>
<span>100 <span>个</span></span>
</div>
<div class="summary-content-item xl-flex xl-justify-start">
<span class="orange">3</span>
<span>市区</span>
<span>100 <span>个</span></span>
</div>
<div class="summary-content-item xl-flex xl-justify-start">
<span class="blue">4</span>
<span>市区</span>
<span>100 <span>个</span></span>
</div>
<div class="summary-content-item xl-flex xl-justify-start">
<span class="blue">5</span>
<span>市区</span>
<span>100 <span>个</span></span>
</div>
</div>
</div>
<Map class="map"></Map>
<div class="title-item baoYing">
<span>用电量</span>
<span>246634</span>
<span>千瓦时</span>
</div>
<div class="title-item gaoYou">
<span>用电量</span>
<span>246634</span>
<span>千瓦时</span>
</div>
<div class="title-item jiangDu">
<span>用电量</span>
<span>246634</span>
<span>千瓦时</span>
</div>
<div class="title-item shiQu">
<span>用电量</span>
<span>246634</span>
<span>千瓦时</span>
</div>
<div class="title-item yiZheng">
<span>用电量</span>
<span>246634</span>
<span>千瓦时</span>
</div>
</div>
</template>
<script >
import { defineComponent } from "vue"
import Map from '@/assets/images/energyDataPanorama/yearSocialElectricity/map.vue'
export default defineComponent({
name: "yearSocialElectricityIndex",
components: {
// eslint-disable-next-line vue/no-reserved-component-names
Map
},
setup() { }
})
</script>
<style lang="less" scoped>
.container {
width: 100%;
height: 100%;
position: relative;
.summary {
width: 256px;
height: 290px;
position: absolute;
top: 78px;
left: 24px;
background: rgba(39, 166, 255, 0.1);
border: 1px solid #2791de;
.summary-title {
width: 100%;
height: 32px;
background: url(@/assets/images/energyDataPanorama/yearSocialElectricity/summary-title-bgc.png) no-repeat center;
background-size: 100%;
font-weight: 500;
font-size: 16px;
line-height: 32px;
color: #FFFFFF;
text-align: center;
}
.summary-content {
padding: 24px 16px 16px;
height: calc(290px - 32px);
.summary-content-item {
&>span:nth-of-type(2) {
font-weight: 500;
font-size: 16px;
line-height: 22px;
color: #6AC1FF;
margin-right: 24px;
}
&>span:first-child {
font-weight: 500;
font-size: 12px;
line-height: 17px;
text-align: center;
margin-right: 17.5px;
}
.orange {
color: #FFC0AE;
position: relative;
&::after {
display: block;
content: '';
width: 18px;
height: 18px;
background: #041A2B;
/* 辅助色2 */
/* 与箱高相同 */
border: 0.5px solid #FF744C;
box-shadow: inset 0px 0px 4px #FF744C, inset 0px 0px 4px #FF744C;
position: absolute;
border-radius: 50%;
left: -6.5px;
top: -3px;
z-index: -5;
}
}
.blue {
color: #6AC1FF;
position: relative;
&::after {
display: block;
content: '';
width: 18px;
height: 18px;
background: #041A2B;
border: 0.5px solid #27A6FF;
box-shadow: inset 0px 0px 4px #2EA8FD, inset 0px 0px 4px #2EA8FD;
position: absolute;
border-radius: 50%;
left: -6.5px;
top: -3px;
z-index: -5;
}
}
&>span:last-child {
font-weight: 500;
font-size: 24px;
line-height: 34px;
color: #A1D1EF;
span {
font-size: 16px;
}
}
}
}
}
.map {
position: absolute;
left: 310px;
top: 33px;
}
.title-item {
width: 142px;
height: 36px;
position: absolute;
padding-left: 4px;
span:nth-of-type(1) {
font-weight: 500;
font-size: 14px;
line-height: 36px;
text-align: center;
color: #A1D1EF;
}
span:nth-of-type(2) {
font-weight: 500;
font-size: 14px;
line-height: 36px;
text-align: center;
color: #FFFFFF;
}
span:nth-of-type(3) {
font-size: 12px;
line-height: 36px;
text-align: center;
color: #A1D1EF;
}
}
.baoYing {
right: 121px;
top: 215px;
}
.gaoYou {
right: 299px;
top: 281px;
}
.jiangDu {
right: 482px;
top: 448px;
}
.shiQu {
right: 593px;
top: 335px;
}
.yiZheng {
right: 620px;
top: 199px;
}
}
</style>
src/views/EnergyDataPanorama/index.vue 0 → 100644
浏览文件 @ 274cd330
此差异已折叠。
src/views/EnergyGoodPlace/index.vue 0 → 100644
浏览文件 @ 274cd330
<template>
<div class="container xl-flex xl-column xl-between">
<div class="content xl-flex xl-between">
<div class="my-video">
<!-- <LivePlayer :videoUrl="mp4URL"></LivePlayer> -->
<iframe :src="src" frameborder="0" style="width:100%;height: 100%;"></iframe>
<!-- <video id="videobox" class="video-js vjs-big-play-centered vjs-fluid" preload="auto" ref="videoRef"
autoplay="false" controls :poster="poster">
<source :src="src" /> // 视频地址
</video> -->
</div>
<div class="detail">
<div class="detail-name">宝应供电公司</div>
<div class="detail-content xl-flex xl-column xl-between">
<div class="detail-text">
“宝应供电公司创新思路，勇于探索，在全省率先打造县级能源大数据中心，服务地方经济社会发展，是落实‘双碳’战略，是推进数字经济发展的务实举措。”日前，县委常委、常务副县长魏建在县供电公司呈递的工作专项上作出批示，充分肯定该公司在“双碳”目标落地实践中的工作。另据悉，该项目获得“2022年扬州大数据开发应用创新大赛”一等奖。
为贯彻落实“四个革命、一个合作”能源安全新战略，全面加快低碳转型，实施碳排放总量和强度“双控”，县供电公司在县发改委指导下，充分挖掘宝应重点企业能源数据价值，率先在全省探索打造“县级能源大数据中心”，为我县能耗“双控”提供数据支撑，以数字化成果助推我县高质量发展，率先实现“碳达峰、碳中和”目标。
</div>
<div class="detail-btn" @click="seeApply">查看应用</div>
</div>
</div>
</div>
<div class="tab ">
<el-carousel height="178px" :autoplay="false" trigger="click" indicator-position="none" arrow="always">
<el-carousel-item v-for="item in 1" :key="item">
<div class=" xl-flex xl-around" style="height:100%">
<div class="tab-item" @click="goDetail(1)" :class="{ chosed: chosed == 1 }">区域综合能源协调控制</div>
<div class="tab-item" @click="goDetail(2)" :class="{ chosed: chosed == 2 }">区域综合能源协调控制</div>
<div class="tab-item" @click="goDetail(3)" :class="{ chosed: chosed == 3 }">区域综合能源协调控制</div>
<div class="tab-item" @click="goDetail(4)" :class="{ chosed: chosed == 4 }">区域综合能源协调控制</div>
</div>
</el-carousel-item>
</el-carousel>
<!-- <div class=" xl-flex xl-around" style="height:100%">
<div class="tab-item">区域综合能源协调控制</div>
<div class="tab-item">区域综合能源协调控制</div>
<div class="tab-item">区域综合能源协调控制</div>
<div class="tab-item">区域综合能源协调控制</div>
</div> -->
</div>
</div>
</template>
<script >
import { defineComponent, toRefs, reactive, ref, onMounted } from "vue"
import { useRouter, useRoute } from 'vue-router'
// import LivePlayer from '@liveqing/liveplayer-v3'
// import 'video.js/dist/video-js.css'
// import videojs from "video.js"
export default defineComponent({
name: "EnergyGoodPlaceIndex",
components: {
// LivePlayer
},
setup() {
const route = useRoute()
const router = useRouter()
// const videoRef = ref() // 获取video元素的引用实例对象
const src = ref('http://tb-robots-demo.yzdl.woodare.com/images/吐血筛选万篇资料，全方位帮你打好碳中和入局基础！/2.基础/1.视频类/碳中和与碳资产-节能协会.mp4')
// const poster = ref()
// const player = ref(null)
const state = reactive({
chosed: 1,
mp4URL: 'http://tb-robots-demo.yzdl.woodare.com/images/吐血筛选万篇资料，全方位帮你打好碳中和入局基础！/2.基础/1.视频类/碳中和与碳资产-节能协会.mp4'
})
const goDetail = (i) => {
state.chosed = i
}
const seeApply = () => {
window.open('https://www.baidu.com')
}
// const init = () => {
// // 这里的videoRef可以换成video元素的id "videobox"
// player.value = videojs(videoRef.value,
// {
// // 视频配置项
// //是否显示播放按钮
// bigPlayButton: true,
// // 封面图
// posterImage: true,
// errorDisplay: false,
// fluid: true, // 自适应宽高
// language: 'zh-CN',// 设置中文
// //设置小喇叭音量键
// controlBar: {
// fullscreenToggle: true,
// // 音量条的横向还是纵向显示
// volumePanel: {
// inline: false,
// },
// },
// muted: false // //静音模式 解决首次页面加载播放。
// }),
// () => {
// player.value.on("play"), () => {
// console.log("开始播放")
// }
// player.value.playbackRate(1)
// }
// }
// 最后运行init函数即可
// onMounted(() => {
// init();
// })
return {
...toRefs(state),
src,
goDetail,
router,
route,
seeApply
// videoRef,
// poster,
// init,
// player
}
}
})
</script>
<style lang="less" scoped>
.container {
width: 100%;
height: 100%;
position: relative;
padding: 24px;
.content {
width: 100%;
height: 734px;
.my-video {
width: 1329px;
height: 734px;
background: url(@/assets/images/energyGoodPlace/video-bgc.png) no-repeat center;
background-size: 100%;
padding: 24px;
/deep/ .vjs-fluid:not(.vjs-audio-only-mode) {
padding: 27.1% !important;
}
}
.detail {
width: 520px;
height: 734px;
background: url(@/assets/images/energyGoodPlace/company-introduce-bgc.png) no-repeat center;
background-size: 100%;
.detail-name {
width: 100%;
height: 40px;
text-align: center;
line-height: 40px;
font-style: normal;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
}
.detail-content {
width: 100%;
height: 694px;
padding: 36px 24px 31px;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 34px;
color: #FFFFFF;
.detail-btn {
background: linear-gradient(0deg, rgba(0, 22, 43, 0.4), rgba(0, 22, 43, 0.4)), #021839;
cursor: pointer;
border: 1px solid #FF744C;
box-shadow: inset 0px 0px 20px #FF744C;
border-radius: 4px;
width: 166px;
height: 48px;
text-align: center;
line-height: 48px;
}
}
}
}
.tab {
width: 1872px;
height: 178px;
background: rgba(0, 35, 67, 0.3);
box-shadow: inset 0px 0px 20px #27A6FF;
backdrop-filter: blur(7.5px);
/* Note: backdrop-filter has minimal browser support */
/* 注意：背景过滤器对浏览器的支持最少 */
.chosed {
width: 280px;
height: 66px;
background: url(@/assets/images/energyGoodPlace/tab-chosed-bgc.png) no-repeat center !important;
background-size: 100% !important;
}
border-radius: 4px;
/deep/ .el-carousel__arrow {
width: 46px;
height: 46px;
background: #051729;
/* 主色 */
border: 1px solid #27A6FF;
box-shadow: inset 0px 0px 10px #27A6FF, inset 0px 0px 10px #27A6FF;
.el-icon {
font-size: 25px;
}
}
.tab-item {
width: 280px;
height: 66px;
background: url(@/assets/images/energyGoodPlace/tab-nochosed-bgc.png) no-repeat center;
background-size: 100%;
font-weight: 500;
font-size: 18px;
line-height: 66px;
text-align: center;
color: #FFFFFF;
cursor: pointer;
}
}
}
</style>
src/views/EnterpriseEnergyCenter/index.vue 0 → 100644
浏览文件 @ 274cd330
<template>
<div class="container xl-flex xl-column xl-between">
</div>
</template>
<script >
import { defineComponent, toRefs, reactive, ref, onMounted } from "vue"
import { useRouter, useRoute } from 'vue-router'
export default defineComponent({
name: "EnterpriseEnergyCenterIndex",
setup() {
const route = useRoute()
const router = useRouter()
const state = reactive({})
return {
...toRefs(state),
route,
router
}
}
})
</script>
<style lang="less" scoped>
.container {
width: 100%;
height: 100%;
position: relative;
padding: 24px;
background: red;
}
</style>
src/views/HomeView.vue 0 → 100644
浏览文件 @ 274cd330
<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue'
</script>
<template>
<main>
<TheWelcome />
</main>
</template>
tsconfig.json 0 → 100644
浏览文件 @ 274cd330
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"references": [
{
"path": "./tsconfig.node.json"
}
]
}
tsconfig.node.json 0 → 100644
浏览文件 @ 274cd330
{
"extends": "@vue/tsconfig/tsconfig.node.json",
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
"compilerOptions": {
"composite": true,
"types": ["node"]
}
}
vite.config.js → vite.config.ts
浏览文件 @ 274cd330
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
server: { plugins: [vue()],
host: true resolve: {
}, alias: {
plugins: [vue()] '@': fileURLToPath(new URL('./src', import.meta.url))
}
}
}) })
yarn.lock 0 → 100644
浏览文件 @ 274cd330
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或