123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- <!-- eslint-disable vue/multi-word-component-names -->
- <template>
- <div class="monitor-center">
- <div class="flex">
- <div class="w-50% text-center">
- <span>总供风量</span>
- <p class="monitor-center__primary_text">123123</p>
- <Pie
- :option="chartOption"
- :chart-data="[
- {
- value: 70,
- name: 'A',
- },
- {
- value: 30,
- name: 'B',
- },
- ]"
- height="100px"
- />
- </div>
- <div class="w-50% text-center">
- <span>总需风量</span>
- <p class="monitor-center__primary_text">123123</p>
- <Pie
- :option="chartOption"
- :chart-data="[
- {
- value: 70,
- name: 'A',
- },
- {
- value: 30,
- name: 'B',
- },
- ]"
- height="100px"
- />
- </div>
- </div>
- </div>
- </template>
- <script lang="ts" setup>
- import { onMounted, ref } from 'vue';
- import { list as cfgList } from '@/views/vent/deviceManager/configurationTable/configuration.api';
- import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
- import Pie from '/@/components/chart/Pie.vue';
- import { EChartsOption } from 'echarts';
- // import mapComponent from './components/3Dmap/index.vue';
- // 设备类别,是个枚举 TODO: 将手动换为自动获取类别
- const devicekind = 'fanlocal';
- const configs = ref<{ prop: string; label: string }[]>([]);
- function fetchConfig() {
- cfgList({
- deviceType: 'devicekind',
- }).then(({ records }) => {
- const moduleData = JSON.parse(records[0]?.moduleData);
- configs.value = Object.keys(moduleData).map((k) => {
- return {
- prop: k,
- label: moduleData[k],
- };
- });
- });
- }
- const devices = ref<any[]>([]);
- const selectedDevice = ref<any>({});
- function selectDeviceByID(id: string) {
- selectedDevice.value = devices.value.find((e) => {
- return e.id === id;
- });
- }
- // 获取全部局扇的数据,并以选项格式返回给 Header 消费
- function fetchOptions() {
- return list({
- devicekind,
- }).then(({ records }) => {
- devices.value = records;
- selectDeviceByID(records[0]?.id);
- return records.map((e) => {
- return {
- label: e.strinstallpos,
- key: e.id,
- };
- });
- });
- }
- // 图标相关
- const chartOption: EChartsOption = {
- series: [
- {
- type: 'pie',
- radius: ['50%', '75%'],
- center: ['50%', '55%'],
- data: [],
- labelLine: { show: false },
- label: {
- show: false,
- // formatter: '{b} \n ({d}%)',
- // color: '#B1B9D3',
- },
- itemStyle: {
- shadowBlur: 20,
- shadowColor: '#259bcf',
- },
- },
- ],
- color: ['#d9a1ff', '#00d1ff', '#82fe78'],
- };
- onMounted(() => {
- fetchConfig();
- });
- </script>
- <style lang="less" scoped>
- @import '@/design/vent/color.less';
- .monitor-center__primary_text {
- font-size: 20px;
- color: @vent-gas-primary-text;
- }
- .monitor-center {
- width: 200px;
- background-image: @vent-configurable-home-bg-img;
- border-top: 2px solid @vent-configurable-home-light-border;
- color: @white;
- }
- </style>
|