ibms-dome/Backend/Views/DeviceManage/Index.cshtml

3121 lines
158 KiB
Plaintext
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@{
ViewData["MainNum"] = "2";
ViewData["SubNum"] = "2";
ViewData["Title"] = "設備管理";
}
<div class="container-fluid">
<div class="row flex-nowrap wrapper">
<div class="col-md-2 col-1 pl-0 pr-0 collapse width border-right sidebar vh-100 overflow-auto">
<div class="list-group border-0 card text-center text-md-left" id="sidebar">
<div class="border bg-light rounded-top">
<div class="form-group p-2 m-0 rounded-top">
<input type="text" class="form-control form-control-lg shadow-inset-2 m-0" id="js_list_accordion_filter" placeholder="">
</div>
<div id="js_list_accordion" class="accordion accordion-hover accordion-clean js-list-filter">
</div>
<span class="filter-message js-filter-message"></span>
</div>
</div>
</div>
<div class="col-auto px-0">
<a href="javascript:;" id="collapse" data-target=".sidebar" data-toggle="collapse" class="btn btn-default btn-xs btn-icon waves-effect waves-themed" style="border-radius: 0;" aria-expanded="true">
<span class="collapsed-reveal"><i class="fal fa-angle-left fa-lg py-3"></i></span>
<span class="collapsed-hidden"><i class="fal fa-angle-right fa-lg py-3"></i></span>
</a>
</div>
<main class="col px-5 pl-md-2 main">
<ol class="breadcrumb page-breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0);">首頁</a></li>
<li class="breadcrumb-item">設備管理</li>
<li class="breadcrumb-item active">設備管理</li>
<li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>
<div class="subheader">
<h1 class="subheader-title">
<i class="subheader-icon fal fa-crosshairs"></i> <span id="select-main-system-name"></span> - <span id="select-sub-system-name"></span>
</h1>
</div>
<div class="row">
<div class="col-xl-12">
<div id="panel-5" class="panel">
<div class="panel-container show">
<div class="panel-content">
<div class="mb-5 d-flex align-items-center justify-content-start ">
<span class="mr-2" style="font-size:18px">樓層</span>
<div class="floor-panel-wrap">
</div>
</div>
<div class="mb-5">
<div class="card p-3 w-100">
<div class="row">
<div class="col-12">
<div class="row mb-2">
<h3 class="mr-2">當前模式:</h3>
<h3 class="font-weight-bolder mr-2" id="floor-map-mode-text">檢視模式</h3>
@*<div class="edit-mode" id="floor-map-edit-mode-btn-wrap" style="display:none">
<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="CancelFloorMapEdit()">取消</button>
<button type="button" class="btn btn-primary waves-effect waves-themed" onclick="SaveFloorMapEdit()">確定</button>
</div>*@
</div>
</div>
<div class="col-12 mb-2" id="floor_map" style="height : 50vh!important;">
</div>
<div class="col-12">
<div class="edit-mode" id="floor-map-edit-mode-btn-wrap" style="display:none">
<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="CancelFloorMapEdit()">取消</button>
<button type="button" class="btn btn-primary waves-effect waves-themed" onclick="SaveFloorMapEdit()">確定</button>
</div>
</div>
</div>
</div>
</div>
<div class="mb-5">
<div class="card p-3 w-100">
<div class="card-header d-flex align-items-center flex-wrap">
<div class="card-title">
設備基本資料
</div>
<div class="ml-auto">
<a href="javascript:;" class="btn btn-success waves-effect waves-themed" id="addDevice-btn" onclick="AddDevice()"><span class="fal fa-plus mr-1"></span>新增設備</a>
<a href="javascript:;" class="btn btn-primary waves-effect waves-themed" id="device-master-list-btn" style="display:none"><span class="fal fa-plus mr-1"></span>分電盤</a>
</div>
</div>
<div class="card-body row">
<div class="col-12">
<!-- datatable start -->
<table id="device_info_table" class="table table-bordered table-hover m-0 text-center">
<thead class="thead-themed">
<tr>
<th></th>
<th>序</th>
<th>棟別</th>
<th>系統大類</th>
<th>系統小類</th>
<th>樓層</th>
<th>設備編號</th>
<th>設備名稱</th>
<th>地圖座標</th>
<th>防災類別</th>
<th>功能</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="mb-5">
<div class="card p-3 w-100">
<div class="card-header d-flex align-items-center flex-wrap">
<div class="card-title">
設備種類設定
</div>
</div>
<div class="card-body row">
<div class="col-12">
<!-- datatable start -->
<table id="device_kind_table" class="table table-bordered table-hover m-0 text-center">
<thead class="thead-themed">
<tr>
<th>序</th>
<th>設備機型</th>
<th>設備icon</th>
<th>正常狀態</th>
<th>關機狀態</th>
<th>異常狀態</th>
<th>功能</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Modal 設備基本資料(新增) -->
<div class="modal fade" id="device-info-add-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
設備基本資料 - 新增
</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-center justify-content-start">
<div class="col-12">
<div class="row mb-2 align-items-center justify-content-start">
<span class="col-1">棟別</span>
<div class="col-11 row">
<div id="import-temp-building-tag-list" class="col-12">
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row mb-2 align-items-center justify-content-start">
<span class="col-1">系統別</span>
<div class="col-11 row align-items-start">
<div id="import-temp-system-tag-list" class="col-12">
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row mb-2 align-items-center justify-content-start">
<span class="col-1">樓層</span>
<div class="col-11 row align-items-start">
<div id="import-temp-floor-tag-list" class="col-12">
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row mb-2 d-flex align-items-center justify-content-start">
<span class="col-1">設備種類</span>
<div class="col-11 row align-items-start">
<div id="import-temp-name-tag-list" class="col-12">
</div>
</div>
</div>
</div>
<div class="col-12 row">
<div class="col-12">
<!-- datatable start -->
<table id="device_import_check_temp_table" class="table table-bordered table-hover m-0 text-center">
<thead class="thead-themed">
<tr>
<th>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="select-all-device-number">
<label class="custom-control-label" for="select-all-device-number">全選</label>
</div>
</th>
<th>序</th>
<th>設備編號</th>
<th>設備名稱</th>
<th>防災類別</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="save-device-add-btn" onclick="SaveDeviceAdd()">確定</button>
</div>
</div>
</div>
</div>
</div>
<!-- /.Modal 設備基本資料(新增) -->
<!-- Modal 設備基本資料(修改) -->
<div class="modal fade" id="device-info-edit-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
設備基本資料 - 修改
</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<form class="device-info-edit-form" id="device-info-edit-form">
<div class="row">
<div class="form-group col-6">
<label class="form-label" for="device_building_name_modal">棟別</label><br>
<span id="device_building_name_modal" class="fw-900"></span>
</div>
<div class="form-group col-6">
<label class="form-label" for="system_main_code_modal">系統大類</label><br>
<span id="device_main_system_name_modal" class="fw-900"></span>
</div>
<div class="form-group col-6">
<label class="form-label" for="system_main_code_modal">系統小類</label><br>
<span id="device_sub_system_name_modal" class="fw-900"></span>
</div>
<div class="form-group col-6">
<label class="form-label" for="system_main_code_modal">樓層</label><br>
<span id="device_floor_name_modal" class="fw-900"></span>
</div>
<div class="form-group col-12">
<label class="form-label" for="device_number_modal"><span class="text-danger">*</span>設備編號</label><br>
<span id="device_number_modal" class="fw-900"></span>
</div>
<div class="form-group col-12">
<label class="form-label" for="device_name_modal"><span class="text-danger">*</span>設備名稱</label>
<input type="text" id="device_name_modal" name="device_name_modal" class="form-control">
</div>
<div class="form-group col-12" id="device-coordinate-wrap">
<label class="form-label" for="device_coordinate_modal"><span class="text-danger">*</span>地圖座標</label>
<div class="row">
<div class="col-6">
<label class="form-label" for="device_coordinate_x_modal">x</label>
<input type="number" step="0.001" id="device_coordinate_x_modal" name="device_coordinate_x_modal" class="form-control">
</div>
<div class="col-6">
<label class="form-label" for="device_coordinate_y_modal">y</label>
<input type="number" step="0.001" id="device_coordinate_y_modal" name="device_coordinate_y_modal" class="form-control">
</div>
</div>
</div>
<div class="form-group col-12">
<label class="form-label" for="device_disaster_modal">防災類別</label>
<div class="row ml-2 mr-1" id="disaster_check">
</div>
</div>
<div class="form-group col-8" id="device-ip-wrap">
<label class="form-label" for="device_ip_modal">設備IP</label>
<input type="text" id="device_ip_modal" name="device_ip_modal" class="form-control">
</div>
<div class="form-group col-4" id="device-port-wrap">
<label class="form-label" for="device_port_modal">設備Port</label>
<input type="text" id="device_port_modal" name="device_port_modal" class="form-control">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="SaveDeviceInfoEdit()">確定</button>
</div>
</div>
</div>
</div>
<!-- /.Modal 設備基本資料(修改) -->
<!-- Modal 設備種類資料 -->
<div class="modal fade" id="device-kind-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
設備種類 - 修改
</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<form class="device-kind-form" id="device-kind-form">
<div class="row">
<div class="form-group col-12">
<label class="form-label" for="device_kind_name_modal">設備機型</label><br>
<span id="device_kind_name_modal" class="fw-900"></span>
</div>
<div class="form-group col-12">
<label class="form-label" for="device_image_modal">設備icon</label>
<input type="file" id="device_image_modal" name="device_image_modal" class="form-control" accept="image/*">
</div>
<div class="form-group col-12">
<div class="row">
<div class="col-2 d-flex justify-content-center align-items-center">
<div class="form-group">
<label class="form-label">燈號 1</label>
</div>
</div>
<div class="col row">
<div class="form-group col">
<label class="form-label" for="device_normal_text_modal">顯示文字</label>
<input type="text" id="device_normal_text_modal" name="device_normal_text_modal" class="form-control" placeholder="正常/開機/運作中" maxlength="50" />
</div>
<div class="form-group col">
<label class="form-label" for="device_normal_point_name_modal">點位名稱</label>
<select class="form-control" id="device_normal_point_name_modal">
</select>
</div>
<div class="form-group col">
<label class="form-label" for="device_normal_point_col_modal">點位欄位</label>
<select class="form-control" id="device_normal_point_col_modal" disabled>
<option value="" selected disabled>未選擇</option>
<option value="Facets_key">Facets_key</option>
</select>
</div>
<div class="form-group col">
<label class="form-label" for="device_normal_point_value_modal">點位值</label>
<select class="form-control" id="device_normal_point_value_modal" disabled>
<option value="" selected disabled>未選擇</option>
<option value="trueText">trueText</option>
<option value="falseText">falseText</option>
</select>
</div>
<div class="form-group col">
<label class="form-label" for="device_normal_color_modal">燈號</label>
<input type="text" id="device_normal_color_modal" name="device_normal_color_modal" class="form-control" placeholder="#123456" maxlength="7" />
</div>
<div class="form-group col d-flex align-items-center" style="display: none !important">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="device_normal_flashing_modal" name="device_normal_flashing_modal" class="custom-control-input" value="1">
<label class="custom-control-label" for="device_normal_flashing_modal">是否閃爍</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-2 d-flex justify-content-center align-items-center">
<div class="form-group">
<label class="form-label">燈號 2</label>
</div>
</div>
<div class="col row">
<div class="form-group col">
<label class="form-label" for="device_close_text_modal">顯示文字</label>
<input type="text" id="device_close_text_modal" name="device_close_text_modal" class="form-control" placeholder="關機/非運作" maxlength="50" />
</div>
<div class="form-group col">
<label class="form-label" for="device_close_point_name_modal">點位名稱</label>
<select class="form-control" id="device_close_point_name_modal">
</select>
</div>
<div class="form-group col">
<label class="form-label" for="device_close_point_col_modal">點位欄位</label>
<select class="form-control" id="device_close_point_col_modal" disabled>
<option value="" selected disabled>未選擇</option>
<option value="Facets_key">Facets_key</option>
</select>
</div>
<div class="form-group col">
<label class="form-label" for="device_close_point_value_modal">點位值</label>
<select class="form-control" id="device_close_point_value_modal" disabled>
<option value="" selected disabled>未選擇</option>
<option value="trueText">trueText</option>
<option value="falseText">falseText</option>
</select>
</div>
<div class="form-group col">
<label class="form-label" for="device_close_color_modal">燈號</label>
<input type="text" id="device_close_color_modal" name="device_close_color_modal" class="form-control" placeholder="#123456" maxlength="7" />
</div>
<div class="form-group col d-flex align-items-center" style="display:none !important">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="device_close_flashing_modal" name="device_close_flashing_modal" class="custom-control-input" value="1">
<label class="custom-control-label" for="device_close_flashing_modal">是否閃爍</label>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-2 d-flex justify-content-center align-items-center">
<div class="form-group">
<label class="form-label">異常燈號</label>
</div>
</div>
<div class="col">
<div class="row">
<div class="form-group col">
<label class="form-label" for="device_error_text_modal">顯示文字</label>
<input type="text" id="device_error_text_modal" name="device_error_text_modal" class="form-control" placeholder="異常" maxlength="50" />
</div>
<div class="form-group col">
<label class="form-label" for="device_error_point_name_modal">點位名稱</label>
<select class="form-control" id="device_error_point_name_modal">
</select>
</div>
<div class="form-group col">
<label class="form-label" for="device_error_point_col_modal">點位欄位</label>
<select class="form-control" id="device_error_point_col_modal" disabled>
<option value="" selected disabled>未選擇</option>
<option value="Facets_key">Facets_key</option>
</select>
</div>
<div class="form-group col">
<label class="form-label" for="device_error_point_value_modal">點位值</label>
<select class="form-control" id="device_error_point_value_modal" disabled>
<option value="" selected disabled>未選擇</option>
<option value="trueText">trueText</option>
<option value="falseText">falseText</option>
</select>
</div>
<div class="form-group col">
<label class="form-label" for="device_error_color_modal">燈號</label>
<input type="text" id="device_error_color_modal" name="device_error_color_modal" class="form-control" placeholder="#123456" maxlength="7" />
</div>
</div>
<div class="row">
<div class="form-group col d-flex flex-column justify-content-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="device_error_flashing_modal" name="device_error_flashing_modal" class="custom-control-input" value="1">
<label class="custom-control-label" for="device_error_flashing_modal">是否閃爍</label>
</div>
<div class="custom-control custom-checkbox" style="display:none">
<input type="checkbox" id="device_error_independent_modal" name="device_error_independent_modal" class="custom-control-input" value="1">
<label class="custom-control-label" for="device_error_independent_modal">是否獨立顯示</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="save-device-kind-btn" onclick="SaveDeviceKind()">確定</button>
</div>
</div>
</div>
</div>
<!-- /.Modal 設備種類資料 -->
<!-- Modal 設備子節點資料 -->
<div class="modal fade" id="device-node-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
設備子節點 - 修改
</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<form class="device-node-form" id="device-node-form">
<div class="row">
<div class="form-group col-12">
<label class="form-label" for="device_node_name_modal"><span class="text-danger">*</span>設備子節點名稱</label><br>
<input type="text" id="device_node_name_modal" name="device_node_name_modal" class="form-control">
</div>
<div class="form-group col-12">
<label class="form-label" for="device_node_coordinate_modal"><span class="text-danger">*</span>地圖座標</label>
<div class="row">
<div class="col-6">
<label class="form-label" for="device_node_coordinate_x_modal">x</label>
<input type="number" step="0.001" id="device_node_coordinate_x_modal" name="device_node_coordinate_x_modal" class="form-control">
</div>
<div class="col-6">
<label class="form-label" for="device_node_coordinate_y_modal">y</label>
<input type="number" step="0.001" id="device_node_coordinate_y_modal" name="device_node_coordinate_y_modal" class="form-control">
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="SaveDeviceNode()">確定</button>
</div>
</div>
</div>
</div>
<!-- /.Modal 設備子節點資料 -->
<!-- Modal 設備Master list -->
<div class="modal fade" id="device-master-list-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
分電盤列表
</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<table id="device_master_table" class="table table-bordered table-hover m-0 text-center">
<thead class="thead-themed">
<tr>
<th>序</th>
<th>分電盤編號</th>
<th>分電盤名稱</th>
<th>分電盤icon</th>
<th>功能</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /.Modal 設備Master list -->
<!-- Modal 編輯 設備Master -->
<div class="modal fade" id="device-master-edit-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
編輯分電盤
</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<form class="device-master-form" id="device-master-form">
<div class="row">
<div class="form-group col-12">
<label class="form-label" for="device_master_number_modal">分電盤編號</label><br>
<span id="device_master_number_modal" class="fw-900"></span>
</div>
<div class="form-group col-12">
<label class="form-label" for="device_master_full_name_modal">分電盤名稱</label>
<input type="text" id="device_master_full_name_modal" name="device_master_full_name_modal" class="form-control">
</div>
<div class="form-group col-12">
<label class="form-label" for="device_master_icon_modal">設備icon</label>
<input type="file" id="device_master_icon_modal" name="device_master_icon_modal" class="form-control" accept="image/*">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="save-device-master-btn" onclick="SaveDeviceMaster()">確定</button>
</div>
</div>
</div>
</div>
<!-- /.Modal 編輯 設備Master -->
@section Scripts {
<script src="~/js/echarts.min.js"></script>
<script>
var buildingCollapses;
var selected_building_menu = {}, selected_floor_tag;
var chartDom, myChart, option,
floor_map_mode = "view", //平面圖當前模式
selected_temp_device, //被選擇要修改的設備
temp_device_on_floor_map = [] //暫存在地圖上新的位置;
var currentData = [];
var deviceInfoTable, selected_device_guid;
var deviceImportCheckTempTable,
deviceImportCheckTempFilterList = [],
selected_building_tag = "",
selected_system_tag = "",
selected_floor_tag = "",
selected_name_tag = "";
var selected_device_node_guid;
var selected_device_parents_collapses = [];
var deviceKindTable,
selected_device_kind_guid,
selected_device_building_tag,
selected_device_system_tag,
selected_device_floor_tag,
selected_device_name_tag;
var deviceMasterTable,
selected_device_master_guid;
$(function () {
$('#collapse').trigger("click");
//預設載入左方選單列表
GetBuildingMenuCollapse("");
//修改左方選單列表查詢條件
$("#js_list_accordion_filter").change(function (e) {
GetBuildingMenuCollapse($(this).val());
});
chartDom = document.getElementById("floor_map");
myChart = echarts.init(chartDom, null, { width: 'auto', });
$('.sidebar').on("shown.bs.collapse", function () {
setTimeout(function () {
myChart.resize();
}, 500);
});
$('.sidebar').on("hidden.bs.collapse", function () {
setTimeout(function () {
myChart.resize();
}, 500);
});
//#region 設備基本資料DataTable
deviceInfoTable = $("#device_info_table").DataTable({
"pageLength": 20,
"columns": [
{
"className": 'dt-control',
"orderable": false,
"data": null,
"defaultContent": '<i class="fal fa-plus"></i>'
},
{
"data": null,
"render": function (data, type, row, meta) {
return meta.row + 1;
}
},
{
"data": "building_full_name"
},
{
"data": "main_system_full_name"
},
{
"data": "sub_system_full_name"
},
{
"data": "floor_full_name"
},
{
"data": "device_number"
},
{
"data": "device_full_name"
},
{
"data": "device_coordinate"
},
{
"data": "device_disaster_type_text"
},
{
"data": null,
"createdCell": function (td, cellData, rowData, row, col) {
$(td).empty();
if (rowData != null && (rowData.device_name_tag == "L1" || rowData.device_name_tag == "L2")) {
$(td).html(`
<button class="btn btn-primary edit-btn">修改</button>
<button class="btn btn-info add-device-node-btn">加入子節點</button>
<button class="btn btn-danger del-btn">刪除</button>`)
} else {
$(td).html(`<button class="btn btn-primary edit-btn">修改</button> <button class="btn btn-danger del-btn">刪除</button>`)
}
},
@*"defaultContent": '<button class="btn btn-primary edit-btn">修改</button> <button class="btn btn-danger del-btn">刪除</button>'*@
}
],
"order": [[1, "asc"]],
'createdRow': function (row, data, dataIndex) {
$(row).attr('id', "tr_" + data.device_guid);
$(row).attr('data-guid', data.device_guid);
},
"columnDefs": [
{
'targets': 0,
'searchable': false,
'visible': false
},
{
'targets': 8,
'searchable': false,
'className': 'dt-body-center',
'createdCell': function (td, cellData, rowData, row, col) {
$(td).empty();
if (cellData != null) {
var coordinate = cellData.split(',')
$(td).append(`<span>x${parseFloat(coordinate[0])}, y${parseFloat(coordinate[1])}</span><br>`);
$(td).append(`<a href="javascript:void(0)" class="device-coordinate-btn">修改座標</a>`);
} else {
$(td).append('<button class="btn btn-primary device-coordinate-btn">定位座標</button>');
}
}
}
],
//"order": [[2, "desc"]],
"ajax": {
"url": "/DeviceManage/DeviceTableList",
"type": "POST",
"data": function (d) {
d.building_tag = selected_building_menu.building_tag ? selected_building_menu.building_tag : "";
d.device_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.main_system_tag : "";
d.device_name_tag = selected_building_menu.main_system ? selected_building_menu.main_system.sub_system ? selected_building_menu.main_system.sub_system.sub_system_tag : "" : "";
d.device_floor_tag = selected_floor_tag ? selected_floor_tag : "";
},
"dataSrc": function (rel) {
if (rel.code == "9999") {
toast_error(rel.msg);
return;
}
currentData = rel.data;
currentData = $.map(currentData, function (item) {
if (item.device_name_tag == "L1" || item.device_name_tag == "L2") {
//照明設備
$("#device-master-list-btn").show();
deviceInfoTable.column(0).visible(true); //點擊顯示子節點
deviceInfoTable.column(8).visible(false); //設備座標
} else {
$("#device-master-list-btn").hide();
deviceInfoTable.column(0).visible(false); //點擊顯示子節點
deviceInfoTable.column(8).visible(true); //設備座標
}
item.selected = false;
if (item.device_coordinate != undefined && item.device_coordinate != null) {
var coordinate = item.device_coordinate.split(',')
item.value = [
parseFloat(coordinate[0]),
parseFloat(coordinate[1])
]
}
if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) {
$.map(item.device_nodes, function (item_node) {
item_node.selected = false;
if (item_node.device_node_coordinate != undefined && item_node.device_node_coordinate != null) {
var node_coordinate = item_node.device_node_coordinate.split(',')
item_node.value = [
parseFloat(node_coordinate[0]),
parseFloat(node_coordinate[1])
]
}
});
}
return item;
});
if (currentData == null || currentData.length == 0) {
this.currentData = [];
}
if (myChart.getOption() && myChart.getOption().geo && myChart.getOption().geo.length > 0) {
resetData();
}
return currentData;
}
}
});
//#endregion
deviceInfoTable.on('draw', function () {
$.each(selected_device_parents_collapses, function (i, id) {
var tr = $(`#${id}`)
var row = deviceInfoTable.row(tr);
if (!row.child.isShown()) {
$(`#${id}`).find("td.dt-control").trigger('click');
}
});
});
//#region 編輯設備
$('#device_info_table').on("click", "button.edit-btn", function () {
selected_device_guid = $(this).parents('tr').attr('data-guid');
//取得災害類別
var url_disaster = "/DeviceManage/GetDisasterList";
$.post(url_disaster, null, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
var checkbox = "";
$('#disaster_check').empty();
$.each(rel.data, function (index, val) {
checkbox += '<div class="col-3 mb-2 custom-control custom-checkbox align-content-center">';
checkbox += '<input type="checkbox" class="custom-control-input" name="selectDisaster[]" id="' + val.system_value + '" value="' + val.system_value + '" />';
checkbox += '<label class="custom-control-label" for="' + val.system_value + '">' + val.system_key + '</label>';
checkbox += '</div>';
});
$('#disaster_check').append(checkbox);
//取得單一設備基本資料
var url = "/DeviceManage/GetOneDevice";
var send_data = {
guid: selected_device_guid
}
$.post(url, send_data, function (rel) {
console.log(rel);
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
$("#device_building_name_modal").html(rel.data.building_full_name);
$("#device_main_system_name_modal").html(rel.data.main_system_full_name);
$("#device_sub_system_name_modal").html(rel.data.sub_system_full_name);
$("#device_floor_name_modal").html(rel.data.floor_full_name);
$("#device_number_modal").html(rel.data.device_number);
$("#device_name_modal").val(rel.data.device_full_name);
if (rel.data.device_system_category_layer3 == "L1" || rel.data.device_system_category_layer3 == "L2") {
$("#device-coordinate-wrap").hide();
} else {
$("#device-coordinate-wrap").show();
if (rel.data.device_coordinate != undefined && rel.data.device_coordinate != null) {
var coordinate = rel.data.device_coordinate.split(',')
$("#device_coordinate_x_modal").val(coordinate[0]);
$("#device_coordinate_y_modal").val(coordinate[1]);
} else {
$("#device_coordinate_x_modal").val("");
$("#device_coordinate_y_modal").val("");
}
}
rel.data.device_disasters.forEach(function (item, index) {
$(`input[name="selectDisaster[]"][value="${item.device_system_value}"]`).prop("checked", true)
});
if (rel.data.device_system_category_layer3 != "C") {
$("#device-ip-wrap").hide();
$("#device-port-wrap").hide();
}
else {
$("#device-ip-wrap").show();
$("#device-port-wrap").show();
$("#device_ip_modal").val(rel.data.device_ip);
$("#device_port_modal").val(rel.data.device_port);
}
$("#device-info-edit-modal").modal();
}
}, 'json');
}
});
});
//#endregion
//#region 刪除設備
$('#device_info_table').on("click", "button.del-btn", function () {
selected_device_guid = $(this).parents('tr').attr('data-guid');
Swal.fire(
{
title: "刪除",
text: "你確定是否刪除此筆資料?",
type: "warning",
icon: 'warning',
showCancelButton: true,
confirmButtonText: "是",
cancelButtonText: "否"
}).then(function (result) {
if (result.value) {
var url = "/DeviceManage/DeleteOneDevice";
var send_data = {
Guid: selected_device_guid
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
toast_ok(rel.msg);
deviceInfoTable.ajax.reload(null, false);
return;
}
}, 'json');
}
});
});
//#endregion
//#region 編輯設備定位座標
$('#device_info_table').on("click", ".device-coordinate-btn", function () {
if ($(this).attr("disabled")) {
return;
}
selected_device_guid = $(this).parents('tr').attr('data-guid');
var index = currentData.findIndex(function (item) { return item.device_guid === selected_device_guid });
currentData[index].selected = true;
selected_temp_device = currentData[index];
ChangeFloorMapMode("edit");
});
//#endregion
//#region 編輯設備防災類別
$('#disaster_check').on("click", 'input[type="checkbox"]', function () {
var checked = $(this).val();
//console.log($('#disaster_check').find('input:checkbox:checked').length)
if ($('#disaster_check').find('input:checkbox:checked').length != 0) {
$('input[name="selectDisaster[]"]').prop('checked', false);
$('input[name="selectDisaster[]"]').map(function (index, item) {
var item_value = $(item).val();
if (item_value == checked) {
$(item).prop('checked', true)
}
});
}
});
//#endregion
//#region 設備Master DataTable
deviceMasterTable = $("#device_master_table").DataTable({
"columns": [
{
"data": null,
"render": function (data, type, row, meta) {
return meta.row + 1;
}
},
{
"data": "device_master_number",
"render": function (data, type, row, meta) {
if (data != undefined && data != null && data != "") {
return data;
} else {
return row.device_building_tag + "_" + row.device_name_tag;
}
}
},
{
"data": "device_master_full_name"
},
{
"data": "device_master_icon",
"render": function (data, type, row, meta) {
if (row.device_master_icon == undefined || row.device_master_icon == null || row.device_master_icon == '') {
return "";
}
var html = `<img src="/upload/device_icon/${row.device_master_icon}" style="margin: auto; width:30px;">
</img>`;
return html;
}
},
{
"data": null,
"defaultContent": '<button class="btn btn-primary edit-btn">修改</button>'
}
],
'createdRow': function (row, data, dataIndex) {
$(row).attr('data-guid', data.device_master_guid);
$(row).attr('data-device-building-tag', data.device_building_tag);
$(row).attr('data-device-name-tag', data.device_name_tag);
},
//"order": [[2, "desc"]],
"ajax": {
"url": "/DeviceManage/GetDeviceMasterTableList",
"type": "POST",
"data": function (d) {
d.Building_tag = selected_building_menu.building_tag ? selected_building_menu.building_tag : "";
d.Main_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.main_system_tag : "";
d.Sub_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.sub_system ? selected_building_menu.main_system.sub_system.sub_system_tag : "" : "";
d.Floor_tag = selected_floor_tag ? selected_floor_tag : "";
},
"dataSrc": function (rel) {
if (rel.code == "9999") {
toast_error(rel.msg);
return;
}
data = rel.data;
if (data == null || data.length == 0) {
this.data = [];
}
return data;
}
}
});
//#endregion
//#region 分電盤按鈕
$("#device-master-list-btn").click(function (e) {
e.preventDefault();
var selectedBuilding_tag = selected_building_menu.building_tag ? selected_building_menu.building_tag : "";
var selectedMain_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.main_system_tag : "";
var selectedSub_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.sub_system ? selected_building_menu.main_system.sub_system.sub_system_tag : "" : "";
var selectedFloor_tag = selected_floor_tag ? selected_floor_tag : "";
if (selectedBuilding_tag == '' || selectedMain_system_tag == '' || selectedSub_system_tag == '' || selectedFloor_tag == '') {
toast_warning("請先選擇系統類別及樓層。");
return;
}
//取得設備master列表
deviceMasterTable.ajax.reload(null, false);
$("#device-master-list-modal").modal();
});
//#endregion
//#region 編輯設備master
$('#device_master_table').on("click", "button.edit-btn", function () {
selected_device_master_guid = $(this).parents('tr').attr('data-guid');
selected_device_building_tag = $(this).parents('tr').attr('data-device-building-tag');
selected_device_system_tag = "";
selected_device_floor_tag = "";
selected_device_name_tag = $(this).parents('tr').attr('data-device-name-tag');
selected_device_master_number_txt = $(this).parents('tr')[0].children[1].innerText
//取得單一設備基本資料
var url = "/DeviceManage/GetOneDeviceMaster";
var send_data = {
guid: selected_device_master_guid
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
$("#device_master_number_modal").html(selected_device_master_number_txt);
if (rel.data != undefined && rel.data != null) {
$("#device_master_full_name_modal").val(rel.data.device_master_full_name);
}
$("#device-master-edit-modal").modal();
}
}, 'json');
});
//#endregion
//#region 展開子節點列表
$('#device_info_table').on("click", "td.dt-control", function () {
var tr = $(this).closest('tr');
var row = deviceInfoTable.row(tr);
var index = $.inArray(tr.attr('id'), selected_device_parents_collapses)
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
tr.find("td").first().html(`<i class="fal fa-plus"></i>`);
selected_device_parents_collapses.splice(index, 1);
}
else {
// Open this row
console.log(row.data());
row.child(DeviceNodeFormat(row.data().device_nodes)).show();
tr.addClass('shown');
tr.find("td").first().html(`<i class="fal fa-minus"></i>`);
if (index < 0) {
selected_device_parents_collapses.push(tr.attr('id'))
}
}
});
//#endregion
//#region 子節點表格樣式
function DeviceNodeFormat(device_nodes) {
var tbody_content = "";
device_nodes.forEach(function (item, index) {
var coordinate_html = "";
if (item.device_node_coordinate != null) {
var coordinate = item.device_node_coordinate.split(',')
coordinate_html += `<span>x${parseFloat(coordinate[0])}, y${parseFloat(coordinate[1])}</span><br>
<a href="javascript:void(0)" class="device-node-coordinate-btn">修改座標</a>`;
} else {
coordinate_html += `<button class="btn btn-primary device-node-coordinate-btn">定位座標</button>`;
}
tbody_content += `
<tr data-device-node-guid="${item.device_node_guid}" data-device-guid="${item.device_guid}">
<td>
${index + 1}
</td>
<td>
${item.device_node_full_name}
</td>
<td>
${coordinate_html}
</td>
<td>
<button class="btn btn-primary edit-node-btn">修改</button>
<button class="btn btn-danger del-node-btn">刪除</button>
</td>
</tr>
`;
});
var html = "";
html = `<table class="table table-bordered table-hover m-0 text-center device-node-table">
<thead class="thead-themed">
<tr>
<th>序</th>
<th>名稱</th>
<th>座標</th>
<th>功能</th>
</tr>
</thead>
<tbody>
${tbody_content}
</tbody>
</table>`;
return html;
}
//#endregion
//#region 加入子節點
$('#device_info_table').on("click", "button.add-device-node-btn", function () {
selected_device_guid = $(this).parents('tr').attr('data-guid');
selected_device_node_guid = "";
$("#device-node-form").trigger("reset");
$("#device-node-modal").modal();
});
//#endregion
//#region 編輯子節點
$('#device_info_table').on("click", ".device-node-table button.edit-node-btn", function () {
selected_device_node_guid = $(this).parents('tr').attr('data-device-node-guid');
selected_device_guid = $(this).parents('tr').attr('data-device-guid');
//取得單一設備子節點資料
var url = "/DeviceManage/GetOneDeviceNode";
var send_data = {
guid: selected_device_node_guid
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
$("#device_node_name_modal").val(rel.data.device_node_full_name);
if (rel.data.device_node_coordinate != undefined && rel.data.device_node_coordinate != null) {
var coordinate = rel.data.device_node_coordinate.split(',')
$("#device_node_coordinate_x_modal").val(coordinate[0]);
$("#device_node_coordinate_y_modal").val(coordinate[1]);
} else {
$("#device_node_coordinate_x_modal").val("");
$("#device_node_coordinate_y_modal").val("");
}
$("#device-node-modal").modal();
}
}, 'json');
});
//#endregion
//#region 編輯子節點定位座標
$('#device_info_table').on("click", ".device-node-table .device-node-coordinate-btn", function () {
if ($(this).attr("disabled")) {
return;
}
selected_device_guid = $(this).parents('tr').attr('data-device-guid');
selected_device_node_guid = $(this).parents('tr').attr('data-device-node-guid');
var index = currentData.findIndex(function (item) { return item.device_guid === selected_device_guid });
var node_index = currentData[index].device_nodes.findIndex(function (item) { return item.device_node_guid === selected_device_node_guid });
selected_temp_device = currentData[index].device_nodes[node_index];
ChangeFloorMapMode("edit");
});
//#endregion
//#region 刪除子節點
$('#device_info_table').on("click", ".device-node-table button.del-node-btn", function () {
selected_device_node_guid = $(this).parents('tr').attr('data-device-node-guid');
Swal.fire(
{
title: "刪除",
text: "你確定是否刪除此筆資料?",
type: "warning",
icon: 'warning',
showCancelButton: true,
confirmButtonText: "是",
cancelButtonText: "否"
}).then(function (result) {
if (result.value) {
var url = "/DeviceManage/DeleteOneDeviceNode";
var send_data = {
Guid: selected_device_node_guid
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
toast_ok(rel.msg);
deviceInfoTable.ajax.reload(null, false);
return;
}
}, 'json');
}
});
});
//#endregion
//#region 設備種類DataTable
deviceKindTable = $("#device_kind_table").DataTable({
"columns": [
{
"data": null,
"render": function (data, type, row, meta) {
return meta.row + 1;
}
},
{
"data": "device_name_tag"
},
{
"data": "device_image",
"render": function (data, type, row, meta) {
if (row.device_image == undefined || row.device_image == null || row.device_image == '') {
return "";
}
var file_names = row.device_image.split(".");
var html = `<img src="/upload/device_icon/${row.device_image}" style="margin: auto; width:45px; height: auto">
</img>`;
return html;
}
},
{
"data": "device_normal_color",
"render": function (data, type, row, meta) {
var device_normal_text = row.device_normal_text ? row.device_normal_text : "";
var device_normal_point_name = row.device_normal_point_name ? row.device_normal_point_name : "";
var device_normal_point_col = row.device_normal_point_col ? row.device_normal_point_col : "";
var device_normal_point_value = row.device_normal_point_value ? row.device_normal_point_value : "";
var device_normal_color = row.device_normal_color ? row.device_normal_color : "";
var flashing = row.device_normal_flashing == 1 ? "是" : "否";
var full_point_arr = [];
if (device_normal_point_name != "") {
full_point_arr.push(device_normal_point_name)
}
if (device_normal_point_col != "") {
full_point_arr.push(device_normal_point_col)
}
if (device_normal_point_value != "") {
full_point_arr.push(device_normal_point_value)
}
var html = `
<div class="row">
<label class="col-12">${device_normal_text}</label>
</div>
<div class="row">
<label class="col-12">${full_point_arr.join("-")}</label>
</div>
<div class="row">
<div style="width: 30px;height: 30px; margin:auto; border-radius: 50%;background-color: ${device_normal_color}"></div>
</div>
@*<div class="row">
<label class="col-8">是否閃爍:</label>
<label class="col-4">${flashing}</label>
</div>*@
`;
return html;
}
},
{
"data": "device_close_color",
"render": function (data, type, row, meta) {
var device_close_text = row.device_close_text ? row.device_close_text : "";
var device_close_point_name = row.device_close_point_name ? row.device_close_point_name : "";
var device_close_point_col = row.device_close_point_col ? row.device_close_point_col : "";
var device_close_point_value = row.device_close_point_value ? row.device_close_point_value : "";
var device_close_color = row.device_close_color ? row.device_close_color : "";
var flashing = row.device_normal_flashing == 1 ? "是" : "否";
var full_point_arr = [];
if (device_close_point_name != "") {
full_point_arr.push(device_close_point_name)
}
if (device_close_point_col != "") {
full_point_arr.push(device_close_point_col)
}
if (device_close_point_value != "") {
full_point_arr.push(device_close_point_value)
}
var html = `
<div class="row">
<label class="col-12">${device_close_text}</label>
</div>
<div class="row">
<label class="col-12">${full_point_arr.join("-")}</label>
</div>
<div class="row">
<div style="width: 30px;height: 30px; margin:auto; border-radius: 50%;background-color: ${device_close_color}"></div>
</div>
@*<div class="row">
<label class="col-8">是否閃爍:</label>
<label class="col-4">${flashing}</label>
</div>*@
`;
return html;
}
},
{
"data": "device_error_color",
"render": function (data, type, row, meta) {
var device_error_text = row.device_error_text ? row.device_error_text : "";
var device_error_point_name = row.device_error_point_name ? row.device_error_point_name : "";
var device_error_point_col = row.device_error_point_col ? row.device_error_point_col : "";
var device_error_point_value = row.device_error_point_value ? row.device_error_point_value : "";
var device_error_color = row.device_error_color ? row.device_error_color : "";
var flashing = row.device_error_flashing == 1 ? "是" : "否";
var independent = row.device_error_independent == 1 ? "是" : "否";
var full_point_arr = [];
if (device_error_point_name != "") {
full_point_arr.push(device_error_point_name)
}
if (device_error_point_col != "") {
full_point_arr.push(device_error_point_col)
}
if (device_error_point_value != "") {
full_point_arr.push(device_error_point_value)
}
var html = `
<div class="row">
<label class="col-12">${device_error_text}</label>
</div>
<div class="row">
<label class="col-12">${full_point_arr.join("-")}</label>
</div>
<div class="row">
<div style="width: 30px;height: 30px; margin:auto; border-radius: 50%;background-color: ${device_error_color}"></div>
</div>
<div class="row">
<label class="col-8">是否閃爍:</label>
<label class="col-4">${flashing}</label>
</div>
@*<div class="row">
<label class="col-8">是否獨立顯示:</label>
<label class="col-4">${independent}</label>
</div>*@
`;
return html;
}
},
{
"data": null,
"defaultContent": '<button class="btn btn-primary edit-btn">修改</button>'
}
],
'createdRow': function (row, data, dataIndex) {
$(row).attr('data-guid', data.device_kind_guid);
$(row).attr('data-device-building-tag', data.device_building_tag);
$(row).attr('data-device-system-tag', data.device_system_tag);
$(row).attr('data-device-floor-tag', data.device_floor_tag);
$(row).attr('data-device-name-tag', data.device_name_tag);
},
//"order": [[2, "desc"]],
"ajax": {
"url": "/DeviceManage/DeviceKindTableList",
"type": "POST",
"data": function (d) {
d.building_tag = selected_building_menu.building_tag ? selected_building_menu.building_tag : "";
d.device_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.main_system_tag : "";
d.device_name_tag = selected_building_menu.main_system ? selected_building_menu.main_system.sub_system ? selected_building_menu.main_system.sub_system.sub_system_tag : "" : "";
//d.Floor_tag = selected_floor_tag ? selected_floor_tag : "";
},
"dataSrc": function (rel) {
if (rel.code == "9999") {
toast_error(rel.msg);
return;
}
data = rel.data;
if (data == null || data.length == 0) {
this.data = [];
}
return data;
}
}
});
//#endregion
//#region 編輯設備種類
$('#device_kind_table').on("click", "button.edit-btn", function () {
selected_device_kind_guid = $(this).parents('tr').attr('data-guid');
selected_device_building_tag = $(this).parents('tr').attr('data-device-building-tag');
selected_device_system_tag = $(this).parents('tr').attr('data-device-system-tag');
selected_device_floor_tag = $(this).parents('tr').attr('data-device-floor-tag');
selected_device_name_tag = $(this).parents('tr').attr('data-device-name-tag');
selected_device_name_tag_txt = $(this).parents('tr')[0].children[1].innerText
//取得單一設備基本資料
var url = "/DeviceManage/GetOneDeviceKind";
var send_data = {
guid: selected_device_kind_guid
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
device_kind_data = rel.data;
//取得單一設備基本資料
var selectedSub_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.sub_system ? selected_building_menu.main_system.sub_system.sub_system_tag : "" : "";
var url = "/DeviceManage/GetDeviceItem";
var send_data = {
sub_system_tag: selectedSub_system_tag,
building_tag: selected_device_building_tag
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
$('#device_image_modal').val("");
$("#device_normal_point_name_modal").empty();
$("#device_close_point_name_modal").empty();
$("#device_error_point_name_modal").empty();
$("#device_normal_point_name_modal").append($("<option />").val("").text("未選擇"));
$("#device_close_point_name_modal").append($("<option />").val("").text("未選擇"));
$("#device_error_point_name_modal").append($("<option />").val("").text("未選擇"));
$.each(rel.data, function (index, val) {
$("#device_normal_point_name_modal").append($("<option />").val(val.id).text(val.points));
$("#device_close_point_name_modal").append($("<option />").val(val.id).text(val.points));
$("#device_error_point_name_modal").append($("<option />").val(val.id).text(val.points));
});
$("#device_kind_name_modal").html(selected_device_name_tag_txt);
if (device_kind_data != null) {
$("#device_normal_text_modal").val(device_kind_data.device_normal_text ? device_kind_data.device_normal_text : "");
var normal_point_name = device_kind_data.device_normal_point_guid ? device_kind_data.device_normal_point_guid : "";
var normal_point_col = device_kind_data.device_normal_point_col ? device_kind_data.device_normal_point_col : "";
var normal_point_value = device_kind_data.device_normal_point_value ? device_kind_data.device_normal_point_value : "";
$("#device_normal_point_name_modal").val(normal_point_name);
$("#device_normal_point_col_modal").val(normal_point_col);
$("#device_normal_point_value_modal").val(normal_point_value);
if (normal_point_name != undefined && normal_point_name != null) {
var normal_point_text = $("#device_normal_point_name_modal option:selected").text();
if (normal_point_name == "" || normal_point_text == "ER") {
$("#device_normal_point_col_modal").val("").attr("disabled", true);
$("#device_normal_point_value_modal").val("").attr("disabled", true);
} else {
$("#device_normal_point_col_modal").val(normal_point_col).attr("disabled", false);
$("#device_normal_point_value_modal").val(normal_point_value).attr("disabled", false);
}
} else {
$("#device_normal_point_col_modal").val("").attr("disabled", true);
$("#device_normal_point_value_modal").val("").attr("disabled", true);
}
$("#device_normal_color_modal").val(device_kind_data.device_normal_color ? device_kind_data.device_normal_color : "");
if (device_kind_data.device_name_tag != undefined && device_kind_data.device_name_tag != null && device_kind_data.device_normal_flashing == 1) {
$("#device_normal_flashing_modal").prop("checked", true);
}
else {
$("#device_normal_flashing_modal").prop("checked", false);
}
$("#device_close_text_modal").val(device_kind_data.device_close_text ? device_kind_data.device_close_text : "");
var close_point_name = device_kind_data.device_close_point_guid ? device_kind_data.device_close_point_guid : "";
var close_point_col = device_kind_data.device_close_point_col ? device_kind_data.device_close_point_col : "";
var close_point_value = device_kind_data.device_close_point_value ? device_kind_data.device_close_point_value : "";
$("#device_close_point_name_modal").val(close_point_name);
$("#device_close_point_col_modal").val(close_point_col);
$("#device_close_point_value_modal").val(close_point_value);
if (close_point_name != undefined && close_point_name != null) {
var close_point_text = $("#device_close_point_name_modal option:selected").text();
if (close_point_name == "" || close_point_text == "ER") {
$("#device_close_point_col_modal").val("").attr("disabled", true);
$("#device_close_point_value_modal").val("").attr("disabled", true);
} else {
$("#device_close_point_col_modal").val(close_point_col).attr("disabled", false);
$("#device_close_point_value_modal").val(close_point_value).attr("disabled", false);
}
} else {
$("#device_close_point_col_modal").val("").attr("disabled", true);
$("#device_close_point_value_modal").val("").attr("disabled", true);
}
$("#device_close_color_modal").val(device_kind_data.device_close_color ? device_kind_data.device_close_color : "");
if (device_kind_data.device_name_tag != undefined && device_kind_data.device_name_tag != null && device_kind_data.device_close_flashing == 1) {
$("#device_close_flashing_modal").prop("checked", true);
}
else {
$("#device_close_flashing_modal").prop("checked", false);
}
$("#device_error_text_modal").val(device_kind_data.device_error_text ? device_kind_data.device_error_text : "");
var error_point_name = device_kind_data.device_error_point_guid ? device_kind_data.device_error_point_guid : "";
var error_point_col = device_kind_data.device_error_point_col ? device_kind_data.device_error_point_col : "";
var error_point_value = device_kind_data.device_error_point_value ? device_kind_data.device_error_point_value : "";
$("#device_error_point_name_modal").val(error_point_name);
$("#device_error_point_col_modal").val(error_point_col);
$("#device_error_point_value_modal").val(error_point_value);
if (error_point_name != undefined && error_point_name != null) {
var error_point_text = $("#device_error_point_name_modal option:selected").text();
if (error_point_name == "" || error_point_text == "ER") {
$("#device_error_point_col_modal").val("").attr("disabled", true);
$("#device_error_point_value_modal").val("").attr("disabled", true);
} else {
$("#device_error_point_col_modal").val(error_point_col).attr("disabled", false);
$("#device_error_point_value_modal").val(error_point_value).attr("disabled", false);
}
} else {
$("#device_error_point_col_modal").val("").attr("disabled", true);
$("#device_error_point_value_modal").val("").attr("disabled", true);
}
$("#device_error_color_modal").val(device_kind_data.device_error_color ? device_kind_data.device_error_color : "");
if (device_kind_data.device_name_tag != undefined && device_kind_data.device_name_tag != null && device_kind_data.device_error_flashing == 1) {
$("#device_error_flashing_modal").prop("checked", true);
}
else {
$("#device_error_flashing_modal").prop("checked", false);
}
if (device_kind_data.device_name_tag != undefined && device_kind_data.device_name_tag != null && device_kind_data.device_error_independent == 1) {
$("#device_error_independent_modal").prop("checked", true);
}
else {
$("#device_error_independent_modal").prop("checked", false);
}
}
else {
//Reset Form
$('#device_image_modal').val("");
$('#device_normal_text_modal').val("");
$('#device_normal_point_name_modal').val("");
$('#device_normal_point_col_modal').val("");
$('#device_normal_point_value_modal').val("");
$('#device_normal_color_modal').val("");
$('#device_normal_flashing_modal').prop("checked", false);
$('#device_close_text_modal').val("");
$('#device_close_point_name_modal').val("");
$('#device_close_point_col_modal').val("");
$('#device_close_point_value_modal').val("");
$('#device_close_color_modal').val("");
$('#device_close_flashing_modal').prop("checked", false);
$('#device_error_text_modal').val("");
$('#device_error_point_name_modal').val("");
$('#device_error_point_col_modal').val("");
$('#device_error_point_value_modal').val("");
$('#device_error_color_modal').val("");
$('#device_error_flashing_modal').prop("checked", false);
$('#device_error_independent_modal').prop("checked", false);
}
$("#device-kind-modal").modal();
}
}, 'json')
}
}, 'json');
});
//#endregion
//#region 設備種類燈號判別
$("#device_normal_point_name_modal").change(function () {
var point_name_value = $(this).val();
var point_name_text = $(this).find("option:selected").text();
if (point_name_value == "" || point_name_text == "ER") {
$("#device_normal_point_col_modal").val("").attr("disabled", true);
$("#device_normal_point_value_modal").val("").attr("disabled", true);
} else if (point_name_text != "ER") {
$("#device_normal_point_col_modal").attr("disabled", false);
$("#device_normal_point_value_modal").attr("disabled", false);
$("#device_close_point_name_modal").val(point_name_value).trigger("change");
}
});
$("#device_close_point_name_modal").change(function () {
var point_name_value = $(this).val();
var point_name_text = $(this).find("option:selected").text();
if (point_name_value == "" || point_name_text == "ER") {
$("#device_close_point_col_modal").val("").attr("disabled", true);
$("#device_close_point_value_modal").val("").attr("disabled", true);
} else if (point_name_text != "ER") {
$("#device_close_point_col_modal").attr("disabled", false);
$("#device_close_point_value_modal").attr("disabled", false);
$("#device_normal_point_name_modal").val(point_name_value).trigger("change");
}
});
$("#device_error_point_name_modal").change(function () {
var point_name_value = $(this).val()
var point_name_text = $(this).find("option:selected").text();
if (point_name_value == "" || point_name_text == "ER") {
$("#device_error_point_col_modal").val("").attr("disabled", true);
$("#device_error_point_value_modal").val("").attr("disabled", true);
} else if (point_name_text != "ER") {
$("#device_error_point_col_modal").attr("disabled", false);
$("#device_error_point_value_modal").attr("disabled", false);
}
});
//#endregion
//#region 新增設備基本資料DataTable
deviceImportCheckTempTable = $("#device_import_check_temp_table").DataTable({
"pageLength": 20,
"columns": [
{
"data": null,
},
{
"data": null,
"render": function (data, type, row, meta) {
return meta.row + 1;
}
},
{
"data": "device_number"
},
{
"data": null,
"render": function (data, type, row, meta) {
return row.device_name_tag + '_' + row.device_serial_tag;
}
},
{
"data": "device_disaster_type_text",
},
],
"columnDefs": [{
'targets': 0,
'searchable': false,
'orderable': false,
'className': 'dt-body-center',
'render': function (data, type, full, meta) {
var check_html = "";
check_html += `<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="${data.device_number}" name="selectedDevice[]" value="${data.device_number}" data-system-category="${data.device_system_category_layer3}" data-device-disaster="${data.device_disasters}" />
<label class="custom-control-label" for="${data.device_number}"/>
</div>`;
return check_html;
}
}],
"order": [[1, "asc"]],
"ajax": {
"url": "/DeviceManage/DeviceImportCheckTempTableList",
"type": "POST",
"data": function (d) {
d.Device_building_tag = selected_building_tag ? selected_building_tag : "";
d.Device_system_tag = selected_system_tag ? selected_system_tag : "";
d.Device_floor_tag = selected_floor_tag ? selected_floor_tag : "";
d.Device_name_tag = selected_name_tag ? selected_name_tag : "";
},
"dataSrc": function (rel) {
if (rel.code == "9999") {
toast_error(rel.msg);
return;
}
data = rel.data;
if (data == null || data.length == 0) {
this.data = [];
}
return data;
}
}
});
//#endregion
//#region 新增設備基本資料全選
$("#select-all-device-number").change(function () {
var rows = deviceImportCheckTempTable.rows({ 'search': 'applied' }).nodes();
if (this.checked) {
$('input[type="checkbox"]', rows).prop('checked', this.checked);
} else {
$('input[type="checkbox"]', rows).prop('checked', this.checked);
}
});
//#endregion
});
//#region 建置左側選單列表
function GetBuildingMenuCollapse(filter) {
var url = "/DeviceManage/GetBuildingMenuCollapse";
var send_data = {
Filter: filter
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
buildingCollapses = rel.data;
$("#js_list_accordion").empty();
if (buildingCollapses == undefined && buildingCollapses.length <= 0) {
$('#js_list_accordion').append("<div>查無結果</div>");
}
var html = '';
buildingCollapses.forEach(function (buildingCollapse, buildingCollapse_index) {
html += `
<div class="card border-top-left-radius-0 border-top-right-radius-0">
<div class="card-header">
<a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-${buildingCollapse_index}" aria-expanded="false" data-filter-tags="settings">
<i class="fal fa-globe width-2 fs-xl"></i>
${buildingCollapse.full_name}
<span class="ml-auto">
<span class="collapsed-reveal">
<i class="fal fa-chevron-up fs-xl"></i>
</span>
<span class="collapsed-hidden">
<i class="fal fa-chevron-down fs-xl"></i>
</span>
</span>
</a>
</div>
<div id="js_list_accordion-${buildingCollapse_index}" class="collapse" data-parent="#js_list_accordion" style="">`;
buildingCollapse.main_systems.forEach(function (main_system, main_system_index) {
html += `
<div id="cp-${main_system_index}" class="card py-3">
<div class="card-header pl-4 pr-3 d-flex justify-content-between">
<a href="javascript:;" class="" data-toggle="collapse" data-target="#cp-${main_system_index} > .card-body" aria-expanded="true">
<span class="collapsed-hidden"><h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> ${main_system.full_name} <i class="fal fa-chevron-down fs-xl"></i></h4></span>
<span class="collapsed-reveal"><h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> ${main_system.full_name} <i class="fal fa-chevron-up fs-xl"></i></h4></span>
</a>
</div>
<div class="card-body p-0 collapse show">
<div class="p-0">
<ul class="list-group list-group-flush">
`;
main_system.sub_systems.forEach(function (sub_system, sub_Systems_index) {
html += `
<li class="list-group-item pr-0 d-flex justify-content-between">
<a href="javascript:;" onclick="ChangeFloorPanel(this)"
data-building-tag="${buildingCollapse.building_tag}"
data-main-system-tag="${main_system.main_system_tag}"
data-sub-system-tag="${sub_system.sub_system_tag}">
${sub_system.full_name}
</a>
</li>`;
});
html += `
</ul>
</div>
</div>
</div>`;
});
html += ` </div>
</div>`;
});
$('#js_list_accordion').append(html);
$("#js_list_accordion .collapse").collapse('show');
return;
}
}, 'json');
}
//#endregion
//#region 變更樓層的控制面板
function ChangeFloorPanel(dom) {
var selected_target = {
"building_tag": $(dom).attr("data-building-tag") ? $(dom).attr("data-building-tag") : "",
"main_system_tag": $(dom).attr("data-main-system-tag") ? $(dom).attr("data-main-system-tag") : "",
"sub_system_tag": $(dom).attr("data-sub-system-tag") ? $(dom).attr("data-sub-system-tag") : "",
}
buildingCollapses.forEach(function (building_item, building_index) {
if (building_item.building_tag == selected_target.building_tag) {
selected_building_menu.building_tag = building_item.building_tag;
selected_building_menu.main_system = {};
building_item.main_systems.forEach(function (main_system_item, main_system_index) {
if (main_system_item.main_system_tag == selected_target.main_system_tag) {
selected_building_menu.main_system.main_system_tag = main_system_item.main_system_tag
selected_building_menu.main_system.sub_system = {};
$("#select-main-system-name").html(main_system_item.full_name);
main_system_item.sub_systems.forEach(function (sub_system_item, sub_system_index) {
if (sub_system_item.sub_system_tag == selected_target.sub_system_tag) {
selected_building_menu.main_system.sub_system.sub_system_tag = sub_system_item.sub_system_tag
selected_building_menu.main_system.sub_system.floors = sub_system_item.floors;
$("#select-sub-system-name").html(sub_system_item.full_name);
//匯入floor panel
$(".floor-panel-wrap").empty();
sub_system_item.floors.forEach(function (floor_item, floor_index) {
$(".floor-panel-wrap").append(`<button type="button" class="btn btn-secondary waves-effect waves-themed mr-2 mb-2 btn-floor" onclick="ChangeDevicePanel(this)" data-floor-guid="${floor_item.floor_tag}">${floor_item.full_name}</button>`)
});
}
});
}
});
}
});
$(".btn-floor").first().click();
}
//#endregion
//#region 變更平面圖與設備的控制面板
function ChangeDevicePanel(dom) {
selected_floor_tag = $(dom).attr("data-floor-guid") ? $(dom).attr("data-floor-guid") : ""
var current_floor = selected_building_menu.main_system.sub_system.floors.filter(function (item) {
return item.floor_tag == selected_floor_tag
})[0];
$.each($(".btn-floor"), function (index, item) {
if ($(item).hasClass("btn-success")) {
$(item).removeClass("btn-success");
$(item).addClass("btn-secondary");
}
});
$(dom).hasClass("btn-secondary") ? $(dom).removeClass("btn-secondary").addClass("btn-success") : $(dom).addClass("btn-success");
deviceInfoTable.ajax.reload(null, false);
deviceKindTable.ajax.reload(null, false);
ChangeFloorMapMode("");
//#region 平面圖設定
myChart.clear();
$.get(`/upload/floor_map/${current_floor.floor_map_name}.svg`, function (svg) {
if (svg == undefined || svg == null) {
return;
}
echarts.registerMap('floor_svg', { svg: svg });
option = {
// animationDurationUpdate: 1500,
tooltip: {
formatter: function (params) {
if (params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "") {
return `名稱:${params.data.device_node_full_name}<br>
Guid${params.data.device_node_guid}`
}
else {
return `名稱:${params.data.device_full_name}<br>
Guid${params.data.device_guid}`
}
}
},
toolbox: { //工具欄
show: false
},
geo: {
map: 'floor_svg',
roam: true,
scaleLimit: { //限制放大縮小倍數
max: 32,
min: 2.5
},
layoutSize: '100%',
layoutCenter: ['50%', '50%'],
zoom: 2.5,
silent: true
},
series: [
{ //不管有無被選擇(圓點)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbol: 'circle',
symbolSize: 10,
symbolOffset: [10, 10],
label: {
show: false
},
data: currentData,
z: 2
},
{ //未選擇的設備(icon)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
selectedMode: 'single',
data: null,
z: 1
},
{ //被選擇的設備(icon)
type: 'effectScatter',
coordinateSystem: 'geo',
geoIndex: 0,
showEffectOn: 'render',
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
selectedMode: 'single',
data: null,
z: 1
},
{ //編輯模式底下的設備(圓點,只會有一個)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbol: 'circle',
symbolSize: 10,
symbolOffset: [10, 10],
label: {
show: false
},
data: currentData,
z: 2
},
{ //編輯模式底下的設備(icon只會有一個)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
data: null,
z: 1
},
],
};
myChart.setOption(option);
myChart.getZr().on('click', function (params) {
console.log("click", params);
var pixelPoint = [params.offsetX, params.offsetY];
var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
console.log(dataPoint);
if (floor_map_mode == "edit") {
temp_device_on_floor_map = [{
device_guid: selected_temp_device.device_guid,
device_full_name: selected_temp_device.device_full_name,
device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
status: selected_temp_device.status,
value: dataPoint
}];
resetData();
}
// currentData.push([dataPoint[0], dataPoint[1], 1]);
// myChart.setOption(option);
});
myChart.on('selectchanged', function (params) {
@*var pixelPoint = [params.offsetX, params.offsetY];
var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);*@
console.log("selectchanged", params);
// currentData.push([dataPoint[0], dataPoint[1], 1]);
// myChart.setOption(option);
currentData = $.map(currentData, function (item) {
item.selected = false;
return item;
});
if (params.selected.length > 0) {
currentData[params.selected[0].seriesIndex - 1].selected = true;
}
resetData();
});
// myChart.getZr().on('mousewheel', function (params) {
// console.log(params)
// })
myChart.on('georoam', function (params) {
@*console.log("myChart", myChart)*@
@*console.log("myChart canvas Width Height", [myChart.getWidth(), myChart.getHeight()]);*@
@*console.log("params", params)
console.log("geo", myChart.getOption().geo[0])*@
var zoom = myChart.getOption().geo[0].zoom;
if (zoom <= 2.5) {
ResetFloorMap();
myChart.setOption({
geo: {
roam: 'scale'
},
});
} else {
myChart.setOption({
geo: {
roam: true
},
});
}
resetData();
});
})
.fail(function () {
toast_warning("查無該樓層地圖")
myChart.clear();
});
//#endregion
}
//#endregion
//#region 重設平面圖設備資料
function resetData() {
const scatter_symbol_unselect_convertData = function (data) { //不管有無被選擇(圓點)
let res = [], temp = [];
data.forEach(function (item, index) {
//如果有子節點,則只針對子節點操作
if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) {
item.device_nodes.forEach(function (item_node, item_node_index) {
temp.push(item_node);
});
} else {
temp.push(item)
}
});
temp.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_full_name: item.device_full_name ? item.device_full_name : null,
device_node_guid: item.device_node_guid ? item.device_node_guid : null,
device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null,
status: item.status,
value: item.value
}
obj.itemStyle = { 'color': "#0000FF" };
res.push(obj);
});
return res;
}
const scatter_icon_unselect_convertData = function (data) { //未選擇的設備(icon)
let res = [], temp = [];
data.forEach(function (item, index) {
//如果有子節點,則只針對子節點操作
if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) {
item.device_nodes.forEach(function (item_node, item_node_index) {
if (item_node.selected != undefined && item_node.selected != null && item_node.selected == false) {
//添加父節點相關資訊
item_node.device_image_url = item.device_image_url;
temp.push(item_node);
}
});
} else {
if (item.selected == false) {
temp.push(item)
}
}
});
temp.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_full_name: item.device_full_name ? item.device_full_name : null,
device_node_guid: item.device_node_guid ? item.device_node_guid : null,
device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null,
symbol: 'image://' + item.device_image_url,
status: item.status,
value: item.value
}
obj.itemStyle = { 'color': "#0000FF" };
res.push(obj);
});
return res;
}
const effectScatter_icon_selected_convertData = function (data) { //被選擇的設備(icon)
let res = [], temp = [];
data.forEach(function (item, index) {
//如果有子節點,則只針對子節點操作
if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) {
item.device_nodes.forEach(function (item_node, item_node_index) {
if (item_node.selected != undefined && item_node.selected != null && item_node.selected == true) {
//添加父節點相關資訊
item_node.device_image_url = item.device_image_url;
temp.push(item_node);
}
});
} else {
if (item.selected == true) {
temp.push(item)
}
}
});
temp.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_full_name: item.device_full_name ? item.device_full_name : null,
device_node_guid: item.device_node_guid ? item.device_node_guid : null,
device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null,
symbol: 'image://' + item.device_image_url,
status: item.status,
value: item.value
}
obj.itemStyle = { 'color': "#0000FF" };
res.push(obj);
});
return res;
}
const scatter_symbol_temp_device = function (data) { //編輯模式底下的設備(圓點,只會有一個)
let res = [];
data.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_full_name: item.device_full_name,
status: item.status,
value: item.value
}
switch (item.status) {
case 0:
obj.itemStyle = { 'color': item.device_close_color };
break;
case 1:
obj.itemStyle = { 'color': item.device_normal_color };
break;
case 2:
obj.itemStyle = { 'color': item.device_error_color };
break;
}
res.push(obj);
});
return res;
}
const effectScatter_utemp_device = function (data) {
let res = [];
data.map(function (item) {
var obj = {
device_guid: item.device_guid,
device_full_name: item.device_full_name,
status: item.status,
symbol: 'image://' + item.device_image_url,
value: item.value
}
res.push(obj);
});
return res;
}
if (!myChart.getOption()) {
return;
}
var zoom = 0
if (myChart.getOption().geo && myChart.getOption().geo.length > 0) {
zoom = myChart.getOption().geo[0].zoom;
}
if (zoom <= 8) {
myChart.setOption({
series: [{
symbolOffset: [0, 0],
data: scatter_symbol_unselect_convertData(currentData)
}, {
data: []
}, {
data: []
}, {
data: scatter_symbol_temp_device(temp_device_on_floor_map)
}, {
data: []
}]
});
} else {
myChart.setOption({
series: [{
symbolOffset: [10, 10],
data: scatter_symbol_unselect_convertData(currentData)
}, {
data: scatter_icon_unselect_convertData(currentData),
}, {
data: effectScatter_icon_selected_convertData(currentData),
}, {
symbolOffset: [10, 10],
data: scatter_symbol_temp_device(temp_device_on_floor_map)
}, {
data: effectScatter_utemp_device(temp_device_on_floor_map),
}]
});
}
}
//#endregion
//#region 重製平面圖
function ResetFloorMap() {
myChart.clear();
myChart.setOption(option);
resetData();
}
//#endregion
//#region 變更平面圖模式
function ChangeFloorMapMode(mode = "") {
floor_map_mode = mode;
switch (floor_map_mode) {
case 'edit':
$('#floor-map-mode-text').html("編輯模式");
$('#floor-map-edit-mode-btn-wrap').show();
$('#device_info_table .device-coordinate-btn').attr("disabled", true);
break;
case 'view':
$('#floor-map-mode-text').html("檢視模式");
$('#floor-map-edit-mode-btn-wrap').hide();
$('#device_info_table .device-coordinate-btn').attr("disabled", false);
break;
}
}
//#endregion
//#region 取消編輯平面圖模式
function CancelFloorMapEdit() {
temp_device_on_floor_map = [];
var index = currentData.findIndex(function (item) { return item.device_guid === selected_temp_device.device_guid });
currentData[index].selected = false;
if (selected_temp_device.device_node_guid != undefined && selected_temp_device.device_node_guid != null && selected_temp_device.device_node_guid != "") {
var node_index = currentData[index].device_nodes.findIndex(function (item) { return item.device_node_guid === selected_temp_device.device_node_guid });
currentData[index].device_nodes[node_index].selected = false;
}
selected_temp_device = {}; //清空
resetData();
ChangeFloorMapMode("view");
}
//#endregion
//#region 儲存編輯平面圖模式
function SaveFloorMapEdit() {
var new_coordinate = temp_device_on_floor_map[0].value;
coordinate = new_coordinate[0].toFixed(3).toString() + "," + new_coordinate[1].toFixed(3).toString();
var index = currentData.findIndex(function (item) { return item.device_guid === selected_temp_device.device_guid });
var url = "/DeviceManage/SaveDeviceCoordinate";
var send_data = {
Device_guid: selected_temp_device.device_guid,
Device_node_guid: selected_temp_device.device_node_guid,
Coordinate: coordinate
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
temp_device_on_floor_map = [];
deviceInfoTable.ajax.reload(null, false);
ChangeFloorMapMode("view");
return;
}
}, 'json')
}
//#endregion
//#region 新增設備
function AddDevice() {
var selectedBuilding_tag = selected_building_menu.building_tag ? selected_building_menu.building_tag : "";
var selectedMain_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.main_system_tag : "";
var selectedSub_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.sub_system ? selected_building_menu.main_system.sub_system.sub_system_tag : "" : "";
var selectedFloor_tag = selected_floor_tag ? selected_floor_tag : "";
if (selectedBuilding_tag == '' || selectedMain_system_tag == '' || selectedSub_system_tag == '' || selectedFloor_tag == '') {
toast_warning("請先選擇系統類別及樓層。");
return;
}
//取得上方選單過濾列表
var url = "/DeviceManage/GetDeviceImportCheckTempFilter";
$.post(url, null, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
deviceImportCheckTempFilterList = rel.data;
$("#import-temp-building-tag-list").empty();
var html = '';
deviceImportCheckTempFilterList.forEach(function (building_item, building_tag_index) {
html += `<button type="button" class="btn btn-secondary waves-effect waves-themed mr-2 btn-building-tag" onclick="ChangeDeviceImportPanel('${building_item.device_building_tag}')">${building_item.device_building_tag}</button>`
});
$('#import-temp-building-tag-list').append(html);
$('#import-temp-building-tag-list').children().first().trigger('click');
$("#device-info-add-modal").modal();
return;
}
}, 'json');
}
//#endregion
//#region 變更新增設備基本資料modal的過濾條件
function ChangeDeviceImportPanel(building_tag, system_tag = "", floor_tag = "") {
if (building_tag == undefined && building_tag == null || building_tag == "") {
toast_warning("請先選擇棟別");
return;
}
if ($(".btn-building-tag").hasClass("btn-success")) {
$(".btn-building-tag").removeClass("btn-success").addClass("btn-secondary");
}
$(".btn-building-tag").each(function (index, item) {
if ($(item).text() == building_tag) {
$(item).removeClass("btn-secondary").addClass("btn-success");
}
});
$('#import-temp-system-tag-list').empty();
deviceImportCheckTempFilterList.forEach(function (building_item, building_item_index) {
if (building_item.device_building_tag == building_tag) {
var system_html = '';
building_item.device_system_tags.forEach(function (system_item, system_item_index) {
if (system_item.device_system_tag == system_tag) {
system_html += `<button type="button" class="btn btn-success waves-effect waves-themed mr-2 mb-2" onclick="ChangeDeviceImportPanel('${building_item.device_building_tag}', '${system_item.device_system_tag}')">${system_item.device_system_tag}</button>`
}
else {
system_html += `<button type="button" class="btn btn-secondary waves-effect waves-themed mr-2 mb-2" onclick="ChangeDeviceImportPanel('${building_item.device_building_tag}', '${system_item.device_system_tag}')">${system_item.device_system_tag}</button>`
}
});
$('#import-temp-system-tag-list').append(system_html);
if (system_tag == '') {
$('#import-temp-system-tag-list').children().first().trigger('click');
return;
} else {
$('#import-temp-floor-tag-list').empty();
building_item.device_system_tags.forEach(function (system_item, system_item_index) {
if (system_item.device_system_tag == system_tag) {
var floor_html = '';
system_item.device_floor_tags.forEach(function (floor_item, floor_item_index) {
if (floor_item.device_floor_tag == floor_tag) {
floor_html += `<button type="button" class="btn btn-success waves-effect waves-themed mr-2 mb-2" onclick="ChangeDeviceImportPanel('${building_item.device_building_tag}', '${system_item.device_system_tag}', '${floor_item.device_floor_tag}')">${floor_item.device_floor_tag}</button>`
}
else {
floor_html += `<button type="button" class="btn btn-secondary waves-effect waves-themed mr-2 mb-2" onclick="ChangeDeviceImportPanel('${building_item.device_building_tag}', '${system_item.device_system_tag}', '${floor_item.device_floor_tag}')">${floor_item.device_floor_tag}</button>`
}
});
$('#import-temp-floor-tag-list').append(floor_html);
if (floor_tag == '') {
$('#import-temp-floor-tag-list').children().first().trigger('click');
return;
} else {
$('#import-temp-name-tag-list').empty();
system_item.device_floor_tags.forEach(function (floor_item, floor_item_index) {
if (floor_item.device_floor_tag == floor_tag) {
var name_html = '';
floor_item.device_name_tags.forEach(function (name_item, name_item_index) {
name_html += `<button type="button" class="btn btn-secondary waves-effect waves-themed mr-2 mb-2 btn-name-tag"
onclick="ChangeDeviceImportCheckTempTable(
'${building_item.device_building_tag}',
'${system_item.device_system_tag}',
'${floor_item.device_floor_tag}',
'${name_item}')">${name_item}</button>`;
});
$('#import-temp-name-tag-list').append(name_html);
}
});
$('#import-temp-name-tag-list').children().first().trigger('click');
}
}
});
}
}
});
}
//#endregion
//#region 變更新增設備基本資料modal的列表
function ChangeDeviceImportCheckTempTable(building_tag = "", system_tag = "", floor_tag = "", name_tag = "") {
if ($(".btn-name-tag").hasClass("btn-success")) {
$(".btn-name-tag").removeClass("btn-success").addClass("btn-secondary");
}
$(".btn-name-tag").each(function (index, item) {
if ($(item).text() == name_tag) {
$(item).removeClass("btn-secondary").addClass("btn-success");
}
});
selected_building_tag = building_tag;
selected_system_tag = system_tag;
selected_floor_tag = floor_tag;
selected_name_tag = name_tag;
deviceImportCheckTempTable.ajax.reload(null, false);
}
//#endregion
//#region 設備儲存(透過新增按鈕)
function SaveDeviceAdd() {
var selectedBuilding_tag = selected_building_menu.building_tag ? selected_building_menu.building_tag : "";
var selectedMain_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.main_system_tag : "";
var selectedSub_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.sub_system ? selected_building_menu.main_system.sub_system.sub_system_tag : "" : "";
var selectedFloor_tag = selected_floor_tag ? selected_floor_tag : "";
if (selectedBuilding_tag == '' || selectedMain_system_tag == '' || selectedSub_system_tag == '' || selectedFloor_tag == '')
{
toast_warning("請先選擇系統類別及樓層。");
return;
}
var rows = deviceImportCheckTempTable.rows({ 'search': 'applied' }).nodes();
//取得被選擇的設備
var selectedDevices = $("input[name='selectedDevice[]']:checked", rows).map(function () {
var system_category = $(this).attr('data-system-category');
var device_disasters = $(this).attr('data-device-disaster');
return {
Device_number: $(this).val(),
Device_system_category_layer3: system_category,
Device_disasters: device_disasters
};
}).get();
if (selectedDevices.length <= 0) {
toast_warning("請選擇欲加入設備。");
return;
}
var json_selectedDevices = JSON.stringify(selectedDevices);
var blob = new Blob([json_selectedDevices],
{ type: "text/plain;charset=utf-8" });
var url = "/DeviceManage/SaveDeviceInfoAdd";
@*var send_data = {
Building_tag: selectedBuilding_tag,
Main_system_tag: selectedMain_system_tag,
Sub_system_tag: selectedSub_system_tag,
Floor_tag: selectedFloor_tag,
SelectedDevices: selectedDevices
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
toast_ok(rel.msg);
$("#device-info-add-modal").modal('hide');
deviceInfoTable.ajax.reload();
deviceKindTable.ajax.reload(null, false);
}, 'json');*@
$("#save-device-add-btn").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').attr("disabled", true);
var formData = new FormData();
formData.append("Building_tag", selectedBuilding_tag);
formData.append("Main_system_tag", selectedMain_system_tag);
formData.append("Sub_system_tag", selectedSub_system_tag);
formData.append("Floor_tag", selectedFloor_tag);
formData.append("SelectedDevicesFile", blob);
$.ajax({
type: "POST",
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (rel) {
$("#save-device-add-btn").html('確定').attr("disabled", false);
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
toast_ok(rel.msg);
$("#device-info-add-modal").modal('hide');
deviceInfoTable.ajax.reload();
deviceKindTable.ajax.reload(null, false);
},
fail: function (jqXHR, textStatus, errorThrown) {
$("#save-device-add-btn").html('確定').attr("disabled", false);
}
});
}
//#endregion
//#region 設備基本資料表單驗證
var DeviceInfoValidate = $("#device-info-edit-form").validate({
rules: {
device_name_modal: {
// required: true,
maxlength: 50,
filterspace: true
},
device_ip_modal: {
regex: /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/
},
device_port_modal: {
number: true
}
},
messages: {
device_ip_modal: {
regex: "請輸入正確的設備IP"
}
}
});
//#endregion
//#region 設備儲存(透過修改按鈕)
function SaveDeviceInfoEdit() {
if ($("#device-info-edit-form").valid()) {
var select_disasters = $("input[name='selectDisaster[]']:checked").map(function () {
return $(this).val();
}).get();
var url = "/DeviceManage/SaveDeviceInfoEdit";
var send_data = {
Device_guid: selected_device_guid,
Full_name: $("#device_name_modal").val(),
Device_coordinate_x: $("#device_coordinate_x_modal").val(),
Device_coordinate_y: $("#device_coordinate_y_modal").val(),
Device_disasters: select_disasters,
Device_ip: $("#device_ip_modal").val(),
Device_port: $("#device_port_modal").val(),
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
toast_ok(rel.msg);
deviceInfoTable.ajax.reload(null, false);
$("#device-info-edit-modal").modal('hide');
return;
}
}, 'json');
}
}
//#endregion
//#region 設備子節點表單驗證
var DeviceNodeValidate = $("#device-node-form").validate({
rules: {
device_node_name_modal: {
required: true,
maxlength: 50,
filterspace: true
},
}
});
//#endregion
//#region 設備子節點儲存
function SaveDeviceNode() {
if ($("#device-node-form").valid()) {
var url = "/DeviceManage/SaveDeviceNode";
var send_data = {
Device_guid: selected_device_guid,
Device_node_guid: selected_device_node_guid,
Full_name: $("#device_node_name_modal").val(),
Device_node_coordinate_x: $("#device_node_coordinate_x_modal").val(),
Device_node_coordinate_y: $("#device_node_coordinate_y_modal").val(),
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
toast_ok(rel.msg);
deviceInfoTable.ajax.reload(null, false);
@*Object.keys(selected_device_parents_collapses).forEach(key => {
var tr = selected_device_parents_collapses[key];
var row = deviceInfoTable.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
tr.find("td").first().html(`<i class="fal fa-plus"></i>`);
}
else {
// Open this row
console.log(row.data());
row.child(DeviceNodeFormat(row.data().device_nodes)).show();
tr.addClass('shown');
tr.find("td").first().html(`<i class="fal fa-minus"></i>`);
}
});*@
$("#device-node-modal").modal("hide");
return;
}
}, 'json');
}
}
//#endregion
//#region 設備種類表單驗證
var DeviceKindValidate = $("#device-kind-form").validate({
rules: {
device_image_modal: {
accept: "image/*"
},
device_normal_text_modal: {
// required: true,
maxlength: 7,
filterspace: true
},
device_normal_color_modal: {
// required: true,
maxlength: 7,
filterspace: true
},
device_close_color_modal: {
// required: true,
maxlength: 7,
filterspace: true
},
device_error_color_modal: {
// required: true,
maxlength: 7,
filterspace: true
},
}
});
//#endregion
//#region 設備種類儲存
function SaveDeviceKind() {
if ($("#device_normal_point_name_modal").val() != ""
&& $("#device_normal_point_name_modal option:selected").text() != "ER"
&& $("#device_close_point_name_modal").val() != ""
&& $("#device_close_point_name_modal option:selected").text() != "ER"
&& $("#device_normal_point_name_modal").val() != $("#device_close_point_name_modal").val()) {
toast_warning("點位名稱設定需相同");
return;
}
if ($("#device_normal_point_value_modal").val() == $("#device_close_point_value_modal").val()) {
toast_warning("點位值設定重複,請修改");
return;
}
if ($("#device-kind-form").valid()) {
$("#save-device-kind-btn").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').attr("disabled", true);
var url = "/DeviceManage/SaveDeviceKind";
var formData = new FormData();
formData.append("Device_kind_guid", selected_device_kind_guid);
formData.append("Device_building_tag", selected_device_building_tag);
formData.append("Device_system_tag", selected_device_system_tag);
formData.append("Device_floor_tag", selected_device_floor_tag);
formData.append("Device_name_tag", selected_device_name_tag);
formData.append("Device_normal_text", $("#device_normal_text_modal").val());
if ($("#device_normal_point_name_modal").val() != null && $("#device_normal_point_name_modal").val() != "") {
formData.append("Device_normal_point_guid", $("#device_normal_point_name_modal").val());
if ($("#device_normal_point_col_modal").val() != null && $("#device_normal_point_col_modal").val() != "") {
formData.append("Device_normal_point_col", $("#device_normal_point_col_modal").val());
}
if ($("#device_normal_point_value_modal").val() != null && $("#device_normal_point_value_modal").val() !="") {
formData.append("Device_normal_point_value", $("#device_normal_point_value_modal").val());
}
}
formData.append("Device_normal_color", $("#device_normal_color_modal").val());
formData.append("Device_normal_flashing", $("#device_normal_flashing_modal:checked").val());
formData.append("Device_close_text", $("#device_close_text_modal").val());
if ($("#device_close_point_name_modal").val() != null && $("#device_close_point_name_modal").val() != "") {
formData.append("Device_close_point_guid", $("#device_close_point_name_modal").val());
if ($("#device_close_point_col_modal").val() != null && $("#device_close_point_col_modal").val() != "") {
formData.append("Device_close_point_col", $("#device_close_point_col_modal").val());
}
if ($("#device_close_point_value_modal").val() != null && $("#device_close_point_value_modal").val() != "") {
formData.append("Device_close_point_value", $("#device_close_point_value_modal").val());
}
}
formData.append("Device_close_color", $("#device_close_color_modal").val());
formData.append("Device_close_flashing", $("#device_close_flashing_modal:checked").val());
formData.append("Device_error_text", $("#device_error_text_modal").val());
if ($("#device_error_point_name_modal").val() != null && $("#device_error_point_name_modal").val() != "") {
formData.append("Device_error_point_guid", $("#device_error_point_name_modal").val());
if ($("#device_error_point_col_modal").val() != null && $("#device_error_point_col_modal").val() != "") {
formData.append("Device_error_point_col", $("#device_error_point_col_modal").val());
}
if ($("#device_error_point_value_modal").val() != null && $("#device_error_point_value_modal").val() != "") {
formData.append("Device_error_point_value", $("#device_error_point_value_modal").val());
}
}
formData.append("Device_error_color", $("#device_error_color_modal").val());
formData.append("Device_error_flashing", $("#device_error_flashing_modal:checked").val());
formData.append("Device_error_independent", $("#device_error_independent_modal:checked").val());
@*formData.append("Device_close_color", $("#device_close_color_modal").val());
formData.append("Device_error_color", $("#device_error_color_modal").val());
formData.append("Device_flashing", $("#device_normal_flashing_modal:checked").val());*@
imgs = $('#device_image_modal')[0].files
if (imgs.length > 0) {
var file_names = imgs[0].name.split(".")
formData.append("Device_image_file", imgs[0])
formData.append("InitDeviceName", imgs[0].name);
}
$.ajax({
type: "POST",
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (rel) {
$("#save-device-kind-btn").html('確定').attr("disabled", false);
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
toast_ok(rel.msg);
deviceKindTable.ajax.reload(null, false);
$("#device-kind-modal").modal('hide');
return;
}
},
fail: function (jqXHR, textStatus, errorThrown) {
$("#save-device-kind-btn").html('確定').attr("disabled", false);
}
});
}
}
//#endregion
//#region 設備Master表單驗證
var DeviceMasterValidate = $("#device-master-form").validate({
rules: {
device_master_icon_modal: {
accept: "image/*"
},
device_master_full_name_modal: {
// required: true,
filterspace: true
}
}
});
//#endregion
//#region 設備Master儲存
function SaveDeviceMaster() {
if ($("#device-master-form").valid()) {
var url = "/DeviceManage/SaveDeviceMaster";
var formData = new FormData();
formData.append("Device_master_guid", selected_device_master_guid);
formData.append("Device_building_tag", selected_device_building_tag);
formData.append("Device_name_tag", selected_device_name_tag);
formData.append("Device_master_full_name", $("#device_master_full_name_modal").val());
imgs = $('#device_master_icon_modal')[0].files
if (imgs.length > 0) {
formData.append("Device_master_icon_file", imgs[0])
}
$("#save-device-master-btn").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').attr("disabled", true);
$.ajax({
type: "POST",
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (rel) {
$("#save-device-master-btn").html('確定').attr("disabled", false);
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
toast_ok(rel.msg);
deviceMasterTable.ajax.reload(null, false);
$("#device-master-edit-modal").modal('hide');
return;
}
},
fail: function (jqXHR, textStatus, errorThrown) {
$("#save-device-master-btn").html('確定').attr("disabled", false);
}
});
}
}
//#endregion
</script>
}