服务点图片

.gitignore

@@ -360,4 +360,5 @@ MigrationBackup/
 .ionide/
 
 # Fody - auto-generated XML schema
-FodyWeavers.xsd
+FodyWeavers.xsd
+/YLShipBuildLandMap.Web/wwwroot/content/upload/202401

YLShipBuildLandMap.Entity/ViewModel/Build/DepOrServicePointView.cs

@@ -11,6 +11,7 @@ namespace YLShipBuildLandMap.Entity.ViewModel.Build
         public Guid? FloorId { get; set; }
         public string FloorName { get; set; }
         public string RoomName { get; set; }
+        public string ImgUrl { get; set; }
     }
 
     public class DepOrServicePointRoomView

YLShipBuildLandMap.Entity/ViewModel/Build/RoomView.cs

@@ -27,6 +27,7 @@ namespace YLShipBuildLandMap.Entity.ViewModel.Build
         public string OpenTime { get; set; }
         public string ContactType { get; set; }
         public string Description { get; set; }
+        public string ImgUrl { get; set; }
     }
 
 }

YLShipBuildLandMap.Services/Build/DepOrServicePointService.cs

@@ -132,10 +132,12 @@ namespace YLShipBuildLandMap.Services.Build
 
             var depOrServicePointIdList = dataResult.rows.Select(s => s.DepartmentOrServicePointId).ToList();
             var roomList = GetDepOrServicePointRoomQuery(e => depOrServicePointIdList.Contains(e.DepartmentOrServicePointId)).ToList();
+            var fileList = this.DbContext.SysAttachment.Where(e => depOrServicePointIdList.Contains((Guid)e.ReferenceId) && e.Type == 1).ToList();
 
             dataResult.rows.ForEach(item =>
             {
                 item.RoomName = string.Join("、", roomList.Where(e => e.DepartmentOrServicePointId == item.DepartmentOrServicePointId && e.FloorId == item.FloorId).OrderBy(e => e.RoomSort).Select(s => s.RoomName).ToList());
+                item.ImgUrl = fileList.Where(e => e.ReferenceId == item.DepartmentOrServicePointId).FirstOrDefault()?.Url;
             });
 
             return dataResult;

YLShipBuildLandMap.Services/Build/RoomService.cs

@@ -140,7 +140,18 @@ namespace YLShipBuildLandMap.Services.Build
                     Description = ds.Description
                 };
 
-            return Task.FromResult(query.OrderBy(e => e.BuildingName).ThenBy(e => e.FloorSort).ThenBy(e => e.FloorName).ThenBy(e => e.Sort).ThenBy(e => e.RoomName).ToList());
+            var list = query.OrderBy(e => e.BuildingName).ThenBy(e => e.FloorSort).ThenBy(e => e.FloorName).ThenBy(e => e.Sort).ThenBy(e => e.RoomName).ToList();
+
+            var depOrServicePointIdList = list.Select(s => s.DepartmentOrServicePointId).ToList();
+
+            var fileList = this.DbContext.SysAttachment.Where(e => depOrServicePointIdList.Contains((Guid)e.ReferenceId) && e.Type == 1).ToList();
+
+            list.ForEach(item =>
+            {
+                item.ImgUrl = fileList.Where(e => e.ReferenceId == item.DepartmentOrServicePointId).FirstOrDefault()?.Url;
+            });
+
+            return Task.FromResult(list);
         }
 
     }

YLShipBuildLandMap.Web/Controllers/Common/FileController.cs

@@ -135,5 +135,40 @@ namespace YLShipBuildLandMap.Web.Controllers.Common
 
             return File(memoryStream, "application/octet-stream", fileNewName, false);
         }
