1. 點擊圖片 part2

SolarPower/Helper/DatabaseHelper.cs

@@ -32,12 +32,13 @@ namespace SolarPower.Helper
             EDFunction ed = new EDFunction();
 
             var serverStr = ed.AESDecrypt(dbConfig.Server);
+            var portStr = ed.AESDecrypt(dbConfig.Port);
             var databaseStr = ed.AESDecrypt(dbConfig.Database);
             var rootStr = ed.AESDecrypt(dbConfig.Root);
             var passwordStr = ed.AESDecrypt(dbConfig.Password);
 
-            //var connStr = $"server={serverStr};database={databaseStr};user={rootStr};password={passwordStr};charset=utf8;";
+            var connStr = $"server={serverStr};port={portStr};database={databaseStr};user={rootStr};password={passwordStr};charset=utf8;";
-            var connStr = @"server=210.61.91.43;port=10068;database=solar_power_test;user=idafenweb;password=P@ssw0rd;charset=utf8;";
+            //var connStr = @"server=210.61.91.43;port=10068;database=solar_power_test;user=idafenweb;password=P@ssw0rd;charset=utf8;";
 
             this._connectionString = connStr;
         }

SolarPower/Models/DBConfig.cs

@@ -8,6 +8,7 @@ namespace SolarPower.Models
     public class DBConfig
     {
         public string Server { get; set; }
+        public string Port { get; set; }
         public string Database { get; set; }
         public string Root { get; set; }
         public string Password { get; set; }

SolarPower/Startup.cs

@@ -34,6 +34,7 @@ namespace SolarPower
             Configuration = configuration;
 
             dBConfig.Server = Configuration.GetValue<string>("DBConfig:Server");
+            dBConfig.Port = Configuration.GetValue<string>("DBConfig:Port");
             dBConfig.Database = Configuration.GetValue<string>("DBConfig:Database");
             dBConfig.Root = Configuration.GetValue<string>("DBConfig:Root");
             dBConfig.Password = Configuration.GetValue<string>("DBConfig:Password");

SolarPower/Views/Operation/OperationRecord.cshtml

@@ -204,7 +204,7 @@
                         <p>檔案上傳</p>
                     </div>
                     <div id="recode_files_div" class="col-10">
-                        <div class="row align-items-center"></div>
+                        <div class="row align-items-center img-zoom-div"></div>
                     </div>
                 </div>
                 <div class="row px-3">
@@ -387,7 +387,7 @@
                     'targets': 7,
                     'searchable': false,
                     'orderable': false,
-                    'className': 'dt-body-center',
+                    'className': 'dt-body-center img-zoom-div',
                     'createdCell': function (td, cellData, rowData, row, col) {
                         $(td).empty();
                         $(td).append('<div class="row"></div>');
@@ -601,6 +601,13 @@
             OperationPlanTable.ajax.reload();
         })
 
+        //#endregion
+
+         //#region 點擊圖片放大
+        $('#operation_recode_table').on("click", "img.img-zoom", function () {
+            var _this = $(this);//將當前的pimg元素作為_this傳入函式
+            imgShow("#img-zoom-outer-div", "#innerdiv", "#bigimg", _this);
+        });
         //#endregion
 
         //#region 編輯表單內容
@@ -672,6 +679,7 @@
         });
         //#endregion
 
