diff --git a/assets/fonts/Alibaba-PuHuiTi-Bold.ttf b/assets/fonts/Alibaba-PuHuiTi-Bold.ttf new file mode 100644 index 0000000..af57de0 Binary files /dev/null and b/assets/fonts/Alibaba-PuHuiTi-Bold.ttf differ diff --git a/assets/fonts/Alibaba-PuHuiTi-Heavy.ttf b/assets/fonts/Alibaba-PuHuiTi-Heavy.ttf new file mode 100644 index 0000000..7eb047f Binary files /dev/null and b/assets/fonts/Alibaba-PuHuiTi-Heavy.ttf differ diff --git a/assets/fonts/Alibaba-PuHuiTi-Light.ttf b/assets/fonts/Alibaba-PuHuiTi-Light.ttf new file mode 100644 index 0000000..6962c16 Binary files /dev/null and b/assets/fonts/Alibaba-PuHuiTi-Light.ttf differ diff --git a/assets/fonts/Alibaba-PuHuiTi-Medium.ttf b/assets/fonts/Alibaba-PuHuiTi-Medium.ttf new file mode 100644 index 0000000..7dc8134 Binary files /dev/null and b/assets/fonts/Alibaba-PuHuiTi-Medium.ttf differ diff --git a/assets/fonts/Alibaba-PuHuiTi-Regular.ttf b/assets/fonts/Alibaba-PuHuiTi-Regular.ttf new file mode 100644 index 0000000..9f8ab8d Binary files /dev/null and b/assets/fonts/Alibaba-PuHuiTi-Regular.ttf differ diff --git a/assets/fonts/Alimama_DongFangDaKai_Regular.ttf b/assets/fonts/Alimama_DongFangDaKai_Regular.ttf new file mode 100644 index 0000000..2af05b2 Binary files /dev/null and b/assets/fonts/Alimama_DongFangDaKai_Regular.ttf differ diff --git a/assets/fonts/Alimama_ShuHeiTi_Bold.ttf b/assets/fonts/Alimama_ShuHeiTi_Bold.ttf new file mode 100644 index 0000000..854c844 Binary files /dev/null and b/assets/fonts/Alimama_ShuHeiTi_Bold.ttf differ diff --git a/assets/fonts/DIN Alternate Bold.ttf b/assets/fonts/DIN Alternate Bold.ttf new file mode 100644 index 0000000..81f2f7a Binary files /dev/null and b/assets/fonts/DIN Alternate Bold.ttf differ diff --git a/assets/fonts/DIN Condensed Bold.ttf b/assets/fonts/DIN Condensed Bold.ttf new file mode 100644 index 0000000..a3f1ba9 Binary files /dev/null and b/assets/fonts/DIN Condensed Bold.ttf differ diff --git a/assets/fonts/DingTalk_JinBuTi_Regular.ttf b/assets/fonts/DingTalk_JinBuTi_Regular.ttf new file mode 100644 index 0000000..c4efa55 Binary files /dev/null and b/assets/fonts/DingTalk_JinBuTi_Regular.ttf differ diff --git a/assets/fonts/HIKLDH-Number-Bold.ttf b/assets/fonts/HIKLDH-Number-Bold.ttf new file mode 100644 index 0000000..3de11bb Binary files /dev/null and b/assets/fonts/HIKLDH-Number-Bold.ttf differ diff --git a/assets/fonts/HIKLDH-Number-CondensedBold.ttf b/assets/fonts/HIKLDH-Number-CondensedBold.ttf new file mode 100644 index 0000000..c9aa223 Binary files /dev/null and b/assets/fonts/HIKLDH-Number-CondensedBold.ttf differ diff --git a/assets/fonts/HIKLDH-Number-CondensedMedium.ttf b/assets/fonts/HIKLDH-Number-CondensedMedium.ttf new file mode 100644 index 0000000..415ffb0 Binary files /dev/null and b/assets/fonts/HIKLDH-Number-CondensedMedium.ttf differ diff --git a/assets/fonts/HIKLDH-Number-Heavy.ttf b/assets/fonts/HIKLDH-Number-Heavy.ttf new file mode 100644 index 0000000..597e6c8 Binary files /dev/null and b/assets/fonts/HIKLDH-Number-Heavy.ttf differ diff --git a/assets/fonts/HIKLDH-Number-Medium.ttf b/assets/fonts/HIKLDH-Number-Medium.ttf new file mode 100644 index 0000000..645494d Binary files /dev/null and b/assets/fonts/HIKLDH-Number-Medium.ttf differ diff --git a/assets/fonts/HIKLDH-Number-Regular.ttf b/assets/fonts/HIKLDH-Number-Regular.ttf new file mode 100644 index 0000000..8b3da66 Binary files /dev/null and b/assets/fonts/HIKLDH-Number-Regular.ttf differ diff --git a/assets/fonts/HTYPEtest01-Bold.ttf b/assets/fonts/HTYPEtest01-Bold.ttf new file mode 100644 index 0000000..326cb08 Binary files /dev/null and b/assets/fonts/HTYPEtest01-Bold.ttf differ diff --git a/assets/fonts/HTYPEtest01-Medium.ttf b/assets/fonts/HTYPEtest01-Medium.ttf new file mode 100644 index 0000000..c3ce720 Binary files /dev/null and b/assets/fonts/HTYPEtest01-Medium.ttf differ diff --git a/assets/fonts/Impact.ttf b/assets/fonts/Impact.ttf new file mode 100644 index 0000000..7b7956f Binary files /dev/null and b/assets/fonts/Impact.ttf differ diff --git a/assets/fonts/Microsoft-YaHei-Bold.ttf b/assets/fonts/Microsoft-YaHei-Bold.ttf new file mode 100644 index 0000000..b85d8b2 Binary files /dev/null and b/assets/fonts/Microsoft-YaHei-Bold.ttf differ diff --git a/assets/fonts/Microsoft-YaHei-Light.ttc b/assets/fonts/Microsoft-YaHei-Light.ttc new file mode 100644 index 0000000..238a941 Binary files /dev/null and b/assets/fonts/Microsoft-YaHei-Light.ttc differ diff --git a/assets/fonts/Microsoft-YaHei-Regular.ttc b/assets/fonts/Microsoft-YaHei-Regular.ttc new file mode 100644 index 0000000..97b3a5a Binary files /dev/null and b/assets/fonts/Microsoft-YaHei-Regular.ttc differ diff --git a/assets/fonts/douyuFont-2.otf b/assets/fonts/douyuFont-2.otf new file mode 100644 index 0000000..3d9732c Binary files /dev/null and b/assets/fonts/douyuFont-2.otf differ diff --git a/assets/fonts/fonts.less b/assets/fonts/fonts.less new file mode 100644 index 0000000..9d07a1d --- /dev/null +++ b/assets/fonts/fonts.less @@ -0,0 +1,19 @@ +@font-face { + font-family: AlimamaShuHeiTi-Bold; + src: url("./Alimama_ShuHeiTi_Bold.ttf") format("truetype"); +} + +@font-face { + font-family: YouSheBiaoTiHei; + src: url("./优设标题黑.ttf") format("truetype"); +} + +@font-face { + font-family: MicrosoftYaHei; + src: url("./Microsoft-YaHei-Bold.ttf") format("truetype"); +} + +@font-face { + font-family: MicrosoftYaHei-Bold; + src: url("./Microsoft-YaHei-Bold.ttf") format("truetype"); +} diff --git a/assets/fonts/优设标题黑.ttf b/assets/fonts/优设标题黑.ttf new file mode 100644 index 0000000..3729151 Binary files /dev/null and b/assets/fonts/优设标题黑.ttf differ diff --git a/assets/fonts/庞门正道标题体.ttf b/assets/fonts/庞门正道标题体.ttf new file mode 100644 index 0000000..0118a4b Binary files /dev/null and b/assets/fonts/庞门正道标题体.ttf differ diff --git a/assets/fonts/思源黑体1 SourceHanSansCN-ExtraLight.otf b/assets/fonts/思源黑体1 SourceHanSansCN-ExtraLight.otf new file mode 100644 index 0000000..5cad7ff Binary files /dev/null and b/assets/fonts/思源黑体1 SourceHanSansCN-ExtraLight.otf differ diff --git a/assets/fonts/思源黑体2 SourceHanSansCN-Light.otf b/assets/fonts/思源黑体2 SourceHanSansCN-Light.otf new file mode 100644 index 0000000..1cff8e6 Binary files /dev/null and b/assets/fonts/思源黑体2 SourceHanSansCN-Light.otf differ diff --git a/assets/fonts/思源黑体3 SourceHanSansCN-Normal.otf b/assets/fonts/思源黑体3 SourceHanSansCN-Normal.otf new file mode 100644 index 0000000..091f56d Binary files /dev/null and b/assets/fonts/思源黑体3 SourceHanSansCN-Normal.otf differ diff --git a/assets/fonts/思源黑体4 SourceHanSansCN-Regular.otf b/assets/fonts/思源黑体4 SourceHanSansCN-Regular.otf new file mode 100644 index 0000000..886f82f Binary files /dev/null and b/assets/fonts/思源黑体4 SourceHanSansCN-Regular.otf differ diff --git a/assets/fonts/思源黑体5 SourceHanSansCN-Medium.otf b/assets/fonts/思源黑体5 SourceHanSansCN-Medium.otf new file mode 100644 index 0000000..53e03e0 Binary files /dev/null and b/assets/fonts/思源黑体5 SourceHanSansCN-Medium.otf differ diff --git a/assets/fonts/思源黑体6 SourceHanSansCN-Bold.otf b/assets/fonts/思源黑体6 SourceHanSansCN-Bold.otf new file mode 100644 index 0000000..4b3429a Binary files /dev/null and b/assets/fonts/思源黑体6 SourceHanSansCN-Bold.otf differ diff --git a/assets/fonts/站酷文艺体.ttf b/assets/fonts/站酷文艺体.ttf new file mode 100644 index 0000000..39c1858 Binary files /dev/null and b/assets/fonts/站酷文艺体.ttf differ diff --git a/assets/fonts/胡晓波男神体.otf b/assets/fonts/胡晓波男神体.otf new file mode 100644 index 0000000..4cdf94c Binary files /dev/null and b/assets/fonts/胡晓波男神体.otf differ diff --git a/assets/peakCoalImages/coommon/no-data.png b/assets/peakCoalImages/coommon/no-data.png new file mode 100644 index 0000000..d8106b5 Binary files /dev/null and b/assets/peakCoalImages/coommon/no-data.png differ diff --git a/assets/peakCoalImages/left/air-excellent-rate-bg.png b/assets/peakCoalImages/left/air-excellent-rate-bg.png new file mode 100644 index 0000000..b578f6f Binary files /dev/null and b/assets/peakCoalImages/left/air-excellent-rate-bg.png differ diff --git a/assets/peakCoalImages/left/odds-ratio-reduction-icon.png b/assets/peakCoalImages/left/odds-ratio-reduction-icon.png new file mode 100644 index 0000000..2306bb5 Binary files /dev/null and b/assets/peakCoalImages/left/odds-ratio-reduction-icon.png differ diff --git a/assets/peakCoalImages/left/odds-ratio-up-icon.png b/assets/peakCoalImages/left/odds-ratio-up-icon.png new file mode 100644 index 0000000..d46022e Binary files /dev/null and b/assets/peakCoalImages/left/odds-ratio-up-icon.png differ diff --git a/assets/peakCoalImages/left/pollutant-level-icon.png b/assets/peakCoalImages/left/pollutant-level-icon.png new file mode 100644 index 0000000..21437c8 Binary files /dev/null and b/assets/peakCoalImages/left/pollutant-level-icon.png differ diff --git a/assets/peakCoalImages/left/pollutant-reduction-icon.png b/assets/peakCoalImages/left/pollutant-reduction-icon.png new file mode 100644 index 0000000..90ef4e0 Binary files /dev/null and b/assets/peakCoalImages/left/pollutant-reduction-icon.png differ diff --git a/assets/peakCoalImages/left/pollutant-up-icon.png b/assets/peakCoalImages/left/pollutant-up-icon.png new file mode 100644 index 0000000..487c5f6 Binary files /dev/null and b/assets/peakCoalImages/left/pollutant-up-icon.png differ diff --git a/assets/peakCoalImages/left/pollutant-values-bg.png b/assets/peakCoalImages/left/pollutant-values-bg.png new file mode 100644 index 0000000..3dfc9b1 Binary files /dev/null and b/assets/peakCoalImages/left/pollutant-values-bg.png differ diff --git a/assets/peakCoalImages/right/discuss-decide-bg.png b/assets/peakCoalImages/right/discuss-decide-bg.png new file mode 100644 index 0000000..1ad124d Binary files /dev/null and b/assets/peakCoalImages/right/discuss-decide-bg.png differ diff --git a/assets/peakCoalImages/right/electricity-icon.png b/assets/peakCoalImages/right/electricity-icon.png new file mode 100644 index 0000000..449eee6 Binary files /dev/null and b/assets/peakCoalImages/right/electricity-icon.png differ diff --git a/assets/peakCoalImages/right/microsite-icon.png b/assets/peakCoalImages/right/microsite-icon.png new file mode 100644 index 0000000..5d8f602 Binary files /dev/null and b/assets/peakCoalImages/right/microsite-icon.png differ diff --git a/assets/peakCoalImages/right/monitor-point-icon.png b/assets/peakCoalImages/right/monitor-point-icon.png new file mode 100644 index 0000000..d1fe085 Binary files /dev/null and b/assets/peakCoalImages/right/monitor-point-icon.png differ diff --git a/assets/peakCoalImages/right/operational-icon.png b/assets/peakCoalImages/right/operational-icon.png new file mode 100644 index 0000000..0fd576f Binary files /dev/null and b/assets/peakCoalImages/right/operational-icon.png differ diff --git a/assets/peakCoalImages/right/pending-approval-bg.png b/assets/peakCoalImages/right/pending-approval-bg.png new file mode 100644 index 0000000..046fd58 Binary files /dev/null and b/assets/peakCoalImages/right/pending-approval-bg.png differ diff --git a/assets/peakCoalImages/right/tester-icon.png b/assets/peakCoalImages/right/tester-icon.png new file mode 100644 index 0000000..b786415 Binary files /dev/null and b/assets/peakCoalImages/right/tester-icon.png differ diff --git a/assets/peakCoalImages/right/warning-card-bg.png b/assets/peakCoalImages/right/warning-card-bg.png new file mode 100644 index 0000000..28fbc85 Binary files /dev/null and b/assets/peakCoalImages/right/warning-card-bg.png differ diff --git a/assets/peakCoalImages/right/warning-icon.png b/assets/peakCoalImages/right/warning-icon.png new file mode 100644 index 0000000..64d0673 Binary files /dev/null and b/assets/peakCoalImages/right/warning-icon.png differ diff --git a/assets/peakCoalImages/right/warning-site-icon.png b/assets/peakCoalImages/right/warning-site-icon.png new file mode 100644 index 0000000..f27b21c Binary files /dev/null and b/assets/peakCoalImages/right/warning-site-icon.png differ diff --git a/assets/peakCoalImages/right/warning-time-icon.png b/assets/peakCoalImages/right/warning-time-icon.png new file mode 100644 index 0000000..52aa5f5 Binary files /dev/null and b/assets/peakCoalImages/right/warning-time-icon.png differ diff --git a/assets/peakCoalImages/right/water-icon.png b/assets/peakCoalImages/right/water-icon.png new file mode 100644 index 0000000..29ed4d0 Binary files /dev/null and b/assets/peakCoalImages/right/water-icon.png differ diff --git a/assets/styles/mixin.less b/assets/styles/mixin.less index da91cb6..0c456fe 100644 --- a/assets/styles/mixin.less +++ b/assets/styles/mixin.less @@ -1,3 +1,4 @@ +@import "@/assets/fonts/fonts.less"; //表单元素垂直居中对齐（也可设置顶对齐，底对齐） .form-element-v-align(@alignment: middle){ display: inline-block; @@ -82,3 +83,13 @@ flex-flow: row; align-items: center; } + +.flex-column{ + display: flex; + flex-flow: column; +} +.text-ellipsis{ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/components/AirQuality.vue b/components/AirQuality.vue index 6e7244b..e3b0834 100644 --- a/components/AirQuality.vue +++ b/components/AirQuality.vue @@ -2,6 +2,16 @@ @@ -22,9 +32,50 @@ export default { .air-quality-content { width: 100%; height: 601px; - background-image: linear-gradient(62deg, rgba(8,31,55,0.10) 0%, rgba(18,50,81,0.10) 100%); - border: 1px solid transparent; /* 先将边框颜色设置为透明 */ - border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); /* 使用线性渐变作为边框图片 */ - border-image-slice: 1; /* 指定切分边框图像的位置 */ + background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%); +/* border: 1px solid transparent; !* 先将边框颜色设置为透明 *! + border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *! + border-image-slice: 1; !* 指定切分边框图像的位置 *!*/ + .flex-column; + + .air-data { + flex: 1; + .flex-row; + + .excellent-rate { + width: 346px; + height: 100%; + .flex-column; + justify-content: center; + align-items: center; + + ._title { + font-family: MicrosoftYaHei; + font-size: 34.25px; + color: #6AC4FF; + letter-spacing: 2.25px; + text-align: center; + font-weight: 400; + } + + .num-bg { + width: 239px; + height: 270px; + background: url("assets/peakCoalImages/left/air-excellent-rate-bg.png") no-repeat; + background-size: 100% 100%; + font-family: YouSheBiaoTiHei; + font-size: 85.62px; + color: #FFFFFF; + letter-spacing: 5.63px; + font-weight: 700; + line-height: 200px; + text-align: center; + } + } + + .air-quality-trend { + flex: 1; + } + } } diff --git a/components/CheckData.vue b/components/CheckData.vue index 044920f..54d1678 100644 --- a/components/CheckData.vue +++ b/components/CheckData.vue @@ -8,6 +8,72 @@ +
+
+
+
+ {{ item }} +
+
+
+
+
{{ + item.pointName + }} +
+
+
+ {{ `${item.COValue}${item.COUnit}` }} +
+
+ +
+
+
+
+ {{ `${item.SO2Value}${item.SO2Unit}` }} +
+
+ +
+
+
+
+ {{ `${item.NOValue}${item.NOUnit}` }} +
+
+ +
+
+
+
+ {{ `${item.O3Value}${item.O3Unit}` }} +
+
+ +
+
+
+
+ {{ `${item.PM10Value}${item.PM10Unit}` }} +
+
+ +
+
+
+
+ {{ `${item.PM25Value}${item.PM25Unit}` }} +
+
+ +
+
+
+
+
+
@@ -16,7 +82,194 @@ export default { name: "CheckData", data() { return { - title: '实时检查数据' + title: '实时检查数据', + tableItemWidthList: [12, 16, 16, 16, 13, 14, 13], + standardValue: { + COStandardValue: 0.5, + SO2StandardValue: 30, + NOStandardValue: 10, + O3StandardValue: 80, + PM10StandardValue: 50, + PM25StandardValue: 40 + }, + tableHeaderData: ['监测设备', '一氧化碳[0.5%VOL]', '二氧化硫[30mg/m³]', '氮氧化物[10mg/L]', '臭氧[80⏜ppm]', 'PM10[50μg/m³]', 'PM2.5[40μg/m³]'], + dataSource: [ + { + pointName: '监测设备名称', + COValue: 2, + COUnit: '%VOL', + SO2Value: 30, + SO2Unit: 'mg/m³', + NOValue: 20, + NOUnit: 'mg/L', + O3Value: 10, + O3Unit: 'ppm', + PM10Value: 10, + PM10Unit: 'μg/m³', + PM25Value: 30, + PM25Unit: 'μg/m³' + }, + { + pointName: '监测设备名称', + COValue: 2, + COUnit: '%VOL', + SO2Value: 30, + SO2Unit: 'mg/m³', + NOValue: 20, + NOUnit: 'mg/L', + O3Value: 10, + O3Unit: 'ppm', + PM10Value: 10, + PM10Unit: 'μg/m³', + PM25Value: 30, + PM25Unit: 'μg/m³' + }, + { + pointName: '监测设备名称', + COValue: 2, + COUnit: '%VOL', + SO2Value: 30, + SO2Unit: 'mg/m³', + NOValue: 20, + NOUnit: 'mg/L', + O3Value: 10, + O3Unit: 'ppm', + PM10Value: 10, + PM10Unit: 'μg/m³', + PM25Value: 30, + PM25Unit: 'μg/m³' + }, + { + pointName: '监测设备名称', + COValue: 2, + COUnit: '%VOL', + SO2Value: 30, + SO2Unit: 'mg/m³', + NOValue: 20, + NOUnit: 'mg/L', + O3Value: 10, + O3Unit: 'ppm', + PM10Value: 10, + PM10Unit: 'μg/m³', + PM25Value: 30, + PM25Unit: 'μg/m³' + }, + { + pointName: '监测设备名称', + COValue: 2, + COUnit: '%VOL', + SO2Value: 30, + SO2Unit: 'mg/m³', + NOValue: 20, + NOUnit: 'mg/L', + O3Value: 10, + O3Unit: 'ppm', + PM10Value: 10, + PM10Unit: 'μg/m³', + PM25Value: 30, + PM25Unit: 'μg/m³' + }, + { + pointName: '监测设备名称', + COValue: 2, + COUnit: '%VOL', + SO2Value: 30, + SO2Unit: 'mg/m³', + NOValue: 20, + NOUnit: 'mg/L', + O3Value: 10, + O3Unit: 'ppm', + PM10Value: 10, + PM10Unit: 'μg/m³', + PM25Value: 30, + PM25Unit: 'μg/m³' + }, + { + pointName: '监测设备名称', + COValue: 2, + COUnit: '%VOL', + SO2Value: 30, + SO2Unit: 'mg/m³', + NOValue: 20, + NOUnit: 'mg/L', + O3Value: 10, + O3Unit: 'ppm', + PM10Value: 10, + PM10Unit: 'μg/m³', + PM25Value: 30, + PM25Unit: 'μg/m³' + }, + { + pointName: '监测设备名称', + COValue: 2, + COUnit: '%VOL', + SO2Value: 30, + SO2Unit: 'mg/m³', + NOValue: 20, + NOUnit: 'mg/L', + O3Value: 10, + O3Unit: 'ppm', + PM10Value: 10, + PM10Unit: 'μg/m³', + PM25Value: 30, + PM25Unit: 'μg/m³' + }, + { + pointName: '监测设备名称', + COValue: 2, + COUnit: '%VOL', + SO2Value: 30, + SO2Unit: 'mg/m³', + NOValue: 20, + NOUnit: 'mg/L', + O3Value: 10, + O3Unit: 'ppm', + PM10Value: 10, + PM10Unit: 'μg/m³', + PM25Value: 30, + PM25Unit: 'μg/m³' + }, + { + pointName: '监测设备名称', + COValue: 2, + COUnit: '%VOL', + SO2Value: 30, + SO2Unit: 'mg/m³', + NOValue: 20, + NOUnit: 'mg/L', + O3Value: 10, + O3Unit: 'ppm', + PM10Value: 10, + PM10Unit: 'μg/m³', + PM25Value: 30, + PM25Unit: 'μg/m³' + }, + { + pointName: '监测设备名称', + COValue: 2, + COUnit: '%VOL', + SO2Value: 30, + SO2Unit: 'mg/m³', + NOValue: 20, + NOUnit: 'mg/L', + O3Value: 10, + O3Unit: 'ppm', + PM10Value: 10, + PM10Unit: 'μg/m³', + PM25Value: 30, + PM25Unit: 'μg/m³' + } + ] + } + }, + methods: { + //判断数值是上升还是下降 + getOddsRatioIcon(val, valType) { + if (val > this.standardValue[valType]) { + return 'odds-ratio-up-icon' + } else if (val < this.standardValue[valType]) { + return 'odds-ratio-reduction-icon' + } } } } @@ -27,12 +280,14 @@ export default { .check-data { margin-top: 43px; - height: 984px; + height: 1100px; width: 100%; background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%); - border: 1px solid transparent; /* 先将边框颜色设置为透明 */ - border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */ - border-image-slice: 1; /* 指定切分边框图像的位置 */ + /* border: 1px inset transparent; !* 先将边框颜色设置为透明 *! + border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *! + border-image-slice: 1; !* 指定切分边框图像的位置 *!*/ + .flex-column; + overflow: hidden; .right-tip { height: 100%; @@ -45,5 +300,100 @@ export default { padding-right: 10px; .flex-row; } + + .check-data-info { + flex: 1; + padding: 30px 20px 0 20px; + height: 0; + .table-info { + width: 100%; + height: 100%; + .flex-column; + + .table-header { + height: 77px; + background-color: rgba(35, 140, 255, 0.2); + padding: 0 20px; + .flex-row; + + .table-header-item { + font-family: MicrosoftYaHei-Bold; + font-size: 29.97px; + color: #37EAFF; + letter-spacing: 0; + text-align: left; + line-height: 34.25px; + font-weight: 700; + } + } + + .table-body { + height: calc(100% - 77px); + overflow-y: auto; + + .table-item-body { + height: 77px; + background: rgba(21, 77, 160, 0.20); + margin-top: 20px; + .flex-row; + + .point-name { + font-family: MicrosoftYaHei-Bold; + font-size: 29.97px; + color: #FFFFFF; + letter-spacing: 0; + line-height: 34.25px; + font-weight: 700; + text-align: left; + .text-ellipsis; + } + + .data-value { + .flex-row; + justify-content: center; + + ._value { + font-family: MicrosoftYaHei-Bold; + font-size: 29.97px; + color: #FFFFFF; + letter-spacing: 0; + text-align: center; + font-weight: 700; + } + + .odds-ratio-up-icon { + width: 23px; + height: 25px; + background: url("assets/peakCoalImages/left/odds-ratio-up-icon.png") no-repeat; + padding-left: 20px; + } + + .odds-ratio-reduction-icon { + width: 22px; + height: 26px; + background: url("assets/peakCoalImages/left/odds-ratio-reduction-icon.png") no-repeat; + padding-left: 20px; + } + } + } + } + } + } +} +::-webkit-scrollbar { + width: 4px; + height: 4px; +} + +::-webkit-scrollbar-thumb { + border-radius: 5px; + -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); + background-color: rgba(21, 77, 160, 0.20);; +} + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); + border-radius: 5px; + background-color: #d3dce6; } diff --git a/components/DeviceRun.vue b/components/DeviceRun.vue index 3ca370a..c0d74b8 100644 --- a/components/DeviceRun.vue +++ b/components/DeviceRun.vue @@ -2,6 +2,67 @@ @@ -24,8 +85,81 @@ export default { height: 416px; width: 100%; background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%); - border: 1px solid transparent; /* 先将边框颜色设置为透明 */ - border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */ - border-image-slice: 1; /* 指定切分边框图像的位置 */ + /* border: 1px solid transparent; !* 先将边框颜色设置为透明 *! + border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *! + border-image-slice: 1; !* 指定切分边框图像的位置 *!*/ + .flex-column; + + .device-run-info { + flex: 1; + height: 0; + padding: 0 50px; + .flex-row; + justify-content: space-between; + + .device-run-item-info { + .flex-row; + + .monitor-point-icon { + width: 173px; + height: 172px; + background: url("assets/peakCoalImages/right/monitor-point-icon.png") no-repeat; + } + + .microsite-icon { + width: 172px; + height: 173px; + background: url("assets/peakCoalImages/right/microsite-icon.png") no-repeat; + } + + .tester-icon { + width: 173px; + height: 173px; + background: url("assets/peakCoalImages/right/tester-icon.png") no-repeat; + } + + .data-value-info { + padding-left: 20px; + + .monitor-point-total { + .flex-row; + height: 112px; + + ._title { + width: 200px; + font-family: MicrosoftYaHei; + font-size: 34.3px; + color: #6AC4FF; + letter-spacing: 2.26px; + font-weight: 400; + } + + .value-content { + position: relative; + height: 112px; + width: 250px; + .text-bg { + width: 250px; + height: 47px; + position: absolute; + bottom: 30px; + background-image: linear-gradient(270deg, rgba(0, 122, 255, 0.00) 0%, rgba(0, 205, 255, 0.47) 100%); + } + + ._value { + padding-left: 20px; + position: absolute; + font-family: YouSheBiaoTiHei; + font-size: 85.76px; + color: #FFFFFF; + letter-spacing: 5.64px; + font-weight: 400; + line-height: 60px; + } + } + } + } + } + } } diff --git a/components/EnergyUse.vue b/components/EnergyUse.vue index aba9f0d..ac14d7b 100644 --- a/components/EnergyUse.vue +++ b/components/EnergyUse.vue @@ -7,6 +7,24 @@ +
+
+
+
+
+
今日用电[kwh]
+
1244
+
+
+
+
+
+
今日用水[m³]
+
185
+
+
+
+
@@ -22,12 +40,69 @@ export default { diff --git a/components/EnterpriseOperations.vue b/components/EnterpriseOperations.vue index ce3c622..49f3baa 100644 --- a/components/EnterpriseOperations.vue +++ b/components/EnterpriseOperations.vue @@ -7,6 +7,25 @@ +
+
+
+
氮气外供[m³]
+
124
+
+
+
+
液化石油气[t]
+
1123
+
+
+
+
氧气外供[m³]
+
185
+
+
+
+
@@ -22,12 +41,57 @@ export default { diff --git a/components/LatestWarning.vue b/components/LatestWarning.vue index 1755247..83908bc 100644 --- a/components/LatestWarning.vue +++ b/components/LatestWarning.vue @@ -2,18 +2,83 @@ @@ -25,8 +90,28 @@ export default { height: 984px; width: 100%; background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%); - border: 1px solid transparent; /* 先将边框颜色设置为透明 */ - border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */ - border-image-slice: 1; /* 指定切分边框图像的位置 */ + /* border: 1px solid transparent; !* 先将边框颜色设置为透明 *! + border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *! + border-image-slice: 1; !* 指定切分边框图像的位置 *!*/ + .flex-column; + + .latest-warning-info { + flex: 1; + height: 0; + padding: 0 50px; + + .warning-data-list { + height: 100%; + padding-top: 20px; + .seamless-scroll { + height: 100%; + overflow: hidden; + + .event-item { + margin-top: 20px; + } + } + } + } } diff --git a/components/OverviewPollutants.vue b/components/OverviewPollutants.vue index 3015270..fd80723 100644 --- a/components/OverviewPollutants.vue +++ b/components/OverviewPollutants.vue @@ -2,6 +2,21 @@ @@ -10,20 +25,160 @@ export default { name: "OverviewPollutants", data() { return { - title: '污染物信息总览' + title: '污染物信息总览', + pollutantValuesDataList: [ + { + pollutantName: '一氧化碳', + standardValue: 60, + actualValue: '9.0', + unit: 'ug/m³' + }, + { + pollutantName: 'NO2', + standardValue: 60, + actualValue: '60', + unit: 'ug/m³' + }, + { + pollutantName: 'PM10', + standardValue: 60, + actualValue: '60', + unit: 'ug/m³' + }, + { + pollutantName: 'CO', + standardValue: 60, + actualValue: '70', + unit: 'ug/m³' + }, + { + pollutantName: 'O3', + standardValue: 60, + actualValue: '60', + unit: 'ug/m³' + }, + { + pollutantName: 'PM2.5', + standardValue: 60, + actualValue: '9.0', + unit: 'ug/m³' + } + ] + } + }, + methods: { + getPollutantStatueIcon(standardValue, actualValue) { + let value = parseFloat(actualValue) + if (value === standardValue) { + return 'pollutant-level-icon' + } else if (value < standardValue) { + return 'pollutant-reduction-icon' + } else if (value > standardValue) { + return 'pollutant-up-icon' + } } } } diff --git a/components/PollutantTrends.vue b/components/PollutantTrends.vue index 5b7510f..d5b2a0f 100644 --- a/components/PollutantTrends.vue +++ b/components/PollutantTrends.vue @@ -21,8 +21,8 @@ export default { width: 100%; height: 601px; background-image: linear-gradient(62deg, rgba(8,31,55,0.10) 0%, rgba(18,50,81,0.10) 100%); - border: 1px solid transparent; /* 先将边框颜色设置为透明 */ - border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); /* 使用线性渐变作为边框图片 */ - border-image-slice: 1; /* 指定切分边框图像的位置 */ +/* border: 1px solid transparent; !* 先将边框颜色设置为透明 *! + border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); !* 使用线性渐变作为边框图片 *! + border-image-slice: 1; !* 指定切分边框图像的位置 *!*/ } diff --git a/components/SecondaryTitle.vue b/components/SecondaryTitle.vue index 9e95929..4fec2f7 100644 --- a/components/SecondaryTitle.vue +++ b/components/SecondaryTitle.vue @@ -42,6 +42,8 @@ export default { } ._title { + height: 100%; + line-height: 84px; padding-left: 100px; float: left; font-family: AlimamaShuHeiTi-Bold; diff --git a/components/WarningInfoItem.vue b/components/WarningInfoItem.vue new file mode 100644 index 0000000..a7b8563 --- /dev/null +++ b/components/WarningInfoItem.vue @@ -0,0 +1,152 @@ + + + + + + diff --git a/components/WarningStatistics.vue b/components/WarningStatistics.vue index b9ead60..df53881 100644 --- a/components/WarningStatistics.vue +++ b/components/WarningStatistics.vue @@ -2,7 +2,15 @@ @@ -25,8 +33,49 @@ export default { height: 984px; width: 100%; background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%); - border: 1px solid transparent; /* 先将边框颜色设置为透明 */ - border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */ - border-image-slice: 1; /* 指定切分边框图像的位置 */ + /* border: 1px solid transparent; !* 先将边框颜色设置为透明 *! + border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *! + border-image-slice: 1; !* 指定切分边框图像的位置 *!*/ + .flex-column; + + .warning-statistics-info { + flex: 1; + height: 0; + padding: 0 50px; + + .warning-total-info { + height: 238px; + .flex-row; + + .warning-data { + width: 100%; + height: 152px; + background: rgba(1, 120, 198, 0.30); + .flex-row; + justify-content: space-around; + .warning-icon { + width: 194px; + height: 114px; + background: url("assets/peakCoalImages/right/warning-icon.png") no-repeat; + } + + ._title { + font-family: MicrosoftYaHei; + font-size: 34.3px; + color: #6AC4FF; + letter-spacing: 2.26px; + font-weight: 400; + } + + ._value { + font-family: YouSheBiaoTiHei; + font-size: 85.76px; + color: #FFFFFF; + letter-spacing: 5.64px; + font-weight: 400; + } + } + } + } } diff --git a/nuxt.config.js b/nuxt.config.js index 130c0e8..f6aee9c 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -26,7 +26,8 @@ export default { css: [ 'ant-design-vue/dist/antd.css', - '@/assets/styles/mixin.less' + '@/assets/styles/mixin.less', + ], // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins diff --git a/pages/visual/PeakCoalView.vue b/pages/visual/PeakCoalView.vue index fda5156..039bd0d 100644 --- a/pages/visual/PeakCoalView.vue +++ b/pages/visual/PeakCoalView.vue @@ -167,11 +167,10 @@ body, html, #__nuxt, #__layout { background: url("assets/peakCoalImages/left/left-content-bg.png") no-repeat center 60px; padding: 300px 476px 100px 412px; perspective: 500px; - .left-data-panel { height: 100%; width: 100%; - transform: rotateY(2deg); + transform: rotateY(2deg) ; transform-origin: left center; } }