https://fhy.wra.gov.tw/fhyv2/js/290.f25c7099.js

1(self["webpackChunkvue"]=self["webpackChunkvue"]||[]).push([[290],{3405:function(t,e,i){"use strict";i.r(e),i.d(e,{default:function(){return g}});var a=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("main",[i("div",{staticClass:"block"},[i("div",{staticClass:"page-title"},[t._m(0),i("div",{staticClass:"bread"},[i("router-link",{attrs:{to:"/"}},[t._v("首頁")]),i("span",[t._v("/")]),i("router-link",{attrs:{to:"/monitor/cctvTable"}},[t._v("監控資訊")]),i("span",[t._v("/")]),i("router-link",{attrs:{to:"/monitor/cctvTable"}},[t._v("即時影像")])],1)])]),i("div",{staticClass:"block bg-gradual"},[i("div",{staticClass:"inner container"},[i("div",{staticClass:"select-bar"},[i("label",{attrs:{for:"type"}},[t._v("單位：")]),i("select",{directives:[{name:"model",rawName:"v-model",value:t.selected.type,expression:"selected.type"}],attrs:{id:"type",title:"selected_type"},on:{change:function(e){var i=Array.prototype.filter.call(e.target.options,(function(t){return t.selected})).map((function(t){var e="_value"in t?t._value:t.value;return e}));t.$set(t.selected,"type",e.target.multiple?i:i[0])}}},t._m(1),0),i("label",{attrs:{for:"county"}},[t._v("縣市：")]),i("select",{directives:[{name:"model",rawName:"v-model",value:t.selected.county,expression:"selected.county"}],attrs:{id:"county"},on:{change:function(e){var i=Array.prototype.filter.call(e.target.options,(function(t){return t.selected})).map((function(t){var e="_value"in t?t._value:t.value;return e}));t.$set(t.selected,"county",e.target.multiple?i:i[0])}}},[i("option",{domProps:{value:null}},[t._v("全縣市")]),t._m(2)],2)]),i("div",{staticClass:"news-list-table"},[i("div",{staticClass:"data-time"},[t._v("資料產出時間： "+t._s(t.localTime))]),i("div",{staticClass:"s-table"},[i("table",[t._m(3),i("tbody",[t._l(t.list,(function(e,a){return i("tr",{key:e.ID},[i("td",{attrs:{headers:"a"}},[t._v(t._s(a+1))]),i("td",{attrs:{headers:"b"}},[t._v(t._s(e.Counname))]),i("td",{attrs:{headers:"c"}},[i("span",{staticClass:"pointer",on:{click:function(i){return t.showMonitor(e)}}},[t._v(t._s(e.Name))])])])})),i("tr",{directives:[{name:"show",rawName:"v-show",value:0==t.list.length,expression:"list.length == 0"}],staticClass:"text-center"},[i("td",{attrs:{headers:"a b c",colspan:"3"}},[t._v("無資料")])])],2)])])])])]),i("div",{attrs:{id:"divWall"},on:{click:function(e){return t.closeWall()}}}),i("div",{attrs:{id:"divMonitor"}},[i("button",{attrs:{"aria-label":"close"},on:{click:function(e){return t.closeWall()}}},[t._v("x")]),i("div",{attrs:{id:"cctv-camera"}}),i("div",{attrs:{id:"cctv-images"}},[i("img",{attrs:{src:t.imageUrl,alt:t.displayName+"即時影像",title:t.displayName+"即時影像",width:"350",height:"200"}})]),i("div",[t._v(t._s(t.displayName))])]),i("loading",{attrs:{active:t.isLoading},on:{"update:active":function(e){t.isLoading=e}}}),i("commonfunctions")],1)},n=[function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("h2",[i("a",{attrs:{href:"#",title:"中央內容導盲磚",accesskey:"C"}},[t._v(":::")]),t._v("即時影像 ")])},function(){var t=this,e=t.$createElement,i=t._self._c||e;return t._l(t.option.type,(function(e){return i("option",{key:e,domProps:{value:e}},[t._v(t._s(e))])}))},function(){var t=this,e=t.$createElement,i=t._self._c||e;return t._l(t.option.county,(function(e){return i("option",{key:e.ID,domProps:{value:e}},[t._v(t._s(e.Name))])}))},function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("thead",[i("tr",[i("th",{staticClass:"width-10pct",attrs:{id:"a"}},[t._v("排序")]),i("th",{staticClass:"width-45pct",attrs:{id:"b"}},[t._v("縣市")]),i("th",{staticClass:"width-45pct",attrs:{id:"c"}},[t._v("名稱")])])])}],r=(i(3725),i(7400),i(1339),i(9411)),s=i.n(r),o=i(3431),l=i(161),c=i(9622);const u=t=>t.toString().padStart(2,"0");let d=null,h={water:[],road:[],other:[]};var m={metaInfo:{title:"經濟部水利署防災資訊網-監控資訊-即時影像資料"},components:{Loading:s(),commonfunctions:o.A},data(){return{isLoading:!1,displayName:"",imageUrl:"",localTime:"",option:{type:Object.values(c.nD.typeEnum),county:l.map((t=>({Name:t.Name,ID:t.ID,Order:t.Order}))).sort(((t,e)=>

1t.Order-e.Order))},selected:{type:c.nD.typeEnum.water,county:null}}},mounted(){let t=this;document.onkeydown=function(e){let i=window.event.keyCode;27!=i||!$("#divWall").hasClass("myBlur")||t.isLoading||t.$parent.isCheckingImg||t.closeWall()};let e=new Date;this.localTime=`${e.getFullYear()}-${u(e.getMonth()+1)}-${u(e.getDate())} ${u(e.getHours())}:${u(e.getMinutes())}`,this.initCCTVData()},computed:{list(){let t=[];switch(this.selected.type){case c.nD.typeEnum.water:t=this.selected.county?h.water.filter((t=>t.Counname==this.selected.county.Name)):h.water;break;case c.nD.typeEnum.road:t=this.selected.county?h.road.filter((t=>t.Counname==this.selected.county.Name)):h.road;break;case c.nD.typeEnum.other:t=this.selected.county?h.other.filter((t=>t.Counname==this.selected.county.Name)):h.other;break}return t}},methods:{async initCCTVData(){this.isLoading=!0;let t=(await this.$http.get("https://fhyv.wra.gov.tw/FhyWeb/v1/Api/CCTV/WRA/Station?$format=JSON")).data;h.water.push(...t.filter((t=>1==t.SourceId||3==t.SourceId||10==t.SourceId||20==t.SourceId||21==t.SourceId))),h.road.push(...t.filter((t=>11==t.SourceId))),h.other.push(...t.filter((t=>22==t.SourceId))),this.isLoading=!1},async showMonitor(t){$("#divMonitor").css("display","block"),$("#divWall").addClass("myBlur"),this.displayName=`${t.Counname}-${t.Name}`,this.isLoading=!0;let e=`https://fhyv.wra.gov.tw/FhyWeb/v1/Api/CCTV/WRA/Cameras/${encodeURIComponent(t.SourceId)}/${encodeURIComponent(t.ID)}`,i=new URL(e),a=(await this.$http.get(i.toString())).data;if(!(Array.isArray(a)&&a.length>0&&a[0].cameras))return!1;let n=a[0].cameras[0],r=0;if(clearInterval(d),n.images){let t=()=>{this.imageUrl=n.images[r++],r>=n.images.length&&(r=0),this.isLoading=!1};d=setInterval(t,1e3)}else n.video&&($("#cctv-camera").html(`<iframe style="width:352px; !important;height:240px; !important;" src="https://www.youtube.com/embed/${n.video[0]}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="true"></iframe>`),this.isLoading=!1)},closeWall(){$("#divMonitor").css("display","none"),$("#divWall").removeClass("myBlur"),$("#cctv-camera").html(""),this.imageUrl="",clearInterval(d)}}},p=m,v=i(845),f=(0,v.A)(p,a,n,!1,null,"73ab5610",null),g=f.exports},3431:function(t,e,i){"use strict";i.d(e,{A:function(){return l}});var a=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"block"},[i("div",{staticClass:"container"},[i("h2",{staticClass:"sub-title-w"},[t._v("常用功能")]),i("div",{staticClass:"common-used"},[i("router-link",{staticClass:"cu-1",attrs:{to:"/flood/platform",title:"防汛作業平台"}},[t._v("防汛作業平台")]),i("router-link",{staticClass:"cu-2",attrs:{to:"/service/tools",title:"防災避災工具"}},[t._v("防災避災工具")]),i("a",{staticClass:"cu-3",attrs:{href:"https://www.youtube.com/channel/UCUkeWdovSqtpGlLp7Ov0_fw",title:"防汛教育訓練(另開新視窗)",target:"_blank"}},[t._v("防汛教育訓練")]),i("router-link",{staticClass:"cu-4",attrs:{to:"/service/alertQuery",title:"警戒查詢"}},[t._v("警戒查詢")]),i("router-link",{staticClass:"cu-5",attrs:{to:"/monitor/reservoir",title:"水庫水情資訊"}},[t._v("水庫水情資訊")]),i("router-link",{staticClass:"cu-6",attrs:{to:"/monitor/cctv",title:"即時影像監控"}},[t._v("即時影像監控")])],1)])])},n=[],r=i(845),s={},o=(0,r.A)(s,a,n,!1,null,null,null),l=o.exports},9411:function(t){!function(e,i){t.exports=i()}("undefined"!=typeof self&&self,(function(){return function(t){var e={};function i(a){if(e[a])return e[a].exports;var n=e[a]={i:a,l:!1,exports:{}};return t[a].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=t,i.c=e,i.d=function(t,e,a){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:a})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)i.d(a,n,function(e){return t[e]}.bind(null,n));return a},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=1)}

1([function(t,e,i){},function(t,e,i){"use strict";i.r(e);var a="undefined"!=typeof window?window.HTMLElement:Object,n={mounted:function(){this.enforceFocus&&document.addEventListener("focusin",this.focusIn)},methods:{focusIn:function(t){if(this.isActive&&t.target!==this.$el&&!this.$el.contains(t.target)){var e=this.container?this.container:this.isFullPage?null:this.$el.parentElement;(this.isFullPage||e&&e.contains(t.target))&&(t.preventDefault(),this.$el.focus())}}},beforeDestroy:function(){document.removeEventListener("focusin",this.focusIn)}};function r(t,e,i,a,n,r,s,o){var l,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=i,c._compiled=!0),a&&(c.functional=!0),r&&(c._scopeId="data-v-"+r),s?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},c._ssrRegister=l):n&&(l=o?function(){n.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:n),l)if(c.functional){c._injectStyles=l;var u=c.render;c.render=function(t,e){return l.call(e),u(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,l):[l]}return{exports:t,options:c}}var s=r({name:"spinner",props:{color:{type:String,default:"#000"},height:{type:Number,default:64},width:{type:Number,default:64}}},(function(){var t=this.$createElement,e=this._self._c||t;return e("svg",{attrs:{viewBox:"0 0 38 38",xmlns:"http://www.w3.org/2000/svg",width:this.width,height:this.height,stroke:this.color}},[e("g",{attrs:{fill:"none","fill-rule":"evenodd"}},[e("g",{attrs:{transform:"translate(1 1)","stroke-width":"2"}},[e("circle",{attrs:{"stroke-opacity":".25",cx:"18",cy:"18",r:"18"}}),e("path",{attrs:{d:"M36 18c0-9.94-8.06-18-18-18"}},[e("animateTransform",{attrs:{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.8s",repeatCount:"indefinite"}})],1)])])])}),[],!1,null,null,null).exports,o=r({name:"dots",props:{color:{type:String,default:"#000"},height:{type:Number,default:240},width:{type:Number,default:60}}},(function(){var t=this.$createElement,e=this._self._c||t;return e("svg",{attrs:{viewBox:"0 0 120 30",xmlns:"http://www.w3.org/2000/svg",fill:this.color,width:this.width,height:this.height}},[e("circle",{attrs:{cx:"15",cy:"15",r:"15"}},[e("animate",{attrs:{attributeName:"r",from:"15",to:"15",begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}}),e("animate",{attrs:{attributeName:"fill-opacity",from:"1",to:"1",begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"}})]),e("circle",{attrs:{cx:"60",cy:"15",r:"9","fill-opacity":"0.3"}},[e("animate",{attrs:{attributeName:"r",from:"9",to:"9",begin:"0s",dur:"0.8s",values:"9;15;9",calcMode:"linear",repeatCount:"indefinite"}}),e("animate",{attrs:{attributeName:"fill-opacity",from:"0.5",to:"0.5",begin:"0s",dur:"0.8s",values:".5;1;.5",calcMode:"linear",repeatCount:"indefinite"}})]),e("circle",{attrs:{cx:"105",cy:"15",r:"15"}},[e("animate",{attrs:{attributeName:"r",from:"15",to:"15",begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}}),e("animate",{attrs:{attributeName:"fill-opacity",from:"1",to:"1",begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"}})])])}),[],!1,null,null,null).exports,l=r({name:"bars",props:{color:{type:String,default:"#000"},height:{type:Number,default:40},width:{type:Number,default:40}}},(function(){var t=this.$createElement,e=this._self._c||t;return e("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 30 30",height:this.height,width:this.width,fill:this.color}},[e("rect",{attrs:{x:"0",y:"13",width:"4",height:"5"}},[e("animate",{attrs:{attributeName:"height",attributeType:"XML",values:"5;21;5",begin:"0s",dur:"0.6s",repeatCount:"indefinite"}}),e("animate",{attrs:{attributeName:"y",attributeType:"XML",values:"13; 5; 13",begin:"0s",dur:"0.6s",repeatCount:"indefinite"}})]),e("rect",{attrs:{x:"10",y:"13",width:"4",height:"5"}},[e("animate",{attrs:{attributeName:"height",attributeType:"XML",values:"5;21;

15",begin:"0.15s",dur:"0.6s",repeatCount:"indefinite"}}),e("animate",{attrs:{attributeName:"y",attributeType:"XML",values:"13; 5; 13",begin:"0.15s",dur:"0.6s",repeatCount:"indefinite"}})]),e("rect",{attrs:{x:"20",y:"13",width:"4",height:"5"}},[e("animate",{attrs:{attributeName:"height",attributeType:"XML",values:"5;21;5",begin:"0.3s",dur:"0.6s",repeatCount:"indefinite"}}),e("animate",{attrs:{attributeName:"y",attributeType:"XML",values:"13; 5; 13",begin:"0.3s",dur:"0.6s",repeatCount:"indefinite"}})])])}),[],!1,null,null,null).exports,c=r({name:"vue-loading",mixins:[n],props:{active:Boolean,programmatic:Boolean,container:[Object,Function,a],isFullPage:{type:Boolean,default:!0},enforceFocus:{type:Boolean,default:!0},lockScroll:{type:Boolean,default:!1},transition:{type:String,default:"fade"},canCancel:Boolean,onCancel:{type:Function,default:function(){}},color:String,backgroundColor:String,blur:{type:String,default:"2px"},opacity:Number,width:Number,height:Number,zIndex:Number,loader:{type:String,default:"spinner"}},data:function(){return{isActive:this.active}},components:{Spinner:s,Dots:o,Bars:l},beforeMount:function(){this.programmatic&&(this.container?(this.isFullPage=!1,this.container.appendChild(this.$el)):document.body.appendChild(this.$el))},mounted:function(){this.programmatic&&(this.isActive=!0),document.addEventListener("keyup",this.keyPress)},methods:{cancel:function(){this.canCancel&&this.isActive&&(this.hide(),this.onCancel.apply(null,arguments))},hide:function(){var t=this;this.$emit("hide"),this.$emit("update:active",!1),this.programmatic&&(this.isActive=!1,setTimeout((function(){var e;t.$destroy(),void 0!==(e=t.$el).remove?e.remove():e.parentNode.removeChild(e)}),150))},disableScroll:function(){this.isFullPage&&this.lockScroll&&document.body.classList.add("vld-shown")},enableScroll:function(){this.isFullPage&&this.lockScroll&&document.body.classList.remove("vld-shown")},keyPress:function(t){27===t.keyCode&&this.cancel()}},watch:{active:function(t){this.isActive=t},isActive:function(t){t?this.disableScroll():this.enableScroll()}},computed:{bgStyle:function(){return{background:this.backgroundColor,opacity:this.opacity,backdropFilter:"blur(".concat(this.blur,")")}}},beforeDestroy:function(){document.removeEventListener("keyup",this.keyPress)}},(function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:t.transition}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.isActive,expression:"isActive"}],staticClass:"vld-overlay is-active",class:{"is-full-page":t.isFullPage},style:{zIndex:t.zIndex},attrs:{tabindex:"0","aria-busy":t.isActive,"aria-label":"Loading"}},[i("div",{staticClass:"vld-background",style:t.bgStyle,on:{click:function(e){return e.preventDefault(),t.cancel(e)}}}),i("div",{staticClass:"vld-icon"},[t._t("before"),t._t("default",[i(t.loader,{tag:"component",attrs:{color:t.color,width:t.width,height:t.height}})]),t._t("after")],2)])])}),[],!1,null,null,null).exports,u=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return{show:function(){var a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:i,r={programmatic:!0},s=Object.assign({},e,a,r),o=new(t.extend(c))({el:document.createElement("div"),propsData:s}),l=Object.assign({},i,n);return Object.keys(l).map((function(t){o.$slots[t]=l[t]})),o}}};i(0),c.install=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},a=u(t,e,i);t.$loading=a,t.prototype.$loading=a},e.default=c}]).default}))},9838:function(t,e,i){"use strict";var a=i(1605),n=i(2929),r=i(3938);a({target:"Iterator",proto:!0,real:!0},{forEach:function(t){n(r(this),t,{IS_ITERATOR:!0})}})}}]);
2//# sourceMappingURL=290.f25c7099.js.map