diff --git a/src/api/device/index.ts b/src/api/device/index.ts index c82a8a2..1aee09b 100644 --- a/src/api/device/index.ts +++ b/src/api/device/index.ts @@ -68,6 +68,24 @@ export function getDevices(params: number): AxiosPromise<[]> { method: 'get' }); } +/** + * 获取图表详情设备筛选项 + */ +export function getAllDevices(): AxiosPromise<[]> { + return request({ + url: '/dc/dcDeviceEcharts/getAllDevices', + method: 'get' + }); +} +/** + * 获取图表详情参数集 + */ +export function getClass(): AxiosPromise<[]> { + return request({ + url: '/dc/dcDeviceEcharts/getParamSet', + method: 'get' + }); +} /** * 获取图表详情参数筛选项 */ diff --git a/src/api/device/types.ts b/src/api/device/types.ts index 423913c..6c6fc9d 100644 --- a/src/api/device/types.ts +++ b/src/api/device/types.ts @@ -63,17 +63,24 @@ export interface partitionVo { updateBy: null; updateTime: null; } +export interface classVo { + list: parameterVo; + paramSetName: string; + setId: string; +} export interface parameterVo { - classType: string; - createTime: null; - deleteTime: null; - id: number; - note: null; paramClassCode: string; paramClassName: string; - paramUnit: string; - updateTime: null; - version: null; + // classType: string; + // createTime: null; + // deleteTime: null; + // id: number; + // note: null; + // paramClassCode: string; + // paramClassName: string; + // paramUnit: string; + // updateTime: null; + // version: null; } export interface seriesVo { index: number; @@ -85,3 +92,10 @@ export interface seriesVo { unit: string; data: Array; } +export interface mainInfoVo { + name: string; + paramUnit: string; + index: number; + average: number; + data: []; +} diff --git a/src/assets/fonts/LixukeXingshu.ttf b/src/assets/fonts/LixukeXingshu.ttf new file mode 100644 index 0000000..4ae7277 Binary files /dev/null and b/src/assets/fonts/LixukeXingshu.ttf differ diff --git a/src/assets/fonts/PangMenZhengDaoBiao.ttf b/src/assets/fonts/PangMenZhengDaoBiao.ttf new file mode 100644 index 0000000..cd65b62 Binary files /dev/null and b/src/assets/fonts/PangMenZhengDaoBiao.ttf differ diff --git a/src/assets/fonts/font.css b/src/assets/fonts/font.css index 509d933..96f3abd 100644 --- a/src/assets/fonts/font.css +++ b/src/assets/fonts/font.css @@ -10,3 +10,11 @@ font-family: 'AlibabaPuHuiTiBold'; src: url('AlibabaPuHuiTiBold.ttf') format('truetype'); } +@font-face { + font-family: 'LixukeXingshu'; + src: url('LixukeXingshu.ttf') format('truetype'); +} +@font-face { + font-family: 'PangMenZhengDaoBiao'; + src: url('PangMenZhengDaoBiao.ttf') format('truetype'); +} diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts index 67e581d..5742656 100644 --- a/src/types/auto-imports.d.ts +++ b/src/types/auto-imports.d.ts @@ -2,6 +2,7 @@ export {} declare global { const EffectScope: typeof import('vue')['EffectScope'] + const ElForm: typeof import('element-plus/es')['ElForm'] const ElMessage: typeof import('element-plus/es')['ElMessage'] const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] const ElNotification: typeof import('element-plus/es')['ElNotification'] @@ -272,6 +273,7 @@ import { UnwrapRef } from 'vue' declare module 'vue' { interface ComponentCustomProperties { readonly EffectScope: UnwrapRef + readonly ElForm: UnwrapRef readonly ElMessage: UnwrapRef readonly ElMessageBox: UnwrapRef readonly ElNotification: UnwrapRef diff --git a/src/types/components.d.ts b/src/types/components.d.ts index f443eaa..0dcb051 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -22,11 +22,10 @@ declare module '@vue/runtime-core' { ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] ElForm: typeof import('element-plus/es')['ElForm'] ElFormItem: typeof import('element-plus/es')['ElFormItem'] - ElIcon: typeof import('element-plus/es')['ElIcon'] ElInput: typeof import('element-plus/es')['ElInput'] + ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] - ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup'] ElOption: typeof import('element-plus/es')['ElOption'] ElPagination: typeof import('element-plus/es')['ElPagination'] ElRow: typeof import('element-plus/es')['ElRow'] @@ -36,6 +35,7 @@ declare module '@vue/runtime-core' { ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElTable: typeof import('element-plus/es')['ElTable'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] + ElTimePicker: typeof import('element-plus/es')['ElTimePicker'] ElTooltip: typeof import('element-plus/es')['ElTooltip'] ElTree: typeof import('element-plus/es')['ElTree'] Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] diff --git a/src/views/details/index.scss b/src/views/details/index.scss index 8abceea..172dc41 100644 --- a/src/views/details/index.scss +++ b/src/views/details/index.scss @@ -1,3 +1,4 @@ +@import url('@/assets/fonts/font.css'); .details { padding: 1.5rem 1.5rem 0 1.5rem; .header { @@ -5,14 +6,27 @@ } .search { margin-bottom: 1.5rem; + :deep(.el-card__header) { + padding: 10px; + } :deep(.el-card__body) { padding: 20px 20px 0 20px; } .cardHeader { display: flex; - justify-content: space-between; + justify-content: center; align-items: center; + line-height: 25px; + position: relative; + span { + font-size: 24px; + font-family: 'PangMenZhengDaoBiao'; + color: var(--el-menu-active-color); + } .tooltips { + position: absolute; + top: -5px; + right: 10px; width: 36px; height: 36px; border-radius: 0px 0px 0px 0px; @@ -22,6 +36,9 @@ .searchForm { .item { margin-bottom: 20px; + .searchCheckbox { + margin-right: 30px; + } } .formBtn { padding: 0 20px; @@ -31,34 +48,119 @@ .echart { :deep(.el-card__body) { display: flex; + padding: 1.5rem; .sidebar { - width: 220px; + width: 200px; border: 1px solid #e8eaec; - margin-right: 1.5rem; + + h3 { + height: 25px; + line-height: 25px; + margin: 15px 0; + font-size: 22px; + font-family: 'PangMenZhengDaoBiao'; + color: var(--el-menu-active-color); + text-align: center; + } .deviceMenu { + height: calc(100vh - 205px - 7.5rem); border-right: none; + overflow: auto; .el-menu-item { + display: block; + width: 100%; height: 45px; line-height: 45px; + padding: 0 20px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + .iconfont { + margin-right: 6px; + } } } + + .paramList { + height: calc(100vh - 150px - 7.5rem); + padding: 20px 10px; + overflow: auto; + .item { + font-size: 14px; + padding: 10px 0; + line-height: 30px; + border-bottom: 1px dashed #cacaca; + .name { + display: flex; + align-items: center; + i { + width: 12px; + height: 12px; + border-radius: 10px; + margin-right: 5px; + } + } + } + } + + /*滚动条整体部分*/ + .deviceMenu::-webkit-scrollbar, + .paramList::-webkit-scrollbar { + width: 5px; + height: 8px; + } + + /*滚动条的轨道*/ + .deviceMenu::-webkit-scrollbar-track, + .paramList::-webkit-scrollbar-track { + background-color: transparent; + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + } + + /*滚动条里面的小方块，能向上向下移动*/ + .deviceMenu::-webkit-scrollbar-thumb, + .paramList::-webkit-scrollbar-thumb { + background-color: rgb(147, 147, 153, 0.5); + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + } + + .deviceMenu::-webkit-scrollbar-thumb:hover, + .paramList::-webkit-scrollbar-thumb:hover { + background-color: #a8a8a8; + } + + .deviceMenu:-webkit-scrollbar-thumb:active, + .paramList:-webkit-scrollbar-thumb:active { + background-color: #787878; + } + + /*边角，即两个滚动条的交汇处*/ + .deviceMenu::-webkit-scrollbar-corner, + .paramList::-webkit-scrollbar-corner { + background-color: transparent; + } } .comparisonInfo { flex: 1; + margin: 0 1.5rem; .stackedLine { width: 100%; - height: 66vh; + height: calc(100vh - 150px - 7.5rem); font-size: 1.4rem; text-align: center; color: #606266; - line-height: 82vh; + line-height: calc(100vh - 150px - 7.5rem); } } } } .copyright { - height: 30px; - line-height: 30px; + height: 40px; + line-height: 40px; text-align: center; color: #9ca3af; font-family: Arial; @@ -66,3 +168,24 @@ letter-spacing: 1px; } } +/** pc **/ +@media only screen and (min-width: 768px) and (max-width: 1680px) { + .details { + color: red; + .echart { + :deep(.el-card__body) { + .sidebar { + .deviceMenu { + height: calc(100vh - 266px - 7.5rem) !important; + } + } + .comparisonInfo { + .stackedLine { + height: calc(100vh - 211px - 7.5rem); + line-height: calc(100vh - 211px - 7.5rem) !important; + } + } + } + } + } +} diff --git a/src/views/details/index.vue b/src/views/details/index.vue index f880074..4dcfe47 100644 --- a/src/views/details/index.vue +++ b/src/views/details/index.vue @@ -3,7 +3,7 @@