安装总览-页面初始化

src/views/productManagement/installationSummary/components/InstallationStatusChart.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="installation-chart">
+    <div class="chart-header">
+      <div class="title">货品安装情况</div>
+      <div class="filters">
+        <el-select v-model="timeRange" placeholder="时间范围" @change="handleFilterChange">
+          <el-option label="本月" value="month"></el-option>
+          <el-option label="本季度" value="quarter"></el-option>
+          <el-option label="本年" value="year"></el-option>
+        </el-select>
+      </div>
+    </div>
+    
+    <div class="chart-container" ref="chartContainer"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'InstallationStatusChart',
+  props: {
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      timeRange: 'month'
+    }
+  },
+  mounted() {
+    this.initChart()
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chartContainer)
+      this.updateChart()
+    },
+    updateChart() {
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ['计划量', '完成量', '完成率'],
+          right: 10,
+          top: 0
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: this.chartData.labels,
+            axisLabel: {
+              interval: 0,
+              rotate: 30
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '数量',
+            position: 'left'
+          },
+          {
+            type: 'value',
+            name: '完成率',
+            position: 'right',
+            axisLabel: {
+              formatter: '{value}%'
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: '计划量',
+            type: 'bar',
+            barWidth: '20%',
+            data: this.chartData.datasets[0].data,
+            itemStyle: {
+              color: this.chartData.datasets[0].backgroundColor
+            }
+          },
+          {
+            name: '完成量',
+            type: 'bar',
+            barWidth: '20%',
+            data: this.chartData.datasets[1].data,
+            itemStyle: {
+              color: this.chartData.datasets[1].backgroundColor
+            }
+          },
+          {
+            name: '完成率',
+            type: 'line',
+            yAxisIndex: 1,
+            data: this.chartData.datasets[2].data,
+            itemStyle: {
+              color: this.chartData.datasets[2].borderColor
+            },
+            lineStyle: {
+              width: 2
+            },
+            symbol: 'circle',
+            symbolSize: 8
+          }
+        ]
+      }
+      
+      this.chart.setOption(option)
+    },
+    handleResize() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    },
+    handleFilterChange() {
+      this.$emit('filter-change', {
+        timeRange: this.timeRange
+      })
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          this.updateChart()
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.installation-chart {
+  background: #fff;
+  padding: 20px;
+  border-radius: 4px;
+  
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+    
+    .filters {
+      display: flex;
+      gap: 10px;
+    }
+  }
+  
+  .chart-container {
+    height: 400px;
+    width: 100%;
+  }
+}
+</style> 

src/views/productManagement/installationSummary/components/InstallationTable.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="installation-table">
+    <div class="table-header">
+      <div class="title">安装概况</div>
+      <div class="update-time">{{ updateTime }}</div>
+    </div>
+    
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      border>
+      <el-table-column
+        prop="customerName"
+        label="客户名称"
+        min-width="150">
+      </el-table-column>
+      
+      <el-table-column
+        prop="product"
+        label="安装货品"
+        min-width="120">
+      </el-table-column>
+      
+      <el-table-column
+        prop="installer"
+        label="安装人员"
+        min-width="100">
+      </el-table-column>
+      
+      <el-table-column
+        label="单据状态"
+        min-width="100">
+        <template slot-scope="scope">
+          <el-tag
+            :type="getStatusType(scope.row.status)"
+            size="medium">
+            {{ scope.row.status }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      
+      <el-table-column
+        label="进度"
+        min-width="200">
+        <template slot-scope="scope">
+          <div class="progress-wrapper" @click="handleProgressClick(scope.row)">
+            <el-progress
+              :percentage="scope.row.progress"
+              :status="getProgressStatus(scope.row.progress)"
+              :stroke-width="15">
+            </el-progress>
+          </div>
+        </template>
+      </el-table-column>
+      
+      <el-table-column
+        prop="total"
+        label="计划量"
+        min-width="100">
+      </el-table-column>
+      
+      <el-table-column
+        prop="finished"
+        label="已完成量"
+        min-width="100">
+      </el-table-column>
+      
+      <el-table-column
+        prop="unfinished"
+        label="未完成量"
+        min-width="100">
+      </el-table-column>
+      
+      <el-table-column
+        label="完成率"
+        min-width="100">
+        <template slot-scope="scope">
+          {{ (scope.row.finished / scope.row.total * 100).toFixed(1) }}%
+        </template>
+      </el-table-column>
+      
+      <el-table-column
+        label="距交期"
+        min-width="100">
+        <template slot-scope="scope">
+          <span :class="{'overdue': scope.row.remainingDays < 0}">
+            {{ scope.row.remainingDays }}天
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InstallationTable',
+  props: {
+    tableData: {
+      type: Array,
+      required: true
+    },
+    updateTime: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    getStatusType(status) {
+      const statusMap = {
+        '进行中': 'primary',
+        '已完成': 'success',
+        '已超期': 'danger',
+        '未开始': 'info'
+      }
+      return statusMap[status] || 'info'
+    },
+    getProgressStatus(progress) {
+      if (progress >= 100) return 'success'
+      if (progress >= 80) return 'warning'
+      return ''
+    },
+    handleProgressClick(row) {
+      this.$emit('progress-click', row)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.installation-table {
+  background: #fff;
+  padding: 20px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+  
+  .table-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+    
+    .update-time {
+      color: #909399;
+      font-size: 14px;
+    }
+  }
+  
+  .progress-wrapper {
+    cursor: pointer;
+    padding: 5px 0;
+    
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+  
+  .overdue {
+    color: #F56C6C;
+  }
+}
+
+::v-deep .el-progress-bar__outer {
+  border-radius: 4px;
+}
+
+::v-deep .el-progress-bar__inner {
+  border-radius: 4px;
+}
+
+::v-deep .el-table th {
+  background-color: #F5F7FA;
+}
+
+::v-deep .el-table td {
+  padding: 8px 0;
+}
+</style> 

src/views/productManagement/installationSummary/components/StatisticsPanel.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="statistics-panel">
+    <el-row :gutter="20">
+      <el-col :span="3">
+        <div class="stat-card total">
+          <div class="icon-wrapper">
+            <i class="el-icon-document"></i>
+          </div>
+          <div class="content">
+            <div class="value">{{ totalOrders }}</div>
+            <div class="label">本月总单</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="3">
+        <div class="stat-card installed">
+          <div class="icon-wrapper">
+            <i class="el-icon-check"></i>
+          </div>
+          <div class="content">
+            <div class="value">{{ installedOrders }}</div>
+            <div class="label">本月已安装订单</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="3">
+        <div class="stat-card installing">
+          <div class="icon-wrapper">
+            <i class="el-icon-loading"></i>
+          </div>
+          <div class="content">
+            <div class="value">{{ installingOrders }}</div>
+            <div class="label">正在安装订单</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="3">
+        <div class="stat-card unassigned">
+          <div class="icon-wrapper">
+            <i class="el-icon-warning-outline"></i>
+          </div>
+          <div class="content">
+            <div class="value">{{ unassignedOrders }}</div>
+            <div class="label">未接单</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="3">
+        <div class="stat-card total-plan">
+          <div class="icon-wrapper">
+            <i class="el-icon-s-data"></i>
+          </div>
+          <div class="content">
+            <div class="value">{{ totalPlanQuantity }}</div>
+            <div class="label">订单总量</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="3">
+        <div class="stat-card completed">
+          <div class="icon-wrapper">
+            <i class="el-icon-circle-check"></i>
+          </div>
+          <div class="content">
+            <div class="value">{{ completedQuantity }}</div>
+            <div class="label">已完成量</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="3">
+        <div class="stat-card uncompleted">
+          <div class="icon-wrapper">
+            <i class="el-icon-circle-close"></i>
+          </div>
+          <div class="content">
+            <div class="value">{{ uncompletedQuantity }}</div>
+            <div class="label">未完成量</div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StatisticsPanel',
+  data() {
+    return {
+      totalOrders: 20,
+      installedOrders: 5,
+      installingOrders: 8,
+      unassignedOrders: 7,
+      totalPlanQuantity: 10000,
+      completedQuantity: 5000,
+      uncompletedQuantity: 5000
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.statistics-panel {
+  margin-bottom: 20px;
+  
+  .stat-card {
+    background: #fff;
+    border-radius: 4px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    
+    .icon-wrapper {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 12px;
+      
+      i {
+        font-size: 24px;
+        color: #fff;
+      }
+    }
+    
+    .content {
+      .value {
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 1.5;
+      }
+      
+      .label {
+        font-size: 14px;
+        color: #909399;
+      }
+    }
+    
+    &.total .icon-wrapper {
+      background-color: #409EFF;
+    }
+    
+    &.installed .icon-wrapper {
+      background-color: #67C23A;
+    }
+    
+    &.installing .icon-wrapper {
+      background-color: #E6A23C;
+    }
+    
+    &.unassigned .icon-wrapper {
+      background-color: #F56C6C;
+    }
+    
+    &.total-plan .icon-wrapper {
+      background-color: #909399;
+    }
+    
+    &.completed .icon-wrapper {
+      background-color: #67C23A;
+    }
+    
+    &.uncompleted .icon-wrapper {
+      background-color: #F56C6C;
+    }
+  }
+}
+</style> 

src/views/productManagement/installationSummary/components/UnassignedDialog.vue

@@ -0,0 +1,165 @@
+<template>
+  <el-dialog
+    title="未接单列表"
+    :visible.sync="dialogVisible"
+    width="80%"
+    :before-close="handleClose">
+    <div class="dialog-header">
+      <div class="update-time">{{ updateTime }}</div>
+    </div>
+    
+    <el-table
+      :data="unassignedOrders"
+      style="width: 100%"
+      border>
+      <el-table-column
+        prop="orderNo"
+        label="订单编号"
+        min-width="120">
+      </el-table-column>
+      
+      <el-table-column
+        prop="planNum"
+        label="计划数量"
+        min-width="100">
+      </el-table-column>
+      
+      <el-table-column
+        prop="goods"
+        label="货品"
+        min-width="120">
+      </el-table-column>
+      
+      <el-table-column
+        prop="orderPerson"
+        label="下单人"
+        min-width="100">
+      </el-table-column>
+      
+      <el-table-column
+        prop="orderTime"
+        label="下单时间"
+        min-width="120">
+      </el-table-column>
+      
+      <el-table-column
+        prop="priority"
+        label="优先级"
+        min-width="100">
+        <template slot-scope="scope">
+          <el-tag
+            :type="getPriorityType(scope.row.priority)"
+            size="medium">
+            {{ scope.row.priority }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      
+      <el-table-column
+        prop="contract"
+        label="关联合同"
+        min-width="200">
+        <template slot-scope="scope">
+          <div class="contract-list">
+            <template v-for="(contract, index) in scope.row.contract.split('\n')">
+              <div :key="index" class="contract-item">{{ contract }}</div>
+            </template>
+          </div>
+        </template>
+      </el-table-column>
+      
+      <el-table-column
+        label="操作"
+        width="150"
+        fixed="right">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="primary"
+            @click="handleAssign(scope.row)">分配安装</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">关 闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'UnassignedDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    updateTime: {
+      type: String,
+      default: ''
+    },
+    unassignedOrders: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(value) {
+        this.$emit('update:visible', value)
+      }
+    }
+  },
+  methods: {
+    getPriorityType(priority) {
+      const priorityMap = {
+        '高': 'danger',
+        '中': 'warning',
+        '低': 'info',
+        '一般': 'primary'
+      }
+      return priorityMap[priority] || 'info'
+    },
+    handleClose() {
+      this.dialogVisible = false
+    },
+    handleAssign(row) {
+      // 处理分配安装人员的逻辑
+      console.log('Assign installation for:', row)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-header {
+  margin-bottom: 20px;
+  
+  .update-time {
+    color: #909399;
+    font-size: 14px;
+  }
+}
+
+.contract-list {
+  .contract-item {
+    line-height: 1.5;
+    
+    &:not(:last-child) {
+      margin-bottom: 4px;
+    }
+  }
+}
+
+::v-deep .el-dialog__body {
+  padding-top: 10px;
+}
+
+::v-deep .el-table {
+  margin-bottom: 20px;
+}
+</style> 

src/views/productManagement/installationSummary/index.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部标题栏 -->
+    <div class="page-header">
+      <div class="page-title">安装总览</div>
+      <div class="page-time">时间：{{ currentTime }}</div>
+    </div>
+
+    <!-- 顶部统计卡片 -->
+    <statistics-panel />
+
+    <!-- 安装概况表格 -->
+    <installation-table 
+      :table-data="tableData"
+      :update-time="updateTime"
+      @unassigned-click="handleUnassignedOrders"
+      @progress-click="handleProgressClick"
+    />
+
+    <!-- 未接单弹窗 -->
+    <unassigned-dialog
+      :visible.sync="dialogVisible"
+      :update-time="updateTime"
+      :unassigned-orders="unassignedOrders"
+    />
+
+    <!-- 安装情况图表 -->
+    <installation-status-chart
+      :chart-data="chartData"
+      @filter-change="handleFilterChange"
+    />
+  </div>
+</template>
+
+<script>
+import StatisticsPanel from './components/StatisticsPanel'
+import InstallationTable from './components/InstallationTable'
+import UnassignedDialog from './components/UnassignedDialog'
+import InstallationStatusChart from './components/InstallationStatusChart'
+
+export default {
+  name: 'InstallationSummary',
+  components: {
+    StatisticsPanel,
+    InstallationTable,
+    UnassignedDialog,
+    InstallationStatusChart
+  },
+  data() {
+    return {
+      currentTime: '',
+      updateTime: '',
+      dialogVisible: false,
+      tableData: [
+        {
+          customerName: '现代牧业二场',
+          product: '智能膜环',
+          installer: '张明星',
+          status: '进行中',
+          progress: 22.5,
+          total: 4000,
+          finished: 900,
+          unfinished: 3100,
+          remainingDays: 7
+        },
+        {
+          customerName: '现代牧业和林',
+          product: '精准阉割',
+          installer: '陈希多',
+          status: '进行中',
+          progress: 48.5,
+          total: 350,
+          finished: 170,
+          unfinished: 180,
+          remainingDays: 8
+        }
+      ],
+      chartData: {
+        labels: ['智能膜环', '智能喷淋', '精准阉割', '奶牛称重', '车载控制器', '大屏'],
+        datasets: [
+          {
+            label: '计划量',
+            data: [900, 850, 900, 700, 500, 30],
+            backgroundColor: '#409EFF',
+            order: 2
+          },
+          {
+            label: '完成量',
+            data: [800, 820, 850, 680, 200, 20],
+            backgroundColor: '#FF9F43',
+            order: 2
+          },
+          {
+            label: '完成率',
+            data: [88.9, 96.5, 94.4, 97.1, 40.0, 66.7],
+            type: 'line',
+            borderColor: '#67C23A',
+            borderWidth: 2,
+            fill: false,
+            yAxisID: 'percentage',
+            order: 1
+          }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getCurrentTime()
+    this.getUpdateTime()
+    // 设置定时更新时间
+    this.timer = setInterval(this.getCurrentTime, 60000)
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
+  },
+  methods: {
+    getCurrentTime() {
+      const now = new Date()
+      this.currentTime = now.toLocaleDateString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+      })
+    },
+    getUpdateTime() {
+      const now = new Date()
+      this.updateTime = now.toLocaleString('zh-CN', {
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+      }) + '更新'
+    },
+    handleUnassignedOrders() {
+      this.dialogVisible = true
+    },
+    handleProgressClick(row) {
+      // 处理进度点击事件
+      console.log('Progress clicked:', row)
+    },
+    handleFilterChange(filters) {
+      // 处理筛选条件变化
+      console.log('Filters changed:', filters)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+  
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    
+    .page-title {
+      font-size: 20px;
+      font-weight: bold;
+    }
+    
+    .page-time {
+      color: #909399;
+    }
+  }
+}
+</style>