+
+        [HttpGet]
+        [AllowAnonymous]
+        public ResultMessage<ImageBase64> GetImageBase64(Guid fileId)
+        {
+            var file = FileService.GetFileById(fileId).Result;
+            string base64string = "";
+            int height = 0;
+            int width = 0;
+
+            //打开文件 
+            //FileStream fileStream = new FileStream(file.Url, FileMode.Open, FileAccess.Read, FileShare.Read);
+
+            var fileStream = FileServerManager.GetFileStream(file.Url);
+
+            // 读取文件的 byte[] 
+            byte[] bytes = new byte[fileStream.Length];
+            fileStream.Read(bytes, 0, bytes.Length);
+            base64string = Convert.ToBase64String(bytes);
+
+            System.Drawing.Image image = System.Drawing.Image.FromStream(fileStream);
+            height = image.Height;
+            width = image.Width;
+
+            fileStream.Close();
+
+            return ResultMessage.Success(new ImageBase64() { Base64Data = base64string, Height = height, Width = width });
+        }
+
+        public class ImageBase64
+        {
+            public string Base64Data { get; set; }
+            public int Height { get; set; }
+            public int Width { get; set; }
+        }
     }
 }

YLShipBuildLandMap.Web/wwwroot/app/js/service.js

@@ -6331,5 +6331,155 @@ notrelated:是否取消关联用一个父元素的input标签(点击input标签
 
                         }
                     }
+                }).directive('imgComponent', function ($state, $http, $bsRouterState, $uuid, $bsfiles) {
+                    return {
+                        restrict: 'EA',
+                        require: '?ngModel',
+                        //作用域
+                        scope: {
+                            filerefid: '=',
+                            filetypeid: '=',
+                            readonly: '=',
+                            ismulti: "=?",
+                            height: '=?',
+                            imgList: '=?',
+                            width: '=?'
+                        },
+                        //html
+                        templateUrl: '../js/template/modal-showimg.html',
+                        //link函数
+                        link: function (scope) {
+                            scope.modalId = $uuid.getUUID();
+                            scope.img = { rotate: 0, scale: 1, isload: false, url: '' };
+                            scope.imgList = [];
+                            scope.showIndex = -1;
+                            scope.height = scope.height || 100;
+                            scope.width = scope.width || 130;
+                            //图片附件
+                            scope.reqFileModel = {
+                                selectdata: { FileRefID: '', pageindex: 1, pagesize: 10, ptotal: 0 },
+                                filetype: 1,
+                                items: [],
+                                readonly: false,
+                                typeparams: {
+                                    types: ['jpg', 'bmp', 'png', 'gif', 'jpe', 'jpeg'],
+                                    errormsg: '图片格式必须为*.jpg,*.gif,*.png,*.bmp,*.jpe,*.jpeg等格式'
+                                }
+                            };
+
+                            scope.$watch('filerefid', function (newVal, oldVal) {
+                                if (newVal != null) {
+                                    scope.img = { rotate: 0, scale: 1, isload: false, url: '' };
+                                    scope.getImgList();
+                                }
+                            });
+                            scope.getImgList = function () {
+                                $http
+                                    ({
+                                        method: 'get',
+                                        url: '../../api/common/File/GetFileList',
+                                        params: {
+                                            fileRefId: scope.filerefid,
+                                            fileType: scope.filetypeid,
+                                            pageindex: 1,
+                                            pagesize: 1000
+                                        }
+                                    }).then(function (result) {
+                                        scope.imgList = result.data.Data.Result.rows;
+                                        scope.imgList.forEach(img => {
+                                            if (!img.base64) {
+                                                $http
+                                                    ({
+                                                        method: 'get',
+                                                        url: '../../api/common/File/GetImageBase64',
+                                                        params: {
+                                                            fileId: img.AttachmentId,
+                                                        }
+                                                    }).then(function (imgRes) {
+                                                        if (imgRes.data.IsSuccess) {
+                                                            img.success = true;
+                                                            img.base64 = "data:image/png;base64," + imgRes.data.Data.Base64Data;
+                                                            img.height = imgRes.data.Data.Height;
+                                                            img.width = imgRes.data.Data.Width;
+                                                            img.blobUrl = URL.createObjectURL(scope.base64ToBlob(img.base64));
+                                                        }
+                                                        else {
+                                                            img.success = false;
+                                                        }
+                                                    }, (error) => {
+                                                        img.success = false;
+                                                    });
+                                            }
+                                        });
+                                    });
+                            };
+                            scope.showImg = function (index) {
+                                scope.img.rotate = 0;
+                                scope.showIndex = index;
+                                scope.setBigImgUrl();
+                            };
+                            scope.uploadImg = function () {
+                                scope.reqFileModel.selectdata.FileRefID = scope.filerefid;
+                                scope.reqFileModel.filetype = scope.filetypeid;
+                                $bsfiles.addFile(scope.reqFileModel).then(function (fid) {
+                                    scope.getImgList();
+                                });
+                            };
+                            scope.deleteImg = function (fid) {
+                                if (confirm("是否删除？")) {
+                                    $http({
+                                        url: '../../api/common/File/DeleteFile',
+                                        method: 'GET',
+                                        params: { fileId: fid }
+                                    }).then(function (rq) {
+                                        if (rq.data.IsSuccess) {
+                                            scope.getImgList();
+                                        }
+                                        $alert({
+                                            title: '消息',
+                                            content: rq.data.Message,
+                                            placement: 'top',
+                                            type: 'info',
+                                            show: true,
+                                            duration: 3
+                                        });
+                                    });
+                                }
+                            };
+                            scope.up = function () {
+                                scope.showIndex -= 1;
+                                scope.img = { rotate: 0, scale: 1, isload: false, url: '' };
+                                scope.setBigImgUrl();
+                            };
+                            scope.next = function () {
+                                scope.showIndex += 1;
+                                scope.img = { rotate: 0, scale: 1, isload: false, url: '' };
+                                scope.setBigImgUrl();
+                            };
+                            scope.zoomIn = function () {
+                                scope.img.scale += 0.1;
+                            };
+                            scope.zoomOut = function () {
+                                scope.img.scale -= 0.1;
+                            };
+                            scope.setBigImgUrl = function () {
+                                scope.img.isload = scope.imgList[scope.showIndex].success;
+                                scope.img.url = scope.imgList[scope.showIndex].blobUrl;
+                            };
+
+                            scope.base64ToBlob = function (data) {
+                                var arr = data.split(','),
+                                    mime = arr[0].match(/:(.*?);/)[1],
+                                    bstr = atob(arr[1]),
+                                    n = bstr.length,
+                                    u8arr = new Uint8Array(n);
+
+                                while (n--) {
+                                    u8arr[n] = bstr.charCodeAt(n);
+                                }
+                                return new Blob([u8arr], { type: mime });
+                            }
+                        }
+                    }
                 });
 })(angular);