+
         //#region 表單驗證
         $("#recode-form").validate({
             rules: {
@@ -808,7 +816,7 @@
             } else if (word_format.indexOf(split[split.length - 1].toLowerCase()) > -1) {
                 str += '<a href="' + value.fileName + '" class="btn btn-info waves-effect waves-themed mb-3 mr-2" download><i class="fal fa-file-word"></i></a>';
             } else {
-                str += '<img src="' + value.fileName + '" width="100%"/>';
+                str += '<img src="' + value.fileName + '" class="img-zoom" width="100%" />';
             }
             str += '</div>';
             dom.append(str);

SolarPower/Views/Shared/_Layout.cshtml

@@ -1095,9 +1095,9 @@
     </div>
     <!-- /.變更密碼 -->
     <!-- Image Zoom Outer Div -->
-    <div id="img-zoom-outer-div" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:9999;width:100%;height:100%;display:none;">
+    <div id="img-zoom-outer-div" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:9999;width:100%;height:100%; overflow-y:scroll;display:none;">
-        <div id="innerdiv" style="position:absolute;">
+        <div id="innerdiv" style="position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);width:1440px;">
-            <img id="bigimg" style="border:5px solid #fff;" src="" />
+            <img id="bigimg" style="border:5px solid #fff;" width="100%" src="" />
         </div>
     </div>
 

SolarPower/appsettings.Development.json

@@ -9,6 +9,7 @@
   "LoginExpireMinute": 60, //登入到期時間，單位(分)
   "DBConfig": {
     "Server": "LPp7aTdHGEFQJieGkSGl0g==",
+    "Port": "CY1x+1WYXRCBab3wKnBCOQ==",
     "Database": "z8TVtiXZ6MwgWbUEAOXA/fiHzd7c0iUhFqn1mHzxhKo=",
     "Root": "mWlR2HshQNhRRE34jg4kdg==",
     "Password": "y4uPqlH9ncTgR/I07qpwaA=="

SolarPower/appsettings.json

@@ -9,10 +9,11 @@
   "AllowedHosts": "*",
   "LoginExpireMinute": 60, //登入到期時間，單位(分)
   "DBConfig": {
-    "Server": "LPp7aTdHGEFQJieGkSGl0g==",
+    "Server": "MVgHWzR3rGDgD57TUoFunA==",
-    "Database": "k48iBBWXwJHPZF9zkF8UjreGN2uYWz6R",
+    "port": "r4AoXMUDodcQjIzofGNCcg==",
-    "Root": "2TdWJL+VXK8xbnhD8iA0zNJMT95nSE5W",
+    "Database": "Lxlx7Hae506yu/zopo2npw==",
-    "Password": "BxXjVEJCYCyPmlt03xAKmUNEnXzHhw1j"
+    "Root": "mWlR2HshQNhRRE34jg4kdg==",
+    "Password": "y4uPqlH9ncTgR/I07qpwaA=="
   },
   "SMTPConfig": {
     "Host": "smtp.gmail.com",

SolarPower/wwwroot/js/image.zoom.js

@@ -11,39 +11,43 @@ function imgShow(outerdiv, innerdiv, bigimg, _this) {
     var src = _this.attr("src");//獲取當前點選的pimg元素中的src屬性
     $(bigimg).attr("src", src);//設定#bigimg元素的src屬性
 
-    /*獲取當前點選圖片的真實大小，並顯示彈出層及大圖*/
+    $("body").css({ "position": "sticky", "overflow": "hidden" });
-    $(_this).attr("src", src).on("load", function () {
-        var windowW = $(window).width();//獲取當前視窗寬度
-        var windowH = $(window).height();//獲取當前視窗高度
-        var realWidth = this.width;//獲取圖片真實寬度
-        var realHeight = this.height;//獲取圖片真實高度
-        var imgWidth, imgHeight;
-        //var scale = 0.8;//縮放尺寸，當圖片真實寬度和高度大於視窗寬度和高度時進行縮放
-
-        var scale = 1440 / realWidth; //放大圖片到1440p
-
-        if (realHeight > windowH * scale) {//判斷圖片高度
-            imgHeight = windowH * scale;//如大於視窗高度，圖片高度進行縮放
-            imgWidth = imgHeight / realHeight * realWidth;//等比例縮放寬度
-            if (imgWidth > windowW * scale) {//如寬度扔大於視窗寬度
-                imgWidth = windowW * scale;//再對寬度進行縮放
-            }
-        } else if (realWidth > windowW * scale) {//如圖片高度合適，判斷圖片寬度
-            imgWidth = windowW * scale;//如大於視窗寬度，圖片寬度進行縮放
-            imgHeight = imgWidth / realWidth * realHeight;//等比例縮放高度
-        } else {//如果圖片真實高度和寬度都符合要求，高寬不變
-            imgWidth = realWidth;
-            imgHeight = realHeight;
-        }
-        $(bigimg).css("width", imgWidth);//以最終的寬度對圖片縮放
-
-        var w = (windowW - imgWidth) / 2;//計算圖片與視窗左邊距
-        var h = (windowH - imgHeight) / 2;//計算圖片與視窗上邊距
-        $(innerdiv).css({ "top": h, "left": w });//設定#innerdiv的top和left屬性
     $(outerdiv).fadeIn("fast");//淡入顯示#outerdiv及.pimg
-    });
+
+    ///*獲取當前點選圖片的真實大小，並顯示彈出層及大圖*/
+    //$(_this).attr("src", src).on("load", function () {
+    //    var windowW = $(window).width();//獲取當前視窗寬度
+    //    var windowH = $(window).height();//獲取當前視窗高度
+    //    var realWidth = this.width;//獲取圖片真實寬度
+    //    var realHeight = this.height;//獲取圖片真實高度
+    //    var imgWidth, imgHeight;
+    //    //var scale = 0.8;//縮放尺寸，當圖片真實寬度和高度大於視窗寬度和高度時進行縮放
+
+    //    var scale = 1440 / realWidth; //放大圖片到1440p
+
+    //    if (realHeight > windowH * scale) {//判斷圖片高度
+    //        imgHeight = windowH * scale;//如大於視窗高度，圖片高度進行縮放
+    //        imgWidth = imgHeight / realHeight * realWidth;//等比例縮放寬度
+    //        if (imgWidth > windowW * scale) {//如寬度扔大於視窗寬度
+    //            imgWidth = windowW * scale;//再對寬度進行縮放
+    //        }
+    //    } else if (realWidth > windowW * scale) {//如圖片高度合適，判斷圖片寬度
+    //        imgWidth = windowW * scale;//如大於視窗寬度，圖片寬度進行縮放
+    //        imgHeight = imgWidth / realWidth * realHeight;//等比例縮放高度
+    //    } else {//如果圖片真實高度和寬度都符合要求，高寬不變
+    //        imgWidth = realWidth * scale;
+    //        imgHeight = realHeight * scale;
+    //    }
+    //    $(bigimg).css("width", imgWidth);//以最終的寬度對圖片縮放
+
+    //    var w = (windowW - imgWidth) / 2;//計算圖片與視窗左邊距
+    //    var h = (windowH - imgHeight) / 2;//計算圖片與視窗上邊距
+    //    $(innerdiv).css({ "top": h, "left": w });//設定#innerdiv的top和left屬性
+    //    $(outerdiv).fadeIn("fast");//淡入顯示#outerdiv及.pimg
+    //});
 
     $(outerdiv).click(function () {//再次點選淡出消失彈出層
         $(this).fadeOut("fast");
+        $("body").css({ "position": "static", "overflow": "auto" });
     });
 }  

SolarPower/wwwroot/js/site.js

@@ -123,6 +123,7 @@ function ChangePassword() {
         $.post(url, send_data, function (rel) {
             if (rel.code == "9999") {
                 toast_error(rel.msg);
+                return;
             }
             else if (rel.code == "9998") {
                 toast_error(rel.msg);
@@ -130,6 +131,10 @@ function ChangePassword() {
                 setTimeout(function () {
                     location.href = "/Login/Logout";
                 }, 5000)
+                return;
+            } else if (rel.code == "0001") {
+                toast_error(rel.msg);
+                return;
             }
 
             toast_ok(rel.msg);