پایش و نگهداری۱۴۰۵/۰۷/۲۸·۶ دقیقه
کارت‌های محتوا و فرم چندمرحله‌ای
کارت ویژگی
آیکون، عنوان، توضیح یک‌خطی و لینک. نسخهٔ کامل با mini-mockup در صفحهٔ اصلی.
جزئیاتفرم چندمرحله‌ای
MultiStepForm- ۱سازمان
- ۲تجهیزات
- ۳تماس
رنگ
آبی زیرساخت رنگ اصلی است، فیروزه‌ای برای جریان آب و داده، و خاکستری-آبی سرد برای سطوح. عدد روی هر خانه کنتراست متن با پس‌زمینه است.
آبی اصلیbrand
50 #EEF5FC15.9:1
100 #D6E7F713.8:1
200 #ADCDEE10.6:1
300 #7DAFE27.6:1
400 #4A8FD35.1:1
500 #1F74C04.9:1
600 #0B5FA56.6:1
700 #0A4E888.5:1
800 #0B3F6C10.8:1
900 #0A2F5013.7:1
فیروزه‌ایteal
50 #ECFAFB16.3:1
100 #CFF2F414.7:1
200 #9FE3E912.2:1
300 #67CFD89.6:1
400 #2FB8C47.3:1
500 #0FA3B15.7:1
600 #0C86934.3:1
700 #0D6C776.1:1
800 #1057618.2:1
900 #11485010.2:1
خنثی سردslate
50 #F6F8FB16.4:1
100 #EDF2F715.5:1
200 #DDE5EE13.7:1
300 #C5D1DF11.3:1
400 #94A3B86.8:1
500 #64748B4.8:1
600 #4B5B726.9:1
700 #36455A9.7:1
800 #1F2C3F14.1:1
900 #111C2E17.1:1
950 #0A122018.7:1
رنگ‌های وضعیت
توکن‌های معنایی (حالت فعلی)
--bgپس‌زمینهٔ صفحه
--bg-2بخش‌های متناوب
--surfaceکارت و سطح
--surface-2سطح فرورفته
--lineحاشیه
--line-2حاشیهٔ قوی
--inkمتن اصلی
--ink-2متن ثانویه
--ink-3متن کم‌رنگ
--brand-inkلینک و تأکید
--brand-softزمینهٔ تأکید
--teal-inkبرچسب بخش
تایپوگرافی
Vazirmatn برای همهٔ متن‌ها و JetBrains Mono فقط برای کدهای تجهیز، که همیشه چپ‌به‌راست نمایش داده می‌شوند. اعداد در متن فارسی همیشه با ارقام فارسی نوشته می‌شوند.
نیم‌فاصله: الکتروپمپ‌ها، میشود، به‌روزرسانی، قطع‌ارتباط. هرگز «الکتروپمپ ها» یا «میشود».
ارقام: ۸۶۱ پمپ، ٪۹۲، ۱۴۰۵/۰۸/۰۲. ارقام لاتین فقط داخل کد تجهیز.
جهت: فلش‌های «بعدی» به چپ اشاره می‌کنند؛ نمودارها و تایم‌لاین‌ها از راست شروع می‌شوند.
فاصله، گرید، گوشه و سایه
مقیاس فاصله (۴/۸)
space-14px
space-28px
space-312px
space-416px
space-524px
space-632px
space-740px
space-848px
space-964px
space-1096px
گرید ۱۲ ستونه
حداکثر عرض محتوا ۱۲۸۰px با حاشیهٔ ۲۴px. نقاط شکست: 360 · 768 · 1280 · 1440+
کامپوننت · 8px
کارت بزرگ · 16px
shadow-1 · rest
shadow-2 · hover / card
shadow-3 · menu / modal
آیکون
آیکون‌های خطی به سبک Lucide. آیکون‌های جهت‌دار در راست‌به‌چپ قرینه می‌شوند: «بعدی» یعنی فلش به چپ.
layout-dashboard
activity
map
map-pin
gauge
cpu
radio-tower
server
file-spreadsheet
calendar-days
chart-column
users
bell-ring
wifi-off
clock
circle-check
triangle-alert
octagon-alert
shield-check
key-round
search
chevron-left
arrow-left
download
وضعیت و تازگی داده
هر وضعیت سه نشانه دارد: رنگ، آیکون و برچسب متنی. «دادهٔ قدیمی» دربارهٔ اعتبار داده است، نه دربارهٔ پمپ.
Badge وضعیت
StatusBadge در حال کار نیازمند توجه متوقف قطع ارتباط دادهٔ قدیمی
سالم نیازمند توجه بحرانی قطع ارتباط
نشانگر تازگی داده
FreshnessIndicatorآخرین به‌روزرسانی: ۶ ثانیه پیشتازه
آخرین به‌روزرسانی: ۱۸ دقیقه پیشدادهٔ قدیمی
بدون داده از ساعت ۰۹:۴۲قطع ارتباط
نشانگر پالس ثانیه‌ایMinutePulse
پالس بعدی
پمپ فعال
۸۰۴ به‌روز · داده نمونه نیازمند توجه
۱۰ ۳ استان · داده نمونه قطع ارتباط
۲۸ بیش از ۲ دقیقه بدون داده کارت KPIKpiCard
عدد، برچسب و منبع/تازگی داده؛ کارت قطع ارتباط با حاشیهٔ خط‌چین. کنترل‌ها
دکمه
Buttonفیلد ورودی
TextField · Select جست‌وجو با پیشنهاد کد تجهیز
P-1402-0157ایستگاه پمپاژ ۳ · اصفهان
P-1402-0151ایستگاه پمپاژ ۲ · اصفهان
P-1402-0161ایستگاه پمپاژ ۵ · اصفهان
داده و بازخورد
Toast هشدار
پمپ متوقف شدP-1402-0896 · خوزستان · همین حالا
قطع ارتباط کنترلرP-1402-0233 · آخرین داده ۰۹:۴۲
۴۸ ردیف با موفقیت ثبت شدورود گروهی از اکسل · ۲ ردیف نیاز به اصلاح دارد
Tooltip و مودال
Tooltip · Modalتایم‌لاین
Timeline- نسخهٔ [x.y]۱۴۰۵/۰۷/۲۰جدیدنمایش زمان آخرین داده در فهرست پمپ‌ها
- نسخهٔ [x.y]۱۴۰۵/۰۶/۱۲بهبودنمایش زمان آخرین داده در فهرست پمپ‌ها
- نسخهٔ [x.y]۱۴۰۵/۰۵/۰۳رفع اشکالنمایش زمان آخرین داده در فهرست پمپ‌ها
نقشهٔ تعاملی ایران
مرز استان‌ها از دادهٔ OpenStreetMap. هر استان با رنگ وضعیت پر میشود و استان‌های قطع ارتباط الگوی هاشور دارند. با کلیک، نقشه روی استان زوم می‌کند.
استان انتخاب‌شده ایران · ۳۱ استان
<IranMap variant focus statuses onProvince />
حالت‌ها: hero با نقاط ایستگاه و پالس استان‌های بحرانی، drill برای پیمایش، faint برای پس‌زمینهٔ بخش‌های تیره.
حالت‌ها: hero با نقاط ایستگاه و پالس استان‌های بحرانی، drill برای پیمایش، faint برای پس‌زمینهٔ بخش‌های تیره.
حرکت
پالس داده
حلقهٔ ۲ ثانیه‌ای، فقط روی دادهٔ زنده
جریان در لوله
از راست به چپ؛ از پمپ به پنل
ورود بخش‌هامحو شدن و جابه‌جایی ۱۸px، ۶۰۰ میلی‌ثانیه، فقط یک بار.cubic-bezier(.2,.7,.2,1)
کاهش حرکتبا فعال بودن prefers-reduced-motion، همهٔ حلقه‌ها و ورودها متوقف می‌شوند و وضعیت‌ها همچنان با متن خوانا هستند.