添加配置文件

Dockerfile

+FROM 10.0.6.228:5000/node-nginx:8.12.0-slim
+WORKDIR /app
+COPY . /app/
+RUN  npm config set proxy=http://10.0.6.228:3128 && npm set registry https://registry.npm.taobao.org && npm install && npm run build && cp -r dist/* /var/www/html && rm -rf /app
+

Jenkinsfile

+pipeline {
+  agent {
+    node {
+      label 'nodejs'
+    }
+  }
+
+    environment {
+        KUBECONFIG_CREDENTIAL_ID = 'devops-kubeconfig'
+        REGISTRY = '10.0.6.228:5000'
+        DOCKERHUB_NAMESPACE = 'yuji'
+        APP_NAME = 'yuji-web'
+        NAMESPACE = 'yuji'
+    }
+
+    stages {
+        stage ('checkout scm') {
+            steps {
+                checkout(scm)
+            }
+        }
+
+        stage ('build & push') {
+            steps {
+                container ('nodejs') {
+                    sh 'docker build -f Dockerfile -t $REGISTRY/$DOCKERHUB_NAMESPACE/$APP_NAME:$BUILD_NUMBER .'
+                    sh 'docker push  $REGISTRY/$DOCKERHUB_NAMESPACE/$APP_NAME:$BUILD_NUMBER'
+                }
+            }
+        }
+
+        stage('deploy') {
+          steps {
+            kubernetesDeploy(configs: 'deploy/**', enableConfigSubstitution: true, kubeconfigId: "$KUBECONFIG_CREDENTIAL_ID")
+          }
+        }
+    }
+}

deploy/k8s.yaml

+---
+apiVersion: extensions/v1beta1
+kind: Deployment
+metadata:
+  labels:
+    app: $APP_NAME
+  name: $APP_NAME
+  namespace: $NAMESPACE
+spec:
+  progressDeadlineSeconds: 600
+  replicas: 1
+  selector:
+    matchLabels:
+      app: $APP_NAME
+  template:
+    metadata:
+      labels:
+        app: $APP_NAME
+    spec:
+      containers:
+        - image: $REGISTRY/$DOCKERHUB_NAMESPACE/$APP_NAME:$BUILD_NUMBER
+          imagePullPolicy: Always
+          name: $APP_NAME
+          readinessProbe:
+            httpGet:
+              path: /
+              port: 80
+            timeoutSeconds: 10
+            failureThreshold: 30
+            periodSeconds: 5
+          ports:
+            - containerPort: 80
+              protocol: TCP
+          resources:
+            limits:
+              cpu: 200m
+              memory: 500Mi
+            requests:
+              cpu: 100m
+              memory: 100Mi
+          terminationMessagePath: /dev/termination-log
+          terminationMessagePolicy: File
+      dnsPolicy: ClusterFirst
+      restartPolicy: Always
+      terminationGracePeriodSeconds: 30
+---
+apiVersion: v1
+kind: Service
+metadata:
+  labels:
+    app: $APP_NAME
+  name: $APP_NAME
+  namespace: $NAMESPACE
+spec:
+  ports:
+    - name: http
+      port: 80
+      protocol: TCP
+      targetPort: 80
+  selector:
+    app: $APP_NAME
+  sessionAffinity: None
+  type: ClusterIP

src/App.vue

 <template>
-  <div id="app">
+  <div id="app" :style="style">
     <m-loader v-show="$store.state.showLoading"/>
     <m-title hideDate hideTime :bgImg="require('@/assets/images/title-bg3.png')"/>
     <m-animate enter="zoomIn" leave="zoomOut">
@@ -11,14 +11,22 @@
 <script>
 export default {
   name: 'App',
+  computed: {
+    style() {
+      return this.$route.path === '/quality-safety'
+        ? ({'background-size': '110%', 'background-position': '90% -50%'})
+        : ({'background-size': '100%', 'background-position': '50% 50%'})
+    }
+  },
 }
 </script>
 
 <style lang="stylus" scoped>
 #app
   background url('./assets/images/bg.png') no-repeat
-  background-size 110%
-  background-position 90% -50%
+  transition background 1s
+  // background-size 110%
+  // background-position 90% -50%
   .router-view
     height calc(100% - 4rem)
 </style>

src/components/MonitorComponents/MonitorTitle/monitor-title.vue

