ocpview-plus 0.0.1

package/src/components/icon/common-icon.vue

@@ -0,0 +1,53 @@
+<template>
+   <component :is="iconType" :type="iconName" :color="iconColor" :size="iconSize" :proConfig="proConfig" @click="click"/>
+</template>
+
+<script>
+import Eicon from './eicon.vue';
+// import Faicon from './faicon.vue';
+export default {
+    name: 'commonicon',
+    components: {Eicon},
+    props: {
+        type: {
+            type: String,
+            required: true
+        },
+        color: String,
+        size: [Number,String],
+        proConfig: {
+            type:Object,
+            default:() => {}
+        }
+    },
+    computed: {
+        iconType () {
+            return this.type.indexOf('_') === 0 ? 'Eicon' : this.type.indexOf('fa_') === 0?'Faicon':'Icon';
+        },
+        iconName () {
+            return this.iconType === 'Eicon' ? this.getCustomIconName(this.type) : this.iconType === 'Faicon'? this.getCustomIconName2(this.type):this.type;
+        },
+        iconSize () {
+            return this.size || (this.iconType === 'Eicon' ? 12 : undefined);
+        },
+        iconColor () {
+            return this.color || '';
+        }
+    },
+    methods: {
+        getCustomIconName (iconName) {
+            return iconName.slice(1);
+        },
+        getCustomIconName2(iconName) {
+            return iconName.slice(3);
+        },
+        click() {
+            this.$emit('click','');
+        }
+    }
+};
+</script>
+
+<style>
+
+</style>

package/src/components/icon/eicon.vue

@@ -0,0 +1,29 @@
+
+<template>
+   <svg  class="eicon" aria-hidden="true" :font-size="size" :color="color"  @click="click">
+        <use :xlink:href="'#icon-'+type" ></use>
+  </svg>
+</template>
+<script>
+export default {
+    name: 'eicon',
+    props: {
+        type: String,
+        size: [Number, String],
+        color:String
+    },
+    methods: {
+        click() {
+            this.$emit('click','');
+        }
+    }
+};
+</script>
+<style type="text/css">
+.eicon {
+   width: 1em; height: 1em;
+   vertical-align: -0.15em;
+   fill: currentColor;
+   overflow: hidden;
+}
+</style>

package/src/components/icon/icons.vue

@@ -0,0 +1,42 @@
+<template>
+  <i :class="`iconfont icon-${type}`" :style="styles" @click="click"></i>
+</template>
+
+<script>
+export default {
+    name: 'Icons',
+    props: {
+        type: {
+            type: String,
+            required: true
+        },
+        color: {
+            type: String,
+            default: ''
+        },
+        size: {
+            type: Number,
+            default: 16
+        }
+    },
+    computed: {
+        styles () {
+            let style = {};
+            style.fontSize = `${this.size}px`;
+            if (this.color) {
+                style.color = this.color;
+            }
+            return style;
+        }
+    },
+    methods:{
+        click() {
+            this.$emit('click','');
+        }
+    }
+};
+</script>
+
+<style>
+
+</style>

package/src/components/icon/index.js

@@ -0,0 +1,2 @@
+import CommonIcon from './common-icon.vue';
+export default CommonIcon;

package/src/components/label/index.js

@@ -0,0 +1,3 @@
+
+import ShowText from './showtext.vue';
+export default ShowText;

package/src/components/label/showtext.vue

