Home.razor 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423
  1. @page "/"
  2. @rendermode InteractiveServer
  3. @using EasyTemplate.Tool.Util
  4. @attribute [ReuseTabsPage(Title = "主页", Pin = true, Closable = false, Order = 0)]
  5. @using Microsoft.AspNetCore.Components
  6. @using EasyTemplate.Service
  7. @using System.Timers
  8. @inject UdpListenerService us
  9. @*
  10. <p>@udpdata</p> *@
  11. <head>
  12. <meta charset="utf-8" />
  13. @* <link href="css/site.css" rel="stylesheet" /> *@
  14. <title>Blazing Pizza</title>
  15. </head>
  16. <div class="main">
  17. <div class="container">
  18. <div class="nozzle-content">
  19. <div class="grid-container">
  20. @{
  21. int i = 0;
  22. foreach (var item in items)
  23. {
  24. i++;
  25. int num_page = ShowNozzleItem_Row * ShowNozzle_Col;
  26. if (i >= currentPage * num_page && i < (currentPage + 1) * num_page)
  27. {
  28. <div class="grid-item">
  29. <Nozzle BottomText=""
  30. warnstate="@item.Value.warnstate"
  31. NozNo="@item.Value.noz.ToString()"
  32. VLR="@item.Value.VLR"
  33. nozzlestate="@item.Value.nozzlestate"
  34. OilName="@item.Value.oil" />
  35. </div>
  36. }
  37. }
  38. }
  39. </div>
  40. </div>
  41. </div>
  42. <PageSwitcher CurrentPage="@currentPage"
  43. PageChanged="OnPageChanged" />
  44. </div>
  45. @code {
  46. private Dictionary<int, UdpListenerService.NozzleState> items = new Dictionary<int, UdpListenerService.NozzleState>();
  47. private const int ShowNozzleItem_Row = 8;//每行显示的枪数
  48. private const int ShowNozzle_Col = 4;//每页显示的行数
  49. int totalpage = 0;
  50. int currentPage = 0;
  51. private void OnPageChanged(int pageIndex)
  52. {
  53. currentPage = pageIndex;
  54. }
  55. private Timer timer;
  56. private bool isAutoRefreshEnabled = true;
  57. private DateTime lastUpdateTime = DateTime.Now;
  58. protected override async Task OnInitializedAsync()
  59. {
  60. await RefreshData();
  61. StartTimer();
  62. }
  63. private void StartTimer()
  64. {
  65. timer = new Timer(1000); // 1秒间隔
  66. timer.Elapsed += async (sender, e) => await RefreshData();
  67. timer.Start();
  68. }
  69. private async Task RefreshData()
  70. {
  71. var nozzlestates = us.GetNozzleState();
  72. try
  73. {
  74. // 更新UI
  75. await InvokeAsync(() =>
  76. {
  77. items = nozzlestates;// mockData;
  78. lastUpdateTime = DateTime.Now;
  79. StateHasChanged();
  80. });
  81. }
  82. catch (Exception ex)
  83. {
  84. Console.WriteLine($"数据刷新失败: {ex.Message}");
  85. }
  86. }
  87. private void ToggleAutoRefresh()
  88. {
  89. isAutoRefreshEnabled = !isAutoRefreshEnabled;
  90. if (isAutoRefreshEnabled)
  91. {
  92. StartTimer();
  93. }
  94. else
  95. {
  96. timer?.Stop();
  97. }
  98. }
  99. public void Dispose()
  100. {
  101. timer?.Stop();
  102. timer?.Dispose();
  103. }
  104. public class NozzleData
  105. {
  106. public string IconUrl { get; set; }
  107. public string Title { get; set; }
  108. public string Description { get; set; }
  109. public int warnstate { get; set; }
  110. public string Line1 { get; set; }
  111. public string Line2 { get; set; }
  112. public string Line3 { get; set; }
  113. }
  114. }
  115. <style>
  116. .main {
  117. background-color: white;
  118. }
  119. .container {
  120. padding: 20px;
  121. font-family: Arial, sans-serif;
  122. background-color: white;
  123. }
  124. .nozzle-content {
  125. grid-area: main;
  126. padding: 20px;
  127. overflow-y: auto;
  128. /* 固定主要内容区域大小 */
  129. /* width: calc(100vw - 250px);
  130. height: calc(100vh - 110px); */
  131. width: 1000px;
  132. height: 480px;
  133. border-radius: 6px;
  134. border: 1px solid lightblue;
  135. }
  136. .grid-container {
  137. display: grid;
  138. grid-template-columns: repeat(8, 1fr);
  139. gap: 10px;
  140. margin-top: 20px;
  141. }
  142. .grid-item {
  143. background-color: #f0f8ff;
  144. border: 1px solid #b0e0e6;
  145. border-radius: 5px;
  146. padding: 10px;
  147. text-align: center;
  148. min-height: 60px;
  149. display: flex;
  150. align-items: center;
  151. justify-content: center;
  152. }
  153. </style>
  154. @*
  155. <GridContent>
  156. <Row Type="flex" Gutter="24">
  157. <AntDesign.Col Xs="24" Sm="12" Md="12" Lg="12" Xl="6" Style="margin-bottom: 24px;">
  158. <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard Title="Total Sales"
  159. Total="$ 126,560"
  160. ContentHeight="46">
  161. <ChildContent>
  162. <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Trend Flag="up">
  163. WoW Change
  164. <span class="trendText">12%</span>
  165. </EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Trend>
  166. <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Trend Flag="down">
  167. DoD Change
  168. <span class="trendText">11%</span>
  169. </EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Trend>
  170. </ChildContent>
  171. <Footer>
  172. <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.Field Label="Daily Sale" Value="$12,423" />
  173. </Footer>
  174. </EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard>
  175. </AntDesign.Col>
  176. <AntDesign.Col Xs="24" Sm="12" Md="12" Lg="12" Xl="6" Style="margin-bottom: 24px;">
  177. <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard Title="今日Api访问次数"
  178. Total="@SystemStatistics.ApiDaily.ToString()"
  179. ContentHeight="46">
  180. <Footer>
  181. <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.Field Label="Api访问总数" Value="@SystemStatistics.ApiTotal.ToString()" />
  182. </Footer>
  183. </EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard>
  184. </AntDesign.Col>
  185. <AntDesign.Col Xs="24" Sm="12" Md="12" Lg="12" Xl="6" Style="margin-bottom: 24px;">
  186. <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard Title="Payments"
  187. Total="6560"
  188. ContentHeight="46">
  189. <ChildContent>
  190. <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.MiniBar />
  191. </ChildContent>
  192. <Footer>
  193. <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.Field Label="Conversion Rate" Value="60%" />
  194. </Footer>
  195. </EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard>
  196. </AntDesign.Col>
  197. <AntDesign.Col Xs="24" Sm="12" Md="12" Lg="12" Xl="6" Style="margin-bottom: 24px;">
  198. <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard Title="Operational Effect"
  199. Total="78%"
  200. ContentHeight="46">
  201. <ChildContent>
  202. <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.MiniProgress Percent="78"
  203. StrokeWidth="8"
  204. Target="80"
  205. Color="#13C2C2" />
  206. </ChildContent>
  207. <Footer>
  208. <EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.Field Label="Conversion Rate" Value="60%" />
  209. </Footer>
  210. </EasyTemplate.Blazor.Web.Components.Pages.Dashboard.Components.Charts.ChartCard>
  211. </AntDesign.Col>
  212. </Row>
  213. <div class="salesCard">
  214. <Card>
  215. <Tabs TabBarStyle="margin-bottom: 24px;">
  216. <TabPane Key="1" Tab="服务管理">
  217. <Descriptions Bordered>
  218. <DescriptionsItem Title="Mysql服务" Span="3">
  219. <Badge Status="@MySqlStatus" Text="@MySqlText"></Badge>
  220. </DescriptionsItem>
  221. <DescriptionsItem Title="账号异常更新状态服务" Span="3">
  222. <Badge Status="BadgeStatus.Success" Text="运行中"></Badge>
  223. </DescriptionsItem>
  224. </Descriptions>
  225. </TabPane>
  226. <TabPane Key="2" Tab="服务器信息">
  227. <Descriptions Bordered>
  228. <DescriptionsItem Title="服务器名称" Span="3">@Environment.MachineName</DescriptionsItem>
  229. <DescriptionsItem Title="操作系统" Span="3">@System.Runtime.InteropServices.RuntimeInformation.OSDescription</DescriptionsItem>
  230. <DescriptionsItem Title="系统架构" Span="3">@System.Runtime.InteropServices.RuntimeInformation.OSArchitecture</DescriptionsItem>
  231. <DescriptionsItem Title="已使用内存/总内存" Span="3">@ComputerInfo.RAMUsage</DescriptionsItem>
  232. <DescriptionsItem Title="内存使用率" Span="3">
  233. <Badge Status="@RAMStatus" Text="@ComputerInfo.RAMUsageRate"></Badge>
  234. </DescriptionsItem>
  235. <DescriptionsItem Title="系统盘占用/系统盘总空间" Span="3">@ComputerInfo.SystemDiskUsage</DescriptionsItem>
  236. <DescriptionsItem Title="系统盘使用率" Span="3">
  237. <Badge Status="@SystemDiskStatus" Text="@ComputerInfo.SystemDiskUsageRate"></Badge>
  238. </DescriptionsItem>
  239. </Descriptions>
  240. </TabPane>
  241. <TabPane Key="3" Tab="项目框架">
  242. <Descriptions Bordered>
  243. <DescriptionsItem Title="环境变量" Span="3">@Environment.MachineName</DescriptionsItem>
  244. <DescriptionsItem Title=".Net版本" Span="3">@System.Runtime.InteropServices.RuntimeInformation.FrameworkDescription</DescriptionsItem>
  245. <DescriptionsItem Title="启动时间" Span="3">@System.Diagnostics.Process.GetCurrentProcess().StartTime.ToString("yyyy-MM-dd HH:mm:ss")</DescriptionsItem>
  246. </Descriptions>
  247. </TabPane>
  248. </Tabs>
  249. </Card>
  250. </div>
  251. </GridContent>
  252. @inject NavigationManager NavigationManager;
  253. @inject IMessageService MessageService;
  254. @inject IJSRuntime IJSRuntime;
  255. @code {
  256. protected override async Task OnAfterRenderAsync(bool firstRender)
  257. {
  258. if (firstRender)
  259. {
  260. await NavigationManager.RedirectLogin(IJSRuntime);
  261. await Statistics();
  262. await Information();
  263. await ServiceStatistics();
  264. }
  265. }
  266. private async Task ServiceStatistics()
  267. {
  268. try
  269. {
  270. using var con = Sql.Connect();
  271. await con.Queryable<SystemUser>().FirstAsync();
  272. MySqlStatus = BadgeStatus.Success;
  273. MySqlText = "运行中";
  274. }
  275. catch (Exception ex)
  276. {
  277. MySqlStatus = BadgeStatus.Error;
  278. MySqlText = $"服务异常({ex.Message})";
  279. }
  280. StateHasChanged();
  281. }
  282. private async Task Statistics()
  283. {
  284. SystemStatistics.ApiDaily = await Cache.Get<int>($"request_{DateTime.Now.ToString("yyyyMMdd")}");
  285. SystemStatistics.ApiTotal = await Cache.Get<int>($"request_total");
  286. }
  287. private async Task Information()
  288. {
  289. //windows环境
  290. ComputerInfo = Computer.GetComputerInfo();
  291. switch (ComputerInfo.RAMStatus)
  292. {
  293. default:
  294. case ComputerStatus.Normal: RAMStatus = BadgeStatus.Success; break;
  295. case ComputerStatus.Error: RAMStatus = BadgeStatus.Error; break;
  296. case ComputerStatus.Warning: RAMStatus = BadgeStatus.Warning; break;
  297. }
  298. switch (ComputerInfo.SystemDiskStatus)
  299. {
  300. default:
  301. case ComputerStatus.Normal: SystemDiskStatus = BadgeStatus.Success; break;
  302. case ComputerStatus.Error: SystemDiskStatus = BadgeStatus.Error; break;
  303. case ComputerStatus.Warning: SystemDiskStatus = BadgeStatus.Warning; break;
  304. }
  305. }
  306. IChartComponent chart1;
  307. private async Task OnTabChanged(string activeKey)
  308. {
  309. if (activeKey == "1")
  310. {
  311. }
  312. // await _saleChart.ChangeData(data.SalesData);
  313. //else
  314. // await _visitChart.ChangeData(data.SalesData);
  315. }
  316. private async Task onChart1_FirstRender(IChartComponent chart)
  317. {
  318. //var data1 = await ChartsDemoData.FireworksSalesAsync(NavigationManager, HttpClient);
  319. //chart1.ChangeData(data1);
  320. }
  321. readonly AreaConfig config1 = new AreaConfig()
  322. {
  323. XField = "Date",
  324. YField = "scales",
  325. XAxis = new ValueCatTimeAxis()
  326. {
  327. Range = new[] { 0, 1 },
  328. TickCount = 5
  329. },
  330. AreaStyle = new GraphicStyle()
  331. {
  332. Fill = "l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff"
  333. }
  334. };
  335. /// <summary>
  336. ///
  337. /// </summary>
  338. private SystemStatistics SystemStatistics = new SystemStatistics();
  339. /// <summary>
  340. ///
  341. /// </summary>
  342. private ComputerInfo ComputerInfo = new ComputerInfo();
  343. /// <summary>
  344. ///
  345. /// </summary>
  346. private BadgeStatus RAMStatus { get; set; }
  347. /// <summary>
  348. ///
  349. /// </summary>
  350. private BadgeStatus SystemDiskStatus { get; set; }
  351. /// <summary>
  352. ///
  353. /// </summary>
  354. private BadgeStatus MySqlStatus { get; set; }
  355. /// <summary>
  356. ///
  357. /// </summary>
  358. private string MySqlText { get; set; }
  359. } *@