\r\n
\r\n
\r\n
BÁO CÁO CHUYÊN ĐỀ \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {roleAdd == true ?
\r\n
\r\n
\r\n {/*
\r\n\r\n
\r\n \r\n Báo cáo \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n )\r\n}\r\n","const { default: axiosClient } = require(\"./axiosClient\");\r\n\r\nconst PostApi = {\r\n getPaging: (params) => {\r\n const url = '/post/paging';\r\n return axiosClient.get(url, {params});\r\n },\r\n\r\n getDetail: (id) =>{\r\n const url = '/post/getbyid/' + id;\r\n return axiosClient.get(url);\r\n },\r\n\r\n post: (data) =>{\r\n const url = '/post/add';\r\n return axiosClient.post(url, data);\r\n },\r\n\r\n put: (data) => {\r\n const url = '/post/edit';\r\n return axiosClient.put(url, data);\r\n },\r\n\r\n delete: (id) =>{\r\n const url = '/post/delete/' + id;\r\n return axiosClient.delete(url);\r\n },\r\n getAll: (params) =>{\r\n const url = 'post/getall';\r\n return axiosClient.get(url, {params});\r\n }\r\n}\r\n\r\nexport default PostApi;","import React, { useState, useEffect } from 'react'\r\nimport { Modal, Button } from 'react-bootstrap';\r\nimport { useForm } from 'react-hook-form';\r\nimport PostApi from '../../api/PostApi';\r\nimport Select from 'react-select';\r\nimport Pagination from 'react-bootstrap-4-pagination';\r\nimport ThongBao from '../../core/ThongBao';\r\nimport { QuanLyTapTin } from '../../shared/quanlytaptin/QuanLyTapTin';\r\n\r\nimport { Tab, Tabs, TabList, TabPanel } from 'react-tabs';\r\nimport 'react-tabs/style/react-tabs.css';\r\nimport CKEditor from '@ckeditor/ckeditor5-react';\r\nimport ClassicEditor from '@ckeditor/ckeditor5-build-classic';\r\nimport PostCategoryApi from '../../api/PostCategoryApi';\r\n\r\nimport Authen from '../../core/Authen';\r\nimport Ultility from '../../core/Ultility';\r\nimport { set } from 'ol/transform';\r\n\r\nexport const Post = () => {\r\n\r\n var apiUrl = process.env.REACT_APP_API_URL.replace('api', '');\r\n var noImage = \"/uploadfiles/website/no_image-100x100.jpg\";\r\n const [listPosts, setListPosts] = useState([]);\r\n const [show, setShow] = useState(false);\r\n const handleClose = () => setShow(false);\r\n const { register, handleSubmit, reset, errors } = useForm();\r\n const [filter, setFilter] = useState('');\r\n const [listDanhMucCha, setDanhMucCha] = useState([{ value: 0, label: 'Chọn danh mục...' }]);\r\n const [selectedOption, setSelectedOption] = useState();\r\n const [selectedPostcategoryTimKiem, setSelectedPostcategoryTimKiem] = useState();\r\n const [srcImage, setSrcImage] = useState(noImage);\r\n const [alias, setAlias] = useState(\"\");\r\n\r\n const [viewModal, setViewModal] = useState(false);\r\n const [postModal, setPostModal] = useState({});\r\n const [content, setContent] = useState('');\r\n\r\n const [roleAdd, setRoleAdd] = useState(false);\r\n const [roleEdit, setRoleEdit] = useState(false);\r\n const [roleDel, setRoleDel] = useState(false);\r\n\r\n let pageIndex = 1;\r\n let pageSize = 20;\r\n const [paginationConfig, setPaging] = useState({\r\n totalPages: 1,\r\n currentPage: 1,\r\n showMax: 5,\r\n size: \"sm\",\r\n threeDots: true,\r\n prevNext: true,\r\n onClick: function (page) {\r\n pageIndex = page;\r\n loadPosts();\r\n }\r\n });\r\n\r\n const loadPosts = async () => {\r\n try {\r\n var categoryId = '';\r\n if (selectedPostcategoryTimKiem != null) {\r\n if (selectedPostcategoryTimKiem.value != 0) {\r\n categoryId = selectedPostcategoryTimKiem.value.toString();\r\n }\r\n }\r\n const params = {\r\n pageIndex: pageIndex,\r\n pageSize: pageSize,\r\n filter: filter,\r\n categoryId:categoryId\r\n }\r\n const response = await PostApi.getPaging(params);\r\n response.Items.forEach(item => {\r\n item.Checked = false;\r\n });\r\n paginationConfig.totalPages = 1;\r\n if (response.Items.length > 0) {\r\n paginationConfig.totalPages = Math.ceil(response.TotalRow / pageSize);\r\n }\r\n paginationConfig.currentPage = pageIndex;\r\n setPaging(paginationConfig);\r\n setListPosts(response.Items);\r\n } catch (err) {\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n setSelectedPostcategoryTimKiem(listDanhMucCha[0]);\r\n loadPosts();\r\n loadDanhMucCha();\r\n setRoleAdd(Authen.checkQuyen('BAIVIET_CREATE'));\r\n setRoleEdit(Authen.checkQuyen('BAIVIET_UPDATE'));\r\n setRoleDel(Authen.checkQuyen('BAIVIET_DELETE'));\r\n }, []);\r\n\r\n const timKiem = () => {\r\n loadPosts();\r\n }\r\n\r\n function onChangeFilter(e) {\r\n setFilter(e.target.value)\r\n }\r\n\r\n const saveData = (data) => {\r\n postModal.Alias = alias;\r\n postModal.Image = srcImage;\r\n postModal.Content = content;\r\n if (selectedOption) {\r\n if (selectedOption.value == 0) {\r\n postModal.CategoryId = null;\r\n }\r\n else {\r\n postModal.CategoryId = selectedOption.value;\r\n }\r\n }\r\n else {\r\n postModal.CategoryId = null;\r\n }\r\n if (postModal.CategoryId == null) {\r\n ThongBao.prinWarningMessage(\"Bạn hãy nhập danh mục\");\r\n }\r\n else {\r\n if (postModal.Id === 0 || postModal.Id == null) {\r\n postModal.Id = 0;\r\n PostApi.post(postModal).then(() => {\r\n setShow(false);\r\n loadPosts();\r\n })\r\n }\r\n else {\r\n PostApi.put(postModal).then(() => {\r\n setShow(false);\r\n loadPosts();\r\n })\r\n }\r\n }\r\n }\r\n\r\n const clickRow = (id) => {\r\n listPosts.forEach(item => {\r\n if (item.Id === id) {\r\n item.Checked = !item.Checked;\r\n }\r\n });\r\n setListPosts([...listPosts]);\r\n }\r\n\r\n const handleShowAdd = () => {\r\n debugger;\r\n reset({\r\n Id: 0,\r\n Name: \"\",\r\n Alias: \"\",\r\n Status: true\r\n }, [reset]);\r\n setPostModal({\r\n Id: 0,\r\n Name: \"\",\r\n Alias: \"\",\r\n Status: true\r\n });\r\n setShow(true)\r\n setAlias(\"\");\r\n setContent(\"\");\r\n setSelectedOption(listDanhMucCha[0]);\r\n setSrcImage(noImage);\r\n };\r\n\r\n const handleShowEdit = () => {\r\n let index = listPosts.findIndex(x => x.Checked);\r\n if (index !== -1) {\r\n PostApi.getDetail(listPosts[index].Id).then((response) => {\r\n reset({\r\n Id: response.Id,\r\n Name: response.Name,\r\n Alias: response.Alias,\r\n Description: response.Description,\r\n ParentId: response.ParentId,\r\n DisplayOrder: response.DisplayOrder,\r\n Image: response.Image,\r\n HomeFlag: response.HomeFlag,\r\n HotFlag: response.HotFlag,\r\n Status: response.Status,\r\n MetaKeyword: response.MetaKeyword,\r\n MetaDescription: response.MetaDescription,\r\n IconCss: response.IconCss,\r\n Content: response.Content\r\n }, [reset]);\r\n var index = listDanhMucCha.findIndex(x => x.value == response.CategoryId);\r\n setSelectedOption(listDanhMucCha[index]);\r\n setAlias(response.Alias);\r\n setSrcImage(response.Image);\r\n setContent(response.Content);\r\n setPostModal(response);\r\n setShow(true);\r\n });\r\n }\r\n }\r\n\r\n const handleShowDel = () => {\r\n ThongBao.printConfirmationDialog(\"Bạn có đồng ý xóa dữ liệu đã chọn hay không?\", () => {\r\n let lstChecked = listPosts.filter(x => x.Checked);\r\n if (lstChecked.length > 0) {\r\n let lstId = [];\r\n lstChecked.forEach(element => {\r\n lstId.push(element.Id);\r\n });\r\n PostApi.delete(lstId).then(() => {\r\n loadPosts();\r\n })\r\n }\r\n });\r\n }\r\n\r\n const checkBoHandler = () => {\r\n\r\n }\r\n\r\n function loadDanhMucCha() {\r\n PostCategoryApi.getAll().then((response) => {\r\n let list = [];\r\n list.push({ value: 0, label: 'Chọn danh mục...' });\r\n response.forEach(item => {\r\n if (item.ParentId == null) {\r\n list.push({ value: item.Id, label: item.Name });\r\n }\r\n })\r\n setDanhMucCha(list);\r\n })\r\n }\r\n\r\n const onChangeDanhMucCha = (e) => {\r\n setSelectedOption(e);\r\n // props.onChangeHuyenProps(e);\r\n }\r\n\r\n const onChangePostcategory = (e) => {\r\n setSelectedPostcategoryTimKiem(e);\r\n }\r\n\r\n const handleKeyPress = (event) => {\r\n if (event.key === 'Enter') {\r\n loadPosts();\r\n }\r\n }\r\n\r\n const openModalImage = () => {\r\n setViewModal(true);\r\n }\r\n\r\n\r\n const closeModalImage = () => {\r\n setViewModal(false);\r\n }\r\n\r\n const onFileSelected = (event) => {\r\n setSrcImage(event);\r\n }\r\n\r\n const onChangeContent = (event, editor) => {\r\n const data = editor.getData();\r\n setContent(data);\r\n }\r\n\r\n const changeTab = () => {\r\n reset({\r\n Id: postModal.Id,\r\n Name: postModal.Name,\r\n Alias: postModal.Alias,\r\n CategoryId: postModal.CategoryId,\r\n Image: postModal.Image,\r\n Description: postModal.Description,\r\n Content: postModal.Content,\r\n HomeFlag: postModal.HomeFlag,\r\n HotFlag: postModal.HotFlag,\r\n ViewCount: postModal.ViewCount,\r\n Status: postModal.Status,\r\n Delete: postModal.Delete,\r\n MetaKeyword: postModal.MetaKeyword,\r\n MetaDescription: postModal.MetaDescription,\r\n Tags: postModal.Tags\r\n }, [reset])\r\n }\r\n\r\n const onChangeName = (e) => {\r\n debugger;\r\n let str = \"\";\r\n postModal.Name = e.target.value\r\n if (e.target.value != null) {\r\n str = Ultility.MakeSeoTitle(e.target.value);\r\n }\r\n postModal.Alias = str;\r\n setAlias(str);\r\n }\r\n\r\n const onchangeAlias = (e) => {\r\n let str = \"\";\r\n if (e.target.value != null) {\r\n str = Ultility.MakeSeoTitle(e.target.value);\r\n }\r\n postModal.Alias = str;\r\n setAlias(str)\r\n }\r\n\r\n return (\r\n
\r\n
\r\n
\r\n
Bài viết \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n Tìm kiếm \r\n
\r\n
\r\n
\r\n {roleAdd == true ? Thêm : ''}\r\n {roleEdit == true ? Sửa : ''}\r\n {roleDel == true ? Xóa : ''}\r\n
\r\n
\r\n
\r\n\r\n
\r\n \r\n Bài viết \r\n \r\n \r\n \r\n \r\n \r\n \r\n Lưu \r\n \r\n Hủy \r\n \r\n \r\n
onFileSelected(e)}> \r\n
\r\n )\r\n}\r\n","import React, { useState, useEffect } from 'react'\r\nimport { Modal, Button } from 'react-bootstrap';\r\nimport { useForm } from 'react-hook-form';\r\nimport Select from 'react-select';\r\nimport BanDoThoNhuongApi from '../../api/BanDoThoNhuongApi';\r\nimport LopMauApi from '../../api/LopMauApi';\r\n\r\nexport const ModalEditThongTin = (props) => {\r\n const [show, setShow] = useState(false);\r\n const handleClose = () => {\r\n props.closeThongTin();\r\n setShow(false)\r\n };\r\n const { register, handleSubmit, reset } = useForm();\r\n const [selectedOption, setSelectedOption] = useState();\r\n const [listLopMau, setLopMau] = useState([]);\r\n const [gid, setGid] = useState('');\r\n const kieuBanDo = 2;\r\n useEffect(() => {\r\n loadLopMau();\r\n }, []);\r\n\r\n const saveData = (data) => {\r\n if (selectedOption) {\r\n data.LoaiDat = selectedOption.value;\r\n }\r\n data.gid = gid;\r\n data.geometry = props.thongTin.geometry;\r\n if (props.themMoi) {\r\n BanDoThoNhuongApi.addThongTin(data).then(() => {\r\n setShow(false);\r\n props.saveSuccess();\r\n })\r\n } else {\r\n BanDoThoNhuongApi.updateThongTin(data).then(() => {\r\n setShow(false);\r\n props.saveSuccess();\r\n })\r\n }\r\n }\r\n\r\n const onChangeMau = (e) => {\r\n setSelectedOption(e);\r\n\r\n }\r\n\r\n function loadLopMau() {\r\n LopMauApi.getLopBanDo().then((response) => {\r\n let list = [];\r\n list.push({ value: '', label: 'Chọn màu' });\r\n response.forEach(item => {\r\n if (item.Type === 1 || item.Type === kieuBanDo)\r\n list.push({ value: item.MaMau, label: item.Ten });\r\n })\r\n setLopMau(list);\r\n })\r\n }\r\n\r\n useEffect(() => {\r\n if (props.showEdit === true) {\r\n setGid(props.thongTin.gid);\r\n reset({\r\n TenHuyen: props.thongTin.huyen,\r\n TenXa: props.thongTin.xa,\r\n PhanVung: props.thongTin.phanvung,\r\n LoaiDat: props.thongTin.g,\r\n DiaHinhTuongDoi: props.thongTin.dhtd,\r\n DiaHinh: props.thongTin.sl,\r\n TangDay: props.thongTin.tangday,\r\n ThanhPhanCoGioi: props.thongTin.tpcg,\r\n MucDoDaLan: props.thongTin.dalan,\r\n DungTrong: props.thongTin.dungtrong,\r\n PhanCapPH: props.thongTin.pc_ph,\r\n PhanCapCEC: props.thongTin.pc_cec,\r\n PhanCapDinhDuong: props.thongTin.pc_dd,\r\n PhanCapNito: props.thongTin.pc_n,\r\n PhanCapPhotPho: props.thongTin.pc_p,\r\n PhanCapKali: props.thongTin.pc_k,\r\n PhanCapHuuCoTong: props.thongTin.pc_om,\r\n PhanCapDoPhi: props.thongTin.pc_dp,\r\n\r\n LuongMua: props.thongTin.luongmua_d,\r\n TongTichOn: props.thongTin.tton_dt,\r\n MucDoKhoHan: props.thongTin.khohan_dt,\r\n\r\n NhietDo: props.thongTin.nhietdo,\r\n ChiSoKhoHan: props.thongTin.chisokhoha,\r\n PhanCapChiSoKhoHan: props.thongTin.pc_chisokh,\r\n\r\n SoThangKhoHan: props.thongTin.sothangkho,\r\n MaDat: props.thongTin.madat,\r\n CayTrong: props.thongTin.caytrong,\r\n NgapUng: props.thongTin.ngapung_dt,\r\n\r\n CheDoTuoi: props.thongTin.tuoi_dt,\r\n CheDoTieu: props.thongTin.tieu_dt,\r\n DienTich: props.thongTin.dt_bs,\r\n DungTrong_: props.thongTin.dungtrong_,\r\n Mau_AnhHuo: props.thongTin.mau_anhhuo,\r\n\r\n }, [reset])\r\n setShow(true);\r\n var index = listLopMau.findIndex(x => x.value == props.thongTin.g);\r\n setSelectedOption(listLopMau[index]);\r\n }\r\n\r\n }, [props.showEdit]);\r\n return (\r\n
\r\n\r\n
\r\n \r\n Thông tin \r\n \r\n \r\n \r\n \r\n \r\n \r\n Lưu \r\n \r\n Hủy \r\n \r\n \r\n\r\n
\r\n\r\n )\r\n}\r\n","import data from '../../main/madontinh/madontinh.json';\r\n\r\nconst MADONTINH = {\r\n getTen(input) {\r\n input.forEach(p => {\r\n const resuit = data.filter(x => x.Ma === p.Ma && x.Id === p.Value && p.Ma !=='Th').map(j =>\r\n {if(j.Ten !== undefined) \r\n { p.Ten = j.Ten;}\r\n else\r\n {\r\n p.Ten = p.Value;\r\n }\r\n }\r\n );\r\n if (resuit.length === 0 || resuit === undefined)\r\n {\r\n p.Ten = p.Value;\r\n }\r\n\r\n if (p.Ma ==='Th')\r\n {\r\n \r\n let index = input.indexOf(p);\r\n if(index !== -1)\r\n {\r\n input.splice(index,1);\r\n }\r\n }\r\n\r\n });\r\n data.filter(x=> x.Ma==='Th').map(j=>\r\n {\r\n let rs = {\"Ma\": j.Ma,\r\n \"Value\": j.Id,\r\n \"Ten\": j.Ten};\r\n input.push(rs);\r\n })\r\n return input;\r\n }\r\n}\r\n\r\nexport default MADONTINH;","import React, { useEffect, useState } from 'react'\r\nimport LopBanDoApi from '../../api/LopBanDoApi';\r\nimport ol from \"openlayers\";\r\nimport \"ol/ol.css\";\r\nimport { SelectHuyen } from '../../shared/selecthuyen/SelectHuyen';\r\nimport ThongBao from '../../core/ThongBao';\r\nimport BanDoThoNhuongApi from '../../api/BanDoThoNhuongApi';\r\nimport { ModalEditThongTin } from './ModalEditThongTin';\r\nimport LopMauApi from '../../api/LopMauApi';\r\nimport Authen from '../../core/Authen';\r\nimport madontinh from '../../main/madontinh/madontinh'\r\n\r\nexport const BanDoThoNhuong = () => {\r\n const view = new ol.View({\r\n center: [11725287.264889468, 2355407.026607706],\r\n zoom: 11\r\n });\r\n const kieuBanDo = 2;\r\n var [map, setMap] = useState(new ol.Map());\r\n // var map;\r\n const [listLopBanDos, setLopBanDo] = useState([]);\r\n var [thongTin, setThongTin] = useState({});\r\n const [filter, setFilter] = useState();\r\n var [provinceDat, setDat] = useState(new ol.layer.Vector());\r\n var [sourceDat, setSourcDat] = useState(new ol.source.Vector());\r\n var [selectDat, setSelectDat] = useState(null);\r\n const [flagAddEdit, setFlagAddEdit] = useState(0);\r\n const [draw, setdraw] = useState(null);\r\n const [IdHuyen, setIdHuyen] = useState(0);\r\n const [flagEdit, setFlagEdit] = useState(false);\r\n const [showEdit, setShowEdit] = useState(false);\r\n var [listStyles, setListStyle] = useState([]);\r\n const [isThemMoi, setThemMoi] = useState(true);\r\n\r\n const [roleAdd, setRoleAdd] = useState(false);\r\n const [roleEdit, setRoleEdit] = useState(false);\r\n const [roleDel, setRoleDel] = useState(false);\r\n const [dvt, setDVT] = useState([]);\r\n\r\n const style = (color, text) => {\r\n return new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: color,\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#C0C0C0',\r\n }),\r\n text: new ol.style.Text({\r\n text: text,\r\n fill: new ol.style.Fill({\r\n color: \"#040482\"\r\n })\r\n })\r\n });\r\n }\r\n\r\n const stylefunction = function (feature, resolution) {\r\n let madat = feature.get('symbol_dat');\r\n let text = ''\r\n if (resolution < 10) {\r\n text = madat;\r\n }\r\n if (resolution < 20) {\r\n let index = listStyles.findIndex(x => x.MaMau === madat);\r\n if (index !== -1) {\r\n return style(listStyles[index].MauSac, text);\r\n }\r\n else {\r\n return new ol.style.Style();\r\n }\r\n }\r\n\r\n }\r\n\r\n const highlightStyle = new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: 'rgb(37 98 236 / 50%)',\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#5782ff',\r\n width: 1,\r\n }),\r\n });\r\n\r\n const clickEdit = () => {\r\n if (flagAddEdit === 2) {\r\n setFlagAddEdit(0);\r\n map.getInteractions().forEach(item => {\r\n map.removeInteraction(item);\r\n })\r\n } else {\r\n setFlagAddEdit(2);\r\n let select = new ol.interaction.Select({ wrapX: false, });\r\n let modify = new ol.interaction.Modify({ features: select.getFeatures(), });\r\n map.getInteractions().extend([select, modify]);\r\n var selected_features = select.getFeatures();\r\n var dirty = {};\r\n selected_features.on('add', function (evt) {\r\n var feature = evt.element;\r\n var fid = feature.getId();\r\n feature.on('change', function (evt) {\r\n dirty[fid] = true;\r\n });\r\n });\r\n\r\n selected_features.on('remove', function (evt) {\r\n var feature = evt.element;\r\n var fid = feature.getId();\r\n if (dirty[fid]) {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn cập nhật sử thay đổi này không?\", () => {\r\n var geoJson = new ol.format.WKT();\r\n var geoText = geoJson.writeGeometry(feature.getGeometry());\r\n thongTin.Geometry = geoText;\r\n setThongTin(thongTin);\r\n setThemMoi(false);\r\n setShowEdit(true);\r\n // BanDoThoNhuongApi.updateGeo(data).then(() => {\r\n // ThongBao.printSuccessMessage(\"Cập nhật thành công!\");\r\n // });\r\n }, () => {\r\n provinceDat.getSource().clear();\r\n });\r\n }\r\n });\r\n\r\n\r\n setMap(map);\r\n }\r\n }\r\n\r\n const clickAdd = () => {\r\n // console.log(draw);\r\n if (flagAddEdit === 0) {\r\n setFlagAddEdit(1);\r\n map.addInteraction(draw);\r\n } else {\r\n map.removeInteraction(draw);\r\n setFlagAddEdit(0);\r\n }\r\n setMap(map);\r\n }\r\n\r\n const loadLopBanDo = async (idhuyen) => {\r\n let params = {\r\n _tyle: kieuBanDo\r\n }\r\n listStyles = await LopMauApi.getLopBanDo(params);\r\n listStyles = listStyles.filter(x => x.Type === kieuBanDo);\r\n setListStyle(listStyles);\r\n params = {\r\n kieuBanDo: kieuBanDo,\r\n idHuyen: idhuyen\r\n }\r\n const list = await LopBanDoApi.getLopBanDo(params);\r\n list.forEach(item => {\r\n if (item.Type === 1 || (item.Type === kieuBanDo && item.GeoJson === null)) {\r\n let province = new ol.layer.Image({\r\n source: new ol.source.ImageWMS({\r\n url: item.Url,\r\n params: { layers: item.LayerName, version: item.Version },\r\n serverType: \"geoserver\",\r\n ratio: item.Ratio,\r\n })\r\n });\r\n province.setVisible(item.Checked);\r\n map.addLayer(province);\r\n item.province = province;\r\n }\r\n else if (item.Type === kieuBanDo && item.GeoJson === 1) {\r\n sourceDat = new ol.source.Vector({\r\n format: new ol.format.GeoJSON(),\r\n url: item.Url\r\n })\r\n provinceDat = new ol.layer.Vector({\r\n source: sourceDat,\r\n style: stylefunction\r\n })\r\n function addInteractions() {\r\n var flagHtml = document.getElementById('btnAdd').getAttribute('flagadd');\r\n var drawNew = new ol.interaction.Draw({\r\n source: sourceDat,\r\n type: \"Polygon\",\r\n style: new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: '#224abe'\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#224abe',\r\n }),\r\n image: new ol.style.Circle({\r\n radius: 3,\r\n fill: new ol.style.Fill({\r\n color: \"#224abe\",\r\n }),\r\n })\r\n })\r\n });\r\n setdraw(drawNew);\r\n if (flagHtml === \"1\") {\r\n map.addInteraction(drawNew);\r\n }\r\n }\r\n provinceDat.setVisible(item.Checked);\r\n map.addLayer(provinceDat);\r\n item.province = provinceDat;\r\n setDat(provinceDat);\r\n setSourcDat(sourceDat);\r\n addInteractions();\r\n provinceDat.getSource().on('addfeature', function (event) {\r\n var ev = document.getElementById('btnAdd');\r\n var flagHtml = 0;\r\n if (ev != null) {\r\n flagHtml = ev.getAttribute('flagadd');\r\n }\r\n if (flagHtml === \"1\" && event.feature.getId() == null) {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn thêm khoảng đất này không?\", () => {\r\n var feature = event.feature;\r\n var geoJson = new ol.format.WKT();\r\n var geoText = geoJson.writeGeometry(feature.getGeometry());\r\n thongTin = {};\r\n thongTin.geometry = geoText;\r\n thongTin.gid = provinceDat.getSource().getFeatures()[0].getId();\r\n setThongTin({ ...thongTin });\r\n setThemMoi(true);\r\n setShowEdit(true);\r\n }, () => {\r\n provinceDat.getSource().removeFeature(event.feature);\r\n // provinceDat.getSource().clear();\r\n });\r\n }\r\n })\r\n }\r\n // else if (item.Type === kieuBanDo && item.GeoJson === 2) {\r\n // provinceDiem = new ol.layer.Vector({\r\n // source: new ol.source.Vector({\r\n // format: new ol.format.GeoJSON(),\r\n // url: item.Url,\r\n // crossOrigin: ''\r\n // }),\r\n // style: stylefunctionDiem\r\n // });\r\n // provinceDiem.setVisible(item.Checked);\r\n // map.addLayer(provinceDiem);\r\n // item.province = provinceDiem;\r\n // setProvinceDiem(provinceDiem);\r\n // }\r\n else if (item.Type === kieuBanDo && item.GeoJson === 0) {\r\n let provi = new ol.layer.Vector({\r\n source: new ol.source.Vector({\r\n format: new ol.format.GeoJSON(),\r\n url: item.Url,\r\n crossOrigin: ''\r\n }),\r\n style: stylefunction\r\n });\r\n provi.setVisible(item.Checked);\r\n map.addLayer(provi);\r\n item.province = provi;\r\n }\r\n });\r\n setLopBanDo(list);\r\n setMap(map);\r\n }\r\n useEffect(() => {\r\n setRoleAdd(Authen.checkQuyen('BDTHONHUONG_CREATE'));\r\n setRoleEdit(Authen.checkQuyen('BDTHONHUONG_UPDATE'));\r\n setRoleDel(Authen.checkQuyen('BDTHONHUONG_DELETE'));\r\n map = new ol.Map({\r\n target: \"map\",\r\n controls: new ol.control.defaults().extend([\r\n new ol.control.ScaleLine({\r\n units: 'metric'\r\n }),\r\n new ol.control.FullScreen(),\r\n new ol.control.ZoomSlider()\r\n ]),\r\n layers: [\r\n // new ol.layer.Tile({\r\n // source: new ol.source.OSM(),\r\n // }),\r\n ],\r\n view: view\r\n });\r\n\r\n map.on('click', function (evt) {\r\n setFlagEdit(false);\r\n var flagHtml = document.getElementById('btnEdit').getAttribute('flagedit');\r\n if (flagHtml === \"1\") {\r\n if (selectDat !== null) {\r\n selectDat.setStyle(stylefunction);\r\n selectDat = null;\r\n setSelectDat(selectDat);\r\n }\r\n return;\r\n }\r\n if (selectDat !== null) {\r\n selectDat.setStyle(stylefunction);\r\n setSelectDat(selectDat);\r\n setThongTin({ ... {} });\r\n }\r\n map.forEachFeatureAtPixel(evt.pixel, function (feature) {\r\n // console.log(feature);\r\n feature.setStyle(highlightStyle);\r\n if (feature != null) {\r\n let thongTinNew = {};\r\n thongTinNew.gid = feature.getId();\r\n thongTinNew.bi_xanh = feature.get('bi_xanh');\r\n thongTinNew.bo = feature.get('bo');\r\n thongTinNew.bs = feature.get('bs');\r\n thongTinNew.buoi = feature.get('buoi');\r\n thongTinNew.caffe = feature.get('caffe');\r\n thongTinNew.cam = feature.get('cam');\r\n thongTinNew.cao_su = feature.get('cao_su');\r\n thongTinNew.cec = feature.get('cec');\r\n thongTinNew.chanh_day = feature.get('chanh_day');\r\n thongTinNew.chuoi = feature.get('chuoi');\r\n thongTinNew.code_dat = feature.get('code_dat');\r\n thongTinNew.code_qh = feature.get('code_qh');\r\n thongTinNew.code_xa = feature.get('code_xa');\r\n thongTinNew.dau_tam = feature.get('dau_tam');\r\n thongTinNew.de = feature.get('de');\r\n thongTinNew.dieu = feature.get('dieu');\r\n thongTinNew.dt_ha = feature.get('dt_ha');\r\n thongTinNew.duoc_lieu = feature.get('duoc_lieu');\r\n thongTinNew.dvdd_h = feature.get('dvdd_h');\r\n thongTinNew.dvdd_xa = feature.get('dvdd_xa');\r\n thongTinNew.fe = feature.get('fe');\r\n thongTinNew.gv = feature.get('gv');\r\n thongTinNew.ho_tieu = feature.get('ho_tieu');\r\n thongTinNew.hoa = feature.get('hoa');\r\n thongTinNew.khoai = feature.get('khoai');\r\n thongTinNew.lac = feature.get('lac');\r\n thongTinNew.lua = feature.get('lua');\r\n thongTinNew.mang_tay = feature.get('mang_tay');\r\n thongTinNew.mit = feature.get('mit');\r\n thongTinNew.na = feature.get('na');\r\n thongTinNew.ngo = feature.get('ngo');\r\n thongTinNew.nhan = feature.get('nhan');\r\n thongTinNew.oc = feature.get('oc');\r\n thongTinNew.phkcl = feature.get('phkcl');\r\n thongTinNew.rau_cai = feature.get('rau_cai');\r\n thongTinNew.san = feature.get('san');\r\n thongTinNew.sau_rieng = feature.get('sau_rieng');\r\n thongTinNew.slop = feature.get('slop');\r\n thongTinNew.symbol_dat = feature.get('symbol_dat');\r\n thongTinNew.symbol_ht = feature.get('symbol_ht');\r\n thongTinNew.symbol_qh = feature.get('symbol_qh');\r\n thongTinNew.tbc = feature.get('tbc');\r\n thongTinNew.ten_xa = feature.get('ten_xa');\r\n thongTinNew.thichngh00 = feature.get('thichngh00');\r\n thongTinNew.thichnghi_ = feature.get('thichnghi_');\r\n thongTinNew.tpcg = feature.get('tpcg');\r\n thongTinNew.tuoi = feature.get('tuoi');\r\n thongTinNew.xoai = feature.get('xoai');\r\n setThongTin(thongTinNew);\r\n selectDat = feature;\r\n setSelectDat(selectDat);\r\n setFlagEdit(true);\r\n donVT(thongTinNew);\r\n } else {\r\n setThongTin({ ... {} });\r\n }\r\n });\r\n });\r\n // setMap(map);\r\n\r\n }, []);\r\n\r\n const donVT = (value) => {\r\n const donvitinh = [\r\n { Ma: 'Fe', Value: value.fe, Ten: '' },\r\n { Ma: 'Sl', Value: value.sl, Ten: '' },\r\n { Ma: 'Gv', Value: value.dalan, Ten: '' },\r\n { Ma: 'De', Value: value.de, Ten: '' },\r\n { Ma: 'Ir', Value: value.tuoi_dt, Ten: '' },\r\n { Ma: 'Tx', Value: value.tpcg, Ten: '' }\r\n ]\r\n setDVT(madontinh.getTen(donvitinh));\r\n }\r\n\r\n const getIdHuyen = (event) => {\r\n if (event.value !== 0 && event.value !== IdHuyen) {\r\n listLopBanDos.forEach(item => {\r\n map.removeLayer(item.province);\r\n })\r\n setIdHuyen(event.value)\r\n map.setView(new ol.View({\r\n center: [event.toaDoX, event.toaDoY],\r\n zoom: event.zoom\r\n }));\r\n loadLopBanDo(event.value);\r\n }\r\n }\r\n\r\n const checkBoHandler = () => { };\r\n\r\n const clickRow = (id) => {\r\n listLopBanDos.forEach(item => {\r\n if (item.Id === id) {\r\n item.Checked = !item.Checked;\r\n map.getLayers().forEach(l => {\r\n if (l === item.province) {\r\n l.setVisible(item.Checked);\r\n }\r\n })\r\n }\r\n });\r\n setLopBanDo([...listLopBanDos]);\r\n setDat(map);\r\n }\r\n\r\n const timKiem = () => {\r\n\r\n }\r\n\r\n function onChangeFilter(e) {\r\n setFilter(e.target.value)\r\n }\r\n\r\n const delFeature = () => {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn xóa khoảng đất đã chọn đi không?\", () => {\r\n BanDoThoNhuongApi.delete(thongTin.gid).then(() => {\r\n provinceDat.getSource().removeFeature(selectDat);\r\n ThongBao.printSuccessMessage(\"Xóa khoảnh đất thành công!\");\r\n });\r\n });\r\n // ThongBao.printSuccessMessage('OK');\r\n }\r\n\r\n const clickEditThongTin = () => {\r\n // console.log(thongTin);\r\n setShowEdit(true);\r\n setThemMoi(false);\r\n }\r\n\r\n const closeThongTin = () => {\r\n if (!isThemMoi) {\r\n provinceDat.getSource().clear();\r\n }\r\n setShowEdit(false);\r\n\r\n }\r\n\r\n const saveSuccess = () => {\r\n setShowEdit(false);\r\n provinceDat.getSource().clear();\r\n }\r\n\r\n return (\r\n
\r\n
\r\n
\r\n
Bản đồ thổ nhưỡng \r\n \r\n
\r\n getIdHuyen(e)}> \r\n
\r\n {/*
\r\n
\r\n
\r\n
\r\n
*/}\r\n
\r\n {roleEdit == true ?
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Tên \r\n Thông tin \r\n \r\n \r\n \r\n \r\n Xã \r\n {thongTin.ten_xa} \r\n \r\n \r\n Diện tích (ha) \r\n {thongTin.dt_ha} \r\n \r\n \r\n Symbol_HT \r\n {thongTin.symbol_ht} \r\n \r\n \r\n Symbol_dat \r\n {thongTin.symbol_dat} \r\n \r\n \r\n Tưới \r\n {dvt.filter(x=>x.Ma==='Ir' && x.Value ===thongTin.tuoi).map(x => x.Ten)} \r\n \r\n \r\n Slop \r\n {dvt.filter(x=>x.Ma==='Sl' && x.Value ===thongTin.slop).map(x => x.Ten)} \r\n \r\n \r\n TPCG \r\n {dvt.filter(x=>x.Ma==='Tx' && x.Value ===thongTin.tpcg).map(x => x.Ten)} \r\n \r\n \r\n Gv \r\n {dvt.filter(x=>x.Ma==='Gv' && x.Value ===thongTin.gv).map(x => x.Ten)} \r\n \r\n \r\n De \r\n {dvt.filter(x=>x.Ma==='De' && x.Value ===thongTin.de).map(x => x.Ten)} \r\n \r\n \r\n CEC \r\n {thongTin.cec} \r\n \r\n \r\n BS \r\n {thongTin.bs} \r\n \r\n \r\n TBC \r\n {thongTin.tbc} \r\n \r\n \r\n PHKCL \r\n {thongTin.phkcl} \r\n \r\n \r\n OC \r\n {thongTin.oc} \r\n \r\n \r\n Fe \r\n {dvt.filter(x=>x.Ma==='Fe' && x.Value ===thongTin.fe).map(x => x.Ten)} \r\n \r\n \r\n DVDD_H \r\n {thongTin.dvdd_h} \r\n \r\n \r\n DVDD_Xa \r\n {thongTin.dvdd_xa} \r\n \r\n \r\n Lúa \r\n {thongTin.lua} \r\n \r\n \r\n Ngô \r\n {thongTin.ngo} \r\n \r\n \r\n Sắn \r\n {thongTin.san} \r\n \r\n \r\n Khoai \r\n {thongTin.khoai} \r\n \r\n \r\n Rau cải \r\n {thongTin.rau_cai} \r\n \r\n \r\n Bí xanh \r\n {thongTin.bi_xanh} \r\n \r\n \r\n Lạc \r\n {thongTin.lac} \r\n \r\n \r\n Hoa \r\n {thongTin.hoa} \r\n \r\n \r\n Cam \r\n {thongTin.cam} \r\n \r\n \r\n Bưởi \r\n {thongTin.buoi} \r\n \r\n \r\n Chanh dây \r\n {thongTin.chanh_day} \r\n \r\n \r\n Nhãn \r\n {thongTin.nhan} \r\n \r\n \r\n Mít \r\n {thongTin.mit} \r\n \r\n \r\n Bơ \r\n {thongTin.bo} \r\n \r\n \r\n Sầu riêng \r\n {thongTin.sau_rieng} \r\n \r\n \r\n Xoài \r\n {thongTin.xoai} \r\n \r\n \r\n Na \r\n {thongTin.na} \r\n \r\n \r\n Chuối \r\n {thongTin.chuoi} \r\n \r\n \r\n Điều \r\n {thongTin.dieu} \r\n \r\n \r\n Cao su \r\n {thongTin.cao_su} \r\n \r\n \r\n Hồ tiêu \r\n {thongTin.ho_tieu} \r\n \r\n \r\n Caffe \r\n {thongTin.caffe} \r\n \r\n \r\n Dâu tằm \r\n {thongTin.dau_tam} \r\n \r\n \r\n Măng tây \r\n {thongTin.mang_tay} \r\n \r\n \r\n Dược liệu \r\n {thongTin.duoc_lieu} \r\n \r\n \r\n Thích nghi H \r\n {thongTin.thichngh00} \r\n \r\n \r\n Thích nghi Xã \r\n {thongTin.thichnghi_} \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n )\r\n}\r\n","import React, { useState, useEffect } from 'react'\r\nimport { Modal, Button } from 'react-bootstrap';\r\nimport { useForm } from 'react-hook-form';\r\nimport Select from 'react-select';\r\nimport BanDoThichHopApi from '../../api/BanDoThichHopApi';\r\nimport LopMauApi from '../../api/LopMauApi';\r\n\r\nexport const ModalEditThongTin = (props) => {\r\n const [show, setShow] = useState(false);\r\n const handleClose = () => {\r\n props.closeThongTin();\r\n setShow(false)\r\n };\r\n const { register, handleSubmit, reset } = useForm();\r\n const [selectedOption, setSelectedOption] = useState();\r\n const [listLopMau, setLopMau] = useState([]);\r\n const [gid, setGid] = useState('');\r\n const kieuBanDo = 4;\r\n\r\n useEffect(() => {\r\n loadLopMau();\r\n }, []);\r\n\r\n const saveData = (data) => {\r\n if (selectedOption) {\r\n data.MaMau = selectedOption.value;\r\n }\r\n data.gid = gid;\r\n data.geometry=props.thongTin.geometry;\r\n if (props.themMoi) {\r\n BanDoThichHopApi.addThongTin(data).then(() => {\r\n setShow(false);\r\n props.saveSuccess();\r\n })\r\n }\r\n else {\r\n BanDoThichHopApi.updateThongTin(data).then(() => {\r\n setShow(false);\r\n props.saveSuccess();\r\n })\r\n }\r\n }\r\n\r\n const onChangeMau = (e) => {\r\n setSelectedOption(e);\r\n\r\n }\r\n\r\n function loadLopMau() {\r\n LopMauApi.getLopBanDo().then((response) => {\r\n let list = [];\r\n list.push({ value: '', label: 'Chọn màu' });\r\n response.forEach(item => {\r\n if(item.Type===1 || item.Type===kieuBanDo)\r\n list.push({ value: item.MaMau, label: item.Ten });\r\n })\r\n setLopMau(list);\r\n })\r\n }\r\n\r\n useEffect(() => {\r\n if (props.showEdit === true) {\r\n setGid(props.thongTin.gid);\r\n reset({\r\n TenHuyen: props.thongTin.huyen,\r\n TenXa: props.thongTin.xa,\r\n PhanVung: props.thongTin.phanvung,\r\n LoaiDat: props.thongTin.g,\r\n DiaHinhTuongDoi: props.thongTin.dhtd,\r\n DiaHinh: props.thongTin.sl,\r\n TangDay: props.thongTin.tangday,\r\n ThanhPhanCoGioi: props.thongTin.tpcg,\r\n MucDoDaLan: props.thongTin.dalan,\r\n DungTrong_: props.thongTin.dungtrong_,\r\n PhanCapPH: props.thongTin.pc_ph,\r\n PhanCapCEC: props.thongTin.pc_cec,\r\n PhanCapDinhDuong: props.thongTin.pc_dd,\r\n PhanCapNito: props.thongTin.pc_n,\r\n PhanCapPhotPho: props.thongTin.pc_p,\r\n PhanCapKali: props.thongTin.pc_k,\r\n PhanCapHuuCoTong: props.thongTin.pc_om,\r\n PhanCapDoPhi: props.thongTin.pc_dp,\r\n\r\n LuongMua: props.thongTin.luongmua_d,\r\n TongTichOn: props.thongTin.tton_dt,\r\n MucDoKhoHan: props.thongTin.khohan_dt,\r\n\r\n NhietDo: props.thongTin.nhietdo,\r\n ChiSoKhoHan: props.thongTin.chisokhoha,\r\n PhanCapChiSoKhoHan: props.thongTin.pc_chisokh,\r\n SoThangKhoHan: props.thongTin.sothangkho, \r\n MaDat: props.thongTin.madat,\r\n CayTrong: props.thongTin.caytrong,\r\n NgapUng: props.thongTin.ngapung_dt,\r\n\r\n CheDoTuoi: props.thongTin.tuoi_dt,\r\n CheDoTieu: props.thongTin.tieu_dt,\r\n MaMau: props.thongTin.tnh,\r\n\r\n DienTich: props.thongTin.dt_bs,\r\n\r\n Dvdd:props.thongTin.dvdd,\r\n Dvddh:props.thongTin.dvddh,\r\n\r\n Lua:props.thongTin.lua,\r\n Ngo:props.thongTin.ngo,\r\n Rau:props.thongTin.rau,\r\n Khoai:props.thongTin.khoai,\r\n San:props.thongTin.san,\r\n\r\n Lac:props.thongTin.lac,\r\n Mia:props.thongTin.mia,\r\n Cam:props.thongTin.cam,\r\n Quyt:props.thongTin.quyt,\r\n Buoi:props.thongTin.buoi,\r\n\r\n Che:props.thongTin.che,\r\n DuaHau:props.thongTin.dua_hau,\r\n Na:props.thongTin.na,\r\n Chanh:props.thongTin.chanh,\r\n Xoai:props.thongTin.xoai,\r\n\r\n CaGaiLeo:props.thongTin.ca_gai_leo,\r\n DauTam:props.thongTin.dau_tam,\r\n Nhan:props.thongTin.nhan,\r\n CaPhe:props.thongTin.ca_phe_che,\r\n DauTuong:props.thongTin.dau_tuong,\r\n\r\n\r\n\r\n }, [reset])\r\n setShow(true);\r\n var index = listLopMau.findIndex(x => x.value == props.thongTin.tnh);\r\n setSelectedOption(listLopMau[index]);\r\n }\r\n\r\n }, [props.showEdit]);\r\n\r\n\r\n\r\n return (\r\n
\r\n\r\n
\r\n \r\n Thông tin \r\n \r\n \r\n \r\n \r\n \r\n \r\n Lưu \r\n \r\n Hủy \r\n \r\n \r\n\r\n
\r\n\r\n )\r\n}\r\n","import React, { useEffect, useState } from 'react'\r\nimport LopBanDoApi from '../../api/LopBanDoApi';\r\nimport ol from \"openlayers\";\r\nimport \"ol/ol.css\";\r\nimport { SelectHuyen } from '../../shared/selecthuyen/SelectHuyen';\r\nimport ThongBao from '../../core/ThongBao';\r\nimport BanDoThichHopApi from '../../api/BanDoThichHopApi';\r\nimport { ModalEditThongTin } from './ModalEditThongTin';\r\nimport LopMauApi from '../../api/LopMauApi';\r\nimport Authen from '../../core/Authen';\r\nimport madontinh from '../../main/madontinh/madontinh'\r\n\r\nexport const BanDoMucDoThichHop = () => {\r\n const view = new ol.View({\r\n center: [11725287.264889468, 2355407.026607706],\r\n zoom: 11\r\n });\r\n const kieuBanDo = 4;\r\n\r\n var [map, setMap] = useState(new ol.Map());\r\n // var map;\r\n const [listLopBanDos, setLopBanDo] = useState([]);\r\n var [thongTin, setThongTin] = useState({});\r\n var [provinceDat, setDat] = useState(new ol.layer.Vector());\r\n var [sourceDat, setSourcDat] = useState(new ol.source.Vector());\r\n var [selectDat, setSelectDat] = useState(null);\r\n const [flagAddEdit, setFlagAddEdit] = useState(0);\r\n const [draw, setdraw] = useState(null);\r\n const [IdHuyen, setIdHuyen] = useState(0);\r\n const [flagEdit, setFlagEdit] = useState(false);\r\n const [showEdit, setShowEdit] = useState(false);\r\n var [listStyles, setListStyle] = useState([]);\r\n const [isThemMoi, setThemMoi] = useState(true);\r\n\r\n const [roleAdd, setRoleAdd] = useState(false);\r\n const [roleEdit, setRoleEdit] = useState(false);\r\n const [roleDel, setRoleDel] = useState(false);\r\n const [dvt,setDVT] = useState([]);\r\n\r\n const style = (color, text) => {\r\n return new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: color,\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#C0C0C0',\r\n }),\r\n text: new ol.style.Text({\r\n text: text,\r\n fill: new ol.style.Fill({\r\n color: \"#040482\"\r\n })\r\n })\r\n });\r\n }\r\n\r\n const stylefunction = function (feature, resolution) {\r\n let madat = feature.get('tnh');\r\n let index = listStyles.findIndex(x => x.MaMau === madat);\r\n let text = ''\r\n if (resolution < 10) {\r\n text = madat;\r\n }\r\n if (index !== -1) {\r\n return style(listStyles[index].MauSac, text);\r\n }\r\n else {\r\n return style(\"rgb(37 98 236 / 50%)\", '');\r\n }\r\n }\r\n\r\n const highlightStyle = new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: 'rgb(37 98 236 / 50%)',\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#5782ff',\r\n width: 1,\r\n }),\r\n });\r\n\r\n const clickEdit = () => {\r\n if (flagAddEdit === 2) {\r\n setFlagAddEdit(0);\r\n map.getInteractions().forEach(item => {\r\n map.removeInteraction(item);\r\n })\r\n }\r\n else {\r\n setFlagAddEdit(2);\r\n let select = new ol.interaction.Select({ wrapX: false, });\r\n let modify = new ol.interaction.Modify({ features: select.getFeatures(), });\r\n map.getInteractions().extend([select, modify]);\r\n var selected_features = select.getFeatures();\r\n var dirty = {};\r\n selected_features.on('add', function (evt) {\r\n var feature = evt.element;\r\n var fid = feature.getId();\r\n feature.on('change', function (evt) {\r\n dirty[fid] = true;\r\n });\r\n });\r\n\r\n selected_features.on('remove', function (evt) {\r\n var feature = evt.element;\r\n var fid = feature.getId();\r\n if (dirty[fid]) {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn cập nhật sử thay đổi này không?\", () => {\r\n var geoJson = new ol.format.WKT();\r\n var geoText = geoJson.writeGeometry(feature.getGeometry());\r\n thongTin.Geometry = geoText;\r\n setThongTin(thongTin);\r\n setThemMoi(false);\r\n setShowEdit(true);\r\n // BanDoThichHopApi.updateGeo(data).then(() => {\r\n // ThongBao.printSuccessMessage(\"Cập nhật thành công!\");\r\n // });\r\n }, () => {\r\n provinceDat.getSource().clear();\r\n });\r\n }\r\n });\r\n\r\n\r\n setMap(map);\r\n }\r\n }\r\n\r\n const clickAdd = () => {\r\n // console.log(draw);\r\n if (flagAddEdit === 0) {\r\n setFlagAddEdit(1);\r\n map.addInteraction(draw);\r\n }\r\n else {\r\n map.removeInteraction(draw);\r\n setFlagAddEdit(0);\r\n }\r\n setMap(map);\r\n }\r\n\r\n const loadLopBanDo = async (idhuyen) => {\r\n let params = {\r\n _tyle: kieuBanDo\r\n }\r\n listStyles = await LopMauApi.getLopBanDo(params);\r\n setListStyle(listStyles);\r\n params = {\r\n kieuBanDo: kieuBanDo,\r\n idHuyen: idhuyen\r\n }\r\n\r\n const list = await LopBanDoApi.getLopBanDo(params);\r\n list.forEach(item => {\r\n if (item.Type === 1 || (item.Type === kieuBanDo && item.GeoJson !== true)) {\r\n let province = new ol.layer.Image({\r\n source: new ol.source.ImageWMS({\r\n url: item.Url,\r\n params: { layers: item.LayerName, version: item.Version },\r\n serverType: \"geoserver\",\r\n ratio: item.Ratio,\r\n })\r\n });\r\n province.setVisible(item.Checked);\r\n map.addLayer(province);\r\n item.province = province;\r\n }\r\n else if (item.Type === kieuBanDo && item.GeoJson === true) {\r\n sourceDat = new ol.source.Vector({\r\n format: new ol.format.GeoJSON(),\r\n url: item.Url\r\n })\r\n provinceDat = new ol.layer.Vector({\r\n source: sourceDat,\r\n style: stylefunction\r\n })\r\n\r\n function addInteractions() {\r\n var flagHtml = document.getElementById('btnAdd').getAttribute('flagadd');\r\n var drawNew = new ol.interaction.Draw({\r\n source: sourceDat,\r\n type: \"Polygon\",\r\n style: new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: '#224abe'\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#224abe',\r\n }),\r\n image: new ol.style.Circle({\r\n radius: 3,\r\n fill: new ol.style.Fill({\r\n color: \"#224abe\",\r\n }),\r\n })\r\n })\r\n });\r\n setdraw(drawNew);\r\n if (flagHtml === \"1\") {\r\n map.addInteraction(drawNew);\r\n }\r\n }\r\n provinceDat.setVisible(item.Checked);\r\n map.addLayer(provinceDat);\r\n item.province = provinceDat;\r\n setDat(provinceDat);\r\n setSourcDat(sourceDat);\r\n addInteractions();\r\n provinceDat.getSource().on('addfeature', function (event) {\r\n var ev = document.getElementById('btnAdd');\r\n var flagHtml = 0;\r\n if (ev != null) {\r\n flagHtml = ev.getAttribute('flagadd');\r\n }\r\n if (flagHtml === \"1\" && event.feature.getId() == null) {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn thêm khoảng đất này không?\", () => {\r\n var feature = event.feature;\r\n var geoJson = new ol.format.WKT();\r\n var geoText = geoJson.writeGeometry(feature.getGeometry());\r\n thongTin = {};\r\n thongTin.geometry = geoText;\r\n thongTin.gid = provinceDat.getSource().getFeatures()[0].getId();\r\n setThongTin({...thongTin});\r\n console.log(thongTin);\r\n setThemMoi(true);\r\n setShowEdit(true);\r\n }, () => {\r\n provinceDat.getSource().removeFeature(event.feature);\r\n // provinceDat.getSource().clear();\r\n });\r\n }\r\n })\r\n }\r\n\r\n });\r\n setLopBanDo(list);\r\n setMap(map);\r\n }\r\n useEffect(() => {\r\n setRoleAdd(Authen.checkQuyen('BDMUCDOTHICHHOP_CREATE'));\r\n setRoleEdit(Authen.checkQuyen('BDMUCDOTHICHHOP_UPDATE'));\r\n setRoleDel(Authen.checkQuyen('BDMUCDOTHICHHOP_DELETE'));\r\n map = new ol.Map({\r\n target: \"map\",\r\n controls: new ol.control.defaults().extend([\r\n new ol.control.ScaleLine({\r\n units: 'metric'\r\n }),\r\n new ol.control.FullScreen(),\r\n new ol.control.ZoomSlider()\r\n ]),\r\n layers: [\r\n // new ol.layer.Tile({\r\n // source: new ol.source.OSM(),\r\n // }),\r\n ],\r\n view: view\r\n });\r\n\r\n map.on('click', function (evt) {\r\n setFlagEdit(false);\r\n var flagHtml = document.getElementById('btnEdit').getAttribute('flagedit');\r\n if (flagHtml === \"1\") {\r\n if (selectDat !== null) {\r\n selectDat.setStyle(stylefunction);\r\n selectDat = null;\r\n setSelectDat(selectDat);\r\n }\r\n return;\r\n }\r\n if (selectDat !== null) {\r\n selectDat.setStyle(stylefunction);\r\n setSelectDat(selectDat);\r\n setThongTin({ ...{} });\r\n }\r\n map.forEachFeatureAtPixel(evt.pixel, function (feature) {\r\n // console.log(feature);\r\n feature.setStyle(highlightStyle);\r\n if (feature != null) {\r\n let thongTinNew = {};\r\n thongTinNew.gid = feature.getId();\r\n thongTinNew.ba_kich = feature.get('ba_kich');\r\n thongTinNew.bi_xanh = feature.get('bi_xanh');\r\n thongTinNew.bo_khai = feature.get('bo_khai');\r\n thongTinNew.buoi = feature.get('buoi');\r\n thongTinNew.ca_gaileo = feature.get('ca_gaileo');\r\n thongTinNew.cam = feature.get('cam');\r\n thongTinNew.cat = feature.get('cat');\r\n thongTinNew.caytrong = feature.get('caytrong');\r\n thongTinNew.cec = feature.get('cec');\r\n thongTinNew.chisokhoha = feature.get('chisokhoha');\r\n thongTinNew.chum_ngay = feature.get('chum_ngay');\r\n thongTinNew.code_qh = feature.get('code_qh');\r\n thongTinNew.dalan = feature.get('dalan');\r\n thongTinNew.dhtd = feature.get('dhtd');\r\n thongTinNew.dt = feature.get('dt');\r\n thongTinNew.dt_bs = feature.get('dt_bs');\r\n thongTinNew.dua_hau = feature.get('dua_hau');\r\n thongTinNew.dungtrong = feature.get('dungtrong');\r\n thongTinNew.dungtrong_ = feature.get('dungtrong_');\r\n thongTinNew.dvdd = feature.get('dvdd');\r\n thongTinNew.g = feature.get('g');\r\n thongTinNew.ht_qh = feature.get('ht_qh');\r\n thongTinNew.huyen = feature.get('huyen');\r\n thongTinNew.id = feature.get('id');\r\n thongTinNew.k2o = feature.get('k2o');\r\n thongTinNew.keo = feature.get('keo');\r\n thongTinNew.khoai_so = feature.get('khoai_so');\r\n thongTinNew.khohan_dt = feature.get('khohan_dt');\r\n thongTinNew.khoi_tu = feature.get('khoi_tu');\r\n thongTinNew.khoi_tu = feature.get('khoi_tu');\r\n thongTinNew.lac = feature.get('lac');\r\n thongTinNew.lua = feature.get('lua');\r\n thongTinNew.luongmua_d = feature.get('luongmua_d');\r\n thongTinNew.ma_congtua = feature.get('ma_congtua');\r\n thongTinNew.ma_dexuat = feature.get('ma_dexuat');\r\n thongTinNew.madat = feature.get('madat');\r\n thongTinNew.mang_tay = feature.get('mang_tay');\r\n thongTinNew.mau_anhhuo = feature.get('mau_anhhuo');\r\n thongTinNew.mia = feature.get('mia');\r\n thongTinNew.mit = feature.get('mit');\r\n thongTinNew.n = feature.get('n');\r\n thongTinNew.ngapung_dt = feature.get('ngapung_dt');\r\n thongTinNew.ngo = feature.get('ngo');\r\n thongTinNew.nhan = feature.get('nhan');\r\n thongTinNew.nhietdo = feature.get('nhietdo');\r\n thongTinNew.oc = feature.get('oc');\r\n thongTinNew.oi = feature.get('oi');\r\n thongTinNew.om = feature.get('om');\r\n thongTinNew.p2o5 = feature.get('p2o5');\r\n thongTinNew.pc_cec = feature.get('pc_cec');\r\n thongTinNew.pc_chisokh = feature.get('pc_chisokh');\r\n thongTinNew.pc_dd = feature.get('pc_dd');\r\n thongTinNew.pc_dp = feature.get('pc_dp');\r\n thongTinNew.pc_k = feature.get('pc_k');\r\n thongTinNew.pc_n = feature.get('pc_n');\r\n thongTinNew.pc_om = feature.get('pc_om');\r\n thongTinNew.pc_p = feature.get('pc_p');\r\n thongTinNew.pc_ph = feature.get('pc_ph');\r\n thongTinNew.pthongTinNewc_r = feature.get('pc_r');\r\n thongTinNew.pc_t = feature.get('pc_t');\r\n thongTinNew.phanvung = feature.get('phanvung');\r\n thongTinNew.phkcl = feature.get('phkcl');\r\n thongTinNew.qh_qh = feature.get('qh_qh');\r\n thongTinNew.rau = feature.get('rau');\r\n thongTinNew.thongTinNewsa = feature.get('sa');\r\n thongTinNew.sam_day = feature.get('sam_day');\r\n thongTinNew.san = feature.get('san');\r\n thongTinNew.set = feature.get('set');\r\n thongTinNew.sl = feature.get('sl');\r\n thongTinNew.sothangkho = feature.get('sothangkho');\r\n thongTinNew.symbol_qh = feature.get('symbol_qh');\r\n thongTinNew.tangday = feature.get('tangday');\r\n thongTinNew.tenpd = feature.get('tenpd');\r\n thongTinNew.thit = feature.get('thit');\r\n thongTinNew.tieu_dt = feature.get('tieu_dt');\r\n thongTinNew.tinh = feature.get('tinh');\r\n thongTinNew.tn = feature.get('tn');\r\n thongTinNew.tpcg = feature.get('tpcg');\r\n thongTinNew.truongnhan = feature.get('truongnhan');\r\n thongTinNew.tton_dt = feature.get('tton_dt');\r\n thongTinNew.tuoi_dt = feature.get('tuoi_dt');\r\n thongTinNew.xa = feature.get('xa');\r\n\r\n thongTinNew.khoai=feature.get('khoai');\r\n thongTinNew.quyt=feature.get('quyt');\r\n thongTinNew.na=feature.get('na');\r\n thongTinNew.xoai=feature.get('xoai');\r\n thongTinNew.che=feature.get('che');\r\n thongTinNew.chanh=feature.get('chanh');\r\n thongTinNew.ca_gai_leo=feature.get('ca_gai_leo');\r\n thongTinNew.ca_phe_che=feature.get('ca_phe_che');\r\n thongTinNew.dau_tuong=feature.get('dau_tuong');\r\n thongTinNew.dau_tam=feature.get('dau_tam');\r\n\r\n thongTinNew.tnh = feature.get('tnh');\r\n thongTinNew.dvddh = feature.get('dvddh');\r\n\r\n setThongTin(thongTinNew);\r\n selectDat = feature;\r\n setSelectDat(selectDat);\r\n setFlagEdit(true);\r\n donVT(thongTin);\r\n }\r\n else {\r\n setThongTin({ ...{} });\r\n }\r\n });\r\n });\r\n // setMap(map);\r\n\r\n }, []);\r\n\r\n\r\n const donVT = (value) =>{\r\n const donvitinh = [\r\n {Ma:'Fe',Value:value.fe,Ten:''},\r\n {Ma:'Sl',Value:value.sl,Ten:''},\r\n {Ma:'Gv',Value:value.dalan,Ten:''},\r\n {Ma:'De',Value:value.de,Ten:''},\r\n {Ma:'Ir',Value:value.tuoi_dt,Ten:''},\r\n {Ma:'Tx',Value:value.tpcg,Ten:''}\r\n ]\r\n setDVT(madontinh.getTen(donvitinh));\r\n }\r\n\r\n const getIdHuyen = (event) => {\r\n if (event.value !== 0 && event.value !== IdHuyen) {\r\n listLopBanDos.forEach(item => {\r\n map.removeLayer(item.province);\r\n })\r\n setIdHuyen(event.value)\r\n map.setView(new ol.View({\r\n center: [event.toaDoX, event.toaDoY],\r\n zoom: event.zoom\r\n }));\r\n loadLopBanDo(event.value);\r\n }\r\n }\r\n\r\n const checkBoHandler = () => { };\r\n\r\n const clickRow = (id) => {\r\n listLopBanDos.forEach(item => {\r\n if (item.Id === id) {\r\n item.Checked = !item.Checked;\r\n map.getLayers().forEach(l => {\r\n if (l === item.province) {\r\n l.setVisible(item.Checked);\r\n }\r\n })\r\n }\r\n });\r\n setLopBanDo([...listLopBanDos]);\r\n setDat(map);\r\n }\r\n\r\n const delFeature = () => {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn xóa khoảng đất đã chọn đi không?\", () => {\r\n BanDoThichHopApi.delete(thongTin.gid).then(() => {\r\n provinceDat.getSource().removeFeature(selectDat);\r\n ThongBao.printSuccessMessage(\"Xóa khoảnh đất thành công!\");\r\n });\r\n });\r\n // ThongBao.printSuccessMessage('OK');\r\n }\r\n\r\n const clickEditThongTin = () => {\r\n // console.log(thongTin);\r\n setShowEdit(true);\r\n setThemMoi(false);\r\n }\r\n\r\n const closeThongTin = () => {\r\n setShowEdit(false);\r\n\r\n }\r\n\r\n const saveSuccess = () => {\r\n setShowEdit(false);\r\n provinceDat.getSource().clear();\r\n }\r\n\r\n return (\r\n
\r\n
\r\n
\r\n
Bản đồ mức độ thích hợp sử dụng đất \r\n \r\n
\r\n getIdHuyen(e)}> \r\n
\r\n {/*
\r\n
\r\n
\r\n
\r\n
*/}\r\n
\r\n {roleEdit == true ?
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Tên \r\n Thông tin \r\n \r\n \r\n \r\n \r\n Tỉnh \r\n {thongTin.tinh} \r\n \r\n \r\n Huyện \r\n {thongTin.huyen} \r\n \r\n \r\n Xã \r\n {thongTin.xa} \r\n \r\n \r\n Diện tích \r\n {thongTin.dt_bs} \r\n \r\n \r\n Mã đất \r\n {thongTin.madat} \r\n \r\n \r\n Phân vùng \r\n {thongTin.phanvung} \r\n \r\n \r\n Loại đất \r\n {thongTin.g} \r\n \r\n \r\n Địa hình tương đối \r\n {thongTin.dhtd} \r\n \r\n \r\n Địa hình \r\n {dvt.filter(x=>x.Ma==='Sl' && x.Value ===thongTin.sl).map(x => x.Ten)} \r\n \r\n \r\n Tầng dày \r\n {dvt.filter(x=>x.Ma==='De' && x.Value ===thongTin.tangday).map(x => x.Ten)} \r\n \r\n \r\n Thành phần cơ giới \r\n {dvt.filter(x=>x.Ma==='Tx' && x.Value ===thongTin.tpcg).map(x => x.Ten)} \r\n \r\n \r\n Mức độ Đá lẫn \r\n {dvt.filter(x=>x.Ma==='Gv' && x.Value ===thongTin.dalan).map(x => x.Ten)} \r\n \r\n {/* \r\n Dung trọng \r\n {thongTin.dungtrong} \r\n */}\r\n \r\n Phân Cấp PH \r\n {thongTin.pc_ph} \r\n \r\n \r\n Phân cấp CEC \r\n {thongTin.pc_cec} \r\n \r\n \r\n Phân cấp dinh dưỡng \r\n {thongTin.pc_dd} \r\n \r\n \r\n Phân cấp nito \r\n {thongTin.pc_n} \r\n \r\n \r\n Phân cấp phốt pho \r\n {thongTin.pc_p} \r\n \r\n \r\n Phân cấp Kali \r\n {thongTin.pc_k} \r\n \r\n \r\n Phân cấp chất hữu cơ \r\n {thongTin.pc_om} \r\n \r\n \r\n Phân cấp độ phì \r\n {dvt.filter(x=>x.Ma==='Fe' && x.Value ===thongTin.pc_dp).map(x => x.Ten)} \r\n \r\n \r\n Lượng mưa \r\n {thongTin.luongmua_d} \r\n \r\n \r\n Tổng tích ôn \r\n {thongTin.tton_dt} \r\n \r\n \r\n Mức độ khô hạn \r\n {thongTin.khohan_dt} \r\n \r\n \r\n Nhiệt đô \r\n {thongTin.nhietdo} \r\n \r\n \r\n Chỉ số khô hạn \r\n {thongTin.chisokhoha} \r\n \r\n \r\n Phân cấp chỉ số khô hạn \r\n {thongTin.pc_chisokh} \r\n \r\n \r\n Số tháng khô hạn \r\n {thongTin.sothangkho} \r\n \r\n \r\n Cây trồng \r\n {thongTin.caytrong} \r\n \r\n \r\n Ngập úng \r\n {thongTin.ngapung_dt} \r\n \r\n \r\n Chế độ tưới \r\n {dvt.filter(x=>x.Ma==='Ir' && x.Value ===thongTin.tuoi_dt).map(x => x.Ten)} \r\n \r\n \r\n Chế độ tiêu \r\n {thongTin.tieu_dt} \r\n \r\n\r\n \r\n DungTrong_ \r\n {thongTin.dungtrong_} \r\n \r\n \r\n Mau_AnhHuong \r\n {thongTin.mau_anhhuo} \r\n \r\n \r\n dvdd \r\n {thongTin.dvdd} \r\n \r\n \r\n dvddh \r\n {thongTin.dvddh} \r\n \r\n\r\n \r\n Lúa \r\n {thongTin.lua} \r\n \r\n \r\n Ngô \r\n {thongTin.ngo} \r\n \r\n \r\n Rau \r\n {thongTin.rau} \r\n \r\n \r\n Khoai \r\n {thongTin.khoai} \r\n \r\n \r\n Sắn \r\n {thongTin.san} \r\n \r\n\r\n \r\n Lạc \r\n {thongTin.lac} \r\n \r\n \r\n Mía \r\n {thongTin.mia} \r\n \r\n \r\n Cam \r\n {thongTin.cam} \r\n \r\n \r\n Quýt \r\n {thongTin.quyt} \r\n \r\n \r\n Bưởi \r\n {thongTin.buoi} \r\n \r\n \r\n Chè \r\n {thongTin.che} \r\n \r\n \r\n Dưa hấu \r\n {thongTin.dua_hau} \r\n \r\n \r\n Na \r\n {thongTin.na} \r\n \r\n \r\n Chanh \r\n {thongTin.chanh} \r\n \r\n \r\n Xoài \r\n {thongTin.xoai} \r\n \r\n \r\n Cà gai leo \r\n {thongTin.ca_gai_leo} \r\n \r\n \r\n Dâu tằm \r\n {thongTin.dau_tam} \r\n \r\n \r\n Nhãn \r\n {thongTin.nhan} \r\n \r\n \r\n Cà phê chè \r\n {thongTin.ca_phe_che} \r\n \r\n \r\n Đậu tương \r\n {thongTin.dau_tuong} \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n )\r\n}\r\n","import axiosClient from './axiosClient';\r\nconst BanDoDeXuatSuDungDatApi = {\r\n getAll: () => {\r\n const url = '/bandodexuatsudungdat/getall';\r\n return axiosClient.get(url)\r\n },\r\n\r\n delete: (str) => {\r\n const url = '/bandodexuatsudungdat/delete?str=' + str;\r\n return axiosClient.delete(url);\r\n },\r\n\r\n updateGeo: (data) => {\r\n const url = '/bandodexuatsudungdat/edit';\r\n return axiosClient.put(url, data);\r\n },\r\n\r\n addGeo: (data) => {\r\n const url = '/bandodexuatsudungdat/add';\r\n return axiosClient.post(url, data);\r\n },\r\n getPaging: (params) => {\r\n const url = '/mappublic/gettimkiem';\r\n return axiosClient.get(url, { params });\r\n },\r\n updateThongTin: (data) => {\r\n const url = '/bandodexuatsudungdat/editthongtin';\r\n return axiosClient.put(url, data);\r\n },\r\n addThongTin: (data) => {\r\n const url = '/bandodexuatsudungdat/addthongtin';\r\n return axiosClient.post(url, data);\r\n },\r\n}\r\nexport default BanDoDeXuatSuDungDatApi;","import React, { useState, useEffect } from 'react'\r\nimport { Modal, Button } from 'react-bootstrap';\r\nimport { useForm } from 'react-hook-form';\r\nimport Select from 'react-select';\r\nimport BanDoDeXuatSuDungDatApi from '../../api/BanDoDeXuatSuDungDatApi';\r\nimport LopMauApi from '../../api/LopMauApi';\r\n\r\nexport const ModalEditThongTin = (props) => {\r\n const [show, setShow] = useState(false);\r\n const handleClose = () => {\r\n props.closeThongTin();\r\n setShow(false)\r\n };\r\n const { register, handleSubmit, reset } = useForm();\r\n const [selectedOption, setSelectedOption] = useState();\r\n const [listLopMau, setLopMau] = useState([]);\r\n const [gid, setGid] = useState('');\r\n useEffect(() => {\r\n loadLopMau();\r\n }, []);\r\n\r\n const saveData = (data) => {\r\n if (selectedOption) {\r\n data.MaMau = selectedOption.value;\r\n }\r\n data.gid = gid;\r\n data.geometry = props.thongTin.geometry;\r\n if (props.themMoi) {\r\n BanDoDeXuatSuDungDatApi.addThongTin(data).then(() => {\r\n setShow(false);\r\n props.saveSuccess();\r\n })\r\n }\r\n else {\r\n BanDoDeXuatSuDungDatApi.updateThongTin(data).then(() => {\r\n setShow(false);\r\n props.saveSuccess();\r\n })\r\n }\r\n }\r\n\r\n const onChangeMau = (e) => {\r\n setSelectedOption(e);\r\n\r\n }\r\n\r\n function loadLopMau() {\r\n LopMauApi.getLopBanDo().then((response) => {\r\n let list = [];\r\n list.push({ value: '', label: 'Chọn màu' });\r\n response.forEach(item => {\r\n list.push({ value: item.MaMau, label: item.Ten });\r\n })\r\n setLopMau(list);\r\n })\r\n }\r\n\r\n useEffect(() => {\r\n if (props.showEdit === true) {\r\n setGid(props.thongTin.gid);\r\n reset({\r\n huyen: props.thongTin.huyen,\r\n xa: props.thongTin.xa,\r\n buoi: props.thongTin.buoi,\r\n ca_gai_leo: props.thongTin.ca_gai_leo,\r\n ca_phe_che: props.thongTin.ca_phe_che,\r\n cam: props.thongTin.cam,\r\n caytrong: props.thongTin.caytrong,\r\n chanh: props.thongTin.chanh,\r\n che: props.thongTin.che,\r\n chisokhoha: props.thongTin.chisokhoha,\r\n dalan: props.thongTin.dalan,\r\n dau_tam: props.thongTin.dau_tam,\r\n dau_tuong: props.thongTin.dau_tuong,\r\n dhtd: props.thongTin.dhtd,\r\n dt_bs: props.thongTin.dt_bs,\r\n dua_hau: props.thongTin.dua_hau,\r\n dungtrong_: props.thongTin.dungtrong_,\r\n dvdd: props.thongTin.dvdd,\r\n g: props.thongTin.g,\r\n sl: props.thongTin.sl,\r\n khoai: props.thongTin.khoai,\r\n khohan_dt: props.thongTin.khohan_dt,\r\n lac: props.thongTin.lac,\r\n lua: props.thongTin.lua,\r\n luongmua_d: props.thongTin.luongmua_d,\r\n madat: props.thongTin.madat,\r\n mau_anhhuo: props.thongTin.mau_anhhuo,\r\n mia: props.thongTin.mia,\r\n na: props.thongTin.na,\r\n ngapung_dt: props.thongTin.ngapung_dt,\r\n ngo: props.thongTin.ngo,\r\n nhan: props.thongTin.nhan,\r\n nhietdo: props.thongTin.nhietdo,\r\n pc_cec: props.thongTin.pc_cec,\r\n pc_dd: props.thongTin.pc_dd,\r\n pc_dp: props.thongTin.pc_dp,\r\n pc_k: props.thongTin.pc_k,\r\n pc_n: props.thongTin.pc_n,\r\n pc_om: props.thongTin.pc_om,\r\n pc_p: props.thongTin.pc_p,\r\n pc_ph: props.thongTin.pc_ph,\r\n phanvung: props.thongTin.phanvung,\r\n quyt: props.thongTin.quyt,\r\n rau: props.thongTin.rau,\r\n san: props.thongTin.san,\r\n sothangkho: props.thongTin.sothangkho,\r\n tangday: props.thongTin.tangday,\r\n tenpd: props.thongTin.tenpd,\r\n tieu_dt: props.thongTin.tieu_dt,\r\n tinh: props.thongTin.tinh,\r\n tn: props.thongTin.tn,\r\n tpcg: props.thongTin.tpcg,\r\n tton_dt: props.thongTin.tton_dt,\r\n tuoi_dt: props.thongTin.tuoi_dt,\r\n xoai: props.thongTin.xoai\r\n }, [reset])\r\n setShow(true);\r\n var index = listLopMau.findIndex(x => x.value == props.thongTin.dvdd);\r\n setSelectedOption(listLopMau[index]);\r\n }\r\n\r\n }, [props.showEdit]);\r\n\r\n\r\n\r\n return (\r\n
\r\n\r\n
\r\n \r\n Thông tin \r\n \r\n \r\n \r\n \r\n \r\n \r\n Lưu \r\n \r\n Hủy \r\n \r\n \r\n\r\n
\r\n\r\n )\r\n}\r\n","import React, { useEffect, useState } from 'react'\r\nimport LopBanDoApi from '../../api/LopBanDoApi';\r\nimport ol from \"openlayers\";\r\nimport \"ol/ol.css\";\r\nimport { SelectHuyen } from '../../shared/selecthuyen/SelectHuyen';\r\nimport ThongBao from '../../core/ThongBao';\r\nimport BanDoDeXuatSuDungDatApi from '../../api/BanDoDeXuatSuDungDatApi';\r\nimport { ModalEditThongTin } from './ModalEditThongTin';\r\nimport LopMauApi from '../../api/LopMauApi';\r\nimport Authen from '../../core/Authen';\r\nimport madontinh from '../../main/madontinh/madontinh'\r\n\r\nexport const BanDoDeXuatSuDungDat = () => {\r\n const view = new ol.View({\r\n center: [11725287.264889468, 2355407.026607706],\r\n zoom: 11\r\n });\r\n const kieuBanDo = 5;\r\n\r\n var [map, setMap] = useState(new ol.Map());\r\n // var map;\r\n const [listLopBanDos, setLopBanDo] = useState([]);\r\n var [thongTin, setThongTin] = useState({});\r\n var [provinceDat, setDat] = useState(new ol.layer.Vector());\r\n var [sourceDat, setSourcDat] = useState(new ol.source.Vector());\r\n var [selectDat, setSelectDat] = useState(null);\r\n const [flagAddEdit, setFlagAddEdit] = useState(0);\r\n const [draw, setdraw] = useState(null);\r\n const [IdHuyen, setIdHuyen] = useState(0);\r\n const [flagEdit, setFlagEdit] = useState(false);\r\n const [showEdit, setShowEdit] = useState(false);\r\n var [listStyles, setListStyle] = useState([]);\r\n const [isThemMoi, setThemMoi] = useState(true);\r\n\r\n const [roleAdd, setRoleAdd] = useState(false);\r\n const [roleEdit, setRoleEdit] = useState(false);\r\n const [roleDel, setRoleDel] = useState(false);\r\n const [dvt,setDVT] = useState([]);\r\n\r\n const style = (color, text, duongKe) => {\r\n if (duongKe != null) {\r\n\r\n var cnv = document.createElement('canvas');\r\n var ctx = cnv.getContext('2d');\r\n var img = new Image();\r\n img.src = duongKe\r\n ctx.fillStyle = color;\r\n \r\n var pattern = ctx.createPattern(img, 'repeat');\r\n return new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: pattern\r\n // color: color\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#C0C0C0',\r\n }),\r\n text: new ol.style.Text({\r\n text: text,\r\n fill: new ol.style.Fill({\r\n color: \"#040482\"\r\n })\r\n }),\r\n image: new ol.style.Icon({\r\n src: duongKe,\r\n rotateWithView: true\r\n })\r\n });\r\n }\r\n else {\r\n return new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n // color: color,\r\n color: color\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#C0C0C0',\r\n }),\r\n text: new ol.style.Text({\r\n text: text,\r\n fill: new ol.style.Fill({\r\n color: \"#040482\"\r\n })\r\n })\r\n });\r\n }\r\n }\r\n\r\n const stylefunction = function (feature, resolution) {\r\n let madat = feature.get('qh');\r\n let index = listStyles.findIndex(x => x.MaMau === madat);\r\n let text = ''\r\n if (resolution < 10) {\r\n text = madat;\r\n }\r\n if (index !== -1) {\r\n return style(listStyles[index].MauSac, text, listStyles[index].DuongKe);\r\n }\r\n else {\r\n return style(\"rgb(37 98 236 / 50%)\", '');\r\n }\r\n }\r\n\r\n const highlightStyle = new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: 'rgb(37 98 236 / 50%)',\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#5782ff',\r\n width: 1,\r\n }),\r\n });\r\n\r\n const clickEdit = () => {\r\n if (flagAddEdit === 2) {\r\n setFlagAddEdit(0);\r\n map.getInteractions().forEach(item => {\r\n map.removeInteraction(item);\r\n })\r\n }\r\n else {\r\n setFlagAddEdit(2);\r\n let select = new ol.interaction.Select({ wrapX: false, });\r\n let modify = new ol.interaction.Modify({ features: select.getFeatures(), });\r\n map.getInteractions().extend([select, modify]);\r\n var selected_features = select.getFeatures();\r\n var dirty = {};\r\n selected_features.on('add', function (evt) {\r\n var feature = evt.element;\r\n var fid = feature.getId();\r\n feature.on('change', function (evt) {\r\n dirty[fid] = true;\r\n });\r\n });\r\n\r\n selected_features.on('remove', function (evt) {\r\n var feature = evt.element;\r\n var fid = feature.getId();\r\n if (dirty[fid]) {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn cập nhật sử thay đổi này không?\", () => {\r\n var geoJson = new ol.format.WKT();\r\n var geoText = geoJson.writeGeometry(feature.getGeometry());\r\n thongTin.Geometry = geoText;\r\n getThongTin(feature);\r\n setThongTin({ ...thongTin });\r\n setThemMoi(false);\r\n setShowEdit(true);\r\n }, () => {\r\n provinceDat.getSource().clear();\r\n });\r\n }\r\n });\r\n\r\n\r\n setMap(map);\r\n }\r\n }\r\n\r\n const clickAdd = () => {\r\n // console.log(draw);\r\n if (flagAddEdit === 0) {\r\n setFlagAddEdit(1);\r\n map.addInteraction(draw);\r\n }\r\n else {\r\n map.removeInteraction(draw);\r\n setFlagAddEdit(0);\r\n }\r\n setMap(map);\r\n }\r\n\r\n const loadLopBanDo = async (idhuyen) => {\r\n let params = {\r\n _tyle: kieuBanDo\r\n }\r\n listStyles = await LopMauApi.getLopBanDo(params);\r\n listStyles = listStyles.filter(x => x.Type === kieuBanDo);\r\n setListStyle(listStyles);\r\n params = {\r\n kieuBanDo: kieuBanDo,\r\n idHuyen: idhuyen\r\n }\r\n\r\n const list = await LopBanDoApi.getLopBanDo(params);\r\n list.forEach(item => {\r\n\r\n if (item.Type === 1 || (item.Type === kieuBanDo && item.GeoJson !== true)) {\r\n let province = new ol.layer.Image({\r\n source: new ol.source.ImageWMS({\r\n url: item.Url,\r\n params: { layers: item.LayerName, version: item.Version },\r\n serverType: \"geoserver\",\r\n ratio: item.Ratio,\r\n })\r\n });\r\n province.setVisible(item.Checked);\r\n map.addLayer(province);\r\n item.province = province;\r\n }\r\n else if (item.Type === kieuBanDo && item.GeoJson === true) {\r\n sourceDat = new ol.source.Vector({\r\n format: new ol.format.GeoJSON(),\r\n url: item.Url\r\n })\r\n provinceDat = new ol.layer.Vector({\r\n source: sourceDat,\r\n style: stylefunction\r\n })\r\n\r\n function addInteractions() {\r\n var flagHtml = document.getElementById('btnAdd').getAttribute('flagadd');\r\n var drawNew = new ol.interaction.Draw({\r\n source: sourceDat,\r\n type: \"Polygon\",\r\n style: new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: '#224abe'\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#224abe',\r\n }),\r\n image: new ol.style.Circle({\r\n radius: 3,\r\n fill: new ol.style.Fill({\r\n color: \"#224abe\",\r\n }),\r\n })\r\n })\r\n });\r\n setdraw(drawNew);\r\n if (flagHtml === \"1\") {\r\n map.addInteraction(drawNew);\r\n }\r\n }\r\n provinceDat.setVisible(item.Checked);\r\n map.addLayer(provinceDat);\r\n item.province = provinceDat;\r\n setDat(provinceDat);\r\n setSourcDat(sourceDat);\r\n addInteractions();\r\n provinceDat.getSource().on('addfeature', function (event) {\r\n var ev = document.getElementById('btnAdd');\r\n var flagHtml = 0;\r\n if (ev != null) {\r\n flagHtml = ev.getAttribute('flagadd');\r\n }\r\n if (flagHtml === \"1\" && event.feature.getId() == null) {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn thêm khoảng đất này không?\", () => {\r\n var feature = event.feature;\r\n var geoJson = new ol.format.WKT();\r\n var geoText = geoJson.writeGeometry(feature.getGeometry());\r\n thongTin = {};\r\n thongTin.geometry = geoText;\r\n thongTin.gid = provinceDat.getSource().getFeatures()[0].getId();\r\n setThongTin({ ...thongTin });\r\n setThemMoi(true);\r\n setShowEdit(true);\r\n }, () => {\r\n provinceDat.getSource().removeFeature(event.feature);\r\n // provinceDat.getSource().clear();\r\n });\r\n }\r\n })\r\n }\r\n\r\n });\r\n setLopBanDo(list);\r\n setMap(map);\r\n }\r\n useEffect(() => {\r\n setRoleAdd(Authen.checkQuyen('HTSUDUNGDATLUA_CREATE'));\r\n setRoleEdit(Authen.checkQuyen('HTSUDUNGDATLUA_UPDATE'));\r\n setRoleDel(Authen.checkQuyen('HTSUDUNGDATLUA_DELETE'));\r\n map = new ol.Map({\r\n target: \"map\",\r\n controls: new ol.control.defaults().extend([\r\n new ol.control.ScaleLine({\r\n units: 'metric'\r\n }),\r\n new ol.control.FullScreen(),\r\n new ol.control.ZoomSlider()\r\n ]),\r\n layers: [\r\n // new ol.layer.Tile({\r\n // source: new ol.source.OSM(),\r\n // }),\r\n ],\r\n view: view\r\n });\r\n\r\n map.on('click', function (evt) {\r\n setFlagEdit(false);\r\n var flagHtml = document.getElementById('btnEdit').getAttribute('flagedit');\r\n if (flagHtml === \"1\") {\r\n if (selectDat !== null) {\r\n selectDat.setStyle(stylefunction);\r\n selectDat = null;\r\n setSelectDat(selectDat);\r\n }\r\n return;\r\n }\r\n if (selectDat !== null) {\r\n selectDat.setStyle(stylefunction);\r\n setSelectDat(selectDat);\r\n setThongTin({ ...{} });\r\n }\r\n map.forEachFeatureAtPixel(evt.pixel, function (feature) {\r\n console.log(feature);\r\n feature.setStyle(highlightStyle);\r\n if (feature != null) {\r\n getThongTin(feature);\r\n selectDat = feature;\r\n setSelectDat(selectDat);\r\n setFlagEdit(true);\r\n }\r\n else {\r\n setThongTin({ ...{} });\r\n }\r\n });\r\n });\r\n // setMap(map);\r\n\r\n }, []);\r\n\r\n function getThongTin(feature) {\r\n let thongTin = {};\r\n thongTin.gid = feature.getId();\r\n thongTin.buoi = feature.get('buoi');\r\n thongTin.ca_gai_leo = feature.get('ca_gai_leo');\r\n thongTin.ca_phe_che = feature.get('ca_phe_che');\r\n thongTin.cam = feature.get('cam');\r\n thongTin.caytrong = feature.get('caytrong');\r\n thongTin.chanh = feature.get('chanh');\r\n thongTin.che = feature.get('che');\r\n thongTin.chisokhoha = feature.get('chisokhoha');\r\n thongTin.dalan = feature.get('dalan');\r\n thongTin.dau_tam = feature.get('dau_tam');\r\n thongTin.dau_tuong = feature.get('dau_tuong');\r\n thongTin.dhtd = feature.get('dhtd');\r\n thongTin.dt_bs = feature.get('dt_bs');\r\n thongTin.dua_hau = feature.get('dua_hau');\r\n thongTin.dungtrong_ = feature.get('dungtrong_');\r\n thongTin.dvdd = feature.get('dvdd');\r\n thongTin.g = feature.get('g');\r\n thongTin.id = feature.get('id');\r\n thongTin.khoai = feature.get('khoai');\r\n thongTin.khohan_dt = feature.get('khohan_dt');\r\n thongTin.lac = feature.get('lac');\r\n thongTin.lua = feature.get('lua');\r\n thongTin.luongmua_d = feature.get('luongmua_d');\r\n thongTin.madat = feature.get('madat');\r\n thongTin.mau_anhhuo = feature.get('mau_anhhuo');\r\n thongTin.mia = feature.get('mia');\r\n thongTin.na = feature.get('na');\r\n thongTin.ngapung_dt = feature.get('ngapung_dt');\r\n thongTin.ngo = feature.get('ngo');\r\n thongTin.nhan = feature.get('nhan');\r\n thongTin.nhietdo = feature.get('nhietdo');\r\n thongTin.pc_cec = feature.get('pc_cec');\r\n thongTin.pc_dd = feature.get('pc_dd');\r\n thongTin.pc_dp = feature.get('pc_dp');\r\n thongTin.pc_k = feature.get('pc_k');\r\n thongTin.pc_n = feature.get('pc_n');\r\n thongTin.pc_om = feature.get('pc_om');\r\n thongTin.pc_p = feature.get('pc_p');\r\n thongTin.pc_ph = feature.get('pc_ph');\r\n thongTin.phanvung = feature.get('phanvung');\r\n thongTin.qh = feature.get('qh');\r\n thongTin.quyt = feature.get('quyt');\r\n thongTin.rau = feature.get('rau');\r\n thongTin.san = feature.get('san');\r\n thongTin.sl = feature.get('sl');\r\n thongTin.sothangkho = feature.get('sothangkho');\r\n thongTin.tangday = feature.get('tangday');\r\n thongTin.tenpd = feature.get('tenpd');\r\n thongTin.tieu_dt = feature.get('tieu_dt');\r\n thongTin.tinh = feature.get('tinh');\r\n thongTin.tn = feature.get('tn');\r\n thongTin.tpcg = feature.get('tpcg');\r\n thongTin.tton_dt = feature.get('tton_dt');\r\n thongTin.tuoi_dt = feature.get('tuoi_dt');\r\n thongTin.xa = feature.get('xa');\r\n thongTin.xoai = feature.get('xoai');\r\n thongTin.huyen = feature.get('huyen');\r\n donVT(thongTin);\r\n setThongTin({ ...thongTin });\r\n }\r\n\r\n const donVT = (value) =>{\r\n const donvitinh = [\r\n {Ma:'Fe',Value:value.fe,Ten:''},\r\n {Ma:'Sl',Value:value.slop,Ten:''},\r\n {Ma:'Gv',Value:value.gv,Ten:''},\r\n {Ma:'De',Value:value.de,Ten:''},\r\n {Ma:'Ir',Value:value.tuoi_dt,Ten:''},\r\n {Ma:'Tx',Value:value.tpcg,Ten:''}\r\n ]\r\n setDVT(madontinh.getTen(donvitinh));\r\n }\r\n\r\n const getIdHuyen = (event) => {\r\n if (event.value !== 0 && event.value !== IdHuyen) {\r\n listLopBanDos.forEach(item => {\r\n map.removeLayer(item.province);\r\n })\r\n setIdHuyen(event.value)\r\n map.setView(new ol.View({\r\n center: [event.toaDoX, event.toaDoY],\r\n zoom: event.zoom\r\n }));\r\n loadLopBanDo(event.value);\r\n }\r\n }\r\n\r\n const checkBoHandler = () => { };\r\n\r\n const clickRow = (id) => {\r\n listLopBanDos.forEach(item => {\r\n if (item.Id === id) {\r\n item.Checked = !item.Checked;\r\n map.getLayers().forEach(l => {\r\n if (l === item.province) {\r\n l.setVisible(item.Checked);\r\n }\r\n })\r\n }\r\n });\r\n setLopBanDo([...listLopBanDos]);\r\n setDat(map);\r\n }\r\n\r\n const delFeature = () => {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn xóa khoảng đất đã chọn đi không?\", () => {\r\n BanDoDeXuatSuDungDatApi.delete(thongTin.gid).then(() => {\r\n provinceDat.getSource().removeFeature(selectDat);\r\n ThongBao.printSuccessMessage(\"Xóa khoảnh đất thành công!\");\r\n });\r\n });\r\n // ThongBao.printSuccessMessage('OK');\r\n }\r\n\r\n const clickEditThongTin = () => {\r\n // console.log(thongTin);\r\n setShowEdit(true);\r\n setThemMoi(false);\r\n }\r\n\r\n const closeThongTin = () => {\r\n if (!isThemMoi) {\r\n provinceDat.getSource().clear();\r\n }\r\n setShowEdit(false);\r\n }\r\n\r\n const saveSuccess = () => {\r\n setShowEdit(false);\r\n provinceDat.getSource().clear();\r\n }\r\n\r\n return (\r\n
\r\n
\r\n
\r\n
Bản đồ đề xuất sửa dụng đất \r\n \r\n
\r\n getIdHuyen(e)}> \r\n
\r\n {/*
\r\n
\r\n
\r\n
\r\n
*/}\r\n
\r\n {roleEdit == true ?
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Tên \r\n Thông tin \r\n \r\n \r\n \r\n \r\n Tỉnh \r\n {thongTin.tinh} \r\n \r\n \r\n Huyện \r\n {thongTin.huyen} \r\n \r\n \r\n Xã \r\n {thongTin.xa} \r\n \r\n \r\n Mã đất \r\n {thongTin.madat} \r\n \r\n \r\n Phân vùng \r\n {thongTin.phanvung} \r\n \r\n \r\n Loại đất \r\n {thongTin.g} \r\n \r\n \r\n Diện tích \r\n {thongTin.dt_bs} \r\n \r\n \r\n Đơn vị đất đai \r\n {thongTin.dvdd} \r\n \r\n \r\n Tên phẫu diện \r\n {thongTin.tenpd} \r\n \r\n \r\n Mẫu ảnh hưởng \r\n {thongTin.mau_anhhuo} \r\n \r\n \r\n Địa hình tương đối \r\n {thongTin.dhtd} \r\n \r\n \r\n Địa hình \r\n {dvt.filter(x=>x.Ma==='Sl' && x.Value ===thongTin.slop).map(x => x.Ten)} \r\n \r\n \r\n Tầng dày \r\n {dvt.filter(x=>x.Ma==='De' && x.Value ===thongTin.tangday).map(x => x.Ten)} \r\n \r\n \r\n Thành phần cơ giới \r\n {dvt.filter(x=>x.Ma==='Tx' && x.Value ===thongTin.tpcg).map(x => x.Ten)} \r\n \r\n \r\n Mức độ Đá lẫn \r\n {dvt.filter(x=>x.Ma==='Gv' && x.Value ===thongTin.dalan).map(x => x.Ten)} \r\n \r\n \r\n Dung trọng \r\n {thongTin.dungtrong_} \r\n \r\n \r\n Phân Cấp PH \r\n {thongTin.pc_ph} \r\n \r\n \r\n Phân cấp CEC \r\n {thongTin.pc_cec} \r\n \r\n \r\n Phân cấp dinh dưỡng \r\n {thongTin.pc_dd} \r\n \r\n \r\n Phân cấp nito \r\n {thongTin.pc_n} \r\n \r\n \r\n Phân cấp phốt pho \r\n {thongTin.pc_p} \r\n \r\n \r\n Phân cấp Kali \r\n {thongTin.pc_k} \r\n \r\n \r\n Phân cấp chất hữu cơ \r\n {thongTin.pc_om} \r\n \r\n \r\n Phân cấp độ phì \r\n {dvt.filter(x=>x.Ma==='Fe' && x.Value ===thongTin.pc_dp).map(x => x.Ten)} \r\n \r\n \r\n Lượng mưa \r\n {thongTin.luongmua_d} \r\n \r\n \r\n Tổng tích ôn \r\n {thongTin.tton_dt} \r\n \r\n \r\n Mức độ khô hạn \r\n {thongTin.khohan_dt} \r\n \r\n \r\n Nhiệt đô \r\n {thongTin.nhietdo} \r\n \r\n \r\n Chỉ số khô hạn \r\n {thongTin.chisokhoha} \r\n \r\n \r\n Số tháng khô hạn \r\n {thongTin.sothangkho} \r\n \r\n \r\n Cây trồng \r\n {thongTin.caytrong} \r\n \r\n \r\n Ngập úng \r\n {thongTin.ngapung_dt} \r\n \r\n \r\n Chế độ tưới \r\n {dvt.filter(x=>x.Ma==='Ir' && x.Value ===thongTin.tuoi_dt).map(x => x.Ten)} \r\n \r\n \r\n Bưởi \r\n {thongTin.buoi} \r\n \r\n \r\n Cà gai leo \r\n {thongTin.ca_gai_leo} \r\n \r\n \r\n Cà phê chè \r\n {thongTin.ca_phe_che} \r\n \r\n \r\n Cam \r\n {thongTin.cam} \r\n \r\n \r\n Chanh \r\n {thongTin.chanh} \r\n \r\n \r\n Chè \r\n {thongTin.che} \r\n \r\n \r\n Dâu tằm \r\n {thongTin.dau_tam} \r\n \r\n \r\n Đậu tương \r\n {thongTin.dau_tuong} \r\n \r\n \r\n Dưa hấu \r\n {thongTin.dua_hau} \r\n \r\n \r\n Khoai \r\n {thongTin.khoai} \r\n \r\n \r\n Lạc \r\n {thongTin.lac} \r\n \r\n \r\n Lúa \r\n {thongTin.lua} \r\n \r\n \r\n Mía \r\n {thongTin.mia} \r\n \r\n \r\n Na \r\n {thongTin.na} \r\n \r\n \r\n Ngô \r\n {thongTin.ngo} \r\n \r\n \r\n Nhãn \r\n {thongTin.nhan} \r\n \r\n \r\n Quýt \r\n {thongTin.quyt} \r\n \r\n \r\n Rau \r\n {thongTin.rau} \r\n \r\n \r\n Sắn \r\n {thongTin.san} \r\n \r\n \r\n Xoài \r\n {thongTin.xoai} \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n )\r\n}\r\n","import React, { useState, useEffect } from 'react'\r\nimport { Modal, Button } from 'react-bootstrap';\r\nimport { useForm } from 'react-hook-form';\r\nimport Select from 'react-select';\r\nimport BanDoChatLuongDatApi from '../../api/BanDoChatLuongDatApi';\r\nimport LopMauApi from '../../api/LopMauApi';\r\n\r\nexport const ModalEditThongTin = (props) => {\r\n const [show, setShow] = useState(false);\r\n const handleClose = () => {\r\n props.closeThongTin();\r\n setShow(false)\r\n };\r\n const { register, handleSubmit, reset } = useForm();\r\n const [selectedOption, setSelectedOption] = useState();\r\n const [listLopMau, setLopMau] = useState([]);\r\n const [gid, setGid] = useState('');\r\n useEffect(() => {\r\n loadLopMau();\r\n }, []);\r\n\r\n const saveData = (data) => {\r\n if (selectedOption) {\r\n data.dvdd = selectedOption.value;\r\n }\r\n data.gid = gid;\r\n data.geometry = props.thongTin.geometry;\r\n if (props.themMoi) {\r\n BanDoChatLuongDatApi.addThongTin(data).then(() => {\r\n setShow(false);\r\n props.saveSuccess();\r\n })\r\n }\r\n else {\r\n BanDoChatLuongDatApi.updateThongTin(data).then(() => {\r\n setShow(false);\r\n props.saveSuccess();\r\n })\r\n }\r\n }\r\n\r\n const onChangeMau = (e) => {\r\n setSelectedOption(e);\r\n }\r\n\r\n function loadLopMau() {\r\n LopMauApi.getLopBanDo().then((response) => {\r\n let list = [];\r\n list.push({ value: '', label: 'Chọn màu' });\r\n response.forEach(item => {\r\n if(item.Type == 3){\r\n list.push({ value: item.MaMau, label: item.Ten });\r\n }\r\n })\r\n setLopMau(list);\r\n })\r\n }\r\n\r\n useEffect(() => {\r\n if (props.showEdit === true) {\r\n setGid(props.thongTin.gid);\r\n reset({\r\n caytrong: props.thongTin.caytrong,\r\n chisokhoha: props.thongTin.chisokhoha,\r\n dalan: props.thongTin.dalan,\r\n dhtd: props.thongTin.dhtd,\r\n dt_bs: props.thongTin.dt_bs,\r\n dungtrong: props.thongTin.dungtrong,\r\n dungtrong_: props.thongTin.dungtrong_,\r\n dvdd: props.thongTin.dvdd,\r\n g: props.thongTin.g,\r\n huyen: props.thongTin.huyen,\r\n khohan_dt: props.thongTin.khohan_dt,\r\n luongmua_d: props.thongTin.luongmua_d,\r\n madat: props.thongTin.madat,\r\n mau_anhhuo: props.thongTin.mau_anhhuo,\r\n ngapung_dt: props.thongTin.ngapung_dt,\r\n nhietdo: props.thongTin.nhietdo,\r\n pc_cec: props.thongTin.pc_cec,\r\n pc_chisokh: props.thongTin.pc_chisokh,\r\n pc_dd: props.thongTin.pc_dd,\r\n pc_dp: props.thongTin.pc_dp,\r\n pc_k: props.thongTin.pc_k,\r\n pc_n: props.thongTin.pc_n,\r\n pc_om: props.thongTin.pc_om,\r\n pc_p: props.thongTin.pc_p,\r\n pc_ph: props.thongTin.pc_ph,\r\n phanvung: props.thongTin.phanvung,\r\n sl: props.thongTin.sl,\r\n sothangkho: props.thongTin.sothangkho,\r\n tangday: props.thongTin.tangday,\r\n tenpd: props.thongTin.tenpd,\r\n tieu_dt: props.thongTin.tieu_dt,\r\n tinh: props.thongTin.tinh,\r\n tpcg: props.thongTin.tpcg,\r\n tton_dt: props.thongTin.tton_dt,\r\n tuoi_dt: props.thongTin.tuoi_dt,\r\n xa: props.thongTin.xa\r\n }, [reset])\r\n setShow(true);\r\n var index = listLopMau.findIndex(x => x.value == props.thongTin.dvdd);\r\n setSelectedOption(listLopMau[index]);\r\n }\r\n\r\n }, [props.showEdit]);\r\n\r\n\r\n\r\n return (\r\n
\r\n\r\n
\r\n \r\n Thông tin \r\n \r\n \r\n \r\n \r\n \r\n \r\n Lưu \r\n \r\n Hủy \r\n \r\n \r\n\r\n
\r\n\r\n )\r\n}\r\n","import React, { useEffect, useState } from 'react'\r\nimport LopBanDoApi from '../../api/LopBanDoApi';\r\nimport ol from \"openlayers\";\r\nimport \"ol/ol.css\";\r\nimport { SelectHuyen } from '../../shared/selecthuyen/SelectHuyen';\r\nimport ThongBao from '../../core/ThongBao';\r\nimport BanDoChatLuongDatApi from '../../api/BanDoChatLuongDatApi';\r\nimport { ModalEditThongTin } from './ModalEditThongTin';\r\nimport LopMauApi from '../../api/LopMauApi';\r\nimport Authen from '../../core/Authen';\r\nimport madontinh from '../../main/madontinh/madontinh'\r\n\r\nexport const BanDoChatLuongDat = () => {\r\n var view = new ol.View({\r\n center: [11725287.264889468, 2355407.026607706],\r\n zoom: 11\r\n });\r\n const kieuBanDo = 3;\r\n var [map, setMap] = useState(new ol.Map());\r\n // var map;\r\n const [listLopBanDos, setLopBanDo] = useState([]);\r\n var [thongTin, setThongTin] = useState({});\r\n const [filter, setFilter] = useState();\r\n var [provinceDat, setDat] = useState(new ol.layer.Vector());\r\n var [sourceDat, setSourcDat] = useState(new ol.source.Vector());\r\n var [selectDat, setSelectDat] = useState(null);\r\n const [flagAddEdit, setFlagAddEdit] = useState(0);\r\n const [draw, setdraw] = useState(null);\r\n const [IdHuyen, setIdHuyen] = useState(0);\r\n const [flagEdit, setFlagEdit] = useState(false);\r\n const [showEdit, setShowEdit] = useState(false);\r\n var [listStyles, setListStyle] = useState([]);\r\n const [isThemMoi, setThemMoi] = useState(true);\r\n\r\n const [roleAdd, setRoleAdd] = useState(false);\r\n const [roleEdit, setRoleEdit] = useState(false);\r\n const [roleDel, setRoleDel] = useState(false);\r\n const [dvt,setDVT] = useState([]);\r\n\r\n const style = (color, text) => {\r\n return new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: color,\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#C0C0C0',\r\n }),\r\n text: new ol.style.Text({\r\n text: text,\r\n fill: new ol.style.Fill({\r\n color: \"#040482\"\r\n })\r\n })\r\n });\r\n }\r\n\r\n const stylefunction = function (feature, resolution) {\r\n let madat = feature.get('dvdd');\r\n let index = listStyles.findIndex(x => x.MaMau === madat);\r\n let text = ''\r\n if (resolution < 10) {\r\n text = madat;\r\n }\r\n if (index !== -1) {\r\n return style(listStyles[index].MauSac, text);\r\n }\r\n else {\r\n return style(\"rgb(37 98 236 / 50%)\", '');\r\n }\r\n }\r\n\r\n const highlightStyle = new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: 'rgb(37 98 236 / 50%)',\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#5782ff',\r\n width: 1,\r\n }),\r\n });\r\n\r\n const clickEdit = () => {\r\n if (flagAddEdit === 2) {\r\n setFlagAddEdit(0);\r\n map.getInteractions().forEach(item => {\r\n map.removeInteraction(item);\r\n })\r\n }\r\n else {\r\n setFlagAddEdit(2);\r\n let select = new ol.interaction.Select({ wrapX: false, });\r\n let modify = new ol.interaction.Modify({ features: select.getFeatures(), });\r\n map.getInteractions().extend([select, modify]);\r\n var selected_features = select.getFeatures();\r\n var dirty = {};\r\n selected_features.on('add', function (evt) {\r\n var feature = evt.element;\r\n var fid = feature.getId();\r\n feature.on('change', function (evt) {\r\n dirty[fid] = true;\r\n });\r\n });\r\n\r\n selected_features.on('remove', function (evt) {\r\n var feature = evt.element;\r\n var fid = feature.getId();\r\n if (dirty[fid]) {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn cập nhật sử thay đổi này không?\", () => {\r\n var geoJson = new ol.format.WKT();\r\n var geoText = geoJson.writeGeometry(feature.getGeometry());\r\n thongTin.Geometry = geoText;\r\n getThongTin(feature);\r\n setThongTin({...thongTin});\r\n setThemMoi(false);\r\n setShowEdit(true);\r\n }, () => {\r\n provinceDat.getSource().clear();\r\n });\r\n }\r\n });\r\n setMap(map);\r\n }\r\n }\r\n\r\n const clickAdd = () => {\r\n // console.log(draw);\r\n if (flagAddEdit === 0) {\r\n setFlagAddEdit(1);\r\n map.addInteraction(draw);\r\n }\r\n else {\r\n map.removeInteraction(draw);\r\n setFlagAddEdit(0);\r\n }\r\n setMap(map);\r\n }\r\n\r\n const loadLopBanDo = async (idhuyen) => {\r\n let params = {\r\n _tyle: kieuBanDo\r\n }\r\n listStyles = await LopMauApi.getLopBanDo(params);\r\n listStyles = listStyles.filter(x => x.Type === kieuBanDo);\r\n setListStyle(listStyles);\r\n params = {\r\n kieuBanDo: kieuBanDo,\r\n idHuyen: idhuyen\r\n }\r\n\r\n const list = await LopBanDoApi.getLopBanDo(params);\r\n list.forEach(item => {\r\n if (item.Type === 1 || (item.Type === kieuBanDo && item.GeoJson !== true)) {\r\n let province = new ol.layer.Image({\r\n source: new ol.source.ImageWMS({\r\n url: item.Url,\r\n params: { layers: item.LayerName, version: item.Version },\r\n serverType: \"geoserver\",\r\n ratio: item.Ratio,\r\n })\r\n });\r\n province.setVisible(item.Checked);\r\n map.addLayer(province);\r\n item.province = province;\r\n }\r\n else if (item.Type === kieuBanDo && item.GeoJson === true) {\r\n sourceDat = new ol.source.Vector({\r\n format: new ol.format.GeoJSON(),\r\n url: item.Url\r\n })\r\n provinceDat = new ol.layer.Vector({\r\n source: sourceDat,\r\n style: stylefunction\r\n })\r\n\r\n function addInteractions() {\r\n var flagHtml = document.getElementById('btnAdd').getAttribute('flagadd');\r\n var drawNew = new ol.interaction.Draw({\r\n source: sourceDat,\r\n type: \"Polygon\",\r\n style: new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: '#224abe'\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#224abe',\r\n }),\r\n image: new ol.style.Circle({\r\n radius: 3,\r\n fill: new ol.style.Fill({\r\n color: \"#224abe\",\r\n }),\r\n })\r\n })\r\n });\r\n setdraw(drawNew);\r\n if (flagHtml === \"1\") {\r\n map.addInteraction(drawNew);\r\n }\r\n }\r\n provinceDat.setVisible(item.Checked);\r\n map.addLayer(provinceDat);\r\n item.province = provinceDat;\r\n setDat(provinceDat);\r\n setSourcDat(sourceDat);\r\n addInteractions();\r\n provinceDat.getSource().on('addfeature', function (event) {\r\n var ev = document.getElementById('btnAdd');\r\n var flagHtml = 0;\r\n if (ev != null) {\r\n flagHtml = ev.getAttribute('flagadd');\r\n }\r\n if (flagHtml === \"1\" && event.feature.getId() == null) {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn thêm khoảng đất này không?\", () => {\r\n var feature = event.feature;\r\n var geoJson = new ol.format.WKT();\r\n var geoText = geoJson.writeGeometry(feature.getGeometry());\r\n thongTin = {};\r\n thongTin.geometry = geoText;\r\n thongTin.gid = provinceDat.getSource().getFeatures()[0].getId();\r\n setThongTin({...thongTin});\r\n \r\n setThemMoi(true);\r\n setShowEdit(true);\r\n }, () => {\r\n provinceDat.getSource().removeFeature(event.feature);\r\n // provinceDat.getSource().clear();\r\n });\r\n }\r\n })\r\n }\r\n\r\n });\r\n setLopBanDo(list);\r\n setMap(map);\r\n }\r\n useEffect(() => {\r\n setRoleAdd(Authen.checkQuyen('BDCHATLUONGDAT_CREATE'));\r\n setRoleEdit(Authen.checkQuyen('BDCHATLUONGDAT_UPDATE'));\r\n setRoleDel(Authen.checkQuyen('BDCHATLUONGDAT_DELETE'));\r\n map = new ol.Map({\r\n target: \"map\",\r\n controls: new ol.control.defaults().extend([\r\n new ol.control.ScaleLine({\r\n units: 'metric'\r\n }),\r\n new ol.control.FullScreen(),\r\n new ol.control.ZoomSlider()\r\n ]),\r\n layers: [\r\n // new ol.layer.Tile({\r\n // source: new ol.source.OSM(),\r\n // }),\r\n ],\r\n view: view\r\n });\r\n\r\n map.on('click', function (evt) {\r\n setFlagEdit(false);\r\n var flagHtml = document.getElementById('btnEdit').getAttribute('flagedit');\r\n if (flagHtml === \"1\") {\r\n if (selectDat !== null) {\r\n selectDat.setStyle(stylefunction);\r\n selectDat = null;\r\n setSelectDat(selectDat);\r\n }\r\n return;\r\n }\r\n if (selectDat !== null) {\r\n selectDat.setStyle(stylefunction);\r\n setSelectDat(selectDat);\r\n setThongTin({ ...{} });\r\n }\r\n map.forEachFeatureAtPixel(evt.pixel, function (feature) {\r\n feature.setStyle(highlightStyle);\r\n if (feature != null) {\r\n getThongTin(feature);\r\n selectDat = feature;\r\n setSelectDat(selectDat);\r\n setFlagEdit(true);\r\n }\r\n else {\r\n setThongTin({ ...{} });\r\n }\r\n });\r\n });\r\n // setMap(map);\r\n\r\n }, []);\r\n\r\n function getThongTin(feature) {\r\n thongTin = {};\r\n thongTin.gid = feature.getId();\r\n thongTin.caytrong = feature.get('caytrong');\r\n thongTin.chisokhoha = feature.get('chisokhoha');\r\n thongTin.dalan = feature.get('dalan');\r\n thongTin.dhtd = feature.get('dhtd');\r\n thongTin.dt_bs = feature.get('dt_bs');\r\n thongTin.dungtrong = feature.get('dungtrong');\r\n thongTin.dungtrong_ = feature.get('dungtrong_');\r\n thongTin.dvdd = feature.get('dvdd');\r\n thongTin.g = feature.get('g');\r\n thongTin.huyen = feature.get('huyen');\r\n thongTin.id = feature.get('id');\r\n thongTin.khohan_dt = feature.get('khohan_dt');\r\n thongTin.luongmua_d = feature.get('luongmua_d');\r\n thongTin.madat = feature.get('madat');\r\n thongTin.mau_anhhuo = feature.get('mau_anhhuo');\r\n thongTin.ngapung_dt = feature.get('ngapung_dt');\r\n thongTin.nhietdo = feature.get('nhietdo');\r\n thongTin.pc_cec = feature.get('pc_cec');\r\n thongTin.pc_chisokh = feature.get('pc_chisokh');\r\n thongTin.pc_dd = feature.get('pc_dd');\r\n thongTin.pc_dp = feature.get('pc_dp');\r\n thongTin.pc_k = feature.get('pc_k');\r\n thongTin.pc_n = feature.get('pc_n');\r\n thongTin.pc_om = feature.get('pc_om');\r\n thongTin.pc_p = feature.get('pc_p');\r\n thongTin.pc_ph = feature.get('pc_ph');\r\n thongTin.phanvung = feature.get('phanvung');\r\n thongTin.sl = feature.get('sl');\r\n thongTin.sothangkho = feature.get('sothangkho');\r\n thongTin.tangday = feature.get('tangday');\r\n thongTin.tenpd = feature.get('tenpd');\r\n thongTin.tieu_dt = feature.get('tieu_dt');\r\n thongTin.tinh = feature.get('tinh');\r\n thongTin.tpcg = feature.get('tpcg');\r\n thongTin.tton_dt = feature.get('tton_dt');\r\n thongTin.tuoi_dt = feature.get('tuoi_dt');\r\n thongTin.xa = feature.get('xa');\r\n\r\n donVT(thongTin);\r\n setThongTin({ ...thongTin });\r\n }\r\n\r\n const donVT = (value) =>{\r\n const donvitinh = [\r\n {Ma:'Fe',Value:value.fe,Ten:''},\r\n {Ma:'Sl',Value:value.sl,Ten:''},\r\n {Ma:'Gv',Value:value.dalan,Ten:''},\r\n {Ma:'De',Value:value.de,Ten:''},\r\n {Ma:'Ir',Value:value.tuoi_dt,Ten:''},\r\n {Ma:'Tx',Value:value.tpcg,Ten:''}\r\n ]\r\n setDVT(madontinh.getTen(donvitinh));\r\n }\r\n\r\n const getIdHuyen = (event) => {\r\n if (event.value !== 0 && event.value !== IdHuyen) {\r\n listLopBanDos.forEach(item => {\r\n map.removeLayer(item.province);\r\n })\r\n setIdHuyen(event.value)\r\n map.setView(new ol.View({\r\n center: [event.toaDoX, event.toaDoY],\r\n zoom: event.zoom\r\n }));\r\n loadLopBanDo(event.value);\r\n }\r\n }\r\n\r\n const checkBoHandler = () => { };\r\n\r\n const clickRow = (id) => {\r\n listLopBanDos.forEach(item => {\r\n if (item.Id === id) {\r\n item.Checked = !item.Checked;\r\n map.getLayers().forEach(l => {\r\n if (l === item.province) {\r\n l.setVisible(item.Checked);\r\n }\r\n })\r\n }\r\n });\r\n setLopBanDo([...listLopBanDos]);\r\n setDat(map);\r\n }\r\n\r\n const timKiem = () => {\r\n\r\n }\r\n\r\n function onChangeFilter(e) {\r\n setFilter(e.target.value)\r\n }\r\n\r\n const delFeature = () => {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn xóa khoảng đất đã chọn đi không?\", () => {\r\n BanDoChatLuongDatApi.delete(thongTin.gid).then(() => {\r\n provinceDat.getSource().removeFeature(selectDat);\r\n ThongBao.printSuccessMessage(\"Xóa khoảnh đất thành công!\");\r\n });\r\n });\r\n // ThongBao.printSuccessMessage('OK');\r\n }\r\n\r\n const clickEditThongTin = () => {\r\n // console.log(thongTin);\r\n setShowEdit(true);\r\n setThemMoi(false);\r\n }\r\n\r\n\r\n\r\n\r\n const closeThongTin = () => {\r\n if (!isThemMoi) {\r\n provinceDat.getSource().clear();\r\n }\r\n setShowEdit(false);\r\n }\r\n\r\n const saveSuccess = () => {\r\n setShowEdit(false);\r\n provinceDat.getSource().clear();\r\n }\r\n\r\n return (\r\n
\r\n
\r\n
\r\n
Bản đồ chất lượng đất \r\n \r\n
\r\n getIdHuyen(e)}> \r\n
\r\n {/*
\r\n
\r\n
\r\n
\r\n
*/}\r\n
\r\n {roleEdit == true ?
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Tên \r\n Thông tin \r\n \r\n \r\n \r\n \r\n Tỉnh \r\n {thongTin.tinh} \r\n \r\n \r\n Huyện \r\n {thongTin.huyen} \r\n \r\n \r\n Xã \r\n {thongTin.xa} \r\n \r\n \r\n Mã đất \r\n {thongTin.madat} \r\n \r\n \r\n Diện tích \r\n {thongTin.dt_bs} \r\n \r\n \r\n Đơn vị đất đai \r\n {thongTin.dvdd} \r\n \r\n \r\n Phân vùng \r\n {thongTin.phanvung} \r\n \r\n \r\n Loại đất \r\n {thongTin.g} \r\n \r\n \r\n Địa hình tương đối \r\n {thongTin.dhtd} \r\n \r\n \r\n Địa hình \r\n {dvt.filter(x=>x.Ma==='Sl' && x.Value ===thongTin.sl).map(x => x.Ten)} \r\n \r\n \r\n Tầng dày \r\n {dvt.filter(x=>x.Ma==='De' && x.Value ===thongTin.tangday).map(x => x.Ten)} \r\n \r\n \r\n Thành phần cơ giới \r\n {dvt.filter(x=>x.Ma==='Tx' && x.Value ===thongTin.tpcg).map(x => x.Ten)} \r\n \r\n \r\n Mức độ Đá lẫn \r\n {dvt.filter(x=>x.Ma==='Gv' && x.Value ===thongTin.dalan).map(x => x.Ten)} \r\n \r\n \r\n Dung trọng \r\n {thongTin.dungtrong} \r\n \r\n \r\n Phân Cấp PH \r\n {thongTin.pc_ph} \r\n \r\n \r\n Phân cấp CEC \r\n {thongTin.pc_cec} \r\n \r\n \r\n Phân cấp dinh dưỡng \r\n {thongTin.pc_dd} \r\n \r\n \r\n Phân cấp nito \r\n {thongTin.pc_n} \r\n \r\n \r\n Phân cấp phốt pho \r\n {thongTin.pc_p} \r\n \r\n \r\n Phân cấp Kali \r\n {thongTin.pc_k} \r\n \r\n \r\n Phân cấp chất hữu cơ \r\n {thongTin.pc_om} \r\n \r\n \r\n qh \r\n {thongTin.qh} \r\n \r\n \r\n tn \r\n {thongTin.tn} \r\n \r\n \r\n Phân cấp độ phì \r\n {dvt.filter(x=>x.Ma==='Fe' && x.Value ===thongTin.pc_dp).map(x => x.Ten)} \r\n \r\n \r\n Lượng mưa \r\n {thongTin.luongmua_d} \r\n \r\n \r\n Tổng tích ôn \r\n {thongTin.tton_dt} \r\n \r\n \r\n Mức độ khô hạn \r\n {thongTin.khohan_dt} \r\n \r\n \r\n Nhiệt đô \r\n {thongTin.nhietdo} \r\n \r\n \r\n Chỉ số khô hạn \r\n {thongTin.chisokhoha} \r\n \r\n \r\n Phân cấp chỉ số khô hạn \r\n {thongTin.pc_chisokh} \r\n \r\n \r\n Số tháng khô hạn \r\n {thongTin.sothangkho} \r\n \r\n \r\n Cây trồng \r\n {thongTin.caytrong} \r\n \r\n \r\n Ngập úng \r\n {thongTin.ngapung_dt} \r\n \r\n \r\n Chế độ tưới \r\n {dvt.filter(x=>x.Ma==='Ir' && x.Value ===thongTin.tuoi_dt).map(x => x.Ten)} \r\n \r\n \r\n Chế độ tiêu \r\n {thongTin.tieu_dt} \r\n \r\n \r\n Dung trọng \r\n {thongTin.dungtrong_} \r\n \r\n \r\n Mẫu ảnh hưởng \r\n {thongTin.mau_anhhuo} \r\n \r\n \r\n Tên phẫu diện \r\n {thongTin.tenpd} \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n )\r\n}\r\n","import React, { useEffect, useState } from 'react'\r\nimport LopBanDoApi from '../../api/LopBanDoApi';\r\nimport ol from \"openlayers\";\r\nimport \"ol/ol.css\";\r\nimport { SelectHuyen } from '../../shared/selecthuyen/SelectHuyen';\r\nimport ThongBao from '../../core/ThongBao';\r\nimport BanDoChatLuongDatApi from '../../api/BanDoChatLuongDatApi';\r\nimport LopMauApi from '../../api/LopMauApi';\r\n\r\n\r\nexport const BanDoNen = () => {\r\n const view = new ol.View({\r\n center: [11725287.264889468, 2355407.026607706],\r\n zoom: 11\r\n });\r\n const kieuBanDo = 1;\r\n var [map, setMap] = useState(new ol.Map());\r\n // var map;\r\n const [listLopBanDos, setLopBanDo] = useState([]);\r\n var [provinceDat, setDat] = useState(new ol.layer.Vector());\r\n var [sourceDat, setSourcDat] = useState(new ol.source.Vector());\r\n const [draw, setdraw] = useState(null);\r\n const [IdHuyen, setIdHuyen] = useState(0);\r\n var [listStyles, setListStyle] = useState([]);\r\n\r\n const style = (color, text) => {\r\n return new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: color,\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#C0C0C0',\r\n }),\r\n text: new ol.style.Text({\r\n text: text,\r\n fill: new ol.style.Fill({\r\n color: \"#040482\"\r\n })\r\n })\r\n });\r\n }\r\n\r\n const stylefunction = function (feature, resolution) {\r\n let madat = feature.get('dvdd');\r\n let index = listStyles.findIndex(x => x.MaMau === madat);\r\n let text = ''\r\n if (resolution < 10) {\r\n text = madat;\r\n }\r\n if (index !== -1) {\r\n return style(listStyles[index].MauSac, text);\r\n }\r\n else {\r\n return style(\"rgb(37 98 236 / 50%)\", '');\r\n }\r\n }\r\n\r\n const highlightStyle = new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: 'rgb(37 98 236 / 50%)',\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#5782ff',\r\n width: 1,\r\n }),\r\n });\r\n\r\n const loadLopBanDo = async (idhuyen) => {\r\n let params = {\r\n _tyle: kieuBanDo\r\n }\r\n listStyles = await LopMauApi.getLopBanDo(params);\r\n listStyles = listStyles.filter(x => x.Type === kieuBanDo);\r\n setListStyle(listStyles);\r\n params = {\r\n kieuBanDo: kieuBanDo,\r\n idHuyen: idhuyen\r\n }\r\n\r\n const list = await LopBanDoApi.getLopBanDo(params);\r\n list.forEach(item => {\r\n if (item.Type === 1) {\r\n let province = new ol.layer.Image({\r\n source: new ol.source.ImageWMS({\r\n url: item.Url,\r\n params: { layers: item.LayerName, version: item.Version },\r\n serverType: \"geoserver\",\r\n ratio: item.Ratio,\r\n })\r\n });\r\n province.setVisible(item.Checked);\r\n map.addLayer(province);\r\n item.province = province;\r\n }\r\n else if (item.Type === kieuBanDo) {\r\n sourceDat = new ol.source.Vector({\r\n format: new ol.format.GeoJSON(),\r\n url: item.Url\r\n })\r\n provinceDat = new ol.layer.Vector({\r\n source: sourceDat,\r\n style: stylefunction\r\n })\r\n\r\n function addInteractions() {\r\n var flagHtml = document.getElementById('btnAdd').getAttribute('flagadd');\r\n var drawNew = new ol.interaction.Draw({\r\n source: sourceDat,\r\n type: \"Polygon\",\r\n style: new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: '#224abe'\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#224abe',\r\n }),\r\n image: new ol.style.Circle({\r\n radius: 3,\r\n fill: new ol.style.Fill({\r\n color: \"#224abe\",\r\n }),\r\n })\r\n })\r\n });\r\n setdraw(drawNew);\r\n if (flagHtml === \"1\") {\r\n map.addInteraction(drawNew);\r\n }\r\n }\r\n provinceDat.setVisible(item.Checked);\r\n map.addLayer(provinceDat);\r\n item.province = provinceDat;\r\n setDat(provinceDat);\r\n setSourcDat(sourceDat);\r\n }\r\n\r\n });\r\n setLopBanDo(list);\r\n setMap(map);\r\n }\r\n useEffect(() => {\r\n map = new ol.Map({\r\n target: \"map\",\r\n controls: new ol.control.defaults().extend([\r\n new ol.control.ScaleLine({\r\n units: 'metric'\r\n }),\r\n new ol.control.FullScreen(),\r\n new ol.control.ZoomSlider()\r\n ]),\r\n layers: [\r\n // new ol.layer.Tile({\r\n // source: new ol.source.OSM(),\r\n // }),\r\n ],\r\n view: view\r\n });\r\n }, []);\r\n\r\n const getIdHuyen = (event) => {\r\n if (event.value !== 0 && event.value !== IdHuyen) {\r\n listLopBanDos.forEach(item => {\r\n map.removeLayer(item.province);\r\n })\r\n setIdHuyen(event.value)\r\n map.setView(new ol.View({\r\n center: [event.toaDoX, event.toaDoY],\r\n zoom: event.zoom\r\n }));\r\n loadLopBanDo(event.value);\r\n }\r\n }\r\n\r\n const checkBoHandler = () => { };\r\n\r\n const clickRow = (id) => {\r\n listLopBanDos.forEach(item => {\r\n if (item.Id === id) {\r\n item.Checked = !item.Checked;\r\n map.getLayers().forEach(l => {\r\n if (l === item.province) {\r\n l.setVisible(item.Checked);\r\n }\r\n })\r\n }\r\n });\r\n setLopBanDo([...listLopBanDos]);\r\n setDat(map);\r\n }\r\n\r\n return (\r\n
\r\n
\r\n
\r\n
Bản đồ nền \r\n \r\n
\r\n getIdHuyen(e)}> \r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n )\r\n}\r\n","const { default: axiosClient } = require(\"./axiosClient\");\r\n\r\nconst LoaiCayApi = {\r\n getPaging: (params) => {\r\n const url = '/loaicay/paging';\r\n return axiosClient.get(url, {params});\r\n },\r\n\r\n getDetail: (id) =>{\r\n const url = '/loaicay/getbyid/' + id;\r\n return axiosClient.get(url);\r\n },\r\n\r\n post: (data) =>{\r\n const url = '/loaicay/add';\r\n return axiosClient.post(url, data);\r\n },\r\n\r\n put: (data) => {\r\n const url = '/loaicay/edit';\r\n return axiosClient.put(url, data);\r\n },\r\n\r\n delete: (id) =>{\r\n const url = '/loaicay/delete/' + id;\r\n return axiosClient.delete(url);\r\n },\r\n getLoaiCay: (params) =>{\r\n const url = 'loaicay/getall';\r\n return axiosClient.get(url, {params});\r\n }\r\n}\r\n\r\nexport default LoaiCayApi;","import React, { useState, useEffect } from 'react'\r\nimport { Modal } from 'react-bootstrap';\r\nimport {useForm} from 'react-hook-form';\r\nimport '../../../css/reacttab.css';\r\nimport Pagination from 'react-bootstrap-4-pagination';\r\nimport {Tab,Tabs,TabList,TabPanel} from 'react-tabs';\r\nimport '../../../css/apppublic.css';\r\nimport Authen from '../../../core/Authen';\r\nimport CKEditor from '@ckeditor/ckeditor5-react';\r\nimport ClassicEditor from '@ckeditor/ckeditor5-build-classic';\r\nimport {confirmAlert} from 'react-confirm-alert';\r\nimport Ultility from '../../../core/Ultility'\r\nimport UrlTile from 'ol/source/UrlTile';\r\nimport {QuanLyTapTin} from '../../../shared/quanlytaptin/QuanLyTapTin';\r\nimport LoaiCayApi from '../../../api/LoaiCayApi';\r\n\r\nexport const LoaiCay = () => {\r\n const [listLoaiCay, setListLoaiCay] = useState([]);\r\n const [filter, setFilter] = useState('');\r\n const [show,setShow] = useState(false);\r\n const [isEdit,setIsEdit] = useState(false);\r\n const [isXem,setIsXem] = useState(false);\r\n const [loaiCay,setLoaiCay] = useState({});\r\n const [roleAdd, setRoleAdd] = useState(false);\r\n const [roleEdit, setRoleEdit] = useState(false);\r\n const [roleDel, setRoleDel] = useState(false);\r\n const [isExist,setIsExist] = useState([{Value:false}]);\r\n const [isValueExist,setIsValueExist] = useState('');\r\n\r\n const {handleSubmit,register, reset,errors} = useForm();\r\n\r\n const [nhanVien, setNhanVien] = useState({});\r\n\r\n useEffect(() => {\r\n setNhanVien(Authen.getUser());\r\n }, []);\r\n\r\n const [paginationConfig,setPaginationConfig] = useState({\r\n totalPages : 1,\r\n currentPage : 1,\r\n showMax : 5,\r\n size : 'sm',\r\n threeDots : true,\r\n prevNext : true,\r\n onClick: function(page){\r\n if(page!= null)\r\n {\r\n pageIndex = page;\r\n loadLoaiCay();\r\n }\r\n }\r\n });\r\n\r\n var pageIndex = 1,pageSize = 20;\r\n \r\n const loadLoaiCay = async () =>{\r\n try{\r\n const params = {\r\n keyword: filter,\r\n pageIndex: pageIndex,\r\n pageSize: pageSize\r\n }\r\n const res = await LoaiCayApi.getPaging(params);\r\n res.Items.map((x)=>{\r\n x.Checked = false\r\n });\r\n setListLoaiCay(res.Items);\r\n paginationConfig.totalPages = Math.ceil(res.TotalRow==0?1:res.TotalRow/pageSize);\r\n paginationConfig.currentPage = pageIndex;\r\n setPaginationConfig(paginationConfig);\r\n setIsEdit(false);\r\n setLoaiCay({});\r\n }\r\n catch{\r\n console.log('loi roi');\r\n }\r\n \r\n }\r\n\r\n useEffect(()=>{\r\n loadLoaiCay();\r\n setRoleAdd(Authen.checkQuyen('LOAICAY_CREATE'));\r\n setRoleEdit(Authen.checkQuyen('LOAICAY_UPDATE'));\r\n setRoleDel(Authen.checkQuyen('LOAICAY_DELETE'));\r\n },[])\r\n\r\n const setFilt = (e) => {\r\n setFilter(e.target.value);\r\n }\r\n\r\n const Timkiem = () =>{\r\n loadLoaiCay();\r\n }\r\n\r\n const handleClose = () => {\r\n setShow(false);\r\n setIsXem(false);\r\n \r\n }\r\n const handleShow = () => { \r\n setIsXem(false);\r\n setShow(true);\r\n }\r\n\r\n \r\n const rowClick = (Id) =>{\r\n listLoaiCay.map((x) => {\r\n if(x.Id === Id){\r\n x.Checked = !x.Checked;\r\n if(x.Checked)\r\n {\r\n setIsEdit(true);\r\n setLoaiCay(x);\r\n reset({\r\n Id:x.Id,\r\n MaLoai: x.MaLoai,\r\n TenLoai: x.TenLoai,\r\n GhiChu: x.GhiChu,\r\n CreateBy: x.CreateBy,\r\n UpdateBy: x.UpdateBy\r\n }, [reset])\r\n }\r\n else\r\n {\r\n setIsEdit(false);\r\n reset({},[reset]);\r\n setLoaiCay({});\r\n }\r\n }\r\n else\r\n {\r\n x.Checked = false;\r\n }\r\n }\r\n )\r\n }\r\n \r\n const handleShowData = () => {\r\n setIsXem(true);\r\n setShow(true);\r\n }\r\n\r\n const onSubmit = async (data) => {\r\n \r\n try{\r\n let exi = isExist;\r\n exi[0].Value = false;\r\n setIsExist([...exi]);\r\n if (!isEdit)\r\n {\r\n console.log(isExist);\r\n listLoaiCay.forEach(x=>{\r\n if(x.MaLoai === data.MaLoai)\r\n {\r\n exi[0].Value = true;\r\n setIsExist([...exi]);\r\n }\r\n })\r\n if(!isExist[0].Value)\r\n {\r\n data.CreateBy = nhanVien.Id;\r\n data.UpdateBy = '';\r\n const res = await LoaiCayApi.post(data);\r\n setShow(false);\r\n setIsXem(false);\r\n setIsEdit(false);\r\n setLoaiCay({});\r\n loadLoaiCay();\r\n reset({},[reset]);\r\n }\r\n }\r\n else\r\n {\r\n data.CreateBy = '';\r\n data.UpdateBy = nhanVien.Id;\r\n data.MaLoai = loaiCay.MaLoai;\r\n console.log(loaiCay);\r\n const res = await LoaiCayApi.put(data);\r\n setShow(false);\r\n setIsXem(false);\r\n setIsEdit(false);\r\n setLoaiCay({});\r\n loadLoaiCay();\r\n reset({},[reset]);\r\n }\r\n \r\n }\r\n catch(ex){\r\n console.log(ex.message);\r\n }\r\n \r\n }\r\n\r\n const alertDell = () =>{\r\n confirmAlert({\r\n title:'Xóa loại cây',\r\n message: 'Bạn có chắc muốn xóa loại cây',\r\n buttons:[\r\n {\r\n label:'Đồng ý',\r\n onClick: async () => {\r\n const res = await LoaiCayApi.delete(loaiCay.Id);\r\n loadLoaiCay();\r\n setLoaiCay({});\r\n setIsEdit(false);\r\n }\r\n },\r\n {\r\n label:'không',\r\n onClick: () => {\r\n }\r\n }\r\n ]\r\n });\r\n }\r\n\r\n useEffect(()=>{\r\n if(isExist[0].Value === true)\r\n {\r\n setIsValueExist('* Mã loại cây đã tồn tại');\r\n }\r\n else\r\n {\r\n setIsValueExist('');\r\n }\r\n }\r\n ,[isExist[0].Value]);\r\n\r\n\r\n return(\r\n
\r\n
\r\n
\r\n
\r\n
Loại cây \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {roleAdd == true ?
\r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n Loại cây \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n );\r\n};\r\n ","import axiosClient from './axiosClient';\r\nconst BanDoDeXuatPhanBonApi = {\r\n getAll: () => {\r\n const url = '/bandodexuatphanbon/getall';\r\n return axiosClient.get(url)\r\n },\r\n\r\n delete: (str,gid,maloai) => {\r\n const url = '/bandodexuatphanbon/delete?str=' + str + '&&gid=' + gid + '&&maloai=' + maloai;\r\n console.log(url);\r\n return axiosClient.delete(url);\r\n },\r\n\r\n updateGeo: (data) =>{\r\n const url = '/bandodexuatphanbon/edit';\r\n return axiosClient.put(url, data);\r\n },\r\n\r\n addGeo: (data) =>{\r\n const url = '/bandodexuatphanbon/add';\r\n return axiosClient.post(url, data);\r\n },\r\n\r\n GetThongTin: (gid) => {\r\n const url = '/bandodexuatphanbon/getthongtin?Gid=' + gid;\r\n return axiosClient.get(url);\r\n },\r\n\r\n updateThongTin: (data) => {\r\n const url = '/bandodexuatphanbon/editthongtin';\r\n return axiosClient.put(url, data);\r\n },\r\n addThongTin: (data) => {\r\n const url = '/bandodexuatphanbon/addthongtin';\r\n return axiosClient.post(url, data);\r\n },\r\n}\r\nexport default BanDoDeXuatPhanBonApi;","const { default: axiosClient } = require(\"./axiosClient\");\r\n\r\nconst MuaVuApi = {\r\n getPaging: (params) => {\r\n const url = '/muavu/paging';\r\n return axiosClient.get(url, {params});\r\n },\r\n\r\n getDetail: (id) =>{\r\n const url = '/muavu/getbyid/' + id;\r\n return axiosClient.get(url);\r\n },\r\n\r\n post: (data) =>{\r\n const url = '/muavu/add';\r\n return axiosClient.post(url, data);\r\n },\r\n\r\n put: (data) => {\r\n const url = '/muavu/edit';\r\n return axiosClient.put(url, data);\r\n },\r\n\r\n delete: (id) =>{\r\n const url = '/muavu/delete/' + id;\r\n return axiosClient.delete(url);\r\n },\r\n getMuaVu: (params) =>{\r\n const url = 'muavu/getall';\r\n return axiosClient.get(url, {params});\r\n }\r\n}\r\n\r\nexport default MuaVuApi;","import React, { useState, useEffect } from 'react'\r\nimport { Modal, Button } from 'react-bootstrap';\r\nimport { useForm } from 'react-hook-form';\r\nimport Select from 'react-select';\r\nimport BanDoDeXuatPhanBonApi from '../../api/BanDoDeXuatPhanBonApi';\r\nimport LoaiCayApi from '../../api/LoaiCayApi';\r\nimport MuaVuApi from '../../api/MuaVuApi';\r\n\r\nexport const ModalEditThongTin = (props) => {\r\n const [show, setShow] = useState(false);\r\n const handleClose = () => {\r\n props.closeThongTin();\r\n setShow(false)\r\n };\r\n const { register, handleSubmit, reset } = useForm();\r\n const [selectedOption, setSelectedOption] = useState();\r\n const [selectedOptionMuaVu, setSelectedOptionMuaVu] = useState();\r\n const [listLoaiCay, setLoaiCay] = useState([]);\r\n const [listMuaVu, setMuaVu] = useState([]);\r\n const [gid, setGid] = useState('');\r\n const [listRow,setListRow] = useState([{Count:0,Id:0,LoaiPhan:'',KhoiLuong:''}]);\r\n const [listRowDefault,setListRowDefault] = useState([{Count:0,Id:0,LoaiPhan:'',KhoiLuong:''}]);\r\n const [createRow,setCreateRow] = useState(false);\r\n const kieuBanDo = 4;\r\n const [rowCount,setRowCount] = useState(1);\r\n const [listObject,setListObject] = useState([]);\r\n const [modeEdit,setModeEdit] = useState(false);\r\n\r\n const saveData = (data) => {\r\n let str = '';\r\n if (selectedOption) {\r\n data.MaLoai = selectedOption.value;\r\n }\r\n if (selectedOptionMuaVu) {\r\n data.MaMuaVu = selectedOptionMuaVu.value;\r\n }\r\n if (data.MaLoai !== undefined)\r\n {\r\n data.gid = gid;\r\n data.geometry=props.thongTin.geometry;\r\n\r\n listRow.forEach(x =>{\r\n if(x.Id !==0)\r\n {\r\n listObject.forEach(p=>{\r\n if(x.Id === p.Id)\r\n {\r\n if(str ==='')\r\n {\r\n str += x.Id\r\n }\r\n else\r\n {\r\n str += ',' + x.Id\r\n }\r\n }\r\n })\r\n }\r\n })\r\n\r\n BanDoDeXuatPhanBonApi.delete(str,gid,selectedOption.value);\r\n\r\n\r\n listRow.forEach(x =>{\r\n data.Id = x.Id;\r\n data.LoaiPhan = x.LoaiPhan;\r\n data.KhoiLuong = x.KhoiLuong;\r\n BanDoDeXuatPhanBonApi.updateThongTin(data).then(() => {\r\n setShow(false);\r\n })\r\n props.saveSuccess();\r\n\r\n \r\n })\r\n }\r\n }\r\n\r\n\r\n const addNewRow = () =>{\r\n let list = listRow;\r\n list.push({Count:rowCount,Id:0, LoaiPhan: '',KhoiLuong:''})\r\n setListRow([...list]);\r\n setRowCount(rowCount+1);\r\n }\r\n\r\n const deleteRow = (item) =>{\r\n let index = listRow.indexOf(item);\r\n let list = [...listRow];\r\n if (index !== -1)\r\n {\r\n list.splice(index,1);\r\n setListRow([...list]);\r\n } \r\n \r\n }\r\n\r\n useEffect(()=>{\r\n setRowCount(rowCount);\r\n },[rowCount])\r\n\r\n\r\n\r\n\r\n\r\n\r\n useEffect(() => {\r\n if (props.showEdit === true) {\r\n setGid(props.thongTin.gid);\r\n loadThongTin();\r\n setSelectedOption('');\r\n setSelectedOptionMuaVu('');\r\n setCreateRow(false);\r\n setShow(true);\r\n setModeEdit(props.modeEdit);\r\n\r\n\r\n /* var index = listLopMau.findIndex(x => x.value == props.thongTin.tnh);\r\n setSelectedOption(listLopMau[index]); */\r\n }\r\n\r\n }, [props.showEdit]);\r\n\r\n const loadThongTin = async () =>{\r\n if(props.thongTin.gid !=='')\r\n {\r\n const res = await BanDoDeXuatPhanBonApi.GetThongTin(props.thongTin.gid);\r\n setListObject(res.Items);\r\n }\r\n\r\n } \r\n\r\n \r\n const onChangeLoaiCay = (e) => {\r\n setSelectedOption(e);\r\n let list = [];\r\n setRowCount(1);\r\n listObject.map(x => {\r\n if(x.MaLoai === e.value)\r\n {\r\n list.push({'Count':rowCount,'Id':x.Id,'LoaiPhan':x.LoaiPhan,'KhoiLuong':x.KhoiLuong});\r\n setRowCount(rowCount + 1);\r\n }\r\n })\r\n if(list.length === 0)\r\n {\r\n list.push({Count:0,Id:0,LoaiPhan:'',KhoiLuong:''});\r\n }\r\n setListRow(list);\r\n setCreateRow(true);\r\n }\r\n\r\n const onChangeMuaVu = (e) => {\r\n setSelectedOptionMuaVu(e);\r\n }\r\n\r\n\r\n function loadLoaiCay() {\r\n LoaiCayApi.getLoaiCay().then((response) => {\r\n let list = [];\r\n list.push({ value: '', label: 'Chọn cây' });\r\n response.forEach(item => {\r\n /* if(item.Type===1 || item.Type===kieuBanDo) */\r\n list.push({ value: item.MaLoai, label: item.TenLoai });\r\n })\r\n setLoaiCay(list);\r\n })\r\n }\r\n\r\n const onChangeLP = (x,e) =>{\r\n if(modeEdit === true)\r\n {\r\n listRow.map(p =>{\r\n if(p === x)\r\n {\r\n p.LoaiPhan = e.target.value;\r\n }\r\n });\r\n setListRow([...listRow]);\r\n }\r\n }\r\n\r\n const onChangeKL = (x,e) =>{\r\n if(modeEdit === true)\r\n {\r\n listRow.map(p =>{\r\n if(p === x)\r\n {\r\n p.KhoiLuong = e.target.value;\r\n }\r\n });\r\n setListRow([...listRow]);\r\n }\r\n \r\n }\r\n\r\n\r\n function loadMuaVu() {\r\n MuaVuApi.getMuaVu().then((response) => {\r\n let list = [];\r\n list.push({ value: '', label: 'Chọn mùa vụ' });\r\n response.forEach(item => {\r\n /* if(item.Type===1 || item.Type===kieuBanDo) */\r\n list.push({ value: item.MaLoai, label: item.TenLoai });\r\n })\r\n setMuaVu(list);\r\n })\r\n }\r\n\r\n useEffect(() => {\r\n loadLoaiCay();\r\n loadMuaVu();\r\n }, []);\r\n\r\n return (\r\n
\r\n\r\n
\r\n \r\n Thông tin \r\n \r\n \r\n \r\n \r\n \r\n \r\n Lưu \r\n \r\n Hủy \r\n \r\n \r\n\r\n
\r\n\r\n )\r\n}\r\n","import React, { useEffect, useState } from 'react'\r\nimport LopBanDoApi from '../../api/LopBanDoApi';\r\nimport ol from \"openlayers\";\r\nimport \"ol/ol.css\";\r\nimport { SelectHuyen } from '../../shared/selecthuyen/SelectHuyen';\r\nimport ThongBao from '../../core/ThongBao';\r\nimport BanDoThichHopApi from '../../api/BanDoThichHopApi';\r\nimport { ModalEditThongTin } from './ModalEditThongTin';\r\nimport LopMauApi from '../../api/LopMauApi';\r\nimport Authen from '../../core/Authen';\r\nimport madontinh from '../../main/madontinh/madontinh'\r\n\r\nexport const BanDoDeXuatPhanBon = () => {\r\n const view = new ol.View({\r\n center: [11725287.264889468, 2355407.026607706],\r\n zoom: 11\r\n });\r\n const kieuBanDo = 4;\r\n\r\n var [map, setMap] = useState(new ol.Map());\r\n // var map;\r\n const [listLopBanDos, setLopBanDo] = useState([]);\r\n var [thongTin, setThongTin] = useState({});\r\n const [filter, setFilter] = useState();\r\n var [provinceDat, setDat] = useState(new ol.layer.Vector());\r\n var [sourceDat, setSourcDat] = useState(new ol.source.Vector());\r\n var [selectDat, setSelectDat] = useState(null);\r\n const [flagAddEdit, setFlagAddEdit] = useState(0);\r\n const [draw, setdraw] = useState(null);\r\n const [IdHuyen, setIdHuyen] = useState(0);\r\n const [flagEdit, setFlagEdit] = useState(false);\r\n const [showEdit, setShowEdit] = useState(false);\r\n var [listStyles, setListStyle] = useState([]);\r\n const [isThemMoi, setThemMoi] = useState(true);\r\n\r\n const [roleAdd, setRoleAdd] = useState(false);\r\n const [roleEdit, setRoleEdit] = useState(false);\r\n const [roleDel, setRoleDel] = useState(false);\r\n const [dvt,setDVT] = useState([]);\r\n\r\n const style = (color, text) => {\r\n return new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: color,\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#C0C0C0',\r\n }),\r\n text: new ol.style.Text({\r\n text: text,\r\n fill: new ol.style.Fill({\r\n color: \"#040482\"\r\n })\r\n })\r\n });\r\n }\r\n\r\n const stylefunction = function (feature, resolution) {\r\n let madat = feature.get('tnh');\r\n let index = listStyles.findIndex(x => x.MaMau === madat);\r\n let text = ''\r\n if (resolution < 10) {\r\n text = madat;\r\n }\r\n if (index !== -1) {\r\n return style(listStyles[index].MauSac, text);\r\n }\r\n else {\r\n return style(\"rgb(37 98 236 / 50%)\", '');\r\n }\r\n }\r\n\r\n const highlightStyle = new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: 'rgb(37 98 236 / 50%)',\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#5782ff',\r\n width: 1,\r\n }),\r\n });\r\n\r\n const clickEdit = () => {\r\n if (flagAddEdit === 2) {\r\n setFlagAddEdit(0);\r\n map.getInteractions().forEach(item => {\r\n map.removeInteraction(item);\r\n })\r\n }\r\n else {\r\n setFlagAddEdit(2);\r\n let select = new ol.interaction.Select({ wrapX: false, });\r\n let modify = new ol.interaction.Modify({ features: select.getFeatures(), });\r\n map.getInteractions().extend([select, modify]);\r\n var selected_features = select.getFeatures();\r\n var dirty = {};\r\n selected_features.on('add', function (evt) {\r\n var feature = evt.element;\r\n var fid = feature.getId();\r\n feature.on('change', function (evt) {\r\n dirty[fid] = true;\r\n });\r\n });\r\n\r\n selected_features.on('remove', function (evt) {\r\n var feature = evt.element;\r\n var fid = feature.getId();\r\n if (dirty[fid]) {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn cập nhật sử thay đổi này không?\", () => {\r\n var geoJson = new ol.format.WKT();\r\n var geoText = geoJson.writeGeometry(feature.getGeometry());\r\n thongTin.Geometry = geoText;\r\n setThongTin(thongTin);\r\n setThemMoi(false);\r\n setShowEdit(true);\r\n // BanDoThichHopApi.updateGeo(data).then(() => {\r\n // ThongBao.printSuccessMessage(\"Cập nhật thành công!\");\r\n // });\r\n }, () => {\r\n provinceDat.getSource().clear();\r\n });\r\n }\r\n });\r\n\r\n\r\n setMap(map);\r\n }\r\n }\r\n\r\n const clickAdd = () => {\r\n // console.log(draw);\r\n if (flagAddEdit === 0) {\r\n setFlagAddEdit(1);\r\n map.addInteraction(draw);\r\n }\r\n else {\r\n map.removeInteraction(draw);\r\n setFlagAddEdit(0);\r\n }\r\n setMap(map);\r\n }\r\n\r\n const loadLopBanDo = async (idhuyen) => {\r\n let params = {\r\n _tyle: kieuBanDo\r\n }\r\n listStyles = await LopMauApi.getLopBanDo(params);\r\n setListStyle(listStyles);\r\n params = {\r\n kieuBanDo: kieuBanDo,\r\n idHuyen: idhuyen\r\n }\r\n\r\n const list = await LopBanDoApi.getLopBanDo(params);\r\n list.forEach(item => {\r\n if (item.Type === 1 || (item.Type === kieuBanDo && item.GeoJson !== true)) {\r\n let province = new ol.layer.Image({\r\n source: new ol.source.ImageWMS({\r\n url: item.Url,\r\n params: { layers: item.LayerName, version: item.Version },\r\n serverType: \"geoserver\",\r\n ratio: item.Ratio,\r\n })\r\n });\r\n province.setVisible(item.Checked);\r\n map.addLayer(province);\r\n item.province = province;\r\n }\r\n else if (item.Type === kieuBanDo && item.GeoJson === true) {\r\n sourceDat = new ol.source.Vector({\r\n format: new ol.format.GeoJSON(),\r\n url: item.Url\r\n })\r\n provinceDat = new ol.layer.Vector({\r\n source: sourceDat,\r\n style: stylefunction\r\n })\r\n\r\n function addInteractions() {\r\n var flagHtml = document.getElementById('btnAdd').getAttribute('flagadd');\r\n var drawNew = new ol.interaction.Draw({\r\n source: sourceDat,\r\n type: \"Polygon\",\r\n style: new ol.style.Style({\r\n fill: new ol.style.Fill({\r\n color: '#224abe'\r\n }),\r\n stroke: new ol.style.Stroke({\r\n color: '#224abe',\r\n }),\r\n image: new ol.style.Circle({\r\n radius: 3,\r\n fill: new ol.style.Fill({\r\n color: \"#224abe\",\r\n }),\r\n })\r\n })\r\n });\r\n setdraw(drawNew);\r\n if (flagHtml === \"1\") {\r\n map.addInteraction(drawNew);\r\n }\r\n }\r\n provinceDat.setVisible(item.Checked);\r\n map.addLayer(provinceDat);\r\n item.province = provinceDat;\r\n setDat(provinceDat);\r\n setSourcDat(sourceDat);\r\n addInteractions();\r\n provinceDat.getSource().on('addfeature', function (event) {\r\n var ev = document.getElementById('btnAdd');\r\n var flagHtml = 0;\r\n if (ev != null) {\r\n flagHtml = ev.getAttribute('flagadd');\r\n }\r\n if (flagHtml === \"1\" && event.feature.getId() == null) {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn thêm khoảng đất này không?\", () => {\r\n var feature = event.feature;\r\n var geoJson = new ol.format.WKT();\r\n var geoText = geoJson.writeGeometry(feature.getGeometry());\r\n thongTin = {};\r\n thongTin.geometry = geoText;\r\n thongTin.gid = provinceDat.getSource().getFeatures()[0].getId();\r\n setThongTin({...thongTin});\r\n console.log(thongTin);\r\n setThemMoi(true);\r\n setShowEdit(true);\r\n }, () => {\r\n provinceDat.getSource().removeFeature(event.feature);\r\n // provinceDat.getSource().clear();\r\n });\r\n }\r\n })\r\n }\r\n\r\n });\r\n setLopBanDo(list);\r\n setMap(map);\r\n }\r\n useEffect(() => {\r\n setRoleAdd(Authen.checkQuyen('BDDEXUATPHANBON_CREATE'));\r\n setRoleEdit(Authen.checkQuyen('BDDEXUATPHANBON_UPDATE'));\r\n setRoleDel(Authen.checkQuyen('BDDEXUATPHANBON_DELETE'));\r\n map = new ol.Map({\r\n target: \"map\",\r\n controls: new ol.control.defaults().extend([\r\n new ol.control.ScaleLine({\r\n units: 'metric'\r\n }),\r\n new ol.control.FullScreen(),\r\n new ol.control.ZoomSlider()\r\n ]),\r\n layers: [\r\n // new ol.layer.Tile({\r\n // source: new ol.source.OSM(),\r\n // }),\r\n ],\r\n view: view\r\n });\r\n\r\n map.on('click', function (evt) {\r\n setFlagEdit(false);\r\n var flagHtml = document.getElementById('btnEdit').getAttribute('flagedit');\r\n if (flagHtml === \"1\") {\r\n if (selectDat !== null) {\r\n selectDat.setStyle(stylefunction);\r\n selectDat = null;\r\n setSelectDat(selectDat);\r\n }\r\n return;\r\n }\r\n if (selectDat !== null) {\r\n selectDat.setStyle(stylefunction);\r\n setSelectDat(selectDat);\r\n setThongTin({ ...{} });\r\n }\r\n map.forEachFeatureAtPixel(evt.pixel, function (feature) {\r\n console.log(feature);\r\n feature.setStyle(highlightStyle);\r\n if (feature != null) {\r\n let thongTinNew = {};\r\n thongTinNew.gid = feature.getId();\r\n thongTinNew.ba_kich = feature.get('ba_kich');\r\n thongTinNew.bi_xanh = feature.get('bi_xanh');\r\n thongTinNew.bo_khai = feature.get('bo_khai');\r\n thongTinNew.buoi = feature.get('buoi');\r\n thongTinNew.ca_gaileo = feature.get('ca_gaileo');\r\n thongTinNew.cam = feature.get('cam');\r\n thongTinNew.cat = feature.get('cat');\r\n thongTinNew.caytrong = feature.get('caytrong');\r\n thongTinNew.cec = feature.get('cec');\r\n thongTinNew.chisokhoha = feature.get('chisokhoha');\r\n thongTinNew.chum_ngay = feature.get('chum_ngay');\r\n thongTinNew.code_qh = feature.get('code_qh');\r\n thongTinNew.dalan = feature.get('dalan');\r\n thongTinNew.dhtd = feature.get('dhtd');\r\n thongTinNew.dt = feature.get('dt');\r\n thongTinNew.dt_bs = feature.get('dt_bs');\r\n thongTinNew.dua_hau = feature.get('dua_hau');\r\n thongTinNew.dungtrong = feature.get('dungtrong');\r\n thongTinNew.dungtrong_ = feature.get('dungtrong_');\r\n thongTinNew.dvdd = feature.get('dvdd');\r\n thongTinNew.g = feature.get('g');\r\n thongTinNew.ht_qh = feature.get('ht_qh');\r\n thongTinNew.huyen = feature.get('huyen');\r\n thongTinNew.id = feature.get('id');\r\n thongTinNew.k2o = feature.get('k2o');\r\n thongTinNew.keo = feature.get('keo');\r\n thongTinNew.khoai_so = feature.get('khoai_so');\r\n thongTinNew.khohan_dt = feature.get('khohan_dt');\r\n thongTinNew.khoi_tu = feature.get('khoi_tu');\r\n thongTinNew.khoi_tu = feature.get('khoi_tu');\r\n thongTinNew.lac = feature.get('lac');\r\n thongTinNew.lua = feature.get('lua');\r\n thongTinNew.luongmua_d = feature.get('luongmua_d');\r\n thongTinNew.ma_congtua = feature.get('ma_congtua');\r\n thongTinNew.ma_dexuat = feature.get('ma_dexuat');\r\n thongTinNew.madat = feature.get('madat');\r\n thongTinNew.mang_tay = feature.get('mang_tay');\r\n thongTinNew.mau_anhhuo = feature.get('mau_anhhuo');\r\n thongTinNew.mia = feature.get('mia');\r\n thongTinNew.mit = feature.get('mit');\r\n thongTinNew.n = feature.get('n');\r\n thongTinNew.ngapung_dt = feature.get('ngapung_dt');\r\n thongTinNew.ngo = feature.get('ngo');\r\n thongTinNew.nhan = feature.get('nhan');\r\n thongTinNew.nhietdo = feature.get('nhietdo');\r\n thongTinNew.oc = feature.get('oc');\r\n thongTinNew.oi = feature.get('oi');\r\n thongTinNew.om = feature.get('om');\r\n thongTinNew.p2o5 = feature.get('p2o5');\r\n thongTinNew.pc_cec = feature.get('pc_cec');\r\n thongTinNew.pc_chisokh = feature.get('pc_chisokh');\r\n thongTinNew.pc_dd = feature.get('pc_dd');\r\n thongTinNew.pc_dp = feature.get('pc_dp');\r\n thongTinNew.pc_k = feature.get('pc_k');\r\n thongTinNew.pc_n = feature.get('pc_n');\r\n thongTinNew.pc_om = feature.get('pc_om');\r\n thongTinNew.pc_p = feature.get('pc_p');\r\n thongTinNew.pc_ph = feature.get('pc_ph');\r\n thongTinNew.pthongTinNewc_r = feature.get('pc_r');\r\n thongTinNew.pc_t = feature.get('pc_t');\r\n thongTinNew.phanvung = feature.get('phanvung');\r\n thongTinNew.phkcl = feature.get('phkcl');\r\n thongTinNew.qh_qh = feature.get('qh_qh');\r\n thongTinNew.rau = feature.get('rau');\r\n thongTinNew.thongTinNewsa = feature.get('sa');\r\n thongTinNew.sam_day = feature.get('sam_day');\r\n thongTinNew.san = feature.get('san');\r\n thongTinNew.set = feature.get('set');\r\n thongTinNew.sl = feature.get('sl');\r\n thongTinNew.sothangkho = feature.get('sothangkho');\r\n thongTinNew.symbol_qh = feature.get('symbol_qh');\r\n thongTinNew.tangday = feature.get('tangday');\r\n thongTinNew.tenpd = feature.get('tenpd');\r\n thongTinNew.thit = feature.get('thit');\r\n thongTinNew.tieu_dt = feature.get('tieu_dt');\r\n thongTinNew.tinh = feature.get('tinh');\r\n thongTinNew.tn = feature.get('tn');\r\n thongTinNew.tpcg = feature.get('tpcg');\r\n thongTinNew.truongnhan = feature.get('truongnhan');\r\n thongTinNew.tton_dt = feature.get('tton_dt');\r\n thongTinNew.tuoi_dt = feature.get('tuoi_dt');\r\n thongTinNew.xa = feature.get('xa');\r\n\r\n thongTinNew.khoai=feature.get('khoai');\r\n thongTinNew.quyt=feature.get('quyt');\r\n thongTinNew.na=feature.get('na');\r\n thongTinNew.xoai=feature.get('xoai');\r\n thongTinNew.che=feature.get('che');\r\n thongTinNew.chanh=feature.get('chanh');\r\n thongTinNew.ca_gai_leo=feature.get('ca_gai_leo');\r\n thongTinNew.ca_phe_che=feature.get('ca_phe_che');\r\n thongTinNew.dau_tuong=feature.get('dau_tuong');\r\n thongTinNew.dau_tam=feature.get('dau_tam');\r\n\r\n thongTinNew.tnh = feature.get('tnh');\r\n thongTinNew.dvddh = feature.get('dvddh');\r\n\r\n setThongTin(thongTinNew);\r\n selectDat = feature;\r\n setSelectDat(selectDat);\r\n setFlagEdit(true);\r\n donVT(thongTin);\r\n }\r\n else {\r\n setThongTin({ ...{} });\r\n }\r\n });\r\n });\r\n // setMap(map);\r\n\r\n }, []);\r\n\r\n const donVT = (value) =>{\r\n const donvitinh = [\r\n {Ma:'Fe',Value:value.fe,Ten:''},\r\n {Ma:'Sl',Value:value.sl,Ten:''},\r\n {Ma:'Gv',Value:value.dalan,Ten:''},\r\n {Ma:'De',Value:value.de,Ten:''},\r\n {Ma:'Ir',Value:value.tuoi_dt,Ten:''},\r\n {Ma:'Tx',Value:value.tpcg,Ten:''}\r\n ]\r\n setDVT(madontinh.getTen(donvitinh));\r\n }\r\n\r\n const getIdHuyen = (event) => {\r\n if (event.value !== 0 && event.value !== IdHuyen) {\r\n listLopBanDos.forEach(item => {\r\n map.removeLayer(item.province);\r\n })\r\n setIdHuyen(event.value)\r\n map.setView(new ol.View({\r\n center: [event.toaDoX, event.toaDoY],\r\n zoom: event.zoom\r\n }));\r\n loadLopBanDo(event.value);\r\n }\r\n }\r\n\r\n const checkBoHandler = () => { };\r\n\r\n const clickRow = (id) => {\r\n listLopBanDos.forEach(item => {\r\n if (item.Id === id) {\r\n item.Checked = !item.Checked;\r\n map.getLayers().forEach(l => {\r\n if (l === item.province) {\r\n l.setVisible(item.Checked);\r\n }\r\n })\r\n }\r\n });\r\n setLopBanDo([...listLopBanDos]);\r\n setDat(map);\r\n }\r\n\r\n \r\n const timKiem = () => {\r\n\r\n }\r\n\r\n function onChangeFilter(e) {\r\n setFilter(e.target.value)\r\n }\r\n\r\n const delFeature = () => {\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn xóa khoảng đất đã chọn đi không?\", () => {\r\n BanDoThichHopApi.delete(thongTin.gid).then(() => {\r\n provinceDat.getSource().removeFeature(selectDat);\r\n ThongBao.printSuccessMessage(\"Xóa khoảnh đất thành công!\");\r\n });\r\n });\r\n // ThongBao.printSuccessMessage('OK');\r\n }\r\n\r\n const clickEditThongTin = () => {\r\n // console.log(thongTin);\r\n setShowEdit(true);\r\n setThemMoi(false);\r\n }\r\n\r\n const closeThongTin = () => {\r\n setShowEdit(false);\r\n\r\n }\r\n\r\n const saveSuccess = () => {\r\n setShowEdit(false);\r\n provinceDat.getSource().clear();\r\n }\r\n\r\n return (\r\n
\r\n
\r\n
\r\n
Bản đồ đề xuất phân bón \r\n \r\n
\r\n getIdHuyen(e)}> \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {roleEdit == true ?
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Tên \r\n Thông tin \r\n \r\n \r\n \r\n \r\n Tỉnh \r\n {thongTin.tinh} \r\n \r\n \r\n Huyện \r\n {thongTin.huyen} \r\n \r\n \r\n Xã \r\n {thongTin.xa} \r\n \r\n \r\n Diện tích \r\n {thongTin.dt_bs} \r\n \r\n \r\n Mã đất \r\n {thongTin.madat} \r\n \r\n \r\n Phân vùng \r\n {thongTin.phanvung} \r\n \r\n \r\n Loại đất \r\n {thongTin.g} \r\n \r\n \r\n Địa hình tương đối \r\n {thongTin.dhtd} \r\n \r\n \r\n Địa hình \r\n {dvt.filter(x=>x.Ma==='Sl' && x.Value ===thongTin.sl).map(x => x.Ten)} \r\n \r\n \r\n Tầng dày \r\n {dvt.filter(x=>x.Ma==='De' && x.Value ===thongTin.tangday).map(x => x.Ten)} \r\n \r\n \r\n Thành phần cơ giới \r\n {dvt.filter(x=>x.Ma==='Tx' && x.Value ===thongTin.tpcg).map(x => x.Ten)} \r\n \r\n \r\n Mức độ Đá lẫn \r\n {dvt.filter(x=>x.Ma==='Gv' && x.Value ===thongTin.dalan).map(x => x.Ten)} \r\n \r\n {/* \r\n Dung trọng \r\n {thongTin.dungtrong} \r\n */}\r\n \r\n Phân Cấp PH \r\n {thongTin.pc_ph} \r\n \r\n \r\n Phân cấp CEC \r\n {thongTin.pc_cec} \r\n \r\n \r\n Phân cấp dinh dưỡng \r\n {thongTin.pc_dd} \r\n \r\n \r\n Phân cấp nito \r\n {thongTin.pc_n} \r\n \r\n \r\n Phân cấp phốt pho \r\n {thongTin.pc_p} \r\n \r\n \r\n Phân cấp Kali \r\n {thongTin.pc_k} \r\n \r\n \r\n Phân cấp chất hữu cơ \r\n {thongTin.pc_om} \r\n \r\n \r\n Phân cấp độ phì \r\n {dvt.filter(x=>x.Ma==='Fe' && x.Value ===thongTin.pc_dp).map(x => x.Ten)} \r\n \r\n \r\n Lượng mưa \r\n {thongTin.luongmua_d} \r\n \r\n \r\n Tổng tích ôn \r\n {thongTin.tton_dt} \r\n \r\n \r\n Mức độ khô hạn \r\n {thongTin.khohan_dt} \r\n \r\n \r\n Nhiệt đô \r\n {thongTin.nhietdo} \r\n \r\n \r\n Chỉ số khô hạn \r\n {thongTin.chisokhoha} \r\n \r\n \r\n Phân cấp chỉ số khô hạn \r\n {thongTin.pc_chisokh} \r\n \r\n \r\n Số tháng khô hạn \r\n {thongTin.sothangkho} \r\n \r\n \r\n Cây trồng \r\n {thongTin.caytrong} \r\n \r\n \r\n Ngập úng \r\n {thongTin.ngapung_dt} \r\n \r\n \r\n Chế độ tưới \r\n {dvt.filter(x=>x.Ma==='Ir' && x.Value ===thongTin.tuoi_dt).map(x => x.Ten)} \r\n \r\n \r\n Chế độ tiêu \r\n {thongTin.tieu_dt} \r\n \r\n\r\n \r\n DungTrong_ \r\n {thongTin.dungtrong_} \r\n \r\n \r\n Mau_AnhHuong \r\n {thongTin.mau_anhhuo} \r\n \r\n \r\n dvdd \r\n {thongTin.dvdd} \r\n \r\n \r\n dvddh \r\n {thongTin.dvddh} \r\n \r\n\r\n \r\n Lúa \r\n {thongTin.lua} \r\n \r\n \r\n Ngô \r\n {thongTin.ngo} \r\n \r\n \r\n Rau \r\n {thongTin.rau} \r\n \r\n \r\n Khoai \r\n {thongTin.khoai} \r\n \r\n \r\n Sắn \r\n {thongTin.san} \r\n \r\n\r\n \r\n Lạc \r\n {thongTin.lac} \r\n \r\n \r\n Mía \r\n {thongTin.mia} \r\n \r\n \r\n Cam \r\n {thongTin.cam} \r\n \r\n \r\n Quýt \r\n {thongTin.quyt} \r\n \r\n \r\n Bưởi \r\n {thongTin.buoi} \r\n \r\n \r\n Chè \r\n {thongTin.che} \r\n \r\n \r\n Dưa hấu \r\n {thongTin.dua_hau} \r\n \r\n \r\n Na \r\n {thongTin.na} \r\n \r\n \r\n Chanh \r\n {thongTin.chanh} \r\n \r\n \r\n Xoài \r\n {thongTin.xoai} \r\n \r\n \r\n Cà gai leo \r\n {thongTin.ca_gai_leo} \r\n \r\n \r\n Dâu tằm \r\n {thongTin.dau_tam} \r\n \r\n \r\n Nhãn \r\n {thongTin.nhan} \r\n \r\n \r\n Cà phê chè \r\n {thongTin.ca_phe_che} \r\n \r\n \r\n Đậu tương \r\n {thongTin.dau_tuong} \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n )\r\n}\r\n","const { default: axiosClient } = require(\"./axiosClient\");\r\n\r\nconst NhatKyDangNhapApi = {\r\n getPaging: (params) => {\r\n const url = '/nhatkydangnhap/paging';\r\n return axiosClient.get(url, {params});\r\n }\r\n\r\n // getDetail: (id) =>{\r\n // const url = '/nhatkydangnhap/getbyid/' + id;\r\n // return axiosClient.get(url);\r\n // },\r\n\r\n // post: (data) =>{\r\n // const url = '/nhatkydangnhap/add';\r\n // return axiosClient.post(url, data);\r\n // },\r\n\r\n // put: (data) => {\r\n // const url = '/nhatkydangnhap/edit';\r\n // return axiosClient.put(url, data);\r\n // },\r\n\r\n // delete: (id) =>{\r\n // const url = '/nhatkydangnhap/delete/' + id;\r\n // return axiosClient.delete(url);\r\n // },\r\n // getAll: (params) =>{\r\n // const url = 'nhatkydangnhap/getall';\r\n // return axiosClient.get(url, {params});\r\n // }\r\n}\r\n \r\nexport default NhatKyDangNhapApi;","import React, { useState, useEffect } from 'react'\r\nimport NhatKyDangNhapApi from '../../../api/NhatKyDangNhapApi';\r\nimport { Modal, Button } from 'react-bootstrap';\r\nimport { useForm } from 'react-hook-form';\r\nimport Pagination from 'react-bootstrap-4-pagination';\r\nimport ThongBao from '../../../core/ThongBao';\r\nimport Authen from '../../../core/Authen';\r\n\r\nexport const NhatKyDangNhap = () => {\r\n const [listNhomQuyens, setNhomQuyen] = useState([]);\r\n const [filter, setFilter] = useState('');\r\n\r\n let pageIndex = 1;\r\n let pageSize = 20;\r\n const [paginationConfig, setPaging] = useState({\r\n totalPages: 1,\r\n currentPage: 1,\r\n showMax: 5,\r\n size: \"sm\",\r\n threeDots: true,\r\n prevNext: true,\r\n onClick: function (page) {\r\n pageIndex = page;\r\n loadNhomQuyen();\r\n }\r\n });\r\n\r\n const loadNhomQuyen = async () => {\r\n try {\r\n const params = {\r\n pageIndex: pageIndex,\r\n pageSize: pageSize,\r\n keyword: filter\r\n }\r\n const response = await NhatKyDangNhapApi.getPaging(params);\r\n response.Items.forEach(item => {\r\n item.Checked = false;\r\n });\r\n paginationConfig.totalPages = Math.ceil(response.TotalRow / pageSize);\r\n if(response.TotalRow ==0){\r\n paginationConfig.totalPages =1;\r\n }\r\n paginationConfig.currentPage = pageIndex;\r\n setPaging(paginationConfig);\r\n setNhomQuyen(response.Items);\r\n } catch (err) {\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n loadNhomQuyen();\r\n }, []);\r\n\r\n const timKiem = () => {\r\n loadNhomQuyen();\r\n }\r\n\r\n function onChangeFilter(e) {\r\n setFilter(e.target.value)\r\n }\r\n \r\n return (\r\n
\r\n
\r\n
\r\n
Nhật ký đăng nhập \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {/* {roleDel == true ?
\r\n
\r\n
\r\n
\r\n\r\n )\r\n}\r\n","import React, { useState, useEffect } from 'react'\r\nimport { Modal, Button } from 'react-bootstrap';\r\nimport { useForm } from 'react-hook-form';\r\nimport Select from 'react-select';\r\nimport QuanHuyenApi from '../../api/QuanHuyenApi';\r\nimport Pagination from 'react-bootstrap-4-pagination';\r\nimport BaoCaoChatLuongDatApi from '../../api/BaoCaoChatLuongDatApi';\r\nimport { QuanLyTapTin } from '../../shared/quanlytaptin/QuanLyTapTin';\r\nimport ThongBao from '../../core/ThongBao';\r\nimport Authen from '../../core/Authen';\r\n\r\n\r\nexport const SoLieuChatLuongDat = () => {\r\n const loaiBaoCao = 2;\r\n const [listBaoCaos, setBaoCao] = useState([]);\r\n const [show, setShow] = useState(false);\r\n const handleClose = () => setShow(false);\r\n const { register, handleSubmit, reset } = useForm();\r\n const [filter, setFilter] = useState('');\r\n const [listQuanHuyens, setQuanHuyen] = useState([]);\r\n const [selectedOption, setSelectedOption] = useState();\r\n const [showQuanLyTapTin, setShowQuanLyTapTin] = useState(false);\r\n const [tapTin, setTapTin] = useState(null);\r\n\r\n const [roleAdd, setRoleAdd] = useState(false);\r\n const [roleEdit, setRoleEdit] = useState(false);\r\n const [roleDel, setRoleDel] = useState(false);\r\n\r\n let pageIndex = 1;\r\n let pageSize = 20;\r\n const [paginationConfig, setPaging] = useState({\r\n totalPages: 1,\r\n currentPage: 1,\r\n showMax: 5,\r\n size: \"sm\",\r\n threeDots: true,\r\n prevNext: true,\r\n center: true,\r\n onClick: function (page) {\r\n pageIndex = page;\r\n loadBaoCao();\r\n }\r\n });\r\n\r\n const loadBaoCao = async () => {\r\n try {\r\n const params = {\r\n pageIndex: pageIndex,\r\n pageSize: pageSize,\r\n keyword: filter,\r\n idQuanHuyen: '',\r\n loaiBaoCao: loaiBaoCao\r\n }\r\n const response = await BaoCaoChatLuongDatApi.getPaging(params);\r\n response.Items.forEach(item => {\r\n item.Checked = false;\r\n });\r\n paginationConfig.totalPages = response.TotalRow == 0 ? 1 : Math.ceil(response.TotalRow / pageSize);\r\n paginationConfig.currentPage = pageIndex;\r\n setPaging(paginationConfig);\r\n setBaoCao(response.Items);\r\n } catch (err) {\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n loadBaoCao();\r\n loadQuanHuyen();\r\n setRoleAdd(Authen.checkQuyen('BCCHATLUONGDAT_CREATE'));\r\n setRoleEdit(Authen.checkQuyen('BCCHATLUONGDAT_UPDATE'));\r\n setRoleDel(Authen.checkQuyen('BCCHATLUONGDAT_DELETE'));\r\n }, []);\r\n\r\n const timKiem = () => {\r\n loadBaoCao();\r\n }\r\n\r\n const saveData = (data) => {\r\n if (selectedOption) {\r\n data.IdQuanHuyen = selectedOption.value;\r\n }\r\n data.TapTin = tapTin;\r\n data.LoaiBaoCao = loaiBaoCao;\r\n console.log(data);\r\n if (data.Id === \"0\") {\r\n BaoCaoChatLuongDatApi.post(data).then(() => {\r\n setShow(false);\r\n loadBaoCao();\r\n })\r\n }\r\n else {\r\n BaoCaoChatLuongDatApi.put(data).then(() => {\r\n setShow(false);\r\n loadBaoCao();\r\n })\r\n }\r\n }\r\n\r\n const clickRow = (id) => {\r\n listBaoCaos.forEach(item => {\r\n if (item.Id === id) {\r\n item.Checked = !item.Checked;\r\n }\r\n });\r\n setBaoCao([...listBaoCaos]);\r\n }\r\n\r\n const handleShowAdd = () => {\r\n reset({\r\n Id: 0,\r\n Ten: '',\r\n SortOrder: null,\r\n TapTin: null,\r\n Status: true,\r\n MoTa: null,\r\n IdQuanHuyen: null\r\n }, [reset]);\r\n if (selectedOption==null) {\r\n setSelectedOption(listQuanHuyens[0]);\r\n }\r\n setTapTin(null);\r\n setShow(true)\r\n };\r\n\r\n const handleShowEdit = () => {\r\n let index = listBaoCaos.findIndex(x => x.Checked);\r\n if (index !== -1) {\r\n BaoCaoChatLuongDatApi.getDetail(listBaoCaos[index].Id).then((response) => {\r\n reset({\r\n Id: response.Id,\r\n Ten: response.Ten,\r\n TapTin: response.TapTin,\r\n SortOrder: response.SortOrder,\r\n Status: response.Status,\r\n IdQuanHuyen: response.IdQuanHuyen,\r\n MoTa: response.MoTa\r\n }, [reset]);\r\n setTapTin(response.TapTin);\r\n setShow(true);\r\n let index = listQuanHuyens.findIndex(x => x.value == response.IdQuanHuyen);\r\n if (index >= 0) {\r\n setSelectedOption(listQuanHuyens[index]);\r\n }\r\n else {\r\n setSelectedOption(listQuanHuyens[0]);\r\n }\r\n });\r\n }\r\n }\r\n\r\n const handleShowDel = () => {\r\n let index = listBaoCaos.findIndex(x => x.Checked);\r\n if (index !== -1) {\r\n let lstId = [];\r\n listBaoCaos.filter(x => x.Checked).forEach(element => {\r\n lstId.push(element.Id);\r\n });\r\n ThongBao.printConfirmationDialog(\"Bạn có muốn xóa khoảng đất đã chọn đi không?\", () => {\r\n BaoCaoChatLuongDatApi.delete(lstId).then(() => {\r\n ThongBao.printSuccessMessage(\"Xóa khoảnh đất thành công!\");\r\n loadBaoCao();\r\n });\r\n });\r\n }\r\n }\r\n\r\n const checkBoHandler = () => {\r\n\r\n }\r\n\r\n const onChangeQuanHuyen = (event) => {\r\n setSelectedOption(event);\r\n }\r\n\r\n function loadQuanHuyen() {\r\n QuanHuyenApi.getAll().then((response) => {\r\n let list = [];\r\n list.push({ value: '10', label: 'Xã, thị trấn' });\r\n response.forEach(item => {\r\n list.push({ value: item.Id, label: item.Ten });\r\n })\r\n setQuanHuyen(list);\r\n })\r\n }\r\n\r\n const openFile = () => {\r\n setShowQuanLyTapTin(true);\r\n }\r\n\r\n const onChangeFilter = (e) => {\r\n setFilter(e.target.value);\r\n }\r\n\r\n const closeModalQuanLyTapTin = () => {\r\n setShowQuanLyTapTin(false);\r\n }\r\n\r\n const huyTapTin = () => {\r\n setTapTin(null);\r\n }\r\n\r\n return (\r\n
\r\n
\r\n
\r\n
SỐ LIỆU \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {roleAdd == true ?
\r\n
\r\n
\r\n
{/* className=\"table-responsive\" */}\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n \r\n Số liệu \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n )\r\n}\r\n","import axiosClient from './axiosClient';\r\n\r\nconst LienKetWebSiteApi = {\r\n\r\n create:(params) => {\r\n const url = '/lienketwebsite';\r\n return axiosClient.post(url, params);\r\n \r\n },\r\n\r\n update:(params) => {\r\n const url = '/lienketwebsite';\r\n console.log(params);\r\n return axiosClient.put(url, params);\r\n },\r\n\r\n getDetail: (id) =>{\r\n const url = '/lienketwebsite/getbyid/' + id;\r\n return axiosClient.get(url);\r\n },\r\n\r\n Delete:(Id) => {\r\n const url = '/lienketwebsite/'+ Id;\r\n console.log(url);\r\n return axiosClient.delete(url);\r\n },\r\n\r\n get:(params) => {\r\n const url = '/lienketwebsite/paging';\r\n return axiosClient.get(url, {params});\r\n }\r\n\r\n}\r\n\r\nexport default LienKetWebSiteApi;","import React, { useState, useEffect } from 'react'\r\nimport { Modal } from 'react-bootstrap';\r\nimport { useForm } from 'react-hook-form';\r\nimport LienKetWebsiteApi from '../../../api/LienKetWebsiteApi';\r\nimport '../../../css/reacttab.css';\r\nimport Pagination from 'react-bootstrap-4-pagination';\r\nimport '../../../css/apppublic.css';\r\nimport Authen from '../../../core/Authen';\r\nimport { confirmAlert } from 'react-confirm-alert';\r\nimport Select from 'react-select';\r\nimport '../../../css/reactselect.css';\r\nimport { QuanLyTapTin } from '../../../shared/quanlytaptin/QuanLyTapTin';\r\nimport ThongBao from '../../../core/ThongBao';\r\n\r\nexport const LienKetWebsite = () => {\r\n var apiUrl = process.env.REACT_APP_API_URL.replace('api', '');\r\n const [listLienKetWebsite, setListLienKetWebsite] = useState([]);\r\n const [filter, setFilter] = useState('');\r\n const [show, setShow] = useState(false);\r\n const [isEdit, setIsEdit] = useState(false);\r\n const [isXem, setIsXem] = useState(false);\r\n const [lienKetWebsite, setLienKetWebsite] = useState({});\r\n const [type, setType] = useState({});\r\n const [opt, setOpt] = useState({});\r\n const [roleAdd, setRoleAdd] = useState(false);\r\n const [roleEdit, setRoleEdit] = useState(false);\r\n const [roleDel, setRoleDel] = useState(false);\r\n var noImage = \"/uploadfiles/website/no_image-100x100.jpg\";\r\n const url = process.env.REACT_APP_API_URL.replace('api', '');\r\n const [srcImage, setSrcImage] = useState(noImage);\r\n const [showModalImage, setShowModalImage] = useState(false);\r\n\r\n const { handleSubmit, register, reset, errors } = useForm();\r\n\r\n const [nhanVien, setNhanVien] = useState({ value: '1', label: 'Trang chủ' });\r\n\r\n useEffect(() => {\r\n setNhanVien(Authen.getUser());\r\n setRoleAdd(Authen.checkQuyen('LIENKETWEBSITE_CREATE'));\r\n setRoleEdit(Authen.checkQuyen('LIENKETWEBSITE_UPDATE'));\r\n setRoleDel(Authen.checkQuyen('LIENKETWEBSITE_DELETE'));\r\n }, []);\r\n\r\n const options = [\r\n { value: '1', label: 'Trang chủ' },\r\n { value: '2', label: 'Trang sản phẩm' },\r\n { value: '3', label: 'Banner' }\r\n ]\r\n\r\n const [paginationConfig, setPaginationConfig] = useState({\r\n totalPages: 1,\r\n currentPage: 1,\r\n showMax: 5,\r\n size: 'sm',\r\n threeDots: true,\r\n prevNext: true,\r\n onClick: function (page) {\r\n if (page != null) {\r\n pageIndex = page;\r\n loadLienKetWebsite();\r\n }\r\n }\r\n });\r\n\r\n var pageIndex = 1, pageSize = 20;\r\n\r\n const loadLienKetWebsite = async () => {\r\n try {\r\n const params = {\r\n keyword: filter,\r\n pageIndex: pageIndex,\r\n pageSize: pageSize\r\n }\r\n const res = await LienKetWebsiteApi.get(params);\r\n res.Items.map((x) => {\r\n x.Checked = false\r\n });\r\n setListLienKetWebsite(res.Items);\r\n paginationConfig.totalPages = Math.ceil(res.TotalRow == 0 ? 1 : res.TotalRow / pageSize);\r\n paginationConfig.currentPage = pageIndex;\r\n setPaginationConfig(paginationConfig);\r\n setIsEdit(false);\r\n setLienKetWebsite({});\r\n }\r\n catch {\r\n console.log('loi roi');\r\n }\r\n\r\n }\r\n\r\n useEffect(() => {\r\n loadLienKetWebsite();\r\n }, [])\r\n\r\n const setFilt = (e) => {\r\n setFilter(e.target.value);\r\n }\r\n\r\n const Timkiem = () => {\r\n loadLienKetWebsite();\r\n }\r\n\r\n const handleClose = () => {\r\n setShow(false);\r\n setIsXem(false);\r\n }\r\n const handleShow = () => {\r\n reset({\r\n Id: 0,\r\n Ten: '',\r\n Image: '',\r\n Url: '',\r\n Status: true\r\n }, [reset])\r\n setIsXem(false);\r\n loadType();\r\n setShow(true);\r\n setSrcImage(noImage);\r\n }\r\n const handleShowEdit = (isXem) => {\r\n let index = listLienKetWebsite.findIndex(x => x.Checked);\r\n if (index !== -1) {\r\n LienKetWebsiteApi.getDetail(listLienKetWebsite[index].Id).then((response) => {\r\n reset({\r\n Id: response.Id,\r\n Ten: response.Ten,\r\n Image: response.Image,\r\n Url: response.Url,\r\n Status: response.Status\r\n }, [reset])\r\n setSrcImage(response.Image);\r\n setIsXem(isXem);\r\n setIsEdit(true);\r\n setShow(true);\r\n });\r\n }\r\n }\r\n\r\n const rowClick = (Id) => {\r\n listLienKetWebsite.map((x) => {\r\n if (x.Id === Id) {\r\n x.Checked = !x.Checked;\r\n }\r\n else {\r\n x.Checked = false;\r\n }\r\n });\r\n if (listLienKetWebsite.filter(x => x.Checked == true).length > 0) {\r\n setIsEdit(true);\r\n }\r\n else {\r\n setIsEdit(false);\r\n }\r\n setListLienKetWebsite([...listLienKetWebsite]);\r\n }\r\n\r\n const handleShowData = () => {\r\n setIsXem(true);\r\n setShow(true);\r\n }\r\n\r\n const onSubmit = async (data) => {\r\n try {\r\n data.Image = srcImage;\r\n if (data.Id == \"0\") {\r\n data.Id = 1;\r\n const res = await LienKetWebsiteApi.create(data);\r\n }\r\n else {\r\n const res = await LienKetWebsiteApi.update(data);\r\n }\r\n setShow(false);\r\n setIsXem(false);\r\n setIsEdit(false);\r\n setLienKetWebsite({});\r\n loadLienKetWebsite();\r\n }\r\n catch (ex) {\r\n console.log(ex.message);\r\n }\r\n\r\n }\r\n\r\n const loadType = () => {\r\n if (lienKetWebsite.Type != null) {\r\n let optLienKetWebsite =\r\n {\r\n value: lienKetWebsite.Type,\r\n label: lienKetWebsite.Type == 1 ? \"Trang chủ\" : lienKetWebsite.Type == 2 ? \"Trang sản phẩm\" : \"Banner\"\r\n }\r\n setOpt(optLienKetWebsite);\r\n }\r\n else {\r\n setOpt({ value: '1', label: 'Trang chủ' });\r\n }\r\n }\r\n\r\n const onFileSelected = (event) => {\r\n setSrcImage(event);\r\n }\r\n\r\n const showViewModalImage = () => {\r\n setShowModalImage(true);\r\n }\r\n const CloseViewModalImage = () => {\r\n setShowModalImage(false);\r\n }\r\n\r\n const onChangeSelect = (optionSelected) => {\r\n debugger;\r\n setOpt(optionSelected);\r\n }\r\n\r\n const alertDell = () => {\r\n var lst = listLienKetWebsite.filter(x => x.Checked == true);\r\n if (lst.length > 0) {\r\n ThongBao.printConfirmationDialog(\"Bạn có đồng ý xóa dữ liệu đã chọn hay không?\", () => {\r\n LienKetWebsiteApi.Delete(lst[0].Id).then(() => {\r\n loadLienKetWebsite();\r\n setIsEdit(false);\r\n });\r\n });\r\n }\r\n // confirmAlert({\r\n // title: 'Xóa lienKetWebsite',\r\n // message: 'Bạn có chắc muốn xóa lienKetWebsite',\r\n // buttons: [\r\n // {\r\n // label: 'Đồng ý',\r\n // onClick: async () => {\r\n // console.log(lienKetWebsite.Id);\r\n // const res = await LienKetWebsiteApi.Delete(lienKetWebsite.Id);\r\n // loadLienKetWebsite();\r\n // setLienKetWebsite({});\r\n // setIsEdit(false);\r\n // }\r\n // },\r\n // {\r\n // label: 'không',\r\n // onClick: () => {\r\n // }\r\n // }\r\n // ]\r\n // });\r\n }\r\n\r\n return (\r\n
\r\n
\r\n
\r\n
\r\n
Liên kết website \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {roleAdd == true ? handleShowEdit(false)}> : ''}\r\n {roleDel == true ? handleShowEdit(true)}> \r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n Liên kết website \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n
onFileSelected(e)}> \r\n
\r\n\r\n\r\n );\r\n};\r\n","import React, { useEffect, useState } from 'react'\r\nimport Select from 'react-select';\r\nimport QuanHuyenApi from '../../api/QuanHuyenApi';\r\n\r\n\r\nexport const SelectXa = (props) => {\r\n\r\n const [listXas, setXa] = useState([]);\r\n const [selectedOption, setSelectedOption] = useState();\r\n\r\n useEffect(() => {\r\n\r\n loadXa();\r\n\r\n }, []);\r\n\r\n\r\n const loadXa = () => {\r\n QuanHuyenApi.getAll().then((response) => {\r\n let list = [];\r\n response.forEach(item => {\r\n list.push({ value: item.Ma, label: item.Ten });\r\n\r\n if (list.length > 0) {\r\n const index = list.findIndex(x => x.value == props.Ma);\r\n\r\n if (index != -1) {\r\n setSelectedOption(list[index]);\r\n props.onChangeXaProps(list[index]);\r\n }\r\n }\r\n });\r\n setXa(list);\r\n })\r\n }\r\n\r\n const onChangeXa = (e) => {\r\n setSelectedOption(e);\r\n props.onChangeXaProps(e);\r\n }\r\n\r\n return (\r\n
({\r\n ...theme,\r\n borderRadius: 0,\r\n height: 30,\r\n spacing: {\r\n controlHeight: 30,\r\n menuGutter: 1,\r\n baseUnit: 2,\r\n }\r\n })}\r\n />\r\n )\r\n}\r\n","import React, { useState, useEffect } from 'react'\r\nimport { Modal } from 'react-bootstrap';\r\nimport { useForm } from 'react-hook-form';\r\nimport Select from 'react-select';\r\nimport BanDoChatLuongDatApi from '../../api/BanDoChatLuongDatApi';\r\nimport ChuGiaiApi from '../../api/ChuGiaiApi';\r\nimport ThongBao from '../../core/ThongBao';\r\nimport { Loading } from '../loading/Loading';\r\nimport { SelectHuyen } from '../selecthuyen/SelectHuyen';\r\nimport { SelectXa } from '../selectxa/SelectXa';\r\n\r\n\r\nexport const ModalChatLuong = (props) => {\r\n const [show, setShow] = useState(false);\r\n const { register, handleSubmit, reset } = useForm();\r\n const [xa, setXa] = useState({});\r\n const [listDvdds, setListDvdd] = useState([]);\r\n const [selectedDvdd, setSelectedDvdd] = useState();\r\n const [listDoDays, setListDoDay] = useState([]);\r\n const [selectedDoDay, setSelectedDoDay] = useState();\r\n const [listDoDocs, setListDoDoc] = useState([]);\r\n const [selectedDoDoc, setSelectedDoDoc] = useState();\r\n const [listTuois, setListTuoi] = useState([]);\r\n const [selectedTuoi, setSelectedTuoi] = useState();\r\n const [listDaLans, setListDaLan] = useState([]);\r\n const [selectedDaLan, setSelectedDaLan] = useState();\r\n const [listDoPhis, setListDoPhi] = useState([]);\r\n const [selectedDoPhi, setSelectedDoPhi] = useState();\r\n const [listTpcgs, setListTpcg] = useState([]);\r\n const [selectedTpcg, setSelectedTpcg] = useState();\r\n const [tuoi, selectTuoi] = useState('');\r\n const [day, selectDay] = useState('');\r\n const [doc, selectDoc] = useState('');\r\n const [dalan, selectDalan] = useState('');\r\n const [tpcg, selectTpcg] = useState('');\r\n const [fe, selectFe] = useState('');\r\n const [loading, setLoading] = useState(false);\r\n\r\n const handleClose = () => {\r\n props.handleClose();\r\n setShow(false);\r\n };\r\n\r\n useEffect(() => {\r\n if (props.showModal === true) {\r\n reset({\r\n id: props.thongTin.id,\r\n maxa: props.thongTin.maxa,\r\n tenxa: props.thongTin.tenxa,\r\n dvdd_h: props.thongTin.dvdd_h,\r\n dt_ha: props.thongTin.dt_ha,\r\n dungtichha: props.thongTin.dungtichha,\r\n donobazo: props.thongTin.donobazo,\r\n tongcation: props.thongTin.tongcation,\r\n phkcl: props.thongTin.phkcl\r\n\r\n }, [reset]);\r\n ChuGiaiApi.getChatLuongDat().then((res) => {\r\n let list = [];\r\n\r\n\r\n\r\n res.forEach(item => {\r\n list.push({\r\n value: item.dvdd_h,\r\n label: item.dvdd_h,\r\n dvdd_h: item.dvdd_h,\r\n pctuoi: item.phancaptuoi,\r\n pcdoc: item.phancapdoc,\r\n pctpcg: item.phancaptpcg,\r\n pcdalan: item.phancapdalan,\r\n pcdoday: item.phancapdoday,\r\n pcfe: item.phancapfe,\r\n tuoi: item.tuoi,\r\n dodoc: item.dodoc,\r\n tpcg: item.tpcg,\r\n dalan: item.dalan,\r\n doday: item.doday,\r\n dophi: item.dophi,\r\n });\r\n if (item.dvdd_h === props.thongTin.dvdd_h) {\r\n setSelectedDvdd({\r\n value: item.dvdd_h,\r\n label: item.dvdd_h,\r\n pctuoi: item.phancaptuoi,\r\n pcdoc: item.phancapdoc,\r\n pctpcg: item.phancaptpcg,\r\n pcdalan: item.phancapdalan,\r\n pcdoday: item.phancapdoday,\r\n pcfe: item.phancapfe,\r\n tuoi: item.tuoi,\r\n dodoc: item.dodoc,\r\n tpcg: item.tpcg,\r\n dalan: item.dalan,\r\n doday: item.doday,\r\n dophi: item.dophi,\r\n });\r\n\r\n selectTuoi(item.phancaptuoi)\r\n selectDalan(item.phancapdalan);\r\n selectDay(item.phancapdoday);\r\n selectDoc(item.phancapdoc);\r\n selectFe(item.phancapfe);\r\n selectTpcg(item.phancaptpcg);\r\n }\r\n\r\n });\r\n\r\n\r\n setListDvdd(list);\r\n setShow(true);\r\n\r\n // let index = res[0].rows.findIndex(x => x.value === props.thongTin.maDaLan);\r\n // if (index !== -1) {\r\n // setSelectedDaLan(res[0].rows[index]);\r\n // }\r\n // index = res[1].rows.findIndex(x => x.value === props.thongTin.maDHTD);\r\n // if (index !== -1) {\r\n // setSelectedDiaHinh(res[1].rows[index]);\r\n // }\r\n // index = res[2].rows.findIndex(x => x.value === props.thongTin.maDoDay);\r\n // if (index !== -1) {\r\n // setSelectedDoDay(res[2].rows[index]);\r\n // }\r\n // index = res[3].rows.findIndex(x => x.value === props.thongTin.maDoDoc);\r\n // if (index !== -1) {\r\n // setSelectedDoDoc(res[3].rows[index]);\r\n // }\r\n // index = res[4].rows.findIndex(x => x.value === props.thongTin.maDoPhi);\r\n // if (index !== -1) {\r\n // setSelectedDoPhi(res[4].rows[index]);\r\n // }\r\n // index = res[5].rows.findIndex(x => x.value === props.thongTin.maGley);\r\n // if (index !== -1) {\r\n // setSelectedGley(res[0].rows[index]);\r\n // }\r\n // index = res[6].rows.findIndex(x => x.value === props.thongTin.maTieu);\r\n // if (index !== -1) {\r\n // setSelectedTieu(res[0].rows[index]);\r\n // }\r\n // index = res[7].rows.findIndex(x => x.value === props.thongTin.maTuoi);\r\n // if (index !== -1) {\r\n // setSelectedTuoi(res[0].rows[index]);\r\n // }\r\n })\r\n // BanDoChatLuongDatApi.getAllDanhMuc().then((res) => {\r\n // \r\n // })\r\n }\r\n\r\n }, [props.showModal]);\r\n\r\n\r\n\r\n const onChangeXa = (e) => {\r\n setXa(e);\r\n }\r\n\r\n const onChangeDvdd = (e) => {\r\n setSelectedDvdd(e);\r\n selectTuoi(e.pctuoi);\r\n selectDalan(e.pcdalan);\r\n selectDay(e.pcdoday);\r\n selectDoc(e.pcdoc);\r\n selectFe(e.pcfe);\r\n selectTpcg(e.pctpcg);\r\n }\r\n\r\n const onSubmit = (data) => {\r\n\r\n try {\r\n\r\n data.maxa = xa?.value;\r\n data.tenxa = xa?.label;\r\n data.id = props.thongTin.id;\r\n data.dvdd_h = selectedDvdd?.value;\r\n data.dt_ha = props.thongTin.dt_ha;\r\n data.dungtichha = props.thongTin.dungtichha;\r\n data.donobazo = props.thongTin.donobazo;\r\n data.tongcation = props.thongTin.tongcation;\r\n data.oc = props.thongTin.tongcation;\r\n data.phkcl = props.thongTin.phkcl;\r\n data.tuoi = selectedDvdd?.tuoi;\r\n data.do_doc = selectedDvdd?.dodoc;\r\n data.tpcg = selectedDvdd?.tpcg;\r\n data.tang_day = selectedDvdd?.doday;\r\n data.da_lan = selectedDvdd?.dalan;\r\n data.fe = selectedDvdd?.dophi;\r\n setLoading(true);\r\n if (data.id != null) {\r\n console.log(data);\r\n BanDoChatLuongDatApi.update(data).then((res) => {\r\n ThongBao.printSuccessMessage('Cập nhật thành công!');\r\n handleClose();\r\n props.changeMapComplete();\r\n setLoading(false);\r\n }, (err) => {\r\n setLoading(false);\r\n ThongBao.printErrorMessage(err);\r\n });\r\n }\r\n else {\r\n console.log('noid');\r\n }\r\n }\r\n catch (ex) {\r\n }\r\n\r\n }\r\n\r\n return (\r\n \r\n \r\n Thông tin chất lượng đất đai \r\n \r\n \r\n ![logo](\"/img/logo.png\"){kind=logo}
\r\n