YLShipBuildLandMap.Web/wwwroot/app/js/template/modal-showimg.html

@@ -0,0 +1,83 @@
+<style type="text/css">
+    /*图片列表*/
+    .img-list {
+        display: flex;
+        text-align: center;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+        .img-list .img-item {
+            width: 20%;
+            position: relative;
+        }
+
+            .img-list .img-item img {
+                padding: 0px;
+                height: 100px;
+                width: 100px;
+                cursor: pointer;
+                border-radius: 14px;
+            }
+</style>
+<div class="img-list">
+    <div class="img-item" ng-repeat="it in imgList" style="width:{{width+20}}px;">
+        <div style="padding:5px 10px;">
+            <img ng-if="it.success" style="width:{{width}}px;height:{{height}}px;margin: 5px 0;cursor: pointer;"
+                 ng-src="{{it.blobUrl}}"
+                 data-toggle="modal"
+                 data-target="#{{modalId}}" ng-click="showImg($index)" onerror="this.src='images/default.png'" />
+            <img ng-if="!it.success" style="width:{{width}}px;height:{{height}}px;margin: 5px 0;cursor: pointer;"
+                 src="images/default.png" />
+            <i ng-if="!readonly" class="material-icons remove-icon"
+               ng-click="deleteImg(it.AttachmentId)">remove_circle_outline</i>
+        </div>
+    </div>
+    <i ng-if="!readonly && (ismulti || (!ismulti && imgList.length==0))" class="material-icons dj-add"
+       ng-class="imgList.length>0?'dj-add-pd':''"
+       ng-click="uploadImg()">add_circle_outline</i>
+    <div ng-if="imgList.length==0 && readonly==true" style="padding: 10px;">
+        暂无图片
+    </div>
+</div>
+<!-- 查看大图-->
+<div class="modal fade text-center" id="{{modalId}}" tabindex="-1" role="dialog">
+    <div class="modal-dialog bigimg-modal">
+        <div class="card">
+            <div class="header">
+                <div class="btn-tool" style="float: left !important;margin: 12px;">
+                    <button class="close" ng-click="up()" ng-if="showIndex>0" style="padding-right: 10px;">
+                        上一张
+                    </button>
+                    <button class="close" ng-click="next()" ng-if="showIndex<(imgList.length-1)">
+                        下一张
+                    </button>
+                </div>
+                <!--<div class="btn-tool" style="float: left !important;margin: 12px;">
+                    <button class="close" ng-click="zoomIn()" style="padding-right: 10px;">
+                        <span class="glyphicon glyphicon-zoom-in btn-refresh-icon"></span>
+                    </button>
+                    <button class="close" ng-click="zoomOut()" style="padding-right: 10px;">
+                        <span class="glyphicon glyphicon-zoom-out btn-refresh-icon"></span>
+                    </button>
+                    <button class="close" ng-click="img.rotate=img.rotate+90">
+                        <span class="glyphicon glyphicon-repeat btn-refresh-icon"></span>
+                    </button>
+                </div>-->
+                <div class="btn-tool">
+                    <button type="button" class="close btn-close"
+                            data-dismiss="modal">
+                        &times;
+                    </button>
+                </div>
+            </div>
+            <div class="body" style="overflow: auto;display:block;margin: 50px;">
+                <div ng-if="img.isload" style="transform:scale({{img.scale}});">
+                    <img ng-src="{{img.url}}"
+                         style="max-width: 100%;transform:rotate({{img.rotate}}deg);-webkit-transform:rotate({{img.rotate}}deg);-moz-transform:rotate({{img.rotate}}deg);"
+                         ng-click="img.rotate=img.rotate+90" />
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

YLShipBuildLandMap.Web/wwwroot/app/main/depOrService/edit.html

@@ -32,6 +32,15 @@
                                     <textarea name="Description" ng-model="dataModel.Description" class="form-control" />
                                 </td>
                             </tr>
+                            <tr>
+                                <th>
+                                    图片
+                                </th>
+                                <td colspan="3">
+                                    <img-component ng-if="imgConfig!=null" data-filerefid="imgConfig.filerefid" data-filetypeid="imgConfig.filetypeid"
+                                                   data-ismulti="imgConfig.ismulti" data-height="imgConfig.height" data-readonly="imgConfig.readonly" data-img-list="imgConfig.imgList"></img-component>
+                                </td>
+                            </tr>
                         </table>
                     </div>
                     <div class="dj-formtable">

YLShipBuildLandMap.Web/wwwroot/app/main/depOrService/edit.js

@@ -3,6 +3,7 @@
     $scope.parentLoad = editDepOrServiceModal.parentLoad;
     $scope.dataModel = { BuildingId: null };
     $scope.roomList = [];
+    $scope.imgConfig = null;
 
     $scope.loadData = function () {
         $loading.show();
@@ -16,6 +17,7 @@
             $loading.hide();
             $scope.dataModel = result.data.Data;
             $scope.getRoomList();
+            $scope.setFileModel();
 
         }, function (resp) {
             $loading.hide();
@@ -89,7 +91,17 @@
 
     $scope.deleteRoom = function (index) {
         $scope.roomList.splice(index, 1);
-    }
+    };
+
+    $scope.setFileModel = function () {
+        $scope.imgConfig = {
+            filerefid: $scope.dataModel.DepartmentOrServicePointId || undefined,
+            filetypeid: 1,
+            readonly: false,
+            ismulti: false,
+            imgList: []
+        };
+    };
 
     $scope.getRoomList = function () {
         $http({

YLShipBuildLandMap.Web/wwwroot/app/main/map-index.html

@@ -41,7 +41,8 @@
     <div>
         <button type="button" class="close bcak_btn" ng-click="coloseRoom()">返回</button>
         <div class="top_img">
-            <img src="images/test.png" />
+            <!--<img src="images/test.png" />-->
+            <img ng-if="roomModel.ImgUrl" ng-src="{{roomModel.ImgUrl}}"/>
         </div>
         <div class="detail_content">
             <div style="font-size:16px;font-weight:bold;">