@@ -0,0 +1,95 @@
+<template> 
+    <Tooltip transfer  :content="labeltext" :disabled="!showTooltip" :max-width="maxWidth" class="ivu-table-cell-tooltip" >
+            <template v-if="textLink">
+                <a  href="#"  style="text-decoration:underline" @click.prevent="linkTo"><span ref="content"  class="ivu-table-cell-tooltip-content" v-html="showText" :style="'text-align:'+ contentAlign" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut"/> </a>
+            </template>
+            <template v-else>
+                  <span ref="content"  class="ivu-table-cell-tooltip-content" v-html="showText" :style="'text-align:'+ contentAlign" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut"/>
+            </template>
+    </Tooltip>
+</template>
+<script>
+    export default {
+        name: 'showText',
+        data () {
+            return {
+                showTooltip:false,
+                labeltext: '',
+                showIcon:false,
+                iconWidth:0,
+                textLink:false
+            };
+        },
+        props:{
+            label:{
+                type: [String,Number],
+                default: ''
+            },
+            maxWidth:{
+                type: [String,Number],
+                default: 300
+            },
+            contentAlign: {
+                type: String,
+                default: 'center'
+            },
+            resetText: {
+                type: Function,
+                default: null
+            },
+            config: {
+                type: Object,
+                default: () => {},
+            },
+            rowIndex: {
+                type: [String,Number],
+                default: ''
+            }
+        },
+        created() {
+            if (this.config && this.config.textLink !== undefined) {
+                this.textLink = this.config.textLink;
+            }
+        },
+        methods:{
+            handleTooltipIn () {
+                const $content = this.$refs.content;
+                this.showTooltip = $content.scrollWidth > $content.offsetWidth;  
+            },
+            handleTooltipOut () {
+                this.showTooltip = false;  
+            },
+            doSpecialSymbols(str) {
+                if (str) {
+                    str = str + '';
+                    //替换所有的换行符
+                    str = str.replace(/\r\n/g,'<br>');
+                    str = str.replace(/\n/g,'<br>');
+                    //替换所有的空格（中文空格、英文空格都会被替换）
+                    str = str.replace(/\s/g,'&nbsp;');
+                }
+                return str; 
+            },
+            linkTo() {
+                if (this.config.onLinkTo) {
+                    let obj = this.$Method.copy(this.config);
+                    obj.rowIndex = this.rowIndex;
+                    this.config.onLinkTo(obj);
+                }
+            }
+        },
+        watch:{
+            label: {
+                handler (data) {
+                    this.labeltext = data;
+                    if (this.resetText) {
+                        this.showText = this.resetText(this.doSpecialSymbols(data),data);
+                    } else {
+                        this.showText = this.doSpecialSymbols(data);
+                    }
+                },
+                immediate: true
+            }
+        }
+    };
+</script>

package/src/components/load/loadcartoon.vue

