bot_ym
/
water-management-system
Следить 6
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
智慧水务管理系统 - 精河县供水工程综合管理平台
72 коммитов
90 веток
Дерево: 85df71fc28
веток Теги
${ item.name }
Создать ветку ${ searchTerm }
из '85df71fc28'
${ noResults }
water-management-system/frontend/public/operation-dashboard.html

operation-dashboard.html 31KB
История Исходник

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849 
  1. <!DOCTYPE html>

  2. <html lang="zh-CN">

  3. <head>

  4.     <meta charset="UTF-8">

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6.     <title>供水运营专题大屏</title>

  7.     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  8.     <script src="https://unpkg.com/echarts@5.5.0/dist/echarts.min.js"></script>

  9.     <script src="https://unpkg.com/echarts-liquidfill@3.0.0/dist/echarts-liquidfill.min.js"></script>

  10.     <link rel="stylesheet" href="https://unpkg.com/element-plus@2.8.0/dist/index.css">

  11.     <script src="https://unpkg.com/element-plus@2.8.0/dist/index.full.js"></script>

  12.     <style>

  13.         * {

  14.             margin: 0;

  15.             padding: 0;

  16.             box-sizing: border-box;

  17.         }

  18.         

  19.         body {

  20.             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  21.             overflow: hidden;

  22.         }

  23.         

  24.         .operation-dashboard {

  25.             padding: 20px;

  26.             background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);

  27.             color: #fff;

  28.             min-height: 100vh;

  29.         }

  30.         

  31.         .dashboard-header {

  32.             text-align: center;

  33.             margin-bottom: 30px;

  34.         }

  35.         

  36.         .dashboard-header h1 {

  37.             font-size: 36px;

  38.             margin-bottom: 10px;

  39.             text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

  40.         }

  41.         

  42.         .header-info {

  43.             font-size: 16px;

  44.             opacity: 0.9;

  45.         }

  46.         

  47.         .status-normal {

  48.             color: #67c23a;

  49.             font-weight: bold;

  50.         }

  51.         

  52.         .core-metrics {

  53.             display: grid;

  54.             grid-template-columns: repeat(6, 1fr);

  55.             gap: 20px;

  56.             margin-bottom: 30px;

  57.         }

  58.         

  59.         .metric-card {

  60.             background: rgba(255,255,255,0.1);

  61.             border-radius: 12px;

  62.             padding: 20px;

  63.             backdrop-filter: blur(10px);

  64.             border: 1px solid rgba(255,255,255,0.2);

  65.             display: flex;

  66.             align-items: center;

  67.             transition: all 0.3s;

  68.         }

  69.         

  70.         .metric-card:hover {

  71.             transform: translateY(-2px);

  72.             background: rgba(255,255,255,0.15);

  73.         }

  74.         

  75.         .metric-icon {

  76.             width: 50px;

  77.             height: 50px;

  78.             border-radius: 10px;

  79.             display: flex;

  80.             align-items: center;

  81.             justify-content: center;

  82.             margin-right: 15px;

  83.             color: white;

  84.             font-size: 24px;

  85.         }

  86.         

  87.         .metric-content {

  88.             flex: 1;

  89.         }

  90.         

  91.         .metric-value {

  92.             font-size: 24px;

  93.             font-weight: bold;

  94.             margin-bottom: 5px;

  95.         }

  96.         

  97.         .metric-unit {

  98.             font-size: 14px;

  99.             opacity: 0.8;

  100.             margin-left: 4px;

  101.         }

  102.         

  103.         .metric-title {

  104.             font-size: 14px;

  105.             opacity: 0.9;

  106.             margin-bottom: 5px;

  107.         }

  108.         

  109.         .metric-trend {

  110.             font-size: 12px;

  111.             display: flex;

  112.             align-items: center;

  113.             gap: 4px;

  114.         }

  115.         

  116.         .trend-up {

  117.             color: #67c23a;

  118.         }

  119.         

  120.         .trend-down {

  121.             color: #f56c6c;

  122.         }

  123.         

  124.         .charts-grid {

  125.             display: grid;

  126.             grid-template-columns: 1fr 1.5fr 1fr;

  127.             gap: 20px;

  128.             margin-bottom: 30px;

  129.         }

  130.         

  131.         .chart-panel {

  132.             background: rgba(255,255,255,0.1);

  133.             border-radius: 12px;

  134.             padding: 20px;

  135.             backdrop-filter: blur(10px);

  136.             border: 1px solid rgba(255,255,255,0.2);

  137.             display: flex;

  138.             flex-direction: column;

  139.         }

  140.         

  141.         .chart-panel.large-panel {

  142.             grid-row: span 2;

  143.         }

  144.         

  145.         .panel-header {

  146.             display: flex;

  147.             justify-content: space-between;

  148.             align-items: center;

  149.             margin-bottom: 15px;

  150.         }

  151.         

  152.         .panel-header h3 {

  153.             font-size: 18px;

  154.             font-weight: 600;

  155.             margin: 0;

  156.         }

  157.         

  158.         .chart-container {

  159.             flex: 1;

  160.             min-height: 200px;

  161.         }

  162.         

  163.         .map-container {

  164.             flex: 1;

  165.             min-height: 300px;

  166.             background: rgba(0,0,0,0.2);

  167.             border-radius: 8px;

  168.             display: flex;

  169.             align-items: center;

  170.             justify-content: center;

  171.             color: rgba(255,255,255,0.7);

  172.         }

  173.         

  174.         .alarm-list {

  175.             flex: 1;

  176.             overflow-y: auto;

  177.         }

  178.         

  179.         .alarm-item {

  180.             background: rgba(255,255,255,0.1);

  181.             border-radius: 8px;

  182.             padding: 12px;

  183.             margin-bottom: 10px;

  184.             border-left: 4px solid;

  185.         }

  186.         

  187.         .alarm-item.warning {

  188.             border-left-color: #e6a23c;

  189.             background: rgba(230, 162, 60, 0.1);

  190.         }

  191.         

  192.         .alarm-item.danger {

  193.             border-left-color: #f56c6c;

  194.             background: rgba(245, 108, 108, 0.1);

  195.         }

  196.         

  197.         .alarm-item.info {

  198.             border-left-color: #909399;

  199.             background: rgba(144, 147, 153, 0.1);

  200.         }

  201.         

  202.         .alarm-time {

  203.             font-size: 12px;

  204.             opacity: 0.8;

  205.             margin-bottom: 4px;

  206.         }

  207.         

  208.         .alarm-title {

  209.             font-size: 14px;

  210.             font-weight: bold;

  211.             margin-bottom: 4px;

  212.         }

  213.         

  214.         .alarm-location {

  215.             font-size: 12px;

  216.             opacity: 0.8;

  217.             margin-bottom: 2px;

  218.         }

  219.         

  220.         .alarm-status {

  221.             font-size: 12px;

  222.             opacity: 0.7;

  223.         }

  224.         

  225.         .bottom-stats {

  226.             display: grid;

  227.             grid-template-columns: repeat(4, 1fr);

  228.             gap: 20px;

  229.         }

  230.         

  231.         .stat-item {

  232.             background: rgba(255,255,255,0.1);

  233.             border-radius: 12px;

  234.             padding: 20px;

  235.             text-align: center;

  236.             backdrop-filter: blur(10px);

  237.             border: 1px solid rgba(255,255,255,0.2);

  238.         }

  239.         

  240.         .stat-label {

  241.             font-size: 14px;

  242.             opacity: 0.9;

  243.             margin-bottom: 8px;

  244.         }

  245.         

  246.         .stat-value {

  247.             font-size: 28px;

  248.             font-weight: bold;

  249.             margin-bottom: 8px;

  250.         }

  251.         

  252.         .time-selector {

  253.             display: flex;

  254.             gap: 10px;

  255.         }

  256.         

  257.         .time-selector .el-radio {

  258.             margin-right: 0;

  259.         }

  260.         

  261.         .time-selector .el-radio__label {

  262.             padding: 0 8px;

  263.         }

  264.         

  265.         /* 响应式设计 */

  266.         @media (max-width: 1400px) {

  267.             .core-metrics {

  268.                 grid-template-columns: repeat(3, 1fr);

  269.             }

  270.             

  271.             .charts-grid {

  272.                 grid-template-columns: 1fr;

  273.             }

  274.             

  275.             .bottom-stats {

  276.                 grid-template-columns: repeat(2, 1fr);

  277.             }

  278.         }

  279.         

  280.         @media (max-width: 768px) {

  281.             .core-metrics {

  282.                 grid-template-columns: 1fr;

  283.             }

  284.             

  285.             .bottom-stats {

  286.                 grid-template-columns: 1fr;

  287.             }

  288.             

  289.             .metric-card, .chart-panel, .stat-item {

  290.                 padding: 15px;

  291.             }

  292.         }

  293.         

  294.         .map-placeholder {

  295.             text-align: center;

  296.         }

  297.         

  298.         .map-placeholder .el-icon {

  299.             font-size: 48px;

  300.             margin-bottom: 10px;

  301.         }

  302.     </style>

  303. </head>

  304. <body>

  305.     <div id="app">

  306.         <div class="operation-dashboard">

  307.             <div class="dashboard-header">

  308.                 <h1>供水运营专题大屏</h1>

  309.                 <div class="header-info">

  310.                     <span>{{ currentTime }}</span>

  311.                     <span>•</span>

  312.                     <span>在线设备: {{ onlineDevices }}/{{ totalDevices }}</span>

  313.                     <span>•</span>

  314.                     <span>系统状态: <span class="status-normal">正常运行</span></span>

  315.                 </div>

  316.             </div>

  317. 

  318.             <!-- 核心指标行 -->

  319.             <div class="core-metrics">

  320.                 <div class="metric-card" v-for="metric in coreMetrics" :key="metric.name">

  321.                     <div class="metric-icon" :style="{ backgroundColor: metric.color }">

  322.                         <el-icon><component :is="metric.icon" /></el-icon>

  323.                     </div>

  324.                     <div class="metric-content">

  325.                         <div class="metric-value">{{ metric.value }} <span class="metric-unit">{{ metric.unit }}</span></div>

  326.                         <div class="metric-title">{{ metric.title }}</div>

  327.                         <div class="metric-trend" :class="metric.trend">

  328.                             <el-icon><trend-arrow /></el-icon>

  329.                             {{ metric.change }}

  330.                         </div>

  331.                     </div>

  332.                 </div>

  333.             </div>

  334. 

  335.             <!-- 主要图表区域 -->

  336.             <div class="charts-grid">

  337.                 <!-- 左侧图表区域 -->

  338.                 <div class="left-charts">

  339.                     <!-- 供水趋势图 -->

  340.                     <div class="chart-panel">

  341.                         <div class="panel-header">

  342.                             <h3>供水趋势分析</h3>

  343.                             <div class="time-selector">

  344.                                 <el-radio-group v-model="timeRange" size="small">

  345.                                     <el-radio-button label="day">今日</el-radio-button>

  346.                                     <el-radio-button label="week">本周</el-radio-button>

  347.                                     <el-radio-button label="month">本月</el-radio-button>

  348.                                 </el-radio-group>

  349.                             </div>

  350.                         </div>

  351.                         <div class="chart-container" ref="supplyTrendChart" style="width: 100%; height: 300px;"></div>

  352.                     </div>

  353. 

  354.                     <!-- 水质分布 -->

  355.                     <div class="chart-panel">

  356.                         <div class="panel-header">

  357.                             <h3>水质监测分布</h3>

  358.                         </div>

  359.                         <div class="chart-container" ref="waterQualityChart" style="width: 100%; height: 300px;"></div>

  360.                     </div>

  361. 

  362.                     <!-- 报警统计 -->

  363.                     <div class="chart-panel">

  364.                         <div class="panel-header">

  365.                             <h3>报警统计</h3>

  366.                         </div>

  367.                         <div class="chart-container" ref="alarmChart" style="width: 100%; height: 300px;"></div>

  368.                     </div>

  369.                 </div>

  370. 

  371.                 <!-- 中间图表区域 -->

  372.                 <div class="center-charts">

  373.                     <!-- 空间分布 -->

  374.                     <div class="chart-panel large-panel">

  375.                         <div class="panel-header">

  376.                             <h3>管网空间分布</h3>

  377.                         </div>

  378.                         <div class="map-container" ref="spatialMap">

  379.                             <div class="map-placeholder">

  380.                                 <el-icon><map-location /></el-icon>

  381.                                 <p>GIS地图集成区域</p>

  382.                             </div>

  383.                         </div>

  384.                     </div>

  385. 

  386.                     <!-- 设备状态 -->

  387.                     <div class="chart-panel">

  388.                         <div class="panel-header">

  389.                             <h3>设备运行状态</h3>

  390.                         </div>

  391.                         <div class="chart-container" ref="deviceStatusChart" style="width: 100%; height: 300px;"></div>

  392.                     </div>

  393.                 </div>

  394. 

  395.                 <!-- 右侧图表区域 -->

  396.                 <div class="right-charts">

  397.                     <!-- 营收分析 -->

  398.                     <div class="chart-panel">

  399.                         <div class="panel-header">

  400.                             <h3>营收指标分析</h3>

  401.                         </div>

  402.                         <div class="chart-container" ref="revenueChart" style="width: 100%; height: 300px;"></div>

  403.                     </div>

  404. 

  405.                     <!-- 实时报警 -->

  406.                     <div class="chart-panel">

  407.                         <div class="panel-header">

  408.                             <h3>实时报警监控</h3>

  409.                         </div>

  410.                         <div class="alarm-list">

  411.                             <div v-for="alarm in realTimeAlarms" :key="alarm.id" class="alarm-item" :class="alarm.level">

  412.                                 <div class="alarm-time">{{ alarm.time }}</div>

  413.                                 <div class="alarm-title">{{ alarm.title }}</div>

  414.                                 <div class="alarm-location">{{ alarm.location }}</div>

  415.                                 <div class="alarm-status">{{ alarm.status }}</div>

  416.                             </div>

  417.                         </div>

  418.                     </div>

  419. 

  420.                     <!-- 能耗分析 -->

  421.                     <div class="chart-panel">

  422.                         <div class="panel-header">

  423.                             <h3>能耗分析</h3>

  424.                         </div>

  425.                         <div class="chart-container" ref="energyChart" style="width: 100%; height: 300px;"></div>

  426.                     </div>

  427.                 </div>

  428.             </div>

  429. 

  430.             <!-- 底部统计 -->

  431.             <div class="bottom-stats">

  432.                 <div class="stat-item" v-for="stat in bottomStats" :key="stat.name">

  433.                     <div class="stat-label">{{ stat.label }}</div>

  434.                     <div class="stat-value">{{ stat.value }}</div>

  435.                     <div class="stat-trend" :class="stat.trend">

  436.                         <el-icon><trend-arrow /></el-icon>

  437.                         {{ stat.change }}

  438.                     </div>

  439.                 </div>

  440.             </div>

  441.         </div>

  442.     </div>

  443. 

  444.     <script>

  445.         const { createApp } = Vue;

  446.         

  447.         createApp({

  448.             data() {

  449.                 return {

  450.                     currentTime: '',

  451.                     onlineDevices: 156,

  452.                     totalDevices: 178,

  453.                     coreMetrics: [

  454.                         {

  455.                             title: '进水总量',

  456.                             value: '12,580',

  457.                             unit: 'm³',

  458.                             icon: 'WaterFilled',

  459.                             color: '#409eff',

  460.                             change: '+5.2%',

  461.                             trend: 'trend-up'

  462.                         },

  463.                         {

  464.                             title: '出水总量',

  465.                             value: '11,230',

  466.                             unit: 'm³',

  467.                             icon: 'WaterFilled',

  468.                             color: '#67c23a',

  469.                             change: '+3.8%',

  470.                             trend: 'trend-up'

  471.                         },

  472.                         {

  473.                             title: '产销差率',

  474.                             value: '10.8',

  475.                             unit: '%',

  476.                             icon: 'TrendCharts',

  477.                             color: '#e6a23c',

  478.                             change: '-2.1%',

  479.                             trend: 'trend-down'

  480.                         },

  481.                         {

  482.                             title: '营收额',

  483.                             value: '85.2',

  484.                             unit: '万元',

  485.                             icon: 'Money',

  486.                             color: '#67c23a',

  487.                             change: '+12.5%',

  488.                             trend: 'trend-up'

  489.                         },

  490.                         {

  491.                             title: '平均水质',

  492.                             value: '98.5',

  493.                             unit: '分',

  494.                             icon: 'DataLine',

  495.                             color: '#409eff',

  496.                             change: '+1.2',

  497.                             trend: 'trend-up'

  498.                         },

  499.                         {

  500.                             title: '报警次数',

  501.                             value: '3',

  502.                             unit: '次',

  503.                             icon: 'WarningFilled',

  504.                             color: '#f56c6c',

  505.                             change: '-15.8%',

  506.                             trend: 'trend-down'

  507.                         }

  508.                     ],

  509.                     timeRange: 'day',

  510.                     realTimeAlarms: [

  511.                         {

  512.                             id: 1,

  513.                             time: '08:23:45',

  514.                             title: '压力异常波动',

  515.                             location: '精芒片区',

  516.                             level: 'warning',

  517.                             status: '处理中'

  518.                         },

  519.                         {

  520.                             id: 2,

  521.                             time: '08:15:32',

  522.                             title: '浊度超标',

  523.                             location: '一体化水厂',

  524.                             level: 'danger',

  525.                             status: '紧急处理'

  526.                         },

  527.                         {

  528.                             id: 3,

  529.                             time: '07:58:21',

  530.                             title: '设备离线',

  531.                             location: '托里片区',

  532.                             level: 'info',

  533.                             status: '已恢复'

  534.                         },

  535.                         {

  536.                             id: 4,

  537.                             time: '07:45:18',

  538.                             title: '流量异常',

  539.                             location: '八家户片区',

  540.                             level: 'warning',

  541.                             status: '监控中'

  542.                         }

  543.                     ],

  544.                     bottomStats: [

  545.                         {

  546.                             label: '覆盖率',

  547.                             value: '98.2%',

  548.                             change: '+0.5%',

  549.                             trend: 'trend-up'

  550.                         },

  551.                         {

  552.                             label: '漏损率',

  553.                             value: '5.8%',

  554.                             change: '-1.2%',

  555.                             trend: 'trend-down'

  556.                         },

  557.                         {

  558.                             label: '投诉率',

  559.                             value: '0.3%',

  560.                             change: '-0.1%',

  561.                             trend: 'trend-down'

  562.                         },

  563.                         {

  564.                             label: '设备完好率',

  565.                             value: '95.6%',

  566.                             change: '+1.8%',

  567.                             trend: 'trend-up'

  568.                         }

  569.                     ],

  570.                     charts: {}

  571.                 }

  572.             },

  573.             methods: {

  574.                 updateTime() {

  575.                     const now = new Date();

  576.                     this.currentTime = now.toLocaleString('zh-CN', {

  577.                         year: 'numeric',

  578.                         month: '2-digit',

  579.                         day: '2-digit',

  580.                         hour: '2-digit',

  581.                         minute: '2-digit',

  582.                         second: '2-digit'

  583.                     });

  584.                 },

  585.                 initCharts() {

  586.                     // 供水趋势图

  587.                     const trendChart = echarts.init(document.getElementById('supplyTrendChart'));

  588.                     trendChart.setOption({

  589.                         backgroundColor: 'transparent',

  590.                         tooltip: {

  591.                             trigger: 'axis',

  592.                             backgroundColor: 'rgba(255,255,255,0.9)',

  593.                             borderColor: '#ddd',

  594.                             textStyle: { color: '#333' }

  595.                         },

  596.                         grid: {

  597.                             top: '60px',

  598.                             right: '20px',

  599.                             bottom: '40px',

  600.                             left: '60px',

  601.                             containLabel: true

  602.                         },

  603.                         xAxis: {

  604.                             type: 'category',

  605.                             data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],

  606.                             axisLine: { lineStyle: { color: '#ddd' } },

  607.                             axisLabel: { color: '#666' }

  608.                         },

  609.                         yAxis: {

  610.                             type: 'value',

  611.                             name: '流量(m³/h)',

  612.                             nameTextStyle: { color: '#666' },

  613.                             axisLine: { show: false },

  614.                             splitLine: { lineStyle: { type: 'dashed', color: '#eee' } }

  615.                         },

  616.                         series: [{

  617.                             name: '进水',

  618.                             type: 'line',

  619.                             smooth: true,

  620.                             data: [320, 280, 450, 520, 480, 380],

  621.                             itemStyle: { color: '#409eff' },

  622.                             areaStyle: {

  623.                                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

  624.                                     { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },

  625.                                     { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }

  626.                                 ])

  627.                             }

  628.                         }, {

  629.                             name: '出水',

  630.                             type: 'line',

  631.                             smooth: true,

  632.                             data: [300, 260, 420, 480, 450, 350],

  633.                             itemStyle: { color: '#67c23a' },

  634.                             areaStyle: {

  635.                                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

  636.                                     { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },

  637.                                     { offset: 1, color: 'rgba(103, 194, 58, 0.05)' }

  638.                                 ])

  639.                             }

  640.                         }]

  641.                     });

  642.                     

  643.                     // 水质监测分布

  644.                     const qualityChart = echarts.init(document.getElementById('waterQualityChart'));

  645.                     qualityChart.setOption({

  646.                         backgroundColor: 'transparent',

  647.                         tooltip: {

  648.                             trigger: 'item',

  649.                             backgroundColor: 'rgba(255,255,255,0.9)',

  650.                             borderColor: '#ddd',

  651.                             textStyle: { color: '#333' }

  652.                         },

  653.                         radar: {

  654.                             indicator: [

  655.                                 { name: '浊度', max: 5 },

  656.                                 { name: 'pH值', max: 14 },

  657.                                 { name: '余氯', max: 1 },

  658.                                 { name: '菌落', max: 100 },

  659.                                 { name: '色度', max: 15 },

  660.                                 { name: '嗅味', max: 3 }

  661.                             ],

  662.                             radius: '60%',

  663.                             splitNumber: 4,

  664.                             axisLine: { lineStyle: { color: '#ddd' } },

  665.                             splitLine: { lineStyle: { color: '#eee' } },

  666.                             name: { textStyle: { color: '#666' } }

  667.                         },

  668.                         series: [{

  669.                             type: 'radar',

  670.                             data: [{

  671.                                 value: [1.2, 7.2, 0.3, 25, 3, 1],

  672.                                 name: '当前水质',

  673.                                 areaStyle: { color: 'rgba(64, 158, 255, 0.3)' },

  674.                                 lineStyle: { color: '#409eff', width: 2 }

  675.                             }]

  676.                         }]

  677.                     });

  678.                     

  679.                     // 报警统计

  680.                     const alarmChart = echarts.init(document.getElementById('alarmChart'));

  681.                     alarmChart.setOption({

  682.                         backgroundColor: 'transparent',

  683.                         tooltip: {

  684.                             trigger: 'axis',

  685.                             axisPointer: { type: 'shadow' }

  686.                         },

  687.                         grid: {

  688.                             top: '60px',

  689.                             right: '20px',

  690.                             bottom: '40px',

  691.                             left: '60px',

  692.                             containLabel: true

  693.                         },

  694.                         xAxis: {

  695.                             type: 'category',

  696.                             data: ['压力报警', '水质报警', '设备报警', '漏损报警', '通讯报警'],

  697.                             axisLabel: { color: '#666' }

  698.                         },

  699.                         yAxis: {

  700.                             type: 'value',

  701.                             axisLabel: { color: '#666' },

  702.                             splitLine: { lineStyle: { type: 'dashed', color: '#eee' } }

  703.                         },

  704.                         series: [{

  705.                             type: 'bar',

  706.                             data: [12, 8, 15, 5, 3],

  707.                             itemStyle: {

  708.                                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

  709.                                     { offset: 0, color: '#f56c6c' },

  710.                                     { offset: 1, color: '#e6a23c' }

  711.                                 ])

  712.                             }

  713.                         }]

  714.                     });

  715.                     

  716.                     // 设备状态

  717.                     const deviceChart = echarts.init(document.getElementById('deviceStatusChart'));

  718.                     deviceChart.setOption({

  719.                         backgroundColor: 'transparent',

  720.                         tooltip: {

  721.                             trigger: 'item',

  722.                             formatter: '{a}<br/>{b}: {c} ({d}%)'

  723.                         },

  724.                         series: [{

  725.                             name: '设备状态',

  726.                             type: 'pie',

  727.                             radius: ['50%', '70%'],

  728.                             center: ['50%', '50%'],

  729.                             data: [

  730.                                 { value: 142, name: '正常运行', itemStyle: { color: '#67c23a' } },

  731.                                 { value: 10, name: '维护中', itemStyle: { color: '#e6a23c' } },

  732.                                 { value: 4, name: '故障', itemStyle: { color: '#f56c6c' } },

  733.                                 { value: 22, name: '离线', itemStyle: { color: '#909399' } }

  734.                             ],

  735.                             label: {

  736.                                 show: true,

  737.                                 formatter: '{b}\n{c}',

  738.                                 color: '#666'

  739.                             }

  740.                         }]

  741.                     });

  742.                     

  743.                     // 营收分析

  744.                     const revenueChart = echarts.init(document.getElementById('revenueChart'));

  745.                     revenueChart.setOption({

  746.                         backgroundColor: 'transparent',

  747.                         tooltip: {

  748.                             trigger: 'axis'

  749.                         },

  750.                         grid: {

  751.                             top: '60px',

  752.                             right: '20px',

  753.                             bottom: '40px',

  754.                             left: '60px',

  755.                             containLabel: true

  756.                         },

  757.                         xAxis: {

  758.                             type: 'category',

  759.                             data: ['1月', '2月', '3月', '4月', '5月', '6月'],

  760.                             axisLabel: { color: '#666' }

  761.                         },

  762.                         yAxis: {

  763.                             type: 'value',

  764.                             name: '营收(万元)',

  765.                             axisLabel: { color: '#666' },

  766.                             splitLine: { lineStyle: { type: 'dashed', color: '#eee' } }

  767.                         },

  768.                         series: [{

  769.                             name: '营收',

  770.                             type: 'line',

  771.                             smooth: true,

  772.                             data: [850, 920, 980, 1050, 1120, 1200],

  773.                             itemStyle: { color: '#67c23a' },

  774.                             areaStyle: {

  775.                                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

  776.                                     { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },

  777.                                     { offset: 1, color: 'rgba(103, 194, 58, 0.05)' }

  778.                                 ])

  779.                             }

  780.                         }]

  781.                     });

  782.                     

  783.                     // 能耗分析

  784.                     const energyChart = echarts.init(document.getElementById('energyChart'));

  785.                     energyChart.setOption({

  786.                         backgroundColor: 'transparent',

  787.                         tooltip: {

  788.                             trigger: 'axis'

  789.                         },

  790.                         grid: {

  791.                             top: '60px',

  792.                             right: '20px',

  793.                             bottom: '40px',

  794.                             left: '60px',

  795.                             containLabel: true

  796.                         },

  797.                         xAxis: {

  798.                             type: 'category',

  799.                             data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],

  800.                             axisLabel: { color: '#666' }

  801.                         },

  802.                         yAxis: {

  803.                             type: 'value',

  804.                             name: '能耗(kWh)',

  805.                             axisLabel: { color: '#666' },

  806.                             splitLine: { lineStyle: { type: 'dashed', color: '#eee' } }

  807.                         },

  808.                         series: [{

  809.                             name: '能耗',

  810.                             type: 'line',

  811.                             smooth: true,

  812.                             data: [120, 80, 200, 180, 160, 100],

  813.                             itemStyle: { color: '#e6a23c' },

  814.                             areaStyle: {

  815.                                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

  816.                                     { offset: 0, color: 'rgba(230, 162, 60, 0.3)' },

  817.                                     { offset: 1, color: 'rgba(230, 162, 60, 0.05)' }

  818.                                 ])

  819.                             }

  820.                         }]

  821.                     });

  822.                     

  823.                     this.charts = {

  824.                         trend: trendChart,

  825.                         quality: qualityChart,

  826.                         alarm: alarmChart,

  827.                         device: deviceChart,

  828.                         revenue: revenueChart,

  829.                         energy: energyChart

  830.                     };

  831.                 }

  832.             },

  833.             mounted() {

  834.                 this.updateTime();

  835.                 setInterval(this.updateTime, 1000);

  836.                 

  837.                 this.$nextTick(() => {

  838.                     this.initCharts();

  839.                     window.addEventListener('resize', () => {

  840.                         Object.values(this.charts).forEach(chart => {

  841.                             chart && chart.resize();

  842.                         });

  843.                     });

  844.                 });

  845.             }

  846.         }).use(ElementPlus).mount('#app');

  847.     </script>

  848. </body>

  849. </html>