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*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
package-lock.json
node_modules
.DS_Store
......
core.27350 0 → 100644
浏览文件 @ 274cd330
文件已添加
env.d.ts 0 → 100644
浏览文件 @ 274cd330
/// <reference types="vite/client" />
index.html
浏览文件 @ 274cd330
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扬州市能源大数据中心</title>
<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>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
\ No newline at end of file
package-lock.json 0 → 100644
浏览文件 @ 274cd330
此差异已折叠。
package.json
浏览文件 @ 274cd330
{
"name": "vuejs-with-vite",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173"
},
"dependencies": {
"guess": "^1.0.2",
"vue": "^3.2.37"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.1",
"vite": "^3.0.1"
}
"name": "yangzhou",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "run-p type-check build-only",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
},
"dependencies": {
"@liveqing/liveplayer-v3": "^3.7.10",
"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>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
<header>
<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>
<RouterView />
</template>
<style scoped>
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>
<style scoped></style>
src/components/HelloWorld.vue
浏览文件 @ 274cd330
<script setup>
defineProps({
msg: {
type: String,
required: true
}
})
<script setup lang="ts">
defineProps<{
msg: string
}>()
</script>
<template>
......@@ -12,8 +9,8 @@ defineProps({
<h1 class="green">{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<a target="_blank" href="https://vitejs.dev/">Vite</a> +
<a target="_blank" href="https://vuejs.org/">Vue 3</a>.
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
</h3>
</div>
</template>
......
src/components/TheWelcome.vue
浏览文件 @ 274cd330
<script setup>
<script setup lang="ts">
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
......@@ -15,7 +15,7 @@ import SupportIcon from './icons/IconSupport.vue'
<template #heading>Documentation</template>
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.
</WelcomeItem>
......@@ -26,14 +26,13 @@ import SupportIcon from './icons/IconSupport.vue'
<template #heading>Tooling</template>
This project is served and bundled with
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
your components and web pages, check out
<a href="https://www.cypress.io/" target="_blank">Cypress</a> and
<a href="https://on.cypress.io/component" target="_blank"
>Cypress Component Testing</a
>.
<a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
recommended IDE setup is
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
you need to test your components and web pages, check out
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
<a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
<br />
......@@ -47,12 +46,12 @@ import SupportIcon from './icons/IconSupport.vue'
<template #heading>Ecosystem</template>
Get official tools and libraries for your project:
<a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>,
<a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
<a target="_blank" href="https://test-utils.vuejs.org/">Vue Test Utils</a>, and
<a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more
resources, we suggest paying
<a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
you need more resources, we suggest paying
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
a visit.
</WelcomeItem>
......@@ -63,11 +62,14 @@ import SupportIcon from './icons/IconSupport.vue'
<template #heading>Community</template>
Got stuck? Ask your question on
<a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
<a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
You should also subscribe to
<a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
<a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
Discord server, or
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
>StackOverflow</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.
</WelcomeItem>
......@@ -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
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>
</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 vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
server: {
host: true
},
plugins: [vue()]
plugins: [vue()],
resolve: {
alias: {
'@': 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.
先完成此消息的编辑！
想要评论请 注册 或