contractDialog.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  1. <template>
  2. <el-dialog title="项目及建筑信息管理" :visible.sync="mapShow" width="45%">
  3. <!-- <my-map style="margin-bottom:20px;"></my-map> -->
  4. <div v-if="!perjId">
  5. <el-form ref="perj" :model="perj" label-width="150px">
  6. <el-form-item
  7. label="项目本地名称:"
  8. :rules="{ required: true, message: '项目名称不能为空', trigger: 'blur' }"
  9. >
  10. <el-input v-model="perj.infos.ProjLocalName"></el-input>
  11. </el-form-item>
  12. <div>
  13. <b-map type="create" @getPoint="pointChange"></b-map>
  14. </div>
  15. <el-form-item label="省市区域:">
  16. <span>{{Provinces | mess}}</span>
  17. </el-form-item>
  18. <el-form-item label="气候区域:">
  19. <span>{{ClimateZone | mess}}</span>
  20. </el-form-item>
  21. <el-form-item label="城市发展水平:">
  22. <span>{{UrbanDevpLev | mess}}</span>
  23. </el-form-item>
  24. <el-form-item label="海拔:">
  25. <span>{{perj.infos.Altitude | mess}}</span>
  26. </el-form-item>
  27. <el-form-item label="纬度:">
  28. <span>{{perj.infos.Latitude | mess}}</span>
  29. </el-form-item>
  30. <el-form-item label="经度:">
  31. <span>{{perj.infos.Longitude | mess}}</span>
  32. </el-form-item>
  33. </el-form>
  34. <div class="dialog_border"></div>
  35. <div v-if="isCreate">
  36. <h3 class="dialog_height">建筑信息</h3>
  37. <template v-for="item in buildArr">
  38. <build
  39. :buildType="buildCreate(item)"
  40. :buildData="item"
  41. :id="param.perjId"
  42. :buildMess="buildMess"
  43. :funcTypeArr="funcTypeArr"
  44. ></build>
  45. </template>
  46. <el-button type="text" @click="addBuild" class="create-build">添加建筑</el-button>
  47. </div>
  48. <span slot="footer" class="dialog-footer" v-if="!isCreate">
  49. <el-button @click="mapShow = false">取 消</el-button>
  50. <el-button type="primary" @click="success">{{isCreate ? "确 定" : "确认添加项目"}}</el-button>
  51. </span>
  52. </div>
  53. <div v-else>
  54. <el-form ref="perj" :model="perj" label-width="150px">
  55. <form-input
  56. :value="perj.infos.ProjLocalName"
  57. @change="perjChange"
  58. :keys="'ProjLocalName'"
  59. :label="'项目本地名称'"
  60. :isRule="false"
  61. ></form-input>
  62. <div>
  63. <b-map
  64. type="change"
  65. v-if="changeMap"
  66. :code="perj.area_code"
  67. :location="locations"
  68. @getPoint="pointChange"
  69. ></b-map>
  70. </div>
  71. <el-form-item label="省市区域:">
  72. <span>{{Provinces | mess}}</span>
  73. </el-form-item>
  74. <el-form-item label="气候区域:">
  75. <span>{{ClimateZone | mess}}</span>
  76. </el-form-item>
  77. <el-form-item label="城市发展水平:">
  78. <span>{{UrbanDevpLev | mess}}</span>
  79. </el-form-item>
  80. <el-form-item label="海拔:">
  81. <span>{{perj.infos.Altitude | mess}}</span>
  82. </el-form-item>
  83. <el-form-item label="纬度:">
  84. <span>{{perj.infos.Latitude | mess}}</span>
  85. </el-form-item>
  86. <el-form-item label="经度:">
  87. <span>{{perj.infos.Longitude | mess}}</span>
  88. </el-form-item>
  89. </el-form>
  90. <project-view v-if="projShow" :label="projLabel" :value="perj"></project-view>
  91. <div style="height:40px;">
  92. <el-button style="float:right;" v-if="!projShow" @click="projShow = true" type="text">维护详细信息</el-button>
  93. <el-button style="float:right;" v-if="projShow" @click="projShow = false" type="text">收起</el-button>
  94. </div>
  95. <div class="dialog_border"></div>
  96. <h3 class="dialog_height">建筑信息</h3>
  97. <template v-for="(item,index) in buildArr">
  98. <build
  99. :buildType="buildCreate(item)"
  100. @del="del(index)"
  101. @created="changeBuild(item)"
  102. :id="param.perjId"
  103. :buildData="item"
  104. :buildMess="buildMess"
  105. :funcTypeArr="funcTypeArr"
  106. ></build>
  107. </template>
  108. <el-button type="text" @click="addBuild" class="create-build">添加建筑</el-button>
  109. </div>
  110. </el-dialog>
  111. </template>
  112. <script>
  113. import formInput from "@/components/market/owner/formInput";
  114. import bMap from "@/components/market/owner/map";
  115. import build from "@/components/market/owner/build";
  116. import project from "./project"
  117. import projectView from "./project.vue"
  118. import tools from "@/utils/tools";
  119. export default {
  120. components: {
  121. formInput,
  122. bMap,
  123. build,
  124. projectView
  125. },
  126. props: ["show", "param", "buildMess", "funcTypeArr"],
  127. data() {
  128. return {
  129. mapShow: true,
  130. perjId: false,
  131. perj: {
  132. area_code: "",
  133. infos: {
  134. ProjLocalName: "", //String,必填,项目本地名称
  135. ClimateZone: "", //String,气候区域
  136. UrbanDevpLev: "", //String,城市发展水平
  137. Altitude: "", //海拔
  138. Longitude: "", //经度
  139. Latitude: "" //纬度
  140. }
  141. },
  142. Provinces: "", //省市区
  143. UrbanDevpLev: "", //城市发展水平
  144. ClimateZone: "", //气候区域
  145. buildArr: [
  146. //项目下建筑的列表
  147. ],
  148. projShow: false,
  149. locations: {
  150. //默认经纬度
  151. },
  152. changeMap: false, //控制地图修改的显示
  153. isCreate: false, //是否添加建筑
  154. projLabel: []
  155. };
  156. },
  157. created() {
  158. if (this.param.perjId) {
  159. this.perjId = true;
  160. } else {
  161. this.perjId = false;
  162. }
  163. this.mapShow = this.show;
  164. this.perj.infos.ProjLocalName = this.param.projectName;
  165. //如果perjId存在,查询详情
  166. if (this.param.perjId) {
  167. this.getPerjMess();
  168. this.getBuildList();
  169. }
  170. this.getPorjLabel()
  171. },
  172. methods: {
  173. //获取项目的信息点
  174. getPorjLabel() {
  175. // this.getJson("/server/dataplatform/infocode/complex_query?projectId=Pj1101080001&type=project&combine=true&enrich=true",
  176. // {},
  177. // res => {
  178. // console.log(res, "res")
  179. // })
  180. this.projLabel = tools.arrayCnt(project);
  181. },
  182. //地图获取到坐标code码
  183. pointChange(code, location, Provinces, type) {
  184. this.perj.area_code = code;
  185. this.perj.infos.Longitude = location.lng;
  186. this.perj.infos.Latitude = location.lat;
  187. let param = {
  188. area_code: code
  189. };
  190. this.Provinces = Provinces;
  191. //获取地域信息等信息点
  192. this.postJson("/server/business-os/area/query", param, res => {
  193. this.perj.infos.ClimateZone = res.content.ClimateZone.code;
  194. this.perj.infos.UrbanDevpLev = res.content.UrbanDevpLev.code;
  195. this.perj.infos.Altitude = Number(res.content.Altitude) || null;
  196. this.ClimateZone = res.content.ClimateZone.name;
  197. this.UrbanDevpLev = res.content.UrbanDevpLev.name;
  198. if (this.perj.infos.ProjID) {
  199. this.perjChange(type, "baiduMap");
  200. }
  201. });
  202. },
  203. //项目本地名称被修改
  204. perjChange(val, key) {
  205. this.perj.id = this.perj.infos.ProjID;
  206. let param = {}
  207. if (key == "ProjLocalName") {
  208. param.infos = {
  209. [key]: val
  210. }
  211. param.id = this.perj.id
  212. } else {
  213. if (val == "deat") {
  214. param = this.perj
  215. } else {
  216. return false
  217. }
  218. }
  219. this.postJson(
  220. "/server/business-os/proprietor/project/update",
  221. param,
  222. res => {
  223. this.$message.success("修改成功");
  224. }
  225. )
  226. },
  227. //点击添加建筑
  228. addBuild() {
  229. let buildObj = {
  230. projectId: this.param.perjId, //必填,项目id
  231. infos: {
  232. BuildLocalID: "", //建筑本地编码
  233. BuildLocalName: "", //建筑本地名称
  234. BuildAge: "", //建筑年代
  235. BuildFuncType: "" //建筑功能类型
  236. }
  237. };
  238. this.buildArr.push(buildObj);
  239. },
  240. //判断是否为添加建筑
  241. buildCreate(item) {
  242. if (item.id) {
  243. return "change";
  244. } else {
  245. return "create";
  246. }
  247. },
  248. //取消
  249. del(index) {
  250. this.buildArr.splice(index, 1);
  251. },
  252. changeBuild() {
  253. this.getBuildList();
  254. },
  255. //点击创建建筑时触发
  256. success() {
  257. let param = {};
  258. param.proprietorId = this.param.proprietorId;
  259. param.area_code = this.perj.area_code;
  260. param.infos = this.perj.infos;
  261. if (this.perj.area_code && this.perj.infos.ProjLocalName) {
  262. if (this.isCreate) {
  263. this.isCreate = true;
  264. } else {
  265. if (param.BuildFuncType && param.BuildFuncType.length > 1) {
  266. param.BuildFuncType =
  267. param.BuildFuncType[param.BuildFuncType.length - 1];
  268. }
  269. this.postJson(
  270. "/server/business-os/proprietor/project/create",
  271. param,
  272. res => {
  273. this.isCreate = true;
  274. this.param.perjId = res.id;
  275. this.perjId = res.id;
  276. this.getPerjMess();
  277. this.getBuildList();
  278. }
  279. );
  280. }
  281. } else {
  282. this.$message.error("请确定项目名与项目地址");
  283. }
  284. },
  285. //查询项目详情
  286. getPerjMess() {
  287. let params = {
  288. id: this.param.perjId
  289. };
  290. this.postJson(
  291. "/server/business-os/proprietor/project/query",
  292. params,
  293. res => {
  294. this.perj.infos = res.content.infos;
  295. this.perj.area_code = res.content.infos.UrbanZone;
  296. this.locations = {
  297. lng: res.content.infos.Longitude,
  298. lat: res.content.infos.Latitude
  299. };
  300. this.changeMap = true;
  301. }
  302. );
  303. },
  304. //获取项目下建筑列表
  305. getBuildList() {
  306. let param = {
  307. projectId: this.param.perjId //必填,项目id
  308. };
  309. this.postJson(
  310. "/server/business-os/proprietor/project/building/query",
  311. param,
  312. res => {
  313. this.buildArr = res.content;
  314. }
  315. );
  316. }
  317. },
  318. watch: {
  319. mapShow: {
  320. deep: true,
  321. handler(val, oldVal) {
  322. this.$emit("close");
  323. this.mapShow = true;
  324. }
  325. }
  326. },
  327. //过滤器
  328. filters: {
  329. //简单处理数组
  330. mess(val) {
  331. return val || "请在地图中选择项目地址";
  332. }
  333. }
  334. };
  335. </script>
  336. <style lang="scss" scoped>
  337. .dialog_height {
  338. line-height: 100px;
  339. font-size: 32px;
  340. text-align: center;
  341. }
  342. .dialog-footer {
  343. float: right;
  344. }
  345. .create-build {
  346. display: block;
  347. margin: auto;
  348. }
  349. </style>