@@ -0,0 +1,228 @@
+<style>
+      html,
+    body,
+    #app {
+      height: 100%;
+      margin: 0px;
+      padding: 0px;
+    }
+    .chromeframe {
+      margin: 0.2em 0;
+      background: #ccc;
+      color: #000;
+      padding: 0.2em 0;
+    }
+    #loader-wrapper {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 999999;
+    }
+    #loader {
+      display: block;
+      position: relative;
+      left: 50%;
+      top: 50%;
+      width: 150px;
+      height: 150px;
+      margin: -75px 0 0 -75px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      /* COLOR 1 */
+      border-top-color: #FFF;
+      -webkit-animation: spin 2s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -ms-animation: spin 2s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -moz-animation: spin 2s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -o-animation: spin 2s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      animation: spin 2s linear infinite;
+      /* Chrome, Firefox 16+, IE 10+, Opera */
+      z-index: 1001;
+    }
+    #loader:before {
+      content: "";
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      right: 5px;
+      bottom: 5px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      /* COLOR 2 */
+      border-top-color: #FFF;
+      -webkit-animation: spin 3s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -moz-animation: spin 3s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -o-animation: spin 3s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -ms-animation: spin 3s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      animation: spin 3s linear infinite;
+      /* Chrome, Firefox 16+, IE 10+, Opera */
+    }
+    #loader:after {
+      content: "";
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      right: 15px;
+      bottom: 15px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFF;
+      /* COLOR 3 */
+      -moz-animation: spin 1.5s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -o-animation: spin 1.5s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -ms-animation: spin 1.5s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -webkit-animation: spin 1.5s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      animation: spin 1.5s linear infinite;
+      /* Chrome, Firefox 16+, IE 10+, Opera */
+    }
+    @-webkit-keyframes spin {
+      0% {
+        -webkit-transform: rotate(0deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(0deg);
+        /* IE 9 */
+        transform: rotate(0deg);
+        /* Firefox 16+, IE 10+, Opera */
+      }
+      100% {
+        -webkit-transform: rotate(360deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(360deg);
+        /* IE 9 */
+        transform: rotate(360deg);
+        /* Firefox 16+, IE 10+, Opera */
+      }
+    }
+    @keyframes spin {
+      0% {
+        -webkit-transform: rotate(0deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(0deg);
+        /* IE 9 */
+        transform: rotate(0deg);
+        /* Firefox 16+, IE 10+, Opera */
+      }
+      100% {
+        -webkit-transform: rotate(360deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(360deg);
+        /* IE 9 */
+        transform: rotate(360deg);
+        /* Firefox 16+, IE 10+, Opera */
+      }
+    }
+    #loader-wrapper .loader-section {
+      position: fixed;
+      top: 0;
+      width: 51%;
+      height: 100%;
+      background: #7171C6;
+      /* Old browsers */
+      z-index: 1000;
+      -webkit-transform: translateX(0);
+      /* Chrome, Opera 15+, Safari 3.1+ */
+      -ms-transform: translateX(0);
+      /* IE 9 */
+      transform: translateX(0);
+      /* Firefox 16+, IE 10+, Opera */
+    }
+    #loader-wrapper .loader-section.section-left {
+      left: 0;
+    }
+    #loader-wrapper .loader-section.section-right {
+      right: 0;
+    }
+    /* Loaded */
+    .loaded #loader-wrapper .loader-section.section-left {
+      -webkit-transform: translateX(-100%);
+      /* Chrome, Opera 15+, Safari 3.1+ */
+      -ms-transform: translateX(-100%);
+      /* IE 9 */
+      transform: translateX(-100%);
+      /* Firefox 16+, IE 10+, Opera */
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    }
+    .loaded #loader-wrapper .loader-section.section-right {
+      -webkit-transform: translateX(100%);
+      /* Chrome, Opera 15+, Safari 3.1+ */
+      -ms-transform: translateX(100%);
+      /* IE 9 */
+      transform: translateX(100%);
+      /* Firefox 16+, IE 10+, Opera */
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    }
+    .loaded #loader {
+      opacity: 0;
+      -webkit-transition: all 0.3s ease-out;
+      transition: all 0.3s ease-out;
+    }
+    .loaded #loader-wrapper {
+      visibility: hidden;
+      -webkit-transform: translateY(-100%);
+      /* Chrome, Opera 15+, Safari 3.1+ */
+      -ms-transform: translateY(-100%);
+      /* IE 9 */
+      transform: translateY(-100%);
+      /* Firefox 16+, IE 10+, Opera */
+      -webkit-transition: all 0.3s 1s ease-out;
+      transition: all 0.3s 1s ease-out;
+    }
+    /* JavaScript Turned Off */
+    .no-js #loader-wrapper {
+      display: none;
+    }
+    .no-js h1 {
+      color: #222222;
+    }
+    #loader-wrapper .load_title {
+      font-family: 'Open Sans';
+      color: #FFF;
+      font-size: 19px;
+      width: 100%;
+      text-align: center;
+      z-index: 9999999999999;
+      position: absolute;
+      top: 60%;
+      opacity: 1;
+      line-height: 30px;
+    }
+    #loader-wrapper .load_title span {
+      font-weight: normal;
+      font-style: italic;
+      font-size: 13px;
+      color: #FFF;
+      opacity: 0.5;
+    }
+</style>
+<template> 
+<div id="app">
+    <div id="loader-wrapper">
+      <div id="loader"></div>
+      <div class="loader-section section-left"></div>
+      <div class="loader-section section-right"></div>
+      <div class="load_title">
+       <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+    export default {
+        name: 'ladcartoon'
+    };
+</script>

package/src/components/map/index.js

@@ -0,0 +1,2 @@
+import MapBox from './mapbox.vue';
+export default MapBox;