zzkj/smart_storage_web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: zzkj:release
Branches Tags
zzkj:paris_france_web zzkj:Chinese zzkj:release zzkj:master
...
compare: zzkj:a7fb35d60015048da5bb449828f57f2468f7073e
Branches Tags
zzkj:paris_france_web zzkj:Chinese zzkj:release zzkj:master

5 Commits
release ... a7fb35d600

Author SHA1 Message Date
huangjp
a7fb35d600 大屏英文版代码 2025-08-14 14:36:48 +08:00
huangjp
2963a635cf 海外版本天气调整获取方式，大屏不显示天气 2025-07-22 15:13:50 +08:00
huangjp
c5d5ed77bf 隐私政策文件及配置 2025-07-16 09:14:02 +08:00
huangjp
deb080fed4 英文版：首页修改，左侧导航tooltip 2025-07-14 17:19:21 +08:00
huangjp
1772cc3d94 新建分支 2025-07-11 16:51:54 +08:00
23 changed files with 397 additions and 111 deletions
Expand all files Collapse all files

2
.env.development
View File

@ -4,7 +4,7 @@ ENV = 'development'
# base api //http://192.168.1.181:8000/api 192.168.1.199:8000/api // http://124.71.192.230:8000/api // http://127.0.0.1:4523/m1/1450402-0-default # base api //http://192.168.1.181:8000/api 192.168.1.199:8000/api // http://124.71.192.230:8000/api // http://127.0.0.1:4523/m1/1450402-0-default
VUE_APP_BASE_API = 'http://121.237.176.143:9091/api' VUE_APP_BASE_API = 'https://zetatech.zzkj-cloud.com/api'
VUE_APP_VISUALE_API = http://192.168.0.82:9527 VUE_APP_VISUALE_API = http://192.168.0.82:9527
VUE_APP_ZUTAI_API = http://192.168.100.83:8001 VUE_APP_ZUTAI_API = http://192.168.100.83:8001

2
.env.production
View File

@ -2,5 +2,5 @@
ENV = 'production' ENV = 'production'
# base api # base api
VUE_APP_BASE_API = 'http://121.237.176.143:8001/api' VUE_APP_BASE_API = 'https://zetatech.zzkj-cloud.com/api'

161
public/app-privacy-en.html Normal file
View File

