123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414 |
- <template>
- <div class="charts-container">
- <a-select ref="select" v-model:value="chartsType" size="small" style="position: absolute; z-index: 99; top: 2px; left: 2px; width: 98px">
- <a-select-option value="listMonitor">实时监测</a-select-option>
- <a-select-option value="detail">详情监测</a-select-option>
- <a-select-option value="history">历史记录</a-select-option>
- </a-select>
- <div class="charts-box" v-if="chartsType === 'listMonitor'" style="position: absolute; top: 20px">
- <BarAndLine
- :chartsColumnsType="chartsColumnsType"
- :xAxisPropType="xAxisPropType"
- :dataSource="dataSource"
- height="100%"
- chartsType="listMonitor"
- :option="echartsOption"
- :chartsColumns="chartsColumns"
- />
- </div>
- <div class="charts-box" v-else-if="chartsType === 'detail' && deviceListApi">
- <Select
- :options="options"
- :fieldNames="{ label: 'strname', value: 'deviceID' }"
- v-model:value="deviceId"
- placeholder="请选择查看的设备"
- size="small"
- style="position: absolute; z-index: 99; left: 102px; width: 150px; top: 2px"
- />
- <BarAndLine
- :chartsColumnsType="chartsColumnsType"
- :xAxisPropType="resultXAxisPropType"
- :dataSource="detailDataSource"
- height="100%"
- :option="echartsOption2"
- chartsType="detail"
- :chartsColumns="chartsColumns"
- />
- </div>
- <div class="charts-box" v-else-if="chartsType === 'history'">
- <Select
- :options="options"
- :fieldNames="{ label: 'strname', value: 'deviceID' }"
- v-model:value="deviceId"
- placeholder="请选择查看的设备"
- size="small"
- style="position: absolute; z-index: 99; left: 102px; width: 150px; top: 2px"
- />
- <template v-if="globalConfig.History_Type == 'vent'">
- <a-date-picker
- v-model:value="historyParams.ttime_begin"
- valueFormat="YYYY-MM-DD HH:mm:ss"
- placeholder="请选择开始日期"
- size="small"
- :showTime="true"
- style="position: absolute; z-index: 99; left: 254px; width: 170px; top: 2px"
- />
- <a-date-picker
- v-model:value="historyParams.ttime_end"
- valueFormat="YYYY-MM-DD HH:mm:ss"
- placeholder="请选择结束日期"
- size="small"
- :showTime="true"
- style="position: absolute; z-index: 99; left: 426px; width: 170px; top: 2px"
- />
- <a-select
- ref="select"
- v-model:value="historyParams.skip"
- placeholder="请选择间隔时间"
- size="small"
- style="position: absolute; z-index: 99; top: 2px; left: 598px; width: 150px"
- >
- <a-select-option value="1">1秒</a-select-option>
- <a-select-option value="2">5秒</a-select-option>
- <a-select-option value="3">10秒</a-select-option>
- <a-select-option value="4">30分钟</a-select-option>
- <a-select-option value="5">1分钟</a-select-option>
- <a-select-option value="6">10分钟</a-select-option>
- <a-select-option value="7">30分钟</a-select-option>
- <a-select-option value="8">1小时</a-select-option>
- </a-select>
- </template>
- <template v-else>
- <a-date-picker
- v-model:value="historyParams.startTime"
- valueFormat="YYYY-MM-DD HH:mm:ss"
- placeholder="开始时间"
- size="small"
- :showTime="true"
- style="position: absolute; z-index: 99; left: 254px; width: 170px; top: 2px"
- />
- <a-date-picker
- v-model:value="historyParams.endTime"
- valueFormat="YYYY-MM-DD HH:mm:ss"
- placeholder="结束时间"
- size="small"
- :showTime="true"
- style="position: absolute; z-index: 99; left: 426px; width: 170px; top: 2px"
- />
- <a-select
- ref="select"
- v-model:value="historyParams.interval"
- placeholder="请选择间隔时间"
- size="small"
- style="position: absolute; z-index: 99; top: 2px; left: 598px; width: 150px"
- >
- <a-select-option value="1s">1秒</a-select-option>
- <a-select-option value="5s">5秒</a-select-option>
- <a-select-option value="10s">10秒</a-select-option>
- <a-select-option value="30s">30秒</a-select-option>
- <a-select-option value="1m">1分钟</a-select-option>
- <a-select-option value="10m">5分钟</a-select-option>
- <a-select-option value="30m">10分钟</a-select-option>
- <a-select-option value="1h">1小时</a-select-option>
- </a-select>
- </template>
- <Pagination
- size="small"
- v-model:current="currentPage"
- v-model:page-size="pageSize"
- :total="total"
- :show-total="(total) => `共 ${total} 条`"
- style="position: absolute; z-index: 99; top: 2px; right: 30px"
- />
- <BarAndLine
- :chartsColumnsType="chartsColumnsType"
- :xAxisPropType="resultXAxisPropType"
- :dataSource="resultDataSource"
- height="100%"
- :option="echartsOption1"
- chartsType="history"
- style="margin-top: 20px"
- :chartsColumns="chartsColumns"
- />
- </div>
- </div>
- </template>
- <script lang="ts">
- import { ref, defineComponent, watch, reactive, onMounted, watchEffect, inject } from 'vue';
- import BarAndLine from '/@/components/chart/BarAndLine.vue';
- import dayjs from 'dayjs';
- import { defHttp } from '/@/utils/http/axios';
- import { Select, Pagination } from 'ant-design-vue';
- export default defineComponent({
- name: 'DeviceEcharts',
- components: { BarAndLine, Select, Pagination },
- props: {
- chartsColumns: {
- type: Array,
- default: () => [],
- },
- chartsColumnsHistory: {
- type: Array,
- default: () => [],
- },
- chartsColumnsType: {
- type: String,
- required: true,
- },
- dataSource: {
- type: Array,
- default: () => [],
- },
- deviceListApi: {
- type: Function,
- required: true,
- },
- deviceType: {
- type: String,
- required: true,
- },
- option: {
- type: Object,
- default: () => ({}),
- },
- xAxisPropType: {
- type: String,
- required: true,
- },
- },
- setup(props) {
- const globalConfig = inject('globalConfig');
- let historyList;
- if (globalConfig.History_Type == 'vent') {
- historyList = (params) => defHttp.get({ url: '/safety/ventanalyMonitorData/listdays', params });
- } else {
- historyList = (params) => defHttp.post({ url: '/history/getHistoryData', params });
- }
- const chartsType = ref('listMonitor');
- const deviceId = ref('');
- const options = ref([]);
- const historyParams = reactive({
- ttime_begin: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
- ttime_end: dayjs().format('YYYY-MM-DD HH:mm:ss'),
- skip: '8',
- startTime: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
- endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
- interval: '1h',
- });
- const resultXAxisPropType = ref('');
- const resultDataSource = ref<any[]>([]);
- const detailDataSource = ref<any[]>([]);
- const currentPage = ref<number>(1);
- const pageSize = ref<number>(20);
- const total = ref(0);
- const echartsOption = {
- grid: {
- top: '60px',
- left: '10px',
- right: '5px',
- bottom: '5%',
- containLabel: true,
- },
- toolbox: {
- feature: {},
- },
- xAxis: {
- axisLabel: {
- interval: 0,
- },
- },
- };
- const echartsOption1 = {
- grid: {
- top: '70px',
- left: '10px',
- right: '5px',
- bottom: '45px',
- containLabel: true,
- },
- toolbox: {
- feature: {},
- },
- xAxis: {
- interval: 0,
- },
- };
- const echartsOption2 = {
- grid: {
- top: '70px',
- left: '10px',
- right: '5px',
- bottom: '2%',
- containLabel: true,
- },
- toolbox: {
- feature: {},
- },
- };
- const onChange = (pageNumber: number) => {
- console.log('Page: ', pageNumber);
- };
- watch(
- [chartsType, deviceId, historyParams, pageSize, currentPage],
- async (
- [newChartsType, newDeviceId, newHistoryParams, newPageSize, newCurrentPage],
- [oldChartsType, oldDeviceId, oldHistoryParams, oldPageSize, oldCurrentPage]
- ) => {
- console.log('[ historyParams ] >', historyParams.ttime, dayjs(historyParams.ttime).format('HH:mm:ss'));
- if (newChartsType === 'listMonitor') {
- // 实时监测所有
- resultDataSource.value = props.dataSource;
- } else if (newChartsType === 'history') {
- resultDataSource.value = [];
- // 历史
- if (newChartsType !== oldChartsType || newDeviceId !== oldDeviceId) {
- currentPage.value = 1;
- }
- const device = options.value.find((device) => device['deviceID'] === newDeviceId);
- if (device) {
- let res;
- if (globalConfig.History_Type == 'vent') {
- resultXAxisPropType.value = 'gcreatetime';
- const datas = await historyList({
- ttime_begin: historyParams.startTime,
- ttime_end: historyParams.endTime,
- strtype: device.deviceType,
- gdeviceid: newDeviceId,
- skip: historyParams.skip,
- pageSize: pageSize.value,
- pageNo: currentPage.value,
- column: 'createTime',
- });
- res = datas['datalist']['records'];
- if (res && res.length > 0) {
- resultDataSource.value = res.map((item) => Object.assign(item, item.readData));
- } else {
- resultDataSource.value = [];
- }
- total.value = datas['datalist'].total;
- } else {
- resultXAxisPropType.value = 'time';
- res = await historyList({
- pageSize: pageSize.value,
- pageNum: currentPage.value,
- startTime: historyParams.startTime,
- endTime: historyParams.endTime,
- deviceId: newDeviceId,
- strtype: device.deviceType,
- interval: historyParams.interval,
- column: 'createTime',
- });
- if (res && res.records && res.records.length > 0) {
- resultDataSource.value = res.records.map((item) => Object.assign(item, item.readData));
- } else {
- resultDataSource.value = [];
- }
- total.value = res.total;
- }
- }
- } else if (newChartsType === 'detail') {
- // 设备详情
- resultXAxisPropType.value = 'readTime';
- if (newDeviceId !== oldDeviceId) {
- detailDataSource.value = [];
- }
- }
- }
- );
- watchEffect(() => {
- if (chartsType.value === 'detail') {
- const currentData = props.dataSource.find((item: any) => item.deviceID === deviceId.value);
- if (currentData) {
- const isHas = detailDataSource.value.find((item) => item[resultXAxisPropType.value] === currentData[resultXAxisPropType.value]);
- if (!isHas) {
- if (detailDataSource.value.length < 15) {
- detailDataSource.value.push(currentData);
- } else {
- detailDataSource.value.shift();
- detailDataSource.value.push(currentData);
- }
- }
- }
- }
- });
- onMounted(async () => {
- const res = await props.deviceListApi();
- // debugger;
- if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
- options.value = res['msgTxt'][0]['datalist'];
- deviceId.value = options.value[0]['deviceID'];
- }
- });
- return {
- chartsType,
- deviceId,
- resultDataSource,
- historyParams,
- options,
- resultXAxisPropType,
- detailDataSource,
- currentPage,
- pageSize,
- total,
- echartsOption,
- echartsOption1,
- echartsOption2,
- onChange,
- globalConfig,
- };
- },
- });
- </script>
- <style lang="less">
- :deep(.vent-select-dropdown) {
- color: #000 !important;
- .vent-select-item {
- color: #000 !important;
- }
- }
- </style>
- <style lang="less" scoped>
- @import '/@/design/vent/color.less';
- .charts-container {
- position: relative;
- height: 100%;
- .charts-box {
- width: 100%;
- height: 100%;
- position: absolute;
- bottom: 0;
- top: 0px;
- }
- .@{ventSpace}-picker,
- .@{ventSpace}-select-selector {
- background: #00000017 !important;
- border: 1px solid @vent-form-item-boder !important;
- input,
- .@{ventSpace}-select-selection-item,
- .@{ventSpace}-picker-suffix {
- color: #fff !important;
- }
- .@{ventSpace}-select-selection-placeholder {
- color: #b7b7b7 !important;
- }
- }
- .@{ventSpace}-select-arrow,
- .@{ventSpace}-picker-separator {
- color: #fff !important;
- }
- }
- :deep(.@{ventSpace}-select-dropdown) {
- color: #000 !important;
- .@{ventSpace}-select-item {
- color: #000 !important;
- }
- }
- </style>
|