!107 网关标识
Merge pull request !107 from Alioo/develop_alioo
| | |
| | | |
| | | .svg-icon { |
| | | margin-right: 16px; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .el-menu { |
| | |
| | | .sub-menu-title-noDropdown, |
| | | .el-sub-menu__title { |
| | | &:hover { |
| | | background-color: rgba(0, 0, 0, 0.06) !important; |
| | | background-color: rgba(0, 0, 0, 0.2) !important; |
| | | } |
| | | } |
| | | |
| | | & .theme-dark .is-active > .el-sub-menu__title { |
| | | color: $base-menu-color-active !important; |
| | | background-color: rgba(0, 0, 0, 0.2) !important; |
| | | } |
| | | |
| | | & .nest-menu .el-sub-menu > .el-sub-menu__title, |
| | |
| | | |
| | | .svg-icon { |
| | | margin-right: 16px; |
| | | font-size: 16px; |
| | | font-size: 14px; |
| | | color: #C3C3C3; |
| | | } |
| | | |
| | |
| | | } |
| | | } |
| | | |
| | | & .theme-dark .is-active > .el-sub-menu__title { |
| | | // color: $base-menu-color-active !important; |
| | | |
| | | & .theme-light .is-active > .el-sub-menu__title { |
| | | color: $--color-primary !important; |
| | | // background-color: #eaeff8 !important; |
| | | } |
| | | |
| | | & .nest-menu .el-sub-menu > .el-sub-menu__title, |
| | |
| | | </div> |
| | | <div class="mycard-content"> |
| | | <div class="data-box" v-if="props.tabArray.length > 0"> |
| | | <div v-for="(item, i) in props.tabArray" :key="i" class="li-box" :class="isActive == item.value ? 'is-li' : ''" |
| | | @click="changeActive(item.value)"> |
| | | <div |
| | | v-for="(item, i) in props.tabArray" |
| | | :key="i" |
| | | class="li-box" |
| | | :class="isActive == item.value ? 'is-li' : ''" |
| | | @click="changeActive(item.value)" |
| | | > |
| | | {{ item.label }} |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | const emit = defineEmits(); |
| | | const emit = defineEmits() |
| | | const props = defineProps({ |
| | | title: { |
| | | type: String, |
| | |
| | | type: Array, |
| | | default: () => [], |
| | | }, |
| | | }); |
| | | }) |
| | | const data = reactive({ |
| | | isActive: "DAY", |
| | | }); |
| | | const { isActive } = toRefs(data); |
| | | changeActive(isActive.value); |
| | | }) |
| | | const { isActive } = toRefs(data) |
| | | changeActive(isActive.value) |
| | | |
| | | function changeActive(value) { |
| | | isActive.value = value; |
| | | emit("changeActive", isActive.value); |
| | | isActive.value = value |
| | | emit("changeActive", isActive.value) |
| | | } |
| | | </script> |
| | | |
| | |
| | | align-items: center; |
| | | height: 3.7037vh; //40 |
| | | padding-left: 2.1354vw; //41px; |
| | | background: url('../../assets/images/basecard/title_bg.png') no-repeat; |
| | | background: url("../../assets/images/basecard/title_bg.png") no-repeat; |
| | | background-size: auto 100%; |
| | | |
| | | .name { |
| | | font-family: YouSheBiaoTiHei; |
| | | font-size: 1.2500vw; //24px; |
| | | font-size: 1.25vw; //24px; |
| | | color: #fff; |
| | | } |
| | | } |
| | | |
| | | .mycard-content { |
| | | border: 1px solid; |
| | | border-image: linear-gradient(0deg, #0A3C86, #000) 1; |
| | | border-image: linear-gradient(0deg, #0a3c86, #000) 1; |
| | | background: linear-gradient(0deg, rgba(18, 111, 216, 0.2) 0%, rgba(18, 111, 216, 0) 100%); |
| | | position: relative; |
| | | |
| | |
| | | z-index: 1; |
| | | |
| | | .li-box { |
| | | border: 1px solid #2E86EA; |
| | | border: 1px solid #2e86ea; |
| | | cursor: pointer; |
| | | text-align: center; |
| | | padding: 0.3704vh 0.3125vw; |
| | |
| | | } |
| | | |
| | | .is-li { |
| | | background: #2E86EA; |
| | | border: 1px solid #2E86EA; |
| | | background: #2e86ea; |
| | | border: 1px solid #2e86ea; |
| | | } |
| | | } |
| | | } |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | defineProps(['title']) |
| | | |
| | | defineProps(["title"]) |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | border-radius: 10px 10px 10px 10px; |
| | | border: 1px solid #22408c; |
| | | padding-bottom: 10px; |
| | | |
| | | |
| | | .mycard-title { |
| | | display: flex; |
| | | justify-content: flex-start; |
| | |
| | | name: item.name, |
| | | type: props.chartType, // 根据传入类型渲染 |
| | | data: item.data, |
| | | barWidth: "16", |
| | | barWidth: props.chartData.barWidth || "16", |
| | | itemStyle: { |
| | | borderRadius: [15, 15, 0, 0], |
| | | }, |
| | |
| | | <style lang="scss" scoped> |
| | | .themeDark { |
| | | .tags-view-container { |
| | | height: 56px; |
| | | height: 52px; |
| | | width: 100%; |
| | | background: #1a235d; |
| | | // border-bottom: 1px solid #d8dce5; |
| | |
| | | display: inline-block; |
| | | position: relative; |
| | | cursor: pointer; |
| | | height: 36px; |
| | | line-height: 36px; |
| | | height: 32px; |
| | | line-height: 30px; |
| | | border: 1px solid #5278f5; |
| | | color: #fff; |
| | | // background: #3271eb; |
| | | padding: 0 14px; |
| | | padding: 0 12px; |
| | | font-size: 14px; |
| | | margin-left: 6px; |
| | | margin-top: 10px; |
| | |
| | | |
| | | .themeLight { |
| | | .tags-view-container { |
| | | height: 56px; |
| | | height: 52px; |
| | | width: 100%; |
| | | background: #fff; |
| | | // border-bottom: 1px solid #d8dce5; |
| | |
| | | display: inline-block; |
| | | position: relative; |
| | | cursor: pointer; |
| | | height: 36px; |
| | | line-height: 36px; |
| | | height: 32px; |
| | | line-height: 30px; |
| | | border: 1px solid #d8dce5; |
| | | color: #495060; |
| | | background: #fff; |
| | | padding: 0 14px; |
| | | padding: 0 12px; |
| | | font-size: 14px; |
| | | margin-left: 6px; |
| | | margin-top: 10px; |
| | |
| | | :chartData="{ |
| | | title: item.accumulationLabel, |
| | | chartType: 'bar', |
| | | barWidth: '10', |
| | | xAxis: item.accumulationKeyList, |
| | | series: [ |
| | | { |
| | |
| | | width: 100%; |
| | | margin-top: 12px; |
| | | padding-bottom: 24px; |
| | | } |
| | | .display-buttons { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | align-items: center; |
| | | margin-top: 16px; |
| | | margin-right: 16px; |
| | | .display-btn, |
| | | .active-display-btn { |
| | | width: 78px; |
| | | height: 34px; |
| | | background: #fff; |
| | | color: #409eff; |
| | | border: 2px solid #409eff; |
| | | border-radius: 4px; |
| | | margin-left: 10px; |
| | | text-align: center; |
| | | line-height: 31px; |
| | | font-size: 14px; |
| | | font-weight: 400; |
| | | cursor: pointer; |
| | | &:hover { |
| | | opacity: 0.9; |
| | | } |
| | | } |
| | | .active-display-btn { |
| | | background: #409eff; |
| | | color: #fff; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | width: 100%; |
| | | height: 100% !important; |
| | | } |
| | | .display-buttons { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | align-items: center; |
| | | margin-top: 16px; |
| | | margin-right: 16px; |
| | | .display-btn, |
| | | .active-display-btn { |
| | | width: 78px; |
| | | height: 34px; |
| | | background: #fff; |
| | | color: #409eff; |
| | | border: 2px solid #409eff; |
| | | border-radius: 4px; |
| | | margin-left: 10px; |
| | | text-align: center; |
| | | line-height: 31px; |
| | | font-size: 14px; |
| | | font-weight: 400; |
| | | cursor: pointer; |
| | | &:hover { |
| | | opacity: 0.9; |
| | | } |
| | | } |
| | | .active-display-btn { |
| | | background: #409eff; |
| | | color: #fff; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | </el-form> |
| | | </div> |
| | | <div class="display-buttons"> |
| | | <div class="display-btn" @click="activeKey = 1" :class="{ 'active-display-btn': activeKey === 1 }"> |
| | | <div class="display-btn" @click="switchBtnType(1)" :class="{ 'active-display-btn': activeKey === 1 }"> |
| | | 图形 |
| | | </div> |
| | | <div class="display-btn" @click="activeKey = 2" :class="{ 'active-display-btn': activeKey === 2 }"> |
| | | <div class="display-btn" @click="switchBtnType(2)" :class="{ 'active-display-btn': activeKey === 2 }"> |
| | | 数据 |
| | | </div> |
| | | </div> |
| | |
| | | queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD HH:00:00") |
| | | getElectricityMeter({ modelId: queryParams.value.nodeId }) |
| | | } |
| | | |
| | | function switchBtnType(e) { |
| | | activeKey.value = e |
| | | if (e === 1) { |
| | | getList() |
| | | } |
| | | } |
| | | const LineChartRef = ref() |
| | | function getList() { |
| | | loading.value = true |
| | |
| | | .card-list { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | padding: 18px; |
| | | padding-top: 12px; |
| | | |
| | | .card-list-item { |
| | | width: 24%; |
| | | height: 167px; |
| | | height: 160px; |
| | | background: #223386; |
| | | border-radius: 5px 5px 5px 5px; |
| | | border: 1px solid #4868b7; |
| | |
| | | .card-list { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | padding: 18px; |
| | | padding-top: 12px; |
| | | |
| | | .card-list-item { |
| | | width: 24%; |
| | | height: 167px; |
| | | height: 160px; |
| | | background: #fff; |
| | | border-radius: 5px 5px 5px 5px; |
| | | border: 1px solid #e8e8e8; |
| | |
| | | }, |
| | | grid: { |
| | | top: "45", |
| | | left: "7%", |
| | | left: "2%", |
| | | right: "5%", |
| | | bottom: "10", |
| | | containLabel: true, |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="handleQuery">搜索</el-button> |
| | | <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
| | | <el-button icon="Refresh" @click="resetQuery">重置</el-button> |
| | | </el-form-item> |
| | | <el-form-item style="float: right"> |
| | | <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button> |
| | | <el-button type="primary" icon="plus" @click="handleDialog('add')">新增</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | |
| | | <dict-tag :options="sys_device_type" :value="scope.row.deviceType" /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="gatewayKey" label="网关标识" align="center" show-overflow-tooltip /> |
| | | <el-table-column fixed="right" label="操作" width="180" align="center" show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row.id)"> 修改 </el-button> |
| | |
| | | <el-option v-for="dict in sys_device_type" :key="dict.value" :label="dict.label" :value="dict.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="网关标识" prop="gatewayKey"> |
| | | <el-input v-model="form.gatewayKey" placeholder="请输入网关标识" clearable /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | |
| | | color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"], |
| | | grid: { |
| | | top: "45", |
| | | left: "7%", |
| | | left: "4%", |
| | | right: "5%", |
| | | bottom: "10", |
| | | containLabel: true, |
| | |
| | | color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"], |
| | | grid: { |
| | | top: "45", |
| | | left: "7%", |
| | | left: "4%", |
| | | right: "5%", |
| | | bottom: "10", |
| | | containLabel: true, |
| | |
| | | </el-form> |
| | | </div> |
| | | <div class="display-buttons"> |
| | | <div class="display-btn" @click="activeKey = 1" :class="{ 'active-display-btn': activeKey === 1 }"> |
| | | <div class="display-btn" @click="switchBtnType(1)" :class="{ 'active-display-btn': activeKey === 1 }"> |
| | | 图形 |
| | | </div> |
| | | <div class="display-btn" @click="activeKey = 2" :class="{ 'active-display-btn': activeKey === 2 }"> |
| | | <div class="display-btn" @click="switchBtnType(2)" :class="{ 'active-display-btn': activeKey === 2 }"> |
| | | 数据 |
| | | </div> |
| | | </div> |
| | |
| | | queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD") |
| | | getElectricityMeter({ nodeId: queryParams.value.nodeId }) |
| | | } |
| | | |
| | | function switchBtnType(e) { |
| | | activeKey.value = e |
| | | if (e === 1) { |
| | | getList() |
| | | } |
| | | } |
| | | |
| | | const LineChartRef = ref() |
| | | function getList() { |
| | | loading.value = true |
| | |
| | | width: 100%; |
| | | height: 100% !important; |
| | | } |
| | | .display-buttons { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | align-items: center; |
| | | margin-top: 16px; |
| | | margin-right: 16px; |
| | | .display-btn, |
| | | .active-display-btn { |
| | | width: 78px; |
| | | height: 34px; |
| | | background: #fff; |
| | | color: #409eff; |
| | | border: 2px solid #409eff; |
| | | border-radius: 4px; |
| | | margin-left: 10px; |
| | | text-align: center; |
| | | line-height: 31px; |
| | | font-size: 14px; |
| | | font-weight: 400; |
| | | cursor: pointer; |
| | | &:hover { |
| | | opacity: 0.9; |
| | | } |
| | | } |
| | | .active-display-btn { |
| | | background: #409eff; |
| | | color: #fff; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | padding: 0 10px; |
| | | |
| | | .title { |
| | | font-size: 14px; |
| | | color: rgba(255, 255, 255, 0.8); |
| | | font-family: OPPOSans, OPPOSans; |
| | | font-weight: 500; |
| | |
| | | } |
| | | |
| | | &-li { |
| | | width: 240px; |
| | | margin-right: 10px; |
| | | margin-top: 16px; |
| | | width: 18%; |
| | | min-width: 190px; |
| | | margin: 1%; |
| | | border-radius: 5px; |
| | | border: 1px solid #ebebeb; |
| | | margin-bottom: 5px; |
| | |
| | | padding: 0 10px; |
| | | |
| | | .title { |
| | | font-size: 14px; |
| | | color: #676767; |
| | | font-family: OPPOSans, OPPOSans; |
| | | font-weight: 500; |
| | |
| | | } |
| | | |
| | | .num { |
| | | font-size: 22px; |
| | | font-size: 24px; |
| | | color: #3271eb; |
| | | font-family: OPPOSans, OPPOSans; |
| | | font-weight: 800; |
| | | font-size: 32px; |
| | | text-align: left; |
| | | font-style: normal; |
| | | text-transform: none; |
| | |
| | | text-align: left; |
| | | font-style: normal; |
| | | text-transform: none; |
| | | font-size: 14px; |
| | | } |
| | | } |
| | | |