@ -0,0 +1,161 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Privacy Policy</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
}
h1 {
color: blue;
text-align: center; /* 标题居中 */
}
h2 {
color: blue;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
ul {
list-style-type: disc;
margin-left: 20px;
}
ol {
margin-left: 20px;
}
.section {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Privacy Policy</h1>
<div class="section">
<h2>Introduction</h2>
<p>ZETATECH HONG KONG INVESTMENT LIMITED (hereinafter referred to as "we") highly values the protection of personal information and strictly complies with applicable data protection laws and regulations. We sincerely appreciate your trust in this application.</p>
<p>As a service provider dedicated to [application business areas such as energy storage project display], we fully understand the importance of protecting user privacy globally. This Privacy Policy aims to clearly explain how we collect, use, store, share, and protect your personal information, ensuring our practices meet international data protection standards and comply with legal requirements in each region where we operate, including but not limited to the EU General Data Protection Regulation (GDPR), California Consumer Privacy Act (CCPA), the Cybersecurity Law of the People's Republic of China, the Personal Information Protection Law of the People's Republic of China, and the Data Security Law of the People's Republic of China.</p>
</div>
<div class="section">
<h2>1. Scope and Methods of Information Collection</h2>
<p>When you use this application (including accessing features within the app, registering an account, using services, etc.), we may directly collect the following personal information:</p>
<h3>(1) Basic Business Required Information</h3>
<ul>
<li>Basic identification information: phone number/email address (for verification), username, password, IP address (security risk control);</li>
<li>Device and network information: IP address, device model, operating system version, device identifier (such as IMEI/Android ID/OpenUDID, OAID, device model, etc.), network type (Wi-Fi/mobile network), browser type, etc. (to ensure service stability, security risk control, and functional adaptation);</li>
<li>Log information: access records, operation logs, error logs (to optimize service);</li>
<li>Location services: real-time location information (requires enabling location permissions for querying nearby energy storage sites);</li>
<li>Permission descriptions: reading device status (to ensure login security and obtain OAID information), network access (data transmission).</li>
</ul>
<h3>(2) Optional Feature Additional Information</h3>
<ul>
<li>Location services: real-time location information (requires enabling location permissions for querying nearby energy storage sites)</li>
<li>Storage permissions: read/write external storage (caching map data to reduce data consumption)</li>
<li>All additional functions require separate authorization; refusal does not affect basic services.</li>
</ul>
</div>
<div class="section">
<h2>2. Purpose of Information Usage</h2>
<p>The collected personal information will be used for the following reasonable and necessary purposes:</p>
<ol>
<li>Providing basic services: implementing account registration/login, energy storage project display and interaction, business process handling (e.g., order/service applications), customer service responses, and other core functionalities;</li>
<li>Ensuring security and compliance: performing security risk control through device/network information (identifying abnormal logins, preventing malicious attacks), complying with legal requirements (such as retaining data for regulatory inspection);</li>
<li>Business operations and improvements: internal data analysis (e.g., analyzing user needs, evaluating service effectiveness) to drive product iteration and service upgrades;</li>
</ol>
</div>
<div class="section">
<h2>3. Cross-border Data Transfer</h2>
<p>Normally, your personal information will be stored in [the regions where the application servers are located, e.g., domestic Huawei Cloud server (Amazon Web Services server in Paris, France)].</p>
<p>To ensure data security, we take the following measures:</p>
<ol>
<li>Compliance assessment and authorization: conducting legality assessments on cross-border data transfers to ensure compliance with domestic and target region data protection regulations;</li>
<li>Technical protection: adopting encryption during transmission, access controls, and other technical measures to reduce the risk of data leakage;</li>
<li>Contractual constraints: signing strict data protection agreements with overseas recipients, clarifying both parties' responsibilities and obligations, requiring them to safeguard data security.</li>
</ol>
</div>
<div class="section">
<h2>4. Sharing and Disclosure of Information</h2>
<p>We commit to strictly keeping your personal information confidential and will not share or disclose it to any unrelated third parties except under the following circumstances:</p>
<h3>(1) Necessary Business Collaboration</h3>
<p>We delegate third-party providers such as Alibaba Cloud, Huawei Cloud, and Amazon Web Services to provide technical support, authorizing them to process information only within necessary limits and having signed strict confidentiality agreements.</p>
<p>We share necessary information with carefully selected third-party service providers (e.g., cloud service providers, data analytics companies) to support application functionality implementation (e.g., server hosting, data statistics and analysis). We will only share the minimum scope of information required to complete the collaboration and require partners to sign confidentiality agreements to constrain their data processing activities.</p>
<h3>(2) Legal Requirements</h3>
<p>In cases of mandatory legal requirements (e.g., court subpoenas, administrative investigations) or fulfilling statutory obligations (e.g., cooperating with regulatory compliance checks), we may legally disclose necessary personal information.</p>
<h3>(3) Corporate Restructuring/Mergers & Acquisitions</h3>
<p>If there is a significant change such as corporate merger, division, or asset transfer, we will follow the principles of "legality, necessity, minimization" when transferring personal information and notify you in advance through prominent means (e.g., in-app announcements, emails).</p>
</div>
<div class="section">
<h2>5. Information Security and Protection</h2>
<p>We are committed to protecting your personal information through both technical and management measures:</p>
<h3>(1) Technical Protection</h3>
<ul>
<li>Implementing data encryption (e.g., transmission encryption, storage encryption), access control (e.g., account password verification, tiered permission management), security audits (regularly checking system logs), etc., to prevent data leakage, tampering, and unauthorized access;</li>
<li>Real-time monitoring of important systems and services to promptly detect and address security vulnerabilities and abnormal access behaviors.</li>
</ul>
<h3>(2) Management Safeguards</h3>
<ul>
<li>Establishing strict data security management systems, clearly defining employee data access rights and operational guidelines;</li>
<li>Regularly conducting employee data security training to enhance overall privacy protection awareness;</li>
<li>Conducting compliance audits on data processing procedures to ensure adherence to policy requirements.</li>
</ul>
</div>
<div class="section">
<h2>6. Your Rights Regarding Personal Information and How to Exercise Them</h2>
<p>Based on applicable laws and regulations, you have the following rights regarding your personal information:</p>
<ul>
<li><strong>Query and Correction:</strong> Within the app path → My → Settings → Personal Information Management</li>
<li><strong>Delete Request:</strong> Supports account cancellation and scenarios of non-compliant information processing</li>
<li><strong>Permission Management:</strong> Phone settings → App Management → “STORA SMART” → disable corresponding permissions</li>
<li><strong>Account Deactivation:</strong> Within the app path → My → Settings → Account Security → Deactivate Account</li>
</ul>
</div>
<div class="section">
<h2>7. Changes and Notifications to This Privacy Policy</h2>
<p>We will periodically update this Privacy Policy to reflect business adjustments and regulatory changes. After updates, we will notify you via the following methods:</p>
<ul>
<li>In-app pop-ups, push notifications;</li>
<li>Email;</li>
<li>Prominent prompts on the “Settings - Privacy Policy” page within the app.</li>
</ul>
<p>Please review this policy regularly. Continuing to use the application constitutes acceptance of the updated terms.</p>
</div>
<div class="section">
<h2>8. Protection of Minors and Contact Information</h2>
<p>We do not actively collect personal information from minors under the age of 14. If the guardian discovers that personal information of minors under the age of 14 has been collected, or if you have any questions, suggestions, or need to exercise your personal information rights regarding this privacy policy, you can contact us through the following methods:</p>
<ul>
<li>Customer Service Email: <a href="mailto:info@zetatech-energy.com">info@zetatech-energy.com</a> (We will respond within 48 hours);</li>
<li>Mailing Address: No. 88 Gunan Street, Pidu District, Chengdu City, Sichuan Province (Postal Code: 611730).</li>
</ul>
<p>This policy is interpreted by ZETATECH HONG KONG INVESTMENT LIMITED. In case of conflicts with laws and regulations, laws and regulations shall prevail; if conflicting with other rules within the app, this policy (updated version) shall prevail.</p>
</div>
<div class="section">
<p><strong>[Release Date: July 15, 2025]</strong></p>
<p><strong>[Effective Date: July 15, 2025]</strong></p>
</div>
</body>
</html>

BIN
src/assets/login_images/zetatechlogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

4
src/filters/index.js
View File

@ -205,7 +205,7 @@ export function moneyUnitFormat(num) {
return 'RMB' return 'RMB'
} }
if (Number(num) >= 1E4) { if (Number(num) >= 1E4) {
return 'M RMB' return 'CNY10K'
} }
return 'RMB' return 'RMB'
} else { } else {
@ -231,7 +231,7 @@ export function KgUnitFormat(num) {
return 'kg' return 'kg'
} }
if (Number(num) >= 1E3) { if (Number(num) >= 1E3) {
return 'T' return 't'
} }
return 'kg' return 'kg'
} else { } else {

4
src/lang/en.js
View File

@ -89,7 +89,7 @@ export default {
sure: 'Sure', sure: 'Sure',
cancel: 'Cancel', cancel: 'Cancel',
more: 'More', more: 'More',
tem: 'Temperature', tem: 'TEMP',
xxxq: 'Message details', xxxq: 'Message details',
pleaseInput: 'Please input', pleaseInput: 'Please input',
sureRead: 'Confirm has been read', sureRead: 'Confirm has been read',
@ -106,7 +106,7 @@ export default {
noPagePermiss: 'There is no permission for this page' noPagePermiss: 'There is no permission for this page'
}, },
login: { login: {
title: 'Hoenergy smart energy storage management platform', title: 'Zetatech smart energy storage management platform',
logIn: 'Login', logIn: 'Login',
username: 'Username', username: 'Username',
password: 'Password', password: 'Password',

9
src/lang/screen/en.js
View File

@ -9,19 +9,19 @@ export default {
totalCharge: 'Total charge', totalCharge: 'Total charge',
totalDisCharge: 'Total discharge', totalDisCharge: 'Total discharge',
regionStation: 'Regional distribution of power stations', regionStation: 'Regional distribution of power stations',
totalStation: 'Total Station', totalStation: 'Total Stations',
noData: 'No Data', noData: 'No Data',
energySaving: 'Energy Conservation', energySaving: 'Energy Conservation',
planted: 'Equivalent tree plantings', planted: 'Equivalent tree plantings',
co2: 'Equivalent CO2 reduction', co2: 'Equivalent CO2 reduction',
coal: 'Equivalent coal savings', coal: 'Equivalent coal savings',
income: 'Equivalent economic income', income: 'Equivalent economic income',
tree: 'Tree', tree: 'Trees',
yesEarning: "Yesterday's Earnings", yesEarning: "Yesterday's Earnings",
annualEarning: 'Annual Income', annualEarning: 'Annual Income',
totalEarning: 'Total Revenue', totalEarning: 'Total Revenue',
groupEarning: 'Group Income', groupEarning: 'Group Income',
mRMB: 'Million RMB', mRMB: 'CNY10K',
high: 'High', high: 'High',
low: 'Low', low: 'Low',
comTime: 'Commission Time', comTime: 'Commission Time',
@ -37,7 +37,8 @@ export default {
stationName: 'Station Name', stationName: 'Station Name',
cap: 'Capacity(kWh)', cap: 'Capacity(kWh)',
Eff: 'Efficiency(%)', Eff: 'Efficiency(%)',
groupData: 'Group Income', groupData: 'Group statistics',
ztscreenTitle: 'Zetatech Smart energy storage management and control platform',
screenTitle: 'Smart energy storage management and control platform', screenTitle: 'Smart energy storage management and control platform',
xjpScreenTitle: 'FAVFAM Microgrid Al Monitor Platform', xjpScreenTitle: 'FAVFAM Microgrid Al Monitor Platform',
cncharge: 'Energy Storage power', cncharge: 'Energy Storage power',

5
src/lang/screen/zh.js
View File

@ -2,8 +2,8 @@ export default {
screen: { screen: {
capacity: '装机容量', capacity: '装机容量',
stationNum: '电站个数', stationNum: '电站个数',
dayCharge: '日充电量', dailyCharge: '日充电量',
dayDisCharge: '日放电量', dailyDischarge: '日放电量',
yearCharge: '年充电量', yearCharge: '年充电量',
yearDisCharge: '年放电量', yearDisCharge: '年放电量',
totalCharge: '总充电量', totalCharge: '总充电量',
@ -38,6 +38,7 @@ export default {
cap: '容量(kWh)', cap: '容量(kWh)',
Eff: '转换效率(%)', Eff: '转换效率(%)',
groupData: '集团数据', groupData: '集团数据',
ztscreenTitle: '智慧储能管控平台',
screenTitle: '智慧储能管控平台', screenTitle: '智慧储能管控平台',
xjpScreenTitle: '新加坡微电网平台', xjpScreenTitle: '新加坡微电网平台',
cncharge: '储能发电量', cncharge: '储能发电量',

58
src/layout/components/Navbar.vue
View File

@ -88,9 +88,9 @@
class="others-wrapper" class="others-wrapper"
:style="{ 'min-width': clientWidth > 800 && language === 'zh' ? '520px' : '200px' }" :style="{ 'min-width': clientWidth > 800 && language === 'zh' ? '520px' : '200px' }"
> >
<div v-if="weatherData && clientWidth > 600 && language === 'zh'" class="weather"> <div v-if="weatherData && clientWidth > 600" class="weather">
<div v-if="+stationId !== 1069" class="item"> <div v-if="+stationId !== 1069" class="item">
<img :src="weather[weatherData.skyCon]" alt> <img :src="weatheren[weatherData.code]" alt>
</div> </div>
<div <div
v-if="weatherData && +stationId !== 1069" v-if="weatherData && +stationId !== 1069"
@ -104,7 +104,7 @@
<div class="item"> <div class="item">
<div class="weather-text">{{ weatherData.skyCon }}</div> <div class="weather-text">{{ weatherData.skyCon }}</div>
<div class="weather-text"> <div class="weather-text">
{{ $t('navbar.tem') }}{{ fixNumber(weatherData.minTemperature) }}℃-{{ {{ $t('navbar.tem') }} {{ fixNumber(weatherData.minTemperature) }}℃-{{
fixNumber(weatherData.maxTemperature) fixNumber(weatherData.maxTemperature)
}}℃ }}℃
</div> </div>
@ -401,6 +401,56 @@ export default {
yuzhuanqing, yuzhuanqing,
zhongxue, zhongxue,
zhongyu, zhongyu,
weatheren: {
1000: qing,
1003: duoyun,
1006: duoyun,
1009: yintian,
1030: wu,
1063: xiaoyu,
1066: xiaoxue,
1069: yujiaxue,
1072: yujiaxue,
1087: leiyu,
1114: daxue,
1117: daxue,
1135: wu,
1147: wu,
1150: xiaoyu,
1153: xiaoyu,
1168: yujiaxue,
1171: yujiaxue,
1180: xiaoyu,
1183: xiaoyu,
1186: zhongyu,
1189: zhongyu,
1192: dayu,
1195: dayu,
1198: yujiaxue,
1201: yujiaxue,
1204: leiyu,
1207: leiyu,
1210: xiaoxue,
1213: xiaoxue,
1216: zhongxue,
1219: zhongxue,
1222: daxue,
1225: daxue,
1237: yujiaxue,
1240: xiaoyu,
1243: dayu,
1246: baoyu,
1249: yujiaxue,
1252: yujiaxue,
1255: zhongxue,
1258: daxue,
1261: yujiaxue,
1264: yujiaxue,
1273: leiyu,
1276: leiyu,
1279: yujiaxue,
1282: yujiaxue
},
weather: { weather: {
晴: qing, 晴: qing,
少云: duoyun, 少云: duoyun,
@ -1049,7 +1099,7 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
// padding-right: 15px; // padding-right: 15px;
.iconfont { .iconfont {
font-size: 40px; font-size: 40px;

7
src/layout/components/Sidebar/index.vue
View File

@ -26,13 +26,18 @@
:collapse-transition="false" :collapse-transition="false"
mode="vertical" mode="vertical"
> >
<sidebar-item <el-tooltip
v-for="route in menuList" v-for="route in menuList"
:key="route.id" :key="route.id"
:content="route.title"
placement="top-start"
>
<sidebar-item
:item="route" :item="route"
:base-path="route.url" :base-path="route.url"
:active-path="activePath" :active-path="activePath"
/> />
</el-tooltip>
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
<div class="open-btn" @click="handleClickOutside"> <div class="open-btn" @click="handleClickOutside">

3
src/permission.js
View File

@ -14,7 +14,8 @@ const whiteList = [
'/screen', '/screen',
'/new-screen', '/new-screen',
'/new-screen-zz', '/new-screen-zz',
'/common-screen' '/common-screen',
'/app-privacy-en.html'
] // no redirect whitelist ] // no redirect whitelist
router.beforeEach(async(to, from, next) => { router.beforeEach(async(to, from, next) => {

22
src/views/login/index.vue
View File

@ -6,9 +6,7 @@
<img :src="logo"> <img :src="logo">
</div> </div>
<div class="title"> <div class="title">Zetatech smart energy storage management platform</div>
智慧储能管控平台
</div>
</div> </div>
<el-form <el-form
ref="loginForm" ref="loginForm"
@ -25,7 +23,7 @@
<el-input <el-input
ref="username" ref="username"
v-model="loginForm.username" v-model="loginForm.username"
placeholder="账号" placeholder="username"
name="username" name="username"
type="text" type="text"
tabindex="1" tabindex="1"
@ -48,7 +46,7 @@
ref="password" ref="password"
v-model="loginForm.password" v-model="loginForm.password"
:type="passwordType" :type="passwordType"
placeholder="密码" placeholder="password"
name="password" name="password"
tabindex="2" tabindex="2"
autocomplete="on" autocomplete="on"
@ -70,7 +68,7 @@
class="login-btn" class="login-btn"
@click.native.prevent="handleLogin" @click.native.prevent="handleLogin"
> >
登录 Login
</el-button> </el-button>
<!-- <div class="forget-psd"> <!-- <div class="forget-psd">
<lang-select class="set-language" /> <lang-select class="set-language" />
@ -106,7 +104,7 @@
<script> <script>
// import LangSelect from '@/components/LangSelect' // import LangSelect from '@/components/LangSelect'
import SocialSign from './components/SocialSignin' import SocialSign from './components/SocialSignin'
import logo from '@/assets/login_images/zhongzilogo.png' import logo from '@/assets/login_images/zetatechlogo.png'
// import { validURL } from '@/utils/validate' // import { validURL } from '@/utils/validate'
export default { export default {
@ -337,7 +335,7 @@ $light_gray: #eee;
.login-content { .login-content {
width: fit-content; width: fit-content;
max-width: 100%; max-width: 355px;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
margin-bottom: 40px; margin-bottom: 40px;
@ -346,7 +344,7 @@ $light_gray: #eee;
align-items: center; align-items: center;
// box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px; // box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
.title-container { .title-container {
width: 100%; // width: 100%;
position: relative; position: relative;
.logo { .logo {
width: 100%; width: 100%;
@ -358,9 +356,9 @@ $light_gray: #eee;
} }
.title { .title {
font-size: 2rem; font-size: 1.5rem;
color: #fff; color: #fff;
margin: 30px 20px 40px; margin: 30px 0 40px;
text-align: center; text-align: center;
letter-spacing: 5px; letter-spacing: 5px;
} }
@ -382,7 +380,7 @@ $light_gray: #eee;
.login-form-item { .login-form-item {
width: 100%; width: 100%;
background: #fff; background: #fff;
margin-bottom: 20px; margin-bottom: 25px;
::v-deep .el-form-item__content { ::v-deep .el-form-item__content {
display: flex; display: flex;
} }

17
src/views/new-screen-zz/components/center-bottom.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="center-bottom-warp"> <div class="center-bottom-warp">
<item :title="'日充放电对比'"> <item :title="$t('screen.chargeDischargeComparison')">
<dv-loading v-if="Loading">Loading...</dv-loading> <dv-loading v-if="Loading">Loading...</dv-loading>
<Chart v-else :options="options" /> <Chart v-else :options="options" />
</item> </item>
@ -20,6 +20,11 @@ export default {
Loading: true Loading: true
} }
}, },
computed: {
lang() {
return this.$store.getters.language
}
},
created() { created() {
}, },
@ -62,8 +67,8 @@ export default {
right: 30, right: 30,
itemWidth: 14, itemWidth: 14,
data: [ data: [
{ icon: 'image://' + dayChargeIcon, name: '充电' }, { icon: 'image://' + dayChargeIcon, name: this.$t('screen.charge') },
{ icon: 'image://' + dayDischargeIcon, name: '放电' } { icon: 'image://' + dayDischargeIcon, name: this.$t('screen.discharge') }
] ]
}, },
@ -129,7 +134,7 @@ export default {
// 柱体 // 柱体
{ {
name: '充电', name: this.$t('screen.charge'),
type: 'bar', type: 'bar',
barGap: '20%', barGap: '20%',
@ -157,7 +162,7 @@ export default {
data: dayCharge data: dayCharge
}, },
{ {
name: '放电', name: this.$t('screen.discharge'),
type: 'bar', type: 'bar',
barGap: '20%', barGap: '20%',
barCategoryGap: '50%', /* 多个并排柱子设置柱子之间的间距*/ barCategoryGap: '50%', /* 多个并排柱子设置柱子之间的间距*/
@ -189,7 +194,7 @@ export default {
} else { } else {
this.options = { this.options = {
title: { title: {
text: '暂无数据', text: this.$t('screen.noData'),
x: 'center', x: 'center',
y: 'center', y: 'center',
textStyle: { textStyle: {

12
src/views/new-screen-zz/components/center-top.vue
View File

@ -3,40 +3,40 @@
<div class="income"> <div class="income">
<div class="title"> <div class="title">
<span class="square" /> <span class="square" />
<span>昨日收益</span> <span>{{ $t('screen.yesEarning') }}</span>
</div> </div>
<div class="value"> <div class="value">
<template v-for="(item,index) in info.yestProfit"> <template v-for="(item,index) in info.yestProfit">
<div :key="index" class="number">{{ item }}</div> <div :key="index" class="number">{{ item }}</div>
</template> </template>
<div class="unit">万元</div> <div class="unit">{{ $t('screen.mRMB') }}</div>
</div> </div>
</div> </div>
<div class="income"> <div class="income">
<div class="title"> <div class="title">
<span class="square" /> <span class="square" />
<span>年收益</span> <span>{{ $t('screen.annualEarning') }}</span>
</div> </div>
<div class="value"> <div class="value">
<template v-for="(item,index) in info.yearProfit"> <template v-for="(item,index) in info.yearProfit">
<div :key="index" class="number">{{ item }}</div> <div :key="index" class="number">{{ item }}</div>
</template> </template>
<div class="unit">万元</div> <div class="unit">{{ $t('screen.mRMB') }}</div>
</div> </div>
</div> </div>
<div class="income"> <div class="income">
<div class="title"> <div class="title">
<span class="square" /> <span class="square" />
<span>总收益</span> <span>{{ $t('screen.totalEarning') }}</span>
</div> </div>
<div class="value"> <div class="value">
<template v-for="(item,index) in info.totalProfit"> <template v-for="(item,index) in info.totalProfit">
<div :key="index" class="number">{{ item }}</div> <div :key="index" class="number">{{ item }}</div>
</template> </template>
<div class="unit">万元</div> <div class="unit">{{ $t('screen.mRMB') }}</div>
</div> </div>
</div> </div>
</div> </div>

14
src/views/new-screen-zz/components/left-bottom.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<div class="left-bottom-warp"> <div class="left-bottom-warp">
<item title="节能减排"> <item :title="$t('screen.energySaving')">
<dv-loading v-if="loading">Loading...</dv-loading> <dv-loading v-if="loading">Loading...</dv-loading>
<div v-else class="top-all-box"> <div v-else class="top-all-box">
<div class="top-con-box"> <div class="top-con-box">
<div class="top-item-box"> <div class="top-item-box">
<div class="data">{{ info.treePlanting }}<span class="unit">棵</span></div> <div class="data">{{ info.treePlanting }}<span class="unit">{{ $t('screen.tree') }}</span></div>
<div class="title">等效植树量</div> <div class="title">{{ $t('screen.planted') }}</div>
<img :src="screenItemBg" class="item-bg-img"> <img :src="screenItemBg" class="item-bg-img">
</div> </div>
<div class="top-item-box"> <div class="top-item-box">
<div class="data">{{ info.reductionCO2 | kgFormat }}<span class="unit">{{ info.reductionCO2 | KgUnitFormat }}</span></div> <div class="data">{{ info.reductionCO2 | kgFormat }}<span class="unit">{{ info.reductionCO2 | KgUnitFormat }}</span></div>
<div class="title">等效CO2减排</div> <div class="title">{{ $t('screen.co2') }}</div>
<img :src="screenItemBg" class="item-bg-img"> <img :src="screenItemBg" class="item-bg-img">
</div> </div>
@ -19,12 +19,12 @@
<div class="top-con-box"> <div class="top-con-box">
<div class="top-item-box"> <div class="top-item-box">
<div class="data">{{ info.equivalentCoal | kgFormat }}<span class="unit">{{ info.equivalentCoal | KgUnitFormat }}</span></div> <div class="data">{{ info.equivalentCoal | kgFormat }}<span class="unit">{{ info.equivalentCoal | KgUnitFormat }}</span></div>
<div class="title">等效节约煤</div> <div class="title">{{ $t('screen.coal') }}</div>
<img :src="screenItemBg" class="item-bg-img"> <img :src="screenItemBg" class="item-bg-img">
</div> </div>
<div class="top-item-box"> <div class="top-item-box">
<div class="data">{{ info.income | moneyFormat }}<span class="unit">{{ info.income | moneyUnitFormat }}</span></div> <div class="data">{{ info.income | moneyFormat }}<span class="unit">{{ info.income | moneyUnitFormat }}</span></div>
<div class="title">等效经济收入</div> <div class="title">{{ $t('screen.income') }}</div>
<img :src="screenItemBg" class="item-bg-img"> <img :src="screenItemBg" class="item-bg-img">
</div> </div>
</div> </div>
@ -57,9 +57,7 @@ export default {
}, },
mounted() { mounted() {
}, },
methods: { methods: {
async getData(deptId) { async getData(deptId) {
try { try {
this.loading = true this.loading = true

4
src/views/new-screen-zz/components/left-center.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="left-center-warp"> <div class="left-center-warp">
<item :title="'电站区域分布'"> <item :title="$t('screen.regionStation')">
<dv-loading v-if="loading">Loading...</dv-loading> <dv-loading v-if="loading">Loading...</dv-loading>
<div v-else class="chart-box"> <div v-else class="chart-box">
<Chart :options="options" :class-name="'chart'" /> <Chart :options="options" :class-name="'chart'" />
@ -54,7 +54,7 @@ export default {
const count = this.arrCount(ydata) const count = this.arrCount(ydata)
this.options = { this.options = {
title: [{ title: [{
text: '电站总数', text: this.$t('screen.totalStation'),
subtext: count, subtext: count,
subtextStyle: { subtextStyle: {

62
src/views/new-screen-zz/components/left-top.vue
View File

@ -1,46 +1,78 @@
<template> <template>
<div class="left-top-warp"> <div class="left-top-warp">
<item> <item :title="$t('screen.groupData')">
<dv-loading v-if="loading">Loading...</dv-loading> <dv-loading v-if="loading">Loading...</dv-loading>
<div v-else class="top-all-box"> <div v-else class="top-all-box">
<div class="value-box"> <div class="value-box">
<div class="title">装机容量</div> <el-tooltip class="item" effect="dark" :content="$t('screen.capacity')" placement="top">
<div class="title">{{ $t('screen.capacity') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.capacity |kwhFormat" placement="top">
<div class="value">{{ info.capacity |kwhFormat }}</div> <div class="value">{{ info.capacity |kwhFormat }}</div>
</el-tooltip>
<div class="unit">{{ info.capacity | kwhUnitFormat }}</div> <div class="unit">{{ info.capacity | kwhUnitFormat }}</div>
</div> </div>
<div class="value-box"> <div class="value-box">
<div class="title">电站个数</div> <el-tooltip class="item" effect="dark" :content="$t('screen.stationNum')" placement="top">
<div class="title">{{ $t('screen.stationNum') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.stationNumber" placement="top">
<div class="value">{{ info.stationNumber }}</div> <div class="value">{{ info.stationNumber }}</div>
<div class="unit">个</div> </el-tooltip>
<div class="unit">{{ lang === 'zh'? '个':'' }}</div>
</div> </div>
<div class="value-box"> <div class="value-box">
<div class="title">{{ $t('dashboard.dailyCharge') }}</div> <el-tooltip class="item" effect="dark" :content="$t('screen.dailyCharge')" placement="top">
<div class="title">{{ $t('screen.dailyCharge') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.dayCharge |kwhFormat" placement="top">
<div class="value">{{ info.dayCharge |kwhFormat }}</div> <div class="value">{{ info.dayCharge |kwhFormat }}</div>
</el-tooltip>
<div class="unit">{{ info.dayCharge |kwhUnitFormat }}</div> <div class="unit">{{ info.dayCharge |kwhUnitFormat }}</div>
</div> </div>
<div class="value-box"> <div class="value-box">
<div class="title">{{ $t('dashboard.dailyDischarge') }}</div> <el-tooltip class="item" effect="dark" :content="$t('screen.dailyDischarge')" placement="top">
<div class="title">{{ $t('screen.dailyDischarge') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.dayDischarge |kwhFormat" placement="top">
<div class="value">{{ info.dayDischarge |kwhFormat }}</div> <div class="value">{{ info.dayDischarge |kwhFormat }}</div>
</el-tooltip>
<div class="unit">{{ info.dayDischarge |kwhUnitFormat }}</div> <div class="unit">{{ info.dayDischarge |kwhUnitFormat }}</div>
</div> </div>
<div class="value-box"> <div class="value-box">
<div class="title">年充电量</div> <el-tooltip class="item" effect="dark" :content="$t('screen.yearCharge')" placement="top">
<div class="title">{{ $t('screen.yearCharge') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.yearCharge |kwhFormat" placement="top">
<div class="value">{{ info.yearCharge |kwhFormat }}</div> <div class="value">{{ info.yearCharge |kwhFormat }}</div>
</el-tooltip>
<div class="unit">{{ info.yearCharge |kwhUnitFormat }}</div> <div class="unit">{{ info.yearCharge |kwhUnitFormat }}</div>
</div> </div>
<div class="value-box"> <div class="value-box">
<div class="title">年放电量</div> <el-tooltip class="item" effect="dark" :content="$t('screen.yearDisCharge')" placement="top">
<div class="title">{{ $t('screen.yearDisCharge') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.yearDischarge |kwhFormat" placement="top">
<div class="value">{{ info.yearDischarge |kwhFormat }}</div> <div class="value">{{ info.yearDischarge |kwhFormat }}</div>
</el-tooltip>
<div class="unit">{{ info.yearDischarge |kwhUnitFormat }}</div> <div class="unit">{{ info.yearDischarge |kwhUnitFormat }}</div>
</div> </div>
<div class="value-box"> <div class="value-box">
<div class="title">总充电量</div> <el-tooltip class="item" effect="dark" :content="$t('screen.totalCharge')" placement="top">
<div class="title">{{ $t('screen.totalCharge') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.totalCharge |kwhFormat" placement="top">
<div class="value">{{ info.totalCharge |kwhFormat }}</div> <div class="value">{{ info.totalCharge |kwhFormat }}</div>
</el-tooltip>
<div class="unit">{{ info.totalCharge |kwhUnitFormat }}</div> <div class="unit">{{ info.totalCharge |kwhUnitFormat }}</div>
</div> </div>
<div class="value-box"> <div class="value-box">
<div class="title">{{ $t('dashboard.totalDischarge') }}</div> <el-tooltip class="item" effect="dark" :content="$t('screen.totalDisCharge')" placement="top">
<div class="title">{{ $t('screen.totalDisCharge') }}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="info.totalDischarge |kwhFormat" placement="top">
<div class="value">{{ info.totalDischarge |kwhFormat }}</div> <div class="value">{{ info.totalDischarge |kwhFormat }}</div>
</el-tooltip>
<div class="unit">{{ info.totalDischarge |kwhUnitFormat }}</div> <div class="unit">{{ info.totalDischarge |kwhUnitFormat }}</div>
</div> </div>
</div> </div>
@ -64,10 +96,14 @@ export default {
loading: true loading: true
} }
}, },
computed: {
lang() {
return this.$store.getters.language
}
},
watch: { watch: {
info: { info: {
handler(val) { handler(val) {
console.log(1111, val)
if (val) { if (val) {
this.loading = false this.loading = false
} else { } else {
@ -115,6 +151,10 @@ export default {
.title{ .title{
color: rgba(179, 221, 253, 1); color: rgba(179, 221, 253, 1);
overflow: hidden;
text-overflow: ellipsis;
min-width: 90px;
max-width: 90px;
padding-left: 16px; padding-left: 16px;
white-space: nowrap; white-space: nowrap;
} }

43
src/views/new-screen-zz/components/map-center.vue
View File

@ -14,8 +14,9 @@
</div> </div>
</template> </template>
<script> <script>
import chinaMap from '@/assets/mapJson/chinaMap.json' // import chinaMap from '@/assets/mapJson/chinaMap.json'
import { chinaMapOutline } from '@/assets/mapJson/chinaMapOut.js' import worldJson from 'echarts/map/json/world.json'
// import { chinaMapOutline } from '@/assets/mapJson/chinaMapOut.js'
import blue from '../../../assets/new-screen/map-blue.png' import blue from '../../../assets/new-screen/map-blue.png'
import { GetStationInfo, GetCapacity, GetRegionalDistribution } from '@/api/screen/zzScreen' import { GetStationInfo, GetCapacity, GetRegionalDistribution } from '@/api/screen/zzScreen'
export default { export default {
@ -95,15 +96,23 @@ export default {
this.getInitMap() this.getInitMap()
}, },
getInitMap() { getInitMap() {
this.$echarts.registerMap('china', chinaMap) this.$echarts.registerMap('world', worldJson)
this.$echarts.registerMap('chinaMapOutline', chinaMapOutline) // this.$echarts.registerMap('china', chinaMap)
// this.$echarts.registerMap('chinaMapOutline', chinaMapOutline)
this.pointData = [
{ name: 'Beijing', value: [116.4074, 39.9042] }, // 北京
{ name: 'New York', value: [-74.0060, 40.7128] }, // 纽约
{ name: 'London', value: [-0.1278, 51.5074] } // 伦敦
]
var series = [ var series = [
{ {
map: 'china', // map: 'china',
name: '国家',
map: 'world',
type: 'map', type: 'map',
roam: false, roam: false,
zoom: 1.65, // zoom: 1.65,
zoom: 1.1,
label: { label: {
normal: { normal: {
show: false, show: false,
@ -117,7 +126,8 @@ export default {
} }
} }
}, },
top: '29%', // top: '29%',
top: '10%',
tooltip: { tooltip: {
show: false show: false
}, },
@ -134,7 +144,8 @@ export default {
} }
} }
}, },
data: this.mapData // data: this.mapData
data: [{ name: 'China', value: 100 }]
}, },
{ {
@ -150,11 +161,10 @@ export default {
itemStyle: { itemStyle: {
normal: { normal: {
color: '#F4E925', color: '#F4E925',
shadowColor: '#333' shadowColor: '#333'
} }
}, },
symbolSize: 50, symbolSize: 10,
data: [this.pointData[this.pointIndex]] data: [this.pointData[this.pointIndex]]
// showEffectOn: 'render' // 加载完毕显示特效 // showEffectOn: 'render' // 加载完毕显示特效
@ -167,7 +177,7 @@ export default {
max: Math.max(...this.stationNum), max: Math.max(...this.stationNum),
right: 'right', right: 'right',
top: 'bottom', top: 'bottom',
text: ['高(电站个数)', '低(电站个数)'], text: [this.$t('screen.high') + '(' + this.$t('screen.stationNum') + ')', this.$t('screen.low') + '(' + this.$t('screen.stationNum') + ')'],
calculable: true, calculable: true,
inRange: { inRange: {
// color: ['#5edfd6', '#37d4cf', '#14c9c9', '#0da5aa', '#07828b'] // color: ['#5edfd6', '#37d4cf', '#14c9c9', '#0da5aa', '#07828b']
@ -214,10 +224,11 @@ export default {
geo: [ geo: [
{ {
silent: true, silent: true,
map: 'chinaMapOutline', // map: 'chinaMapOutline',
map: 'world',
zoom: 1.1, zoom: 1.1,
top: '10%', // top: '10%',
label: { label: {
normal: { normal: {
show: false, show: false,
@ -255,8 +266,8 @@ export default {
{ {
silent: true, silent: true,
map: 'chinaMapOutline', map: 'chinaMapOutline',
// zoom: 1.1,
zoom: 1.1, zoom: 1.2,
top: '7%', top: '7%',
label: { label: {
normal: { normal: {

11
src/views/new-screen-zz/components/right-bottom.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="left-bottom-warp"> <div class="left-bottom-warp">
<item title="系统转换效率"> <item :title="$t('screen.sysEff')">
<dv-loading v-if="tableLoading">Loading...</dv-loading> <dv-loading v-if="tableLoading">Loading...</dv-loading>
<div v-else class="con-box"> <div v-else class="con-box">
<SwiperTable <SwiperTable
@ -27,9 +27,9 @@ export default {
data() { data() {
return { return {
tableLoading: false, tableLoading: false,
tableTitles: ['电站名称', '容量(kWh)', '转换效率(%)'], tableTitles: [this.$t('screen.stationName'), this.$t('screen.cap'), this.$t('screen.Eff')],
tableData: [], tableData: [],
widths: ['200', 'auto', 'auto', 'auto'], widths: ['auto', 'auto', 'auto', 'auto'],
contentHeight: 200, contentHeight: 200,
tableColumns: [ tableColumns: [
'stationName', 'stationName',
@ -66,5 +66,8 @@ export default {
width: 100%; width: 100%;
padding-top: 10px; padding-top: 10px;
} }
} }
.class1{
color: #F4E925;
}
</style> </style>

4
src/views/new-screen-zz/components/right-center.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="right-top-warp"> <div class="right-top-warp">
<item :title="'充放收益排名'"> <item :title="$t('screen.earningRanking')">
<dv-loading v-if="tableLoading">Loading...</dv-loading> <dv-loading v-if="tableLoading">Loading...</dv-loading>
<div v-else class="con-box"> <div v-else class="con-box">
<SwiperTableCenter <SwiperTableCenter
@ -47,7 +47,7 @@ export default {
}) })
this.tableData = res.data this.tableData = res.data
this.tableData.map((el) => { this.tableData.map((el) => {
el.incomeValue = el.incomeValue + '万元' el.incomeValue = el.incomeValue + ' ' + this.$t('screen.mRMB')
}) })
} finally { } finally {
this.tableLoading = false this.tableLoading = false

14
src/views/new-screen-zz/components/right-top.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="right-top-warp"> <div class="right-top-warp">
<item title="集团收益"> <item :title="$t('screen.groupEarning')">
<div class="box"> <div class="box">
<div class="button-box"> <div class="button-box">
<el-tabs <el-tabs
@ -8,9 +8,9 @@
tab-position="top" tab-position="top"
@tab-click="handleClick" @tab-click="handleClick"
> >
<el-tab-pane label="近30天" name="day" /> <el-tab-pane :label="$t('screen.daily30')" name="day" />
<el-tab-pane label="月度" name="month" /> <el-tab-pane :label="$t('screen.monthly')" name="month" />
<el-tab-pane label="年度" name="year" /> <el-tab-pane :label="$t('screen.yearly')" name="year" />
</el-tabs> </el-tabs>
</div> </div>
<div class="chart-box"> <div class="chart-box">
@ -108,7 +108,7 @@ export default {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: '万元', name: this.$t('screen.mRMB'),
nameTextStyle: { nameTextStyle: {
color: '#6E7174', color: '#6E7174',
fontSize: 12, fontSize: 12,
@ -137,7 +137,7 @@ export default {
], ],
series: [ series: [
{ {
name: '收益', name: this.$t('screen.earning'),
type: 'line', type: 'line',
data: profit_data, data: profit_data,
smooth: true, smooth: true,
@ -176,7 +176,7 @@ export default {
} else { } else {
this.options = { this.options = {
title: { title: {
text: '暂无数据', text: this.$t('screen.noData'),
x: 'center', x: 'center',
y: 'center', y: 'center',
textStyle: { textStyle: {

27
src/views/new-screen-zz/index.vue
View File

@ -7,16 +7,13 @@
<div class="title_wrap"> <div class="title_wrap">
<div class="title"> <div class="title">
<span class="left-title" /> <span class="left-title" />
<span class="title-text">中自智慧储能管控平台</span> <span :class="lang === 'zh'? 'title-text' : 'en-eitle-text'">{{ $t('screen.ztscreenTitle') }}</span>
<div class="right-title"> <div class="right-title">
<span>{{ time }}</span> <span>{{ time }}</span>
<span class="weather">{{ weatherInfo ? weatherInfo.skyCon : '' }} {{ weatherInfo? weatherInfo.minTemperature :'' }}℃ ~ {{ weatherInfo ? weatherInfo.maxTemperature : '' }}℃</span> <!-- <span class="weather">{{ weatherInfo ? weatherInfo.skyCon : '' }} {{ weatherInfo? weatherInfo.minTemperature :'' }}℃ ~ {{ weatherInfo ? weatherInfo.maxTemperature : '' }}℃</span> -->
</div>
</div>
</div> </div>
</div> </div>
<div class="box"> <div class="box">
<div class="left"> <div class="left">
<div class="left-top"> <div class="left-top">
@ -97,6 +94,11 @@ export default {
} }
} }
}, },
computed: {
lang() {
return this.$store.getters.language
}
},
created() { created() {
this.changeFavicon(`./zhongzi.ico`) this.changeFavicon(`./zhongzi.ico`)
setInterval(() => { setInterval(() => {
@ -142,7 +144,7 @@ export default {
this.$refs.RightTopRef.getData(this.deptId) this.$refs.RightTopRef.getData(this.deptId)
this.$refs.RightCenterRef.getData(this.deptId) this.$refs.RightCenterRef.getData(this.deptId)
this.$refs.RightRightRef.getData(this.deptId) this.$refs.RightRightRef.getData(this.deptId)
this.getWeatherInfo() // this.getWeatherInfo() 国外大屏不展示天气
this.$refs.MapCenterRef.getStationNum(this.deptId) this.$refs.MapCenterRef.getStationNum(this.deptId)
this.$refs.MapCenterRef.getData(this.deptId) this.$refs.MapCenterRef.getData(this.deptId)
this.$refs.MapCenterRef.getLeftData(this.deptId) this.$refs.MapCenterRef.getLeftData(this.deptId)
@ -349,7 +351,16 @@ $margin: 16px;
margin-left: 16px; margin-left: 16px;
} }
} }
.en-eitle-text{
font-size: 18px;
letter-spacing: 1px;
font-weight: 900;
width: 100%;
background: linear-gradient(92deg, #fff, #fff 48.85254%, #fff);
font-family: PangMenNumber;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.title-text { .title-text {
font-size: 38px; font-size: 38px;
font-weight: 900; font-weight: 900;

1
src/views/system/department/select.js
View File

@ -13,6 +13,7 @@ const leftBottomList = [
] ]
const topCenterList = [ const topCenterList = [
{ label: '215kWh', value: 'topCenter_215' }, { label: '215kWh', value: 'topCenter_215' },
{ label: '261光储', value: 'gunanjieTopCenter' },
{ label: '标准', value: 'commonTopCenter' }, { label: '标准', value: 'commonTopCenter' },
{ label: '单柜配置', value: 'onceTopCenter' }, { label: '单柜配置', value: 'onceTopCenter' },
{ label: '二合一', value: 'secondTopCenter' }, { label: '二合一', value: 'secondTopCenter' },