1076 lines
36 KiB
Vue
1076 lines
36 KiB
Vue
<template>
|
||
<div class="buildingPlan">
|
||
<div class="left whiteBlock">
|
||
<div class="title">
|
||
{{ $t('message.projectInfo.buildList') }}
|
||
<!-- 楼栋列表 -->
|
||
</div>
|
||
<vue-scroll style="height: 87%">
|
||
<div style="margin-left: 5%; margin-bottom: 10px; font-size: 16px">
|
||
<!-- 请选择标段: -->
|
||
{{ $t('message.projectInfo.pleaseChooseSection') + ':' }}
|
||
</div>
|
||
<el-select
|
||
style="margin-left: 5%; margin-bottom: 20px; width: 90%"
|
||
@change="changeAlarmType"
|
||
v-model="alarmType"
|
||
class="alarmTypeBox"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in ProgressPlanBidSectionList"
|
||
:key="index"
|
||
:value="item.id"
|
||
:label="item.projectfName"
|
||
></el-option>
|
||
</el-select>
|
||
<el-menu
|
||
:default-active="String(checkedId)"
|
||
class="el-menu-vertical-demo whiteBlock"
|
||
>
|
||
<!-- <el-menu-item
|
||
index="0"
|
||
class="el-menu-item"
|
||
:class="checkedId == 0 ? 'checked_item' : ''"
|
||
@click="selectMenu(0)"
|
||
>
|
||
<span slot="title">全部塔吊(位置配置)</span>
|
||
</el-menu-item> -->
|
||
<div style="width: 260px" v-if="buildingList.length > 0">
|
||
<el-menu-item
|
||
:index="String(item.id)"
|
||
class="el-menu-item"
|
||
:class="checkBuildingId == index ? 'checked_item' : ''"
|
||
v-for="(item, index) in buildingList"
|
||
@click="selectMenu(index, item.id)"
|
||
:key="index"
|
||
>
|
||
<span
|
||
@mouseenter="moveShow = index"
|
||
@mouseleave="moveShow = ''"
|
||
slot="title"
|
||
class="flex3"
|
||
>
|
||
<span class="title_index">{{ index + 1 }}</span>
|
||
<span :title="item.buildingName" class="title_name">{{
|
||
item.buildingName
|
||
}}</span>
|
||
<i
|
||
v-if="moveShow === index"
|
||
class="el-icon-edit-outline"
|
||
style="color: #f56c6c; font-size: 14px; width: 15px"
|
||
@click="editBuilding(item.id, index)"
|
||
></i>
|
||
<i
|
||
v-if="moveShow === index"
|
||
class="el-icon-delete"
|
||
style="color: #f56c6c; font-size: 14px; width: 15px"
|
||
@click="deleteBuilding(item.id)"
|
||
></i>
|
||
</span>
|
||
</el-menu-item>
|
||
</div>
|
||
<img style="margin: 40px" v-else src="@/assets/images/noData2.png" />
|
||
</el-menu>
|
||
</vue-scroll>
|
||
<div class="flex2 btn_pack">
|
||
<el-button size="small" type="primary" @click="newTowerBtn">
|
||
<i class="el-icon-plus" style="margin-right: 6px"></i>新增楼栋
|
||
</el-button>
|
||
</div>
|
||
<el-dialog
|
||
class="dialog"
|
||
:title="dialogTitle"
|
||
:modal-append-to-body="false"
|
||
:visible.sync="dialogVisible"
|
||
@close="closeDialog"
|
||
destroy-on-close
|
||
width="50%"
|
||
>
|
||
<div class="dialog-content">
|
||
<vue-scroll>
|
||
<el-form
|
||
ref="form"
|
||
:model="dialogdata"
|
||
:rules="rules"
|
||
label-width="135px"
|
||
size="medium"
|
||
class="dialogFormBox"
|
||
>
|
||
<!-- 批次建筑面积 -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.batchCoveredArea')"
|
||
prop="batchBuildArea"
|
||
required
|
||
>
|
||
<!-- 请输入 -->
|
||
<el-input
|
||
v-model="dialogdata.batchBuildArea"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 组团编码 -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.groupCoding')"
|
||
prop="batchCode"
|
||
required
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.batchCode"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 组团名称 -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.groupName')"
|
||
prop="batchName"
|
||
required
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.batchName"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 供应批次 -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.supplyBatch')"
|
||
prop="batchNum"
|
||
required
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.batchNum"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 批次供应套数 -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.supplyBatchNum')"
|
||
prop="batchRoomNum"
|
||
required
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.batchRoomNum"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 批次供应面积(M2) -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.supplyBatchArea')"
|
||
prop="batchSaleArea"
|
||
required
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.batchSaleArea"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 楼栋编码 -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.buildingCodes')"
|
||
prop="buildingCode"
|
||
required
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.buildingCode"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 楼栋名称 -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.nameOfTheBuilding')"
|
||
prop="buildingName"
|
||
required
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.buildingName"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 产品类型装修类型 -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.productTypedecorationType')"
|
||
prop="decorateName"
|
||
required
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.decorateName"
|
||
:laceholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 产品类型名称 -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.productTypeName')"
|
||
prop="productTypeName"
|
||
required
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.productTypeName"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 产品类型编码 -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.productTypeCode')"
|
||
prop="productTypeNum"
|
||
required
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.productTypeNum"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 可售车位个数(个) -->
|
||
<el-form-item
|
||
:label="
|
||
$t('message.projectInfo.numberOfAvailableParkingSpaces')
|
||
"
|
||
prop="salePark"
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.salePark"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 经营方式 -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.modeOfBusiness')"
|
||
prop="saleType"
|
||
>
|
||
<el-select
|
||
v-model="dialogdata.saleType"
|
||
:disabled="formType == 3"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in options"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<!-- 总建筑面积 -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.overallFloorage')"
|
||
prop="totalBuildArea"
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.totalBuildArea"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 总套数 -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.theTotalNumber')"
|
||
prop="totalRoomNum"
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.totalRoomNum"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 总可售面积 -->
|
||
<el-form-item
|
||
:label="$t('message.projectInfo.totalSaleableArea')"
|
||
prop="totalSaleArea"
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.totalSaleArea"
|
||
:placeholder="$t('message.projectInfo.placeholder')"
|
||
:disabled="formType == 3"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</vue-scroll>
|
||
</div>
|
||
<div class="dialog-btn" v-if="formType != 3">
|
||
<el-button type="primary" @click="submitForm">
|
||
<!-- 确定 -->
|
||
{{ $t('message.energyManage.material.confirm') }}
|
||
</el-button>
|
||
<el-button @click="closeDialog">
|
||
<!-- 取消 -->
|
||
{{ $t('message.energyManage.material.cancel') }}
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
<div class="right">
|
||
<div class="inner">
|
||
<div
|
||
v-if="COMPANY != 'jlw'"
|
||
style="
|
||
margin-top: 5px;
|
||
margin-bottom: 10px;
|
||
width: 45%;
|
||
position: absolute;
|
||
left: 450px;
|
||
top: 20px;
|
||
"
|
||
class="dotBox"
|
||
>
|
||
<p class="text">
|
||
<i
|
||
style="
|
||
background: #44d7b6;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 0px;
|
||
"
|
||
class="dot"
|
||
></i
|
||
><span>
|
||
<!-- 任务完成 -->
|
||
{{ $t('message.projectInfo.completionOfTask') }}
|
||
</span>
|
||
</p>
|
||
<p class="text">
|
||
<i
|
||
style="
|
||
background: #f7d300;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 0px;
|
||
"
|
||
class="dot"
|
||
></i
|
||
><span>
|
||
<!-- 提前完成 -->
|
||
{{ $t('message.projectInfo.fulfilAheadOfSchedule') }}
|
||
</span>
|
||
</p>
|
||
<p class="text">
|
||
<i
|
||
style="
|
||
background: #fe6c7f;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 0px;
|
||
"
|
||
class="dot"
|
||
></i
|
||
><span>
|
||
<!-- 逾期完成 -->
|
||
{{ $t('message.projectInfo.withinTheTimeLimitToComplete') }}
|
||
</span>
|
||
</p>
|
||
<p class="text">
|
||
<i
|
||
style="
|
||
background: #3d6dc3;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 0px;
|
||
"
|
||
class="dot"
|
||
></i
|
||
><span>
|
||
<!-- 计划完成时间 -->
|
||
{{ $t('message.projectInfo.planCompleteTime') }}
|
||
</span>
|
||
</p>
|
||
<p class="text">
|
||
<i
|
||
style="
|
||
background: #ff0000;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 0px;
|
||
"
|
||
class="dot"
|
||
></i
|
||
><span>
|
||
<!-- 逾期 -->
|
||
{{ $t('message.projectInfo.overdue') }}
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div ref="ganttBuild" style="height: 100%" v-if="COMPANY == 'jlw'">
|
||
</div>
|
||
<iframe
|
||
v-else
|
||
:src="
|
||
'doc/ExtGantt/Ext甘特图2.html?url=' +
|
||
baseURL +
|
||
'&projectSn=' +
|
||
projectSn +
|
||
'&buildingId=' +
|
||
buildingId +
|
||
'&token=' +
|
||
$store.state.userInfo.token
|
||
"
|
||
id="iframe"
|
||
class="Extgantt"
|
||
></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import $ from "jquery";
|
||
import "jquery-ui-dist/jquery-ui";
|
||
import "jquery-ui-dist/jquery-ui.min.css";
|
||
import { gantt } from 'dhtmlx-gantt';
|
||
import moment from "moment"
|
||
import {
|
||
progressBuildingPlanListApi,//查询楼栋计划列表
|
||
addBuildingPlanApi,//增加楼栋计划
|
||
editBuildingPlanApi,//修改增加楼栋计划
|
||
checkBuildingPlanApi,//通过id查询进度-楼栋计划信息
|
||
deleteBuildingPlanApi,//通过id删除楼栋计划信息,
|
||
addProgressBuildinApi,//新增甘特图节点
|
||
editProgressBuildinApi,//编辑甘特图节点
|
||
deleteProgressBuildinApi,//删除甘特图节点
|
||
getProgressBuildinApi,//查询甘特图节点
|
||
} from "@/assets/js/api/buildingPlan.js";
|
||
|
||
import {
|
||
selectProgressPlanBidSectionListApi
|
||
} from "@/assets/js/api/dataBoard.js"
|
||
export default {
|
||
name: 'gantt',
|
||
props: {
|
||
tasks: {
|
||
type: Object,
|
||
default() {
|
||
return { data: [], links: [] }
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
title: '',
|
||
width: 800,
|
||
visible: false,
|
||
disablesubmit: false,
|
||
//----------------------
|
||
COMPANY: COMPANY,
|
||
alarmType: '',
|
||
ProgressPlanBidSectionList: '',
|
||
dialogTitle:/* '添加计划', */this.$t('message.projectInfo.addPlan'),
|
||
formType: 1, //1.新增 2.编辑
|
||
dialogVisible: false,
|
||
buildingList: [],
|
||
options: this.$t('message.projectInfo.options'),
|
||
checkBuildingId: 0,
|
||
moveShow: '',
|
||
checkedId: 1,
|
||
baseURL: '',
|
||
projectSn: '',
|
||
buildingId: '',//楼栋计划ID
|
||
dialogdata: {
|
||
"batchBuildArea": "",//批次建筑面积
|
||
"batchCode": "",//组团编码
|
||
"batchName": "",//组团名称
|
||
"batchNum": "",//供应批次
|
||
"batchRoomNum": "",//批次供应套数
|
||
"batchSaleArea": "",//批次供应面积（M2）
|
||
"buildingCode": "",//楼栋编码
|
||
"buildingName": "",//楼栋名称
|
||
"decorateName": "",//产品类型装修类型
|
||
"productTypeName": "",//产品类型名称
|
||
"productTypeNum": "",//产品类型编码
|
||
"projectSn": "",//项目SN
|
||
"salePark": "",//可售车位个数（个）
|
||
"saleType": "",//经营方式（可售、可租、不可租售）
|
||
"totalBuildArea": "",//总建筑面积（M2）
|
||
"totalRoomNum": "",//总套数
|
||
"totalSaleArea": ""//总可售面积（M2）
|
||
},
|
||
rules: {
|
||
batchBuildArea: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.batchCoveredArea') },
|
||
batchCode: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.groupCoding') },
|
||
batchName: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.groupName') },
|
||
batchRoomNum: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.supplyBatchNum') },
|
||
batchNum: { type: 'string', required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.supplyBatch') },
|
||
batchSaleArea: { type: 'string', required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.supplyBatchArea') },
|
||
buildingCode: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.buildingCodes') },
|
||
buildingName: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.nameOfTheBuilding') },
|
||
decorateName: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.productTypedecorationType') },
|
||
productTypeName: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.productTypeName') },
|
||
productTypeNum: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.productTypeCode') },
|
||
// salePark: { required: true, message: '请输入可售车位个数'},
|
||
// saleType: { required: true, message: '请选择经营方式'},
|
||
// totalBuildArea: { required: true, message: '请输入总建筑面积'},
|
||
// totalRoomNum:{ required: true, message: '请输入总套数'},
|
||
// totalSaleArea: { required: true, message: '请输入总可售面积'}
|
||
},
|
||
}
|
||
},
|
||
//甘特图事件
|
||
mounted: function () {
|
||
setTimeout(() => {
|
||
console.log('buildingId------', this.buildingId);
|
||
}, 500)
|
||
//日期格式化
|
||
gantt.config.xml_date = "%Y-%m-%d";
|
||
//左侧是否自适应
|
||
gantt.config.autofit = true;
|
||
//左侧宽
|
||
gantt.config.grid_width = 500;
|
||
//取消连线
|
||
gantt.config.drag_links = false;
|
||
//只读
|
||
gantt.config.readonly = false;
|
||
//右侧显示列名
|
||
gantt.config.date_scale = "%Y-%m-%d";
|
||
//自动调整图表坐标轴区间用于适配task的长度
|
||
gantt.config.fit_tasks = true;
|
||
//弹窗宽
|
||
gantt.config.wide_form = false;
|
||
//汉化
|
||
gantt.locale = {
|
||
date: {
|
||
month_full: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
|
||
month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||
day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
|
||
day_short: ["日", "一", "二", "三", "四", "五", "六"]
|
||
},
|
||
labels: {
|
||
dhx_cal_today_button: "今天",
|
||
day_tab: "日",
|
||
week_tab: "周",
|
||
month_tab: "月",
|
||
new_event: "新建日程",
|
||
icon_save: "保存",
|
||
icon_cancel: "关闭",
|
||
icon_details: "详细",
|
||
icon_edit: "编辑",
|
||
icon_delete: "删除",
|
||
confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
|
||
confirm_deleting: "是否删除计划?",
|
||
section_description: "描述:",
|
||
section_time: "时间范围:",
|
||
section_type: "类型",
|
||
section_text: "计划名称:",
|
||
section_color: "颜色:",
|
||
section_deadline: "实际时间:",
|
||
section_status: "状态:",
|
||
|
||
/* grid columns */
|
||
|
||
column_text: "计划名称",
|
||
column_start_date: "开始时间",
|
||
column_duration: "持续时间",
|
||
column_actual_date: "实际完成日期",
|
||
// column_status: "状态",
|
||
column_add: "",
|
||
|
||
/* link confirmation */
|
||
|
||
link: "关联",
|
||
confirm_link_deleting: "将被删除",
|
||
link_start: " (开始)",
|
||
link_end: " (结束)",
|
||
|
||
type_task: "任务",
|
||
type_project: "项目",
|
||
type_milestone: "里程碑",
|
||
|
||
minutes: "分钟",
|
||
hours: "小时",
|
||
days: "天",
|
||
weeks: "周",
|
||
months: "月",
|
||
years: "年"
|
||
}
|
||
}
|
||
gantt.plugins({ marker: true, tooltip: true }); // 开启marker插件
|
||
// 提示框内容
|
||
gantt.templates.tooltip_text = function (start, end, task) {
|
||
return (
|
||
"<b>任务名称:</b>" +
|
||
task.text +
|
||
"<br/><b>计划开始日期:</b> " +
|
||
moment(task.start_date).format("YYYY-MM-DD") +
|
||
"<br/><b>计划完成日期:</b> " +
|
||
moment(task.end_date).format("YYYY-MM-DD") +
|
||
"<br/><b>状态:</b>" +
|
||
task.statusName + "<br/><b>实际完成日期:</b> " +
|
||
moment(task.planned_start).format("YYYY-MM-DD")
|
||
);
|
||
|
||
};
|
||
//左侧显示列名
|
||
gantt.config.columns = [
|
||
{ name: "text", label: "任务名称", tree: true, width: '110' },
|
||
{ name: "start_date", label: "计划完成时间", align: "center" },
|
||
{ name: "end_date", label: "预计完成日期", align: "center" },
|
||
{ name: "planned_start", label: "实际完成日期", align: "center" },
|
||
{ name: "statusName", label: "状态", align: "center" },
|
||
{ name: "add", label: "" },
|
||
];
|
||
function startDatepicker(node) {
|
||
return $(node).find("input[name='start']");
|
||
}
|
||
function endDateInput(node) {
|
||
return $(node).find("input[name='end']");
|
||
};
|
||
|
||
|
||
gantt.form_blocks["datepicker"] = {
|
||
render(sns) {
|
||
//sns - the section's configuration object
|
||
return (
|
||
"<div class='gantt-lb-datepicker'>" +
|
||
"<input type='text' name='start' placeholder='请选择实际开始时间' style='height:20px;width:142px;margin:0 8px 0 158px'></div>"
|
||
);
|
||
},
|
||
set_value(node, value, task, section) {
|
||
startDatepicker(node).datepicker({
|
||
dateFormat: "yy-mm-dd",
|
||
onSelect: () => { },
|
||
});
|
||
|
||
startDatepicker(node).datepicker("setDate", task.planned_start);
|
||
},
|
||
get_value(node, task, section) {
|
||
var start = startDatepicker(node).datepicker("getDate");
|
||
task.planned_start = start;
|
||
// task.duration = gantt.calculateDuration(task);
|
||
},
|
||
focus(node) { },
|
||
};
|
||
|
||
//弹出层
|
||
gantt.config.lightbox.sections = [
|
||
{ name: "text", height: 70, map_to: "text", type: "textarea", focus: true, width: 200 },
|
||
{ name: "time", height: 30, map_to: "auto", type: "time", time_format: ["%Y", "%m", "%d"] },
|
||
// { name: "deadline", height: 30, map_to: "actual_date",
|
||
// type: "time", time_format: ["%Y", "%m", "%d"], parent:1},
|
||
{
|
||
name: "deadline", height: 72, type: "datepicker",
|
||
map_to: "auto"
|
||
},
|
||
// 完成状态
|
||
{
|
||
name: "status",
|
||
height: 30,
|
||
map_to: "status",
|
||
type: "select",
|
||
options: [
|
||
{ key: 2, label: "已发布（进行中）", color: "yellow" },
|
||
{ key: 3, label: "节点汇报审批中", color: "#3db9d3" },
|
||
{ key: 4, label: "计划审批中", color: "#FF8247" },
|
||
{ key: 6, label: "归档（完成）", color: "#33cc33" },
|
||
],
|
||
},
|
||
];
|
||
|
||
//弹窗标题 日期范围
|
||
gantt.templates.task_time = function (start, end, task) {
|
||
return moment(start).format('YYYY-MM-DD') + " - " + moment(end).format('YYYY-MM-DD');
|
||
};
|
||
//弹窗标题 计划名称
|
||
gantt.templates.task_text = function (start, end, task) {
|
||
return task.text;
|
||
};
|
||
gantt.init(this.$refs.ganttBuild);
|
||
gantt.parse(this.$props.tasks);
|
||
let this_ = this
|
||
//添加后触发
|
||
gantt.attachEvent("onAfterTaskAdd", function (id, item) {
|
||
console.log("添加的数据入参", item);
|
||
let data = {
|
||
buildingId: this_.buildingId,
|
||
nodeName: item.text,
|
||
plannedFinishDate: moment(item.start_date).format("YYYY-MM-DD"), //计划开始
|
||
predictFinishDate: moment(item.end_date).format("YYYY-MM-DD"), //计划结束
|
||
status: Number(item.status),
|
||
actualFinishDate: item.planned_start != null ? moment(item.planned_start).format("YYYY-MM-DD") : null, //实际结束
|
||
};
|
||
console.log("添加的数据", data);
|
||
addProgressBuildinApi(data).then((res) => {
|
||
this_.getBuildingNodeList(this_.buildingId);
|
||
});
|
||
});
|
||
//移动进度后触发
|
||
gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {
|
||
// console.log("移动进度后触发");
|
||
// this_.changeTask();
|
||
});
|
||
//移动任务后触发
|
||
gantt.attachEvent("onAfterTaskMove", function (id, parent, tindex) {
|
||
// console.log("移动任务后触发");
|
||
// this_.changeTask();
|
||
});
|
||
//删除任务后触发
|
||
gantt.attachEvent("onAfterTaskDelete", function (id, item) {
|
||
console.log("删除任务后触发");
|
||
deleteProgressBuildinApi({ id: id }).then((res) => {
|
||
console.log("删除的数据", res);
|
||
this_.getBuildingNodeList(this_.buildingId);
|
||
});
|
||
});
|
||
//修改任务后触发
|
||
gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
|
||
console.log("修改任务后触发 :", item);
|
||
let data = {
|
||
buildingId: this_.buildingId,
|
||
nodeName: item.text,
|
||
id: id,
|
||
plannedFinishDate: moment(item.start_date).format("YYYY-MM-DD"), //计划开始
|
||
predictFinishDate: moment(item.end_date).format("YYYY-MM-DD"), //计划结束
|
||
status: Number(item.status),
|
||
actualFinishDate: item.planned_start != null ? moment(item.planned_start).format("YYYY-MM-DD") : null, //实际结束
|
||
};
|
||
editProgressBuildinApi(data).then((res) => {
|
||
console.log("修改的数据", res);
|
||
this_.getBuildingNodeList(this_.buildingId);
|
||
});
|
||
|
||
})
|
||
//保存验证
|
||
gantt.attachEvent("onLightboxSave", function (id, item) {
|
||
if (!item.text) {
|
||
gantt.message({ type: "error", text: "请填写计划名称!" });
|
||
return false;
|
||
}
|
||
return true;
|
||
});
|
||
|
||
},
|
||
created() {
|
||
this.selectProgressPlanBidSectionList()
|
||
this.baseURL = this.$http.defaults.baseURL;
|
||
this.projectSn = this.$store.state.projectSn;
|
||
},
|
||
methods: {
|
||
changeTask(ganttValue) {
|
||
console.log('接收数据整理--', ganttValue);
|
||
let taskData = [];
|
||
let arr = ganttValue.length > 0 ? ganttValue : []
|
||
arr.forEach(obj => {
|
||
let taskOne = {};
|
||
taskOne.id = obj.id;
|
||
taskOne.text = obj.nodeName;
|
||
taskOne.start_date = moment(obj.plannedFinishDate).format('YYYY-MM-DD');
|
||
taskOne.end_date = moment(obj.predictFinishDate).format('YYYY-MM-DD');
|
||
taskOne.color =
|
||
obj.status == 2 ? "yellow" : obj.status == 3 ? "#3db9d3" : obj.status == 4 ? "#FF8247" : "#33cc33";
|
||
taskOne.statusName = obj.status == 2 ? '已发布（进行中）' : obj.status == 3 ? '节点汇报审批中' : obj.status == 4 ? '计划审批中' : '归档（完成）';
|
||
taskOne.status = obj.status
|
||
if (obj.actualFinishDate != null && obj.actualFinishDate != '') {
|
||
taskOne.planned_start = moment(obj.actualFinishDate).format(
|
||
"YYYY-MM-DD"
|
||
);
|
||
} else {
|
||
taskOne.planned_start = null
|
||
}
|
||
taskData.push(taskOne);
|
||
});
|
||
console.log('看下接收的数据', taskData);
|
||
this.$props.tasks.data = taskData;
|
||
//清空数据
|
||
gantt.clearAll();
|
||
//加载
|
||
gantt.parse(this.$props.tasks);
|
||
},
|
||
//-----------甘特图分割线
|
||
//查询楼栋计划节点数据
|
||
getBuildingNodeList(val) {
|
||
this.tasks.data = [];
|
||
getProgressBuildinApi({ buildingId: val }).then(res => {
|
||
console.log('查询楼栋计划节点数据--', res);
|
||
this.$props.tasks.data = this.tasks.data;
|
||
this.changeTask(res.result);
|
||
})
|
||
},
|
||
selectProgressPlanBidSectionList() {
|
||
selectProgressPlanBidSectionListApi({ projectSn: this.$store.state.projectSn }).then(res => {
|
||
this.ProgressPlanBidSectionList = res.result
|
||
this.alarmType = res.result[0].id
|
||
this.progressBuildingPlanList()
|
||
this.selectMenu(0)
|
||
console.log(res.result);//projectfName
|
||
})
|
||
},
|
||
changeAlarmType() {
|
||
this.progressBuildingPlanList()
|
||
this.selectMenu(0)
|
||
},
|
||
selectMenu(val, id) {
|
||
console.log(id);
|
||
console.log(val)
|
||
this.buildingId = id
|
||
this.checkBuildingId = val
|
||
if (COMPANY == 'jlw') {
|
||
this.getBuildingNodeList(id)
|
||
} else {
|
||
if (document.querySelector('iframe')) {
|
||
document.querySelector('iframe').contentWindow.location.reload();
|
||
}
|
||
}
|
||
},
|
||
progressBuildingPlanList() {
|
||
progressBuildingPlanListApi({ projectSn: this.$store.state.projectSn, bidSectionId: this.alarmType }).then(res => {
|
||
if (res.code == 200) {
|
||
this.buildingList = res.result
|
||
this.buildingId = res.result[0].id
|
||
console.log(res.result);
|
||
this.getBuildingNodeList(this.buildingId)
|
||
}
|
||
})
|
||
},
|
||
submitForm() {
|
||
this.$refs['form'].validate((valid) => {
|
||
console.log(valid)
|
||
if (valid) {
|
||
let data = this.dialogdata
|
||
data.projectSn = this.projectSn
|
||
data.bidSectionId = this.alarmType
|
||
// console.log('新增的参数',data)
|
||
if (this.formType == 1) {
|
||
addBuildingPlanApi(data).then(res => {
|
||
// console.log('新增之后的结果',res)
|
||
if (res.code == 200) {
|
||
this.$message.success(this.$t('message.projectInfo.addSuccess') + '!')
|
||
this.progressBuildingPlanList()
|
||
this.closeDialog()
|
||
this.selectMenu(this.buildingList.length)
|
||
}
|
||
})
|
||
} else if (this.formType == 2) {
|
||
editBuildingPlanApi(data).then(res => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.$message.success(this.$t('message.projectInfo.editSuccess') + '!')
|
||
this.progressBuildingPlanList()
|
||
this.closeDialog()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
closeDialog() {
|
||
this.dialogVisible = false
|
||
this.dialogdata = {}
|
||
this.dialogdata = {
|
||
"batchBuildArea": "",//批次建筑面积
|
||
"batchCode": "",//组团编码
|
||
"batchName": "",//组团名称
|
||
"batchNum": "",//供应批次
|
||
"batchRoomNum": "",//批次供应套数
|
||
"batchSaleArea": "",//批次供应面积（M2）
|
||
"buildingCode": "",//楼栋编码
|
||
"buildingName": "",//楼栋名称
|
||
"decorateName": "",//产品类型装修类型
|
||
"productTypeName": "",//产品类型名称
|
||
"productTypeNum": "",//产品类型编码
|
||
"projectSn": "",//项目SN
|
||
"salePark": "",//可售车位个数（个）
|
||
"saleType": "",//经营方式（可售、可租、不可租售）
|
||
"totalBuildArea": "",//总建筑面积（M2）
|
||
"totalRoomNum": "",//总套数
|
||
"totalSaleArea": ""//总可售面积（M2）
|
||
}
|
||
},
|
||
deleteBuilding(id) {
|
||
this.$confirm(this.$t('message.projectInfo.confirmTipText') + '?', this.$t('message.projectInfo.tip'), {
|
||
confirmButtonText: this.$t('message.energyManage.material.confirm'),
|
||
cancelButtonText: this.$t('message.energyManage.material.cancel'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
deleteBuildingPlanApi({
|
||
id: id
|
||
}).then(res => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: this.$t('message.projectInfo.deleteSuccess') + '!'
|
||
});
|
||
this.progressBuildingPlanList()
|
||
this.selectMenu(0)
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: this.$t('message.projectInfo.cancelDelete')
|
||
});
|
||
});
|
||
},
|
||
editBuilding(id, index) {
|
||
this.dialogVisible = true
|
||
this.dialogTitle = /* '编辑计划' */this.$t('message.projectInfo.editPlan')
|
||
this.formType = 2
|
||
this.checkBuildingId = index
|
||
checkBuildingPlanApi({
|
||
id: id
|
||
}).then(res => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.dialogdata = res.result
|
||
}
|
||
})
|
||
},
|
||
newTowerBtn() {
|
||
this.dialogVisible = true
|
||
this.dialogTitle = /* '添加计划' */this.$t('message.projectInfo.addPlan')
|
||
this.formType = 1
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import '~dhtmlx-gantt/codebase/dhtmlxgantt.css';
|
||
::v-deep .gantt_add {
|
||
display: none;
|
||
}
|
||
|
||
.gantt_section_time /deep/ .gantt_duration {
|
||
display: none !important;
|
||
}
|
||
::v-deep .gantt_tree_content {
|
||
height: 100%;
|
||
white-space: nowrap;
|
||
min-width: 0;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
}
|
||
.dotBox {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.text {
|
||
display: flex;
|
||
align-items: center;
|
||
.dot {
|
||
display: inline-block;
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
.dialog-btn {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
.dialog-content {
|
||
/*height: 360px;*/
|
||
margin-bottom: 60px;
|
||
}
|
||
.dialogFormBox {
|
||
width: 100%;
|
||
padding: 0 30px;
|
||
box-sizing: border-box;
|
||
/deep/.el-form-item {
|
||
display: inline-block;
|
||
width: 50%;
|
||
.el-select {
|
||
width: 260px !important;
|
||
}
|
||
.el-date-picker {
|
||
width: 260px !important;
|
||
}
|
||
.el-cascader {
|
||
width: 260px !important;
|
||
}
|
||
.el-input {
|
||
width: 260px !important;
|
||
}
|
||
}
|
||
}
|
||
.buildingPlan {
|
||
display: flex;
|
||
height: 100%;
|
||
// background: #fff;
|
||
.left {
|
||
height: 100%;
|
||
width: 260px;
|
||
margin-right: 15px;
|
||
font-size: 15px;
|
||
.title {
|
||
height: 41px;
|
||
line-height: 41px;
|
||
box-sizing: border-box;
|
||
padding: 0 22px;
|
||
margin-bottom: 0;
|
||
// color: #282e49;
|
||
// border-bottom: 2px #ebf0fc solid;
|
||
font-weight: 600;
|
||
}
|
||
.title_index {
|
||
display: inline-block;
|
||
width: 30px;
|
||
text-align: center;
|
||
background: #ec7e2e;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
font-size: 14px;
|
||
margin-right: 10px;
|
||
border-radius: 25px;
|
||
color: #fff;
|
||
}
|
||
.title_name {
|
||
width: 68%;
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.el-menu-item {
|
||
border-bottom: 1px #ebf0fc solid;
|
||
border-left: 3px solid white;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
padding: 0 20px !important;
|
||
font-size: 16px;
|
||
}
|
||
// .el-menu-item:hover > .el-icon-delete{
|
||
// display: none;
|
||
// }
|
||
.checked_item {
|
||
border-left: 3px solid #5181f6;
|
||
// padding: 0 27px !important;
|
||
background-color: #e1e8fa !important;
|
||
}
|
||
.btn_pack {
|
||
display: flex;
|
||
padding: 15px 15px;
|
||
box-sizing: border-box;
|
||
justify-content: center;
|
||
button {
|
||
height: 34px;
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
flex: 1;
|
||
background: #fff;
|
||
.inner {
|
||
padding: 25px 20px;
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
.Extgantt {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|