@@ -53,7 +53,7 @@ export default {
       curIndex: 0,
       menus: [
         {name: '病害防控', title: '病害防控大数据', path: '/disease'},
-        {name: '质量安全'},
+        {name: '质量安全', title: '水产品质量安全大数据', path: '/quality-safety'},
         {name: '稻鱼种养'},
         {name: '海洋牧场'},
         {name: '水产价格', title: '水产品价格分析', path: '/fishing-price'},

src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 
 const Disease = () => import('@/views/disease')
 const FishingPrice = () => import('@/views/fishing-price')
+const QualitySafety = () => import('@/views/quality-safety.vue')
 
 Vue.use(Router)
 
@@ -22,5 +23,10 @@ export default new Router({
       path: '/fishing-price',
       component: FishingPrice,
     },
+    {
+      name: 'quality-safety',
+      path: '/quality-safety',
+      component: QualitySafety,
+    },
   ]
 })

src/server/api.js

 let BASE_URL = ''
-let FILE_URL = ''
 switch (process.env.NODE_ENV) {
 case 'production':
   BASE_URL = 'product_url'
-  FILE_URL = ''
   break
 default:
   BASE_URL = 'default_url'
-  FILE_URL = 'http://localhost:8080/static/'
 }
 export default {
   BASE_URL,
-  FILE_URL,
+  FILE_URL: window.location.origin + '/static/',
 }

src/views/components/disease-sum.vue → src/views/components/disease/disease-sum.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import BorderBox from './border-box'
+import BorderBox from '../border-box'
 export default {
   name: 'DiseaseSum',
   components: {

src/views/components/fishing-price-map.vue → src/views/components/fishing-price/fishing-price-map.vue

@@ -21,7 +21,7 @@
 
 <script>
 import china from 'echarts/map/json/china.json'
-import BorderBox from './border-box'
+import BorderBox from '../border-box'
 const mock = [
   {name: '浙江新农都物流中心（水产市场）', address: '杭州市石桥路115号', province: '浙江', value: [120.19706700, 30.24639100], visualMap: false, newDate: '2020-08-15'},
   {name: '厦门市水产品批发市场', address: '厦门市高崎北二路77-87号中埔水产批发市场', province: '福建', value: [118.11368800, 24.55107600], visualMap: false, newDate: '2020-08-15'},

src/views/disease.vue

@@ -33,14 +33,14 @@
 </template>
 
 <script>
-import DiseaseMap from './components/disease-map'
-import DiseaseWarning from './components/disease-warning'
-import ConsultationSum from './components/consultation-sum'
-import TeamBuild from './components/team-build'
-import Questions from './components/questions'
-import SpecialMonitoring from './components/special-monitoring'
-import DiseaseForeCast from './components/disease-forecast'
-import DiseaseSum from './components/disease-sum'
+import DiseaseMap from './components/disease/disease-map'
+import DiseaseWarning from './components/disease/disease-warning'
+import ConsultationSum from './components/disease/consultation-sum'
+import TeamBuild from './components/disease/team-build'
+import Questions from './components/disease/questions'
+import SpecialMonitoring from './components/disease/special-monitoring'
+import DiseaseForeCast from './components/disease/disease-forecast'
+import DiseaseSum from './components/disease/disease-sum'
 import {mapActions} from 'vuex'
 export default {
   name: 'Main',

src/views/fishing-price.vue

@@ -33,11 +33,11 @@
 </template>
 
 <script>
-import FishingPriceMap from './components/fishing-price-map'
-import PriceTrend from './components/price-trend'
-import TradeSituation from './components/trade-situation'
-import PriceAnalysis from './components/price-analysis'
-import NewQuotation from './components/new-quotation'
+import FishingPriceMap from './components/fishing-price/fishing-price-map'
+import PriceTrend from './components/fishing-price/price-trend'
+import TradeSituation from './components/fishing-price/trade-situation'
+import PriceAnalysis from './components/fishing-price/price-analysis'
+import NewQuotation from './components/fishing-price/new-quotation'
 export default {
   name: 'FishingPrice',
   components: {

src/views/quality-safety.vue

+<template>
+  <m-grid
+    :template="[
+      'box1 map box4',
+      'box2 map box5',
+      'box3 box7 box6',
+    ]"
+    columns="0.6fr 1fr 0.6fr"
+    rows="1fr 1fr 1fr"
+    gap="0.5rem"
+  >
+    <m-card area="box1" title="质量预警">
+    </m-card>
+    <m-card area="box2" title="企业占比">
+    </m-card>
+    <m-card area="box3" title="检测合格率">
+    </m-card>
+    <m-card area="box4" title="在线会诊">
+    </m-card>
+    <m-card area="box5" title="药品流通去向">
+    </m-card>
+    <m-card area="box6" title="药品购买频次分析">
+    </m-card>
+    <m-card area="box7" title="病害测报">
+    </m-card>
+  </m-grid>
+</template>
+
+<script>
+export default {
+  name: 'QualitySafety',
+  data() {
+    return {}
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+
+</style>