|
@@ -0,0 +1,666 @@
|
|
|
+<template>
|
|
|
+ <div class="scene-config">
|
|
|
+ <!--开放办公区-->
|
|
|
+ <div class="time-box" :class="timerText.classColor">
|
|
|
+ <img :src="parseImgUrl('page-officehome', 'work.svg')" alt="" />
|
|
|
+ <div class="time-text">
|
|
|
+ <span>{{ timerText.text }}</span>
|
|
|
+ <span>{{ timerText.timer }}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="time-btn"
|
|
|
+ :class="timerText.showDel ? 'time-btn-small' : ''"
|
|
|
+ @click="triggerWork"
|
|
|
+ >
|
|
|
+ <span> {{ timerText.btnText }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="time-del" v-if="timerText.showDel" @click="myLeaving">
|
|
|
+ <img :src="parseImgUrl('page-officehome', 'goOffWork.svg')" alt="" />
|
|
|
+ <div class="del-text">
|
|
|
+ <span>我要</span>
|
|
|
+ <span>离开</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--加班点击我要离开触发-->
|
|
|
+ <leave-dailog
|
|
|
+ :isShowLeaveDailog="isShowLeaveDailog"
|
|
|
+ v-if="isShowLeaveDailog"
|
|
|
+ @closeDailog="closeLeavDailog"
|
|
|
+ >
|
|
|
+ </leave-dailog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import {
|
|
|
+ defineComponent,
|
|
|
+ reactive,
|
|
|
+ toRefs,
|
|
|
+ onBeforeMount,
|
|
|
+ onMounted,
|
|
|
+ ref,
|
|
|
+ watch,
|
|
|
+ getCurrentInstance,
|
|
|
+} from "vue";
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+import {
|
|
|
+ formatDate,
|
|
|
+ formatDateStr,
|
|
|
+ formateTimeContinuous,
|
|
|
+ formatTimerStr,
|
|
|
+ getRelNowTime,
|
|
|
+ getWeekDate,
|
|
|
+ parseImgUrl,
|
|
|
+} from "@/utils";
|
|
|
+import { UserActionTypes } from "@/store/modules/user/action-types";
|
|
|
+import { useStore } from "@/store";
|
|
|
+import { saveBatchCustomScene } from "@/apis/envmonitor";
|
|
|
+// import { Dialog } from "vant";
|
|
|
+import LeaveDailog from "@/views/envmonitor/components/ManualWork/LeaveDailog.vue";
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ props: {
|
|
|
+ scenarioArr: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ workkArr: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ LeaveDailog,
|
|
|
+ },
|
|
|
+ setup(props, contx) {
|
|
|
+ const proxyGlobal: any = getCurrentInstance();
|
|
|
+ let router: any = useRouter();
|
|
|
+ let timerText: any = {
|
|
|
+ text: "",
|
|
|
+ timer: "", // 工作时间
|
|
|
+ btnText: "",
|
|
|
+ showDel: false, // 是否展示我要离开按钮
|
|
|
+ classColor: "grey",
|
|
|
+ };
|
|
|
+ let text: any = "";
|
|
|
+ const store = useStore();
|
|
|
+ const delTimeArr: any = [];
|
|
|
+ let customSceneList: any = [];
|
|
|
+ let workkArr: any = [];
|
|
|
+ const proxyData = reactive({
|
|
|
+ parseImgUrl: parseImgUrl,
|
|
|
+ leaveBtnFlag: false,
|
|
|
+ scenarioArr: props.scenarioArr,
|
|
|
+ workkArr: props.workkArr,
|
|
|
+ forcedOverTimeFlag: false, // 强制加班标记 false:不需要强制加班
|
|
|
+ onSubmit(values: any) {
|
|
|
+ router.push({ path: "/choice-project" });
|
|
|
+ },
|
|
|
+ // 触发加班按钮
|
|
|
+ triggerWork() {
|
|
|
+ contx.emit("triggerWork");
|
|
|
+ },
|
|
|
+ timerText: timerText,
|
|
|
+ text: text,
|
|
|
+ // 处理时间和第二天和未来连续的问题
|
|
|
+ formateTimeContinuous(
|
|
|
+ index: any = 1,
|
|
|
+ startTime: any,
|
|
|
+ endTime: any,
|
|
|
+ type: any = 1
|
|
|
+ ) {
|
|
|
+ let data: any = proxyData.workkArr;
|
|
|
+ proxyData.text = "";
|
|
|
+ return formateTimeContinuous(
|
|
|
+ index,
|
|
|
+ startTime,
|
|
|
+ endTime,
|
|
|
+ type,
|
|
|
+ data,
|
|
|
+ proxyData
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 判断当前时间在不在加班时间里面
|
|
|
+ beforeWorkTime(data: any, nowTime: any) {
|
|
|
+ let flag: any = true; // 是否在所有加班时间之前
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ if (data[i].startTime < nowTime) {
|
|
|
+ flag = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return flag;
|
|
|
+ },
|
|
|
+ // 当前时间是否在所有加班时间之后
|
|
|
+ afterWorkTime(data: any, nowTime: any) {
|
|
|
+ let flag: any = true; // 是否在所有加班时间之前
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ if (data[i].endTime > nowTime) {
|
|
|
+ flag = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return flag;
|
|
|
+ },
|
|
|
+ // 查询时间段的范围
|
|
|
+ checkWorkTime(data: any, nowTime: any) {
|
|
|
+ let obj: any = {
|
|
|
+ type: 0, // type=1 当前时间在所有加班时间之前 type=2 当前时间在所有加班时间后 type=3 当前时间在某段加班时间 type=4 当前时间在加班之外,在某一段中间
|
|
|
+ startTime: 0,
|
|
|
+ endTime: 0,
|
|
|
+ };
|
|
|
+ if (proxyData.beforeWorkTime(data, nowTime)) {
|
|
|
+ obj.type = 1;
|
|
|
+ } else if (proxyData.afterWorkTime(data, nowTime)) {
|
|
|
+ obj.type = 2;
|
|
|
+ } else {
|
|
|
+ let flag = true;
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ if (nowTime >= data[i].startTime && nowTime <= data[i].endTime) {
|
|
|
+ obj.startTime = data[i].startTime;
|
|
|
+ obj.endTime = data[i].endTime;
|
|
|
+ obj.type = 3;
|
|
|
+ flag = false;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (flag) {
|
|
|
+ obj.type = 4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+ // 格式化日期
|
|
|
+ delTimeArr: delTimeArr,
|
|
|
+ customSceneList: customSceneList, // 当前日期的加班
|
|
|
+ formateWorkTime() {
|
|
|
+ // debugger;
|
|
|
+ let data: any = proxyData.workkArr;
|
|
|
+ let nowDate: any = formatDate("YYYY-MM-DD");
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ let date: any = formatDateStr(data[i].date);
|
|
|
+ let cusStartTime: any = data[i].cusStartTime;
|
|
|
+ let cusEndTime: any = data[i].cusEndTime;
|
|
|
+ let customSceneList: any = data[i]?.customSceneList ?? [];
|
|
|
+ let nowTime: any = getRelNowTime();
|
|
|
+ let week: any = getWeekDate(new Date(date).getDay());
|
|
|
+ if (date === nowDate) {
|
|
|
+ // isActive = true;
|
|
|
+ week = "今天";
|
|
|
+ }
|
|
|
+ // console.log("nowTime===" + nowTime);
|
|
|
+ if (date === nowDate) {
|
|
|
+ proxyData.customSceneList = customSceneList;
|
|
|
+ // debugger
|
|
|
+ // 1.当天没有服务定制时间和加班时间
|
|
|
+ /**a.未来有服务定制和加班**/
|
|
|
+ // 2.当天有服务定制时间无加班时间
|
|
|
+ // 当天在服务定制之内+加班+和未来的时间连续
|
|
|
+ // a.在服务定制之内
|
|
|
+ // b.已过了服务定制和1相同处理
|
|
|
+ // 3.当天有服务定制和加班时间
|
|
|
+ // a.在服务定制之内,并和加班时间不连着
|
|
|
+ // b.在服务定制之内,并和加班连续
|
|
|
+ // c.在加班时间之内,并和后面加班时间连续
|
|
|
+ // d.在加班时间之内,并且和后面加班不连续
|
|
|
+ // e.不在服务定制之内,也不在加班时间内,但是当天和未来都有预约时间
|
|
|
+ /**f.不在服务定制之内,也不在加班时间内,但是当天没有预约时间,未来有预约加班 */
|
|
|
+
|
|
|
+ let startTime: any = "";
|
|
|
+ let endTime: any = "";
|
|
|
+ if ((!cusStartTime || !cusEndTime) && !customSceneList.length) {
|
|
|
+ // 查找最近的一段预约数据
|
|
|
+ let btnObj: any = proxyData.formateTimeContinuous(
|
|
|
+ 0,
|
|
|
+ startTime,
|
|
|
+ endTime,
|
|
|
+ 2
|
|
|
+ );
|
|
|
+ if (btnObj && btnObj.text) {
|
|
|
+ proxyData.timerText.text = `已预约(${btnObj.text})`;
|
|
|
+ proxyData.timerText.timer =
|
|
|
+ formatTimerStr(btnObj.startTime) +
|
|
|
+ "~" +
|
|
|
+ formatTimerStr(btnObj.endTime);
|
|
|
+ } else {
|
|
|
+ proxyData.timerText.text = "请选择工作时间段";
|
|
|
+ proxyData.timerText.timer = "将自动开启办公服务";
|
|
|
+ }
|
|
|
+ proxyData.timerText.classColor = "grey";
|
|
|
+ proxyData.timerText.btnText = "预约时间";
|
|
|
+ proxyData.timerText.showDel = false;
|
|
|
+ proxyData.forcedOverTimeFlag = true;
|
|
|
+ } else if (cusStartTime && cusEndTime && !customSceneList.length) {
|
|
|
+ if (nowTime >= cusStartTime && nowTime <= cusEndTime) {
|
|
|
+ proxyData.timerText.text = "工作时间";
|
|
|
+ proxyData.timerText.timer =
|
|
|
+ formatTimerStr(cusStartTime) +
|
|
|
+ "~" +
|
|
|
+ formatTimerStr(cusEndTime);
|
|
|
+ proxyData.timerText.classColor = "yellow";
|
|
|
+ proxyData.timerText.btnText = "预约延时";
|
|
|
+ proxyData.timerText.showDel = false;
|
|
|
+ proxyData.forcedOverTimeFlag = false;
|
|
|
+ } else {
|
|
|
+ let btnObj: any = proxyData.formateTimeContinuous(
|
|
|
+ 0,
|
|
|
+ startTime,
|
|
|
+ endTime,
|
|
|
+ 2
|
|
|
+ );
|
|
|
+ if (btnObj && btnObj.text) {
|
|
|
+ proxyData.timerText.text = `已预约(${btnObj.text})`;
|
|
|
+ proxyData.timerText.timer =
|
|
|
+ formatTimerStr(btnObj.startTime) +
|
|
|
+ "~" +
|
|
|
+ formatTimerStr(btnObj.endTime);
|
|
|
+ } else {
|
|
|
+ proxyData.timerText.text = "请选择工作时间段";
|
|
|
+ proxyData.timerText.timer = "将自动开启办公服务";
|
|
|
+ }
|
|
|
+ proxyData.timerText.classColor = "grey";
|
|
|
+ proxyData.timerText.btnText = "预约时间";
|
|
|
+ proxyData.timerText.showDel = false;
|
|
|
+ proxyData.forcedOverTimeFlag = true;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (
|
|
|
+ cusStartTime &&
|
|
|
+ cusEndTime &&
|
|
|
+ nowTime >= cusStartTime &&
|
|
|
+ nowTime <= cusEndTime
|
|
|
+ ) {
|
|
|
+ // debugger
|
|
|
+ startTime = cusStartTime;
|
|
|
+ endTime = cusEndTime;
|
|
|
+ customSceneList.map((item: any) => {
|
|
|
+ if (endTime === item.startTime) {
|
|
|
+ endTime = item.endTime;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ /**
|
|
|
+ * 需要补加上和未来时间连续的问题
|
|
|
+ */
|
|
|
+
|
|
|
+ let btnObj: any = proxyData.formateTimeContinuous(
|
|
|
+ 1,
|
|
|
+ startTime,
|
|
|
+ endTime,
|
|
|
+ 1
|
|
|
+ );
|
|
|
+ proxyData.timerText.text = `工作时间`;
|
|
|
+ proxyData.timerText.timer =
|
|
|
+ formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
|
|
|
+ if (btnObj && btnObj.text) {
|
|
|
+ proxyData.timerText.text = `工作时间(今日~${btnObj.text})`;
|
|
|
+ proxyData.timerText.timer =
|
|
|
+ formatTimerStr(btnObj.startTime) +
|
|
|
+ "~" +
|
|
|
+ formatTimerStr(btnObj.endTime);
|
|
|
+ }
|
|
|
+ proxyData.timerText.classColor = "yellow";
|
|
|
+ proxyData.timerText.btnText = "预约延时";
|
|
|
+ proxyData.timerText.showDel = false;
|
|
|
+ proxyData.forcedOverTimeFlag = false;
|
|
|
+ } else {
|
|
|
+ let obj: any = proxyData.checkWorkTime(
|
|
|
+ customSceneList,
|
|
|
+ nowTime
|
|
|
+ );
|
|
|
+ if (obj.type === 3) {
|
|
|
+ startTime = obj.startTime;
|
|
|
+ endTime = obj.endTime;
|
|
|
+ customSceneList.map((item: any) => {
|
|
|
+ let oldTimeStart: any = startTime;
|
|
|
+ let oldTimeEnd: any = endTime;
|
|
|
+ // debugger
|
|
|
+ if (
|
|
|
+ startTime === item.startTime &&
|
|
|
+ endTime === item.endTime
|
|
|
+ ) {
|
|
|
+ // proxyData.delTimeArr.push(item);
|
|
|
+ } // 点击我要离开的时候需要删除的数据
|
|
|
+ if (oldTimeEnd === item.startTime) {
|
|
|
+ endTime = item.endTime;
|
|
|
+ // proxyData.delTimeArr.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (cusStartTime && cusEndTime && nowTime < cusStartTime) {
|
|
|
+ // 在服务定制时间之前的时候需要处理连续时间的问题
|
|
|
+ if (endTime === cusStartTime) {
|
|
|
+ endTime = cusEndTime;
|
|
|
+ }
|
|
|
+ customSceneList.map((item: any) => {
|
|
|
+ if (endTime === item.startTime) {
|
|
|
+ endTime = item.endTime;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 需要补加上和未来时间连续的问题
|
|
|
+ */
|
|
|
+ let btnObj: any = proxyData.formateTimeContinuous(
|
|
|
+ 1,
|
|
|
+ startTime,
|
|
|
+ endTime,
|
|
|
+ 1
|
|
|
+ );
|
|
|
+ // debugger
|
|
|
+ proxyData.timerText.text = `工作时间`;
|
|
|
+ proxyData.timerText.timer =
|
|
|
+ formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
|
|
|
+ if (btnObj && btnObj.text) {
|
|
|
+ proxyData.timerText.text = `工作时间~${btnObj.text}`;
|
|
|
+ proxyData.timerText.timer =
|
|
|
+ formatTimerStr(btnObj.startTime) +
|
|
|
+ "~" +
|
|
|
+ formatTimerStr(btnObj.endTime);
|
|
|
+ }
|
|
|
+ proxyData.timerText.classColor = "yellow";
|
|
|
+ proxyData.timerText.btnText = "预约延时";
|
|
|
+ proxyData.timerText.showDel = true;
|
|
|
+ proxyData.forcedOverTimeFlag = false;
|
|
|
+ } else {
|
|
|
+ let btnObj: any = proxyData.formateTimeContinuous(
|
|
|
+ 0,
|
|
|
+ startTime,
|
|
|
+ endTime,
|
|
|
+ 2
|
|
|
+ );
|
|
|
+ if (
|
|
|
+ btnObj &&
|
|
|
+ btnObj.text &&
|
|
|
+ btnObj.startTime &&
|
|
|
+ btnObj.endTime
|
|
|
+ ) {
|
|
|
+ proxyData.timerText.text = `已预约(${btnObj.text})`;
|
|
|
+ proxyData.timerText.timer =
|
|
|
+ formatTimerStr(btnObj.startTime) +
|
|
|
+ "~" +
|
|
|
+ formatTimerStr(btnObj.endTime);
|
|
|
+ } else {
|
|
|
+ proxyData.timerText.text = "请选择工作时间段";
|
|
|
+ proxyData.timerText.timer = "将自动开启办公服务";
|
|
|
+ }
|
|
|
+ proxyData.timerText.classColor = "grey";
|
|
|
+ proxyData.timerText.btnText = "预约时间";
|
|
|
+ proxyData.timerText.showDel = false;
|
|
|
+ proxyData.forcedOverTimeFlag = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // debugger
|
|
|
+ // 记录开灯标记
|
|
|
+ contx.emit("setForceOverTimeFlag", proxyData.forcedOverTimeFlag);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 时间拼接
|
|
|
+ timeJoin(customSceneList: any, nowTime: any) {
|
|
|
+ let startTime: any = 0;
|
|
|
+ let endTime: any = 0;
|
|
|
+ let obj: any = proxyData.checkWorkTime(customSceneList, nowTime);
|
|
|
+ if (obj.type === 3) {
|
|
|
+ startTime = obj.startTime;
|
|
|
+ endTime = obj.endTime;
|
|
|
+ customSceneList.map((item: any) => {
|
|
|
+ let oldTimeStart: any = startTime;
|
|
|
+ let oldTimeEnd: any = endTime;
|
|
|
+ // debugger
|
|
|
+ if (startTime === item.startTime && endTime === item.endTime) {
|
|
|
+ // proxyData.delTimeArr.push(item);
|
|
|
+ } // 点击我要离开的时候需要删除的数据
|
|
|
+ if (oldTimeEnd === item.startTime) {
|
|
|
+ endTime = item.endTime;
|
|
|
+ // proxyData.delTimeArr.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 需要补加上和未来时间连续的问题
|
|
|
+ */
|
|
|
+ proxyData.timerText.text = "工作时间";
|
|
|
+ proxyData.timerText.timer =
|
|
|
+ formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
|
|
|
+ proxyData.timerText.classColor = "yellow";
|
|
|
+ proxyData.timerText.btnText = "预约延时";
|
|
|
+ proxyData.timerText.showDel = true;
|
|
|
+ proxyData.forcedOverTimeFlag = false;
|
|
|
+ } else {
|
|
|
+ customSceneList.map((item: any) => {
|
|
|
+ if (nowTime < item.startTime) {
|
|
|
+ let oldTimeStart: any = startTime;
|
|
|
+ let oldTimeEnd: any = endTime;
|
|
|
+ if (item.startTime < startTime) {
|
|
|
+ startTime = item.startTime;
|
|
|
+ endTime = item.endTime;
|
|
|
+ } else if (endTime === item.startTime) {
|
|
|
+ endTime = item.endTime;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ /**
|
|
|
+ *需要补加上和未来时间连续的问题
|
|
|
+ */
|
|
|
+ if (startTime && endTime) {
|
|
|
+ proxyData.timerText.text = "已预约(今日)";
|
|
|
+ proxyData.timerText.timer =
|
|
|
+ formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
|
|
|
+ proxyData.timerText.classColor = "grey";
|
|
|
+ proxyData.timerText.btnText = "预约时间";
|
|
|
+ proxyData.timerText.showDel = false;
|
|
|
+ proxyData.forcedOverTimeFlag = true;
|
|
|
+ } else {
|
|
|
+ proxyData.timerText.text = "请选择工作时间段";
|
|
|
+ proxyData.timerText.timer = "将自动开启办公服务";
|
|
|
+ proxyData.timerText.classColor = "grey";
|
|
|
+ proxyData.timerText.btnText = "预约时间";
|
|
|
+ proxyData.timerText.showDel = false;
|
|
|
+ proxyData.forcedOverTimeFlag = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 格式化需要删除的数据
|
|
|
+ formatDataDel() {
|
|
|
+ proxyData.delTimeArr = [];
|
|
|
+ let customSceneList: any = proxyData.customSceneList;
|
|
|
+ let nowTime: any = getRelNowTime();
|
|
|
+ let startTime: any = 0;
|
|
|
+ let endTime: any = 0;
|
|
|
+ let obj: any = proxyData.checkWorkTime(customSceneList, nowTime);
|
|
|
+ if (obj.type === 3) {
|
|
|
+ startTime = obj.startTime;
|
|
|
+ endTime = obj.endTime;
|
|
|
+ customSceneList.map((item: any) => {
|
|
|
+ let oldTimeEnd: any = endTime;
|
|
|
+ if (startTime === item.startTime && endTime === item.endTime) {
|
|
|
+ item.type = 1;
|
|
|
+ proxyData.delTimeArr.push(item);
|
|
|
+ } // 点击我要离开的时候需要删除的数据
|
|
|
+ if (oldTimeEnd === item.startTime) {
|
|
|
+ endTime = item.endTime;
|
|
|
+ item.type = 1;
|
|
|
+ proxyData.delTimeArr.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 我要离开
|
|
|
+ myLeaving() {
|
|
|
+ proxyData.formatDataDel();
|
|
|
+ // console.log("删除了=====");
|
|
|
+ // console.log(proxyData.delTimeArr);
|
|
|
+ proxyData.leaveBtnFlag = true;
|
|
|
+ // 取消加班
|
|
|
+ proxyData.saveBatchCustomScene();
|
|
|
+ },
|
|
|
+ // 取消加班记录
|
|
|
+ saveBatchCustomScene() {
|
|
|
+ // proxyGlobal.proxy.$loadingStart(0);
|
|
|
+ proxyData.openLeavDailog();
|
|
|
+ saveBatchCustomScene(proxyData.delTimeArr)
|
|
|
+ .then((res) => {
|
|
|
+ proxyData.leaveBtnFlag = false;
|
|
|
+ // console.log(res);
|
|
|
+ // proxyGlobal.proxy.$loadinngEnd();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ proxyData.leaveBtnFlag = false;
|
|
|
+ // proxyGlobal.proxy.$loadinngEnd();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ isShowLeaveDailog: false,
|
|
|
+ openLeavDailog() {
|
|
|
+ proxyData.isShowLeaveDailog = true;
|
|
|
+ },
|
|
|
+ closeLeavDailog() {
|
|
|
+ proxyData.isShowLeaveDailog = false;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ watch(
|
|
|
+ props,
|
|
|
+ (newProps: any) => {
|
|
|
+ proxyData.scenarioArr = newProps.scenarioArr;
|
|
|
+ proxyData.workkArr = newProps.workkArr;
|
|
|
+ if (proxyData.workkArr && proxyData.workkArr.length) {
|
|
|
+ proxyData.formateWorkTime();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ onMounted(() => {
|
|
|
+ // proxyData.formateWorkTime();
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ ...toRefs(proxyData),
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "~@/styles/comMedia.scss";
|
|
|
+.scene-config {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 15px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
|
|
|
+ border-radius: 25px;
|
|
|
+ .grey {
|
|
|
+ background: rgba(159, 183, 205, 0.15) !important;
|
|
|
+ }
|
|
|
+ .yellow {
|
|
|
+ background: rgba(206, 159, 39, 0.4);
|
|
|
+ }
|
|
|
+ .time-box {
|
|
|
+ position: relative;
|
|
|
+ // width: 69%;
|
|
|
+ flex: 2.4;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 70px;
|
|
|
+ background: rgba(206, 159, 39, 0.4);
|
|
|
+ // opacity: 0.4;
|
|
|
+ border-radius: 16px;
|
|
|
+ img {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .time-text {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ padding-left: 10px;
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ &:nth-child(1) {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #4d5262;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ padding-top: 5px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #1f2429;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time-btn {
|
|
|
+ position: absolute;
|
|
|
+ // padding-top: 9px;
|
|
|
+ right: 4px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ display: inline-block;
|
|
|
+ width: 98px;
|
|
|
+ // width: 64px;
|
|
|
+ height: 58px;
|
|
|
+ line-height: 20px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
|
|
|
+ 0px 4px 10px rgba(0, 0, 0, 0.07);
|
|
|
+ border-radius: 12px;
|
|
|
+ span {
|
|
|
+ position: absolute;
|
|
|
+ padding: 0 4px;
|
|
|
+ width: 100%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ display: block;
|
|
|
+ font-size: 13px;
|
|
|
+ // line-height: 16px;
|
|
|
+ text-align: center;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time-btn-small {
|
|
|
+ width: 45px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-del {
|
|
|
+ // width: 27%;
|
|
|
+ padding-top: 14px;
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 10px;
|
|
|
+ background: #f1f4f8;
|
|
|
+ border-radius: 16px;
|
|
|
+ text-align: center;
|
|
|
+ img {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ // margin-left: 10px;
|
|
|
+ }
|
|
|
+ .del-text {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ padding-left: 10px;
|
|
|
+ // padding-top: 9px;
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+</style>
|