| | |
|---|
| | | <template> |
|---|
| | | <el-row class="wrap"> |
|---|
| | | <el-col span="2" class="flex-col"> |
|---|
| | | <el-row justify="end"> |
|---|
| | | <CardButton |
|---|
| | | name="走航数据详情" |
|---|
| | | direction="left" |
|---|
| | | @click="() => (show = !show)" |
|---|
| | | ></CardButton> |
|---|
| | | </el-row> |
|---|
| | | <el-row class="flex-col"> |
|---|
| | | <DataSummary |
|---|
| | | v-show="show" |
|---|
| | | :loading="loading" |
|---|
| | | :factor-datas="factorDatas" |
|---|
| | | :select-factor-type="selectFactorType" |
|---|
| | | ></DataSummary> |
|---|
| | | </el-row> |
|---|
| | | </el-col> |
|---|
| | | <el-col v-show="show" span="10"> |
|---|
| | | <el-row align="bottom"> |
|---|
| | | <DataTable |
|---|
| | | :loading="loading" |
|---|
| | | :select-factor-type="selectFactorType" |
|---|
| | | :factor-datas="factorDatas" |
|---|
| | | :device-type="deviceType" |
|---|
| | | :device-code="deviceCode" |
|---|
| | | :locate-index="locateIndex" |
|---|
| | | @table-click="handleTableClick" |
|---|
| | | ></DataTable> |
|---|
| | | <FactorCheckbox |
|---|
| | | direction="left" |
|---|
| | | vertical |
|---|
| | | borderless-direction="r" |
|---|
| | | v-model="selectFactorType" |
|---|
| | | :device-type="deviceType" |
|---|
| | | ></FactorCheckbox> |
|---|
| | | </el-row> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | // import { toRefs } from 'vue'; |
|---|
| | | import { TYPE0 } from '@/constant/device-type'; |
|---|
| | | import { defaultFactorTypes } from '@/constant/checkbox-options'; |
|---|
| | | import { FactorDatas } from '@/model/FactorDatas'; |
|---|
| | | // import { useDefaultFactorType } from "../../../composables/defaultFactorType"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | // setup(){ |
|---|
| | | // const {selectFactorType, props} = useDefaultFactorType() |
|---|
| | | // return {selectFactorType, ...toRefs(props)} |
|---|
| | | // }, |
|---|
| | | props: { |
|---|
| | | loading: Boolean, |
|---|
| | | factorDatas: FactorDatas, |
|---|
| | | deviceType: { |
|---|
| | | type: String, |
|---|
| | | // type0: 车载或无人机; type1:无人船 |
|---|
| | | default: TYPE0 |
|---|
| | | }, |
|---|
| | | deviceCode: String, |
|---|
| | | // 当前选中高亮的数据点索引 |
|---|
| | | locateIndex: Number |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | selectFactorType: defaultFactorTypes(this.deviceType), |
|---|
| | | show: false |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | emits: ['tableClick'], |
|---|
| | | watch: { |
|---|
| | | deviceType(nV, oV) { |
|---|
| | | if (nV != oV) { |
|---|
| | | this.selectFactorType = defaultFactorTypes(nV); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | handleTableClick(index) { |
|---|
| | | this.$emit('tableClick', index); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | | .flex-col { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: space-between; |
|---|
| | | } |
|---|
| | | </style> |
|---|
