|
|
@@ -1,3 +1,315 @@
|
|
|
+<!--
|
|
|
+ 智慧场景-智·会议-配置会议
|
|
|
+ @author 刘梦祥
|
|
|
+ @date 2023年2月22日
|
|
|
+-->
|
|
|
<template>
|
|
|
- <router-view />
|
|
|
-</template>
|
|
|
+ <div class="doubleCarbon-main-box flexColumn">
|
|
|
+ <a-spin class="spinStyle" size="large" tip="Loading..." v-show="searchLoading"></a-spin>
|
|
|
+ <a-tabs default-active-key="1" @change="callback">
|
|
|
+ <a-tab-pane key="1" tab="会议室总览">
|
|
|
+ <!-- 头部搜索区域 -->
|
|
|
+ <div class="borderColor" style="margin-bottom: 0.5rem;">
|
|
|
+ <div class="flex flex_between margin5rem">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="mr1rem">
|
|
|
+ 时间：
|
|
|
+ <a-range-picker
|
|
|
+ show-time
|
|
|
+ id="rangePicker"
|
|
|
+ :placeholder="['开始时间', '结束时间']"
|
|
|
+ @change="onChangeRangeDate"
|
|
|
+ separator="至"
|
|
|
+ :show-time="{
|
|
|
+ hideDisabledOptions: true,
|
|
|
+ defaultValue: [$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')]
|
|
|
+ }"
|
|
|
+ format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ >
|
|
|
+ </a-range-picker>
|
|
|
+ </div>
|
|
|
+ <div class="mr1rem">
|
|
|
+ 楼层：
|
|
|
+ <a-select
|
|
|
+ style="width:200px;"
|
|
|
+ v-model="searchParam.floor"
|
|
|
+ :allowClear="selectProps.allowClear"
|
|
|
+ :mode="selectProps.mode"
|
|
|
+ :options="options.floor"
|
|
|
+ :notFoundConent="selectProps.notFoundConent"
|
|
|
+ :placeholder="selectProps.placeholder"
|
|
|
+ ></a-select>
|
|
|
+ </div>
|
|
|
+ <div class="mr1rem">
|
|
|
+ 会议室状态：
|
|
|
+ <a-select
|
|
|
+ style="width:200px;"
|
|
|
+ v-model="searchParam.conferenceRoomStatus"
|
|
|
+ :allowClear="selectProps.allowClear"
|
|
|
+ :mode="selectProps.mode"
|
|
|
+ :options="options.conferenceRoomStatus"
|
|
|
+ :notFoundConent="selectProps.notFoundConent"
|
|
|
+ :placeholder="selectProps.placeholder"
|
|
|
+ ></a-select>
|
|
|
+ </div>
|
|
|
+ <div class="mr1rem">
|
|
|
+ 会议室人数：
|
|
|
+ <a-select
|
|
|
+ style="width:200px;"
|
|
|
+ v-model="searchParam.numberOfPeopleInConferenceRoom"
|
|
|
+ :allowClear="selectProps.allowClear"
|
|
|
+ :mode="selectProps.mode"
|
|
|
+ :options="options.numberOfPeopleInConferenceRoom"
|
|
|
+ :notFoundConent="selectProps.notFoundConent"
|
|
|
+ :placeholder="selectProps.placeholder"
|
|
|
+ ></a-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <a-button class="mr1rem" @click="reset">重置</a-button>
|
|
|
+ <a-button type="primary" @click="search">查询</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 碳排放分析和碳配额构成 -->
|
|
|
+ <div class="flexColumn">
|
|
|
+ <div class="floorBox borderColor padding5rem">
|
|
|
+ <div class="floorTitle margin5rem flex_between" style="flex-wrap: nowrap;">
|
|
|
+ 3F
|
|
|
+ <div class="titleLine"></div>
|
|
|
+ </div>
|
|
|
+ <div class="margin5rem chartDomBox">other</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane key="2" tab="智能策略"> 智能策略 </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import LineChart from "../../echart/LineChart.vue";
|
|
|
+import BarChart from "../../echart/BarChart.vue";
|
|
|
+import PieChart from "../../echart/PieChart.vue";
|
|
|
+// 模拟数据
|
|
|
+import AnalogData from "../AnalogData.js";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ LineChart,
|
|
|
+ BarChart,
|
|
|
+ PieChart
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // selectProps配置
|
|
|
+ selectProps: {
|
|
|
+ allowClear: true, // 支持清除
|
|
|
+ mode: "default", // 模式['default'|'multiple'|'tags'|'combobox']
|
|
|
+ notFoundConent: "Not Found", // 当下拉列表为空时显示的内容
|
|
|
+ placeholder: "请选择", // 选择框默认文字 string|slot
|
|
|
+ showArrow: true, // 是否显示下拉小箭头
|
|
|
+ size: "large" // 选择框大小['large'|'small']
|
|
|
+ },
|
|
|
+ // options 数据，如果设置则不需要手动构造 selectOption 节点
|
|
|
+ options: {
|
|
|
+ floor: [], // 楼层
|
|
|
+ conferenceRoomStatus: [], // 会议室状态
|
|
|
+ numberOfPeopleInConferenceRoom: [] // 会议室人数
|
|
|
+ },
|
|
|
+ // loading状态
|
|
|
+ searchLoading: true,
|
|
|
+ // 头部搜索条件中绑定值
|
|
|
+ monthArr: [],
|
|
|
+ searchParam: {
|
|
|
+ floor: undefined,
|
|
|
+ timeRange: [undefined, undefined],
|
|
|
+ conferenceRoomStatus: undefined,
|
|
|
+ numberOfPeopleInConferenceRoom: undefined
|
|
|
+ },
|
|
|
+ // 头部核心指标循环显示数据
|
|
|
+ coreList: [],
|
|
|
+ // 双碳新闻模拟数据
|
|
|
+ DoubleCarbonNewsInfoList: [],
|
|
|
+ // 双碳新闻弹窗打开状态
|
|
|
+ showModalStatus: false,
|
|
|
+ // 弹窗暂存数据对象
|
|
|
+ showModalInfo: {
|
|
|
+ title: "--",
|
|
|
+ content: "--",
|
|
|
+ author: "--",
|
|
|
+ pushTime: "--"
|
|
|
+ },
|
|
|
+ // chart暂存数据对象
|
|
|
+ chartData: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ // 页面初始化
|
|
|
+ this.init();
|
|
|
+ // this.searchLoading = false;
|
|
|
+ //默认是当日24小时
|
|
|
+ setTimeout(() => {
|
|
|
+ this.defaulTimeRangeS();
|
|
|
+ }, 0);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ callback() {
|
|
|
+ // console.log("tabs切换");
|
|
|
+ },
|
|
|
+ onChangeRangeDate(date, dateStr) {
|
|
|
+ this.searchParam.timeRange = dateStr;
|
|
|
+ },
|
|
|
+ // 时间初始化
|
|
|
+ defaulTimeRangeS() {
|
|
|
+ this.searchParam.timeRange[0] = this.$moment().format("YYYY-MM-DD 00:00:00");
|
|
|
+ this.searchParam.timeRange[1] = this.$moment().format("YYYY-MM-DD 23:59:59");
|
|
|
+ setTimeout(() => {
|
|
|
+ document.getElementById("rangePicker").querySelectorAll("input")[0].value = this.searchParam.timeRange[0];
|
|
|
+ document.getElementById("rangePicker").querySelectorAll("input")[1].value = this.searchParam.timeRange[1];
|
|
|
+ }, 0);
|
|
|
+ },
|
|
|
+ // 查询事件
|
|
|
+ search() {
|
|
|
+ this.searchLoading = true;
|
|
|
+ console.log(
|
|
|
+ "查询条件：",
|
|
|
+ this.searchParam.floor,
|
|
|
+ this.searchParam.conferenceRoomStatus,
|
|
|
+ this.searchParam.numberOfPeopleInConferenceRoom,
|
|
|
+ this.searchParam.timeRange[0],
|
|
|
+ this.searchParam.timeRange[1]
|
|
|
+ );
|
|
|
+ setTimeout(() => {
|
|
|
+ this.searchLoading = false;
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ // 重置事件
|
|
|
+ reset() {
|
|
|
+ this.searchParam = {
|
|
|
+ floor: undefined,
|
|
|
+ timeRange: [this.$moment().format("YYYY-MM-DD 00:00:00"), this.$moment().format("YYYY-MM-DD 23:59:59")],
|
|
|
+ conferenceRoomStatus: undefined,
|
|
|
+ numberOfPeopleInConferenceRoom: undefined
|
|
|
+ };
|
|
|
+ document.getElementById("rangePicker").querySelectorAll("input")[0].value = this.searchParam.timeRange[0];
|
|
|
+ document.getElementById("rangePicker").querySelectorAll("input")[1].value = this.searchParam.timeRange[1];
|
|
|
+ },
|
|
|
+ // 弹窗显示事件
|
|
|
+ showModal(item) {
|
|
|
+ this.showModalStatus = true;
|
|
|
+ this.showModalInfo = item;
|
|
|
+ },
|
|
|
+ // 弹窗隐藏事件
|
|
|
+ onCancel() {
|
|
|
+ this.showModalStatus = false;
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ // 初始化加载[[楼层\会议室状态\会议室人数]列表、核心指标、碳排放分析、碳配额构成、碳排放占比、双碳新闻]
|
|
|
+ setTimeout(() => {
|
|
|
+ this.options.floor = AnalogData.floor;
|
|
|
+ this.options.conferenceRoomStatus = AnalogData.conferenceRoomStatus;
|
|
|
+ this.options.numberOfPeopleInConferenceRoom = AnalogData.numberOfPeopleInConferenceRoom;
|
|
|
+ this.coreList = AnalogData.core_List;
|
|
|
+ this.chartData = AnalogData.CHART_DATA;
|
|
|
+ this.DoubleCarbonNewsInfoList = AnalogData.doubleCarbonNewsInfoList;
|
|
|
+ this.searchLoading = false;
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+// 复用样式
|
|
|
+.flexColumn {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+}
|
|
|
+.flex {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &_center {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ &_between {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ &_around {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+}
|
|
|
+.floorTitle {
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: @primary-color;
|
|
|
+ .titleLine {
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ border-bottom: 1px dashed @primary-color;
|
|
|
+ }
|
|
|
+}
|
|
|
+.borderColor {
|
|
|
+ border: 1px solid #e7eaf1;
|
|
|
+}
|
|
|
+.margin5rem {
|
|
|
+ margin: 0.5rem;
|
|
|
+}
|
|
|
+.padding5rem {
|
|
|
+ padding: 0.5rem;
|
|
|
+}
|
|
|
+// 页面主题样式
|
|
|
+.doubleCarbon-main-box {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ & * {
|
|
|
+ user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -ms-user-select: none;
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ width: 0 !important;
|
|
|
+ }
|
|
|
+ -ms-overflow-style: none;
|
|
|
+ overflow: -moz-scrollbars-none;
|
|
|
+ }
|
|
|
+ & > div {
|
|
|
+ // padding: 5px 10px;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .spinStyle {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(255, 255, 255, 0.75);
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 头部搜索框和（重置、查询）按钮之间的间距样式
|
|
|
+.mr1rem {
|
|
|
+ margin-right: 1rem;
|
|
|
+}
|
|
|
+// loading样式
|
|
|
+.spin-content {
|
|
|
+ border: 1px solid #91d5ff;
|
|
|
+ background-color: #e6f7ff;
|
|
|
+ padding: 30px;
|
|
|
+}
|
|
|
+</style>
|
DESKTOP-6LTVLN7